feat: add cancel operation to the waiting spin for opening connections #9

chore: update common message config

frontend/src/components/sidebar/ConnectionTree.vue

@@ -21,7 +21,7 @@ import usePreferencesStore from 'stores/preferences.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
-const openingConnection = ref(false)
+const connectingServer = ref('')
 const connectionStore = useConnectionStore()
 const tabStore = useTabStore()
 const prefStore = usePreferencesStore()
@@ -287,18 +287,21 @@ const onUpdateSelectedKeys = (keys, option) => {
  */
 const openConnection = async (name) => {
     try {
+        connectingServer.value = name
         if (!connectionStore.isConnected(name)) {
-            openingConnection.value = true
             await connectionStore.openConnection(name)
         }
+        // check if connection already canceled before finish open
+        if (!isEmpty(connectingServer.value)) {
             tabStore.upsertTab({
                 server: name,
             })
+        }
     } catch (e) {
         $message.error(e.message)
         // node.isLeaf = undefined
     } finally {
-        openingConnection.value = false
+        connectingServer.value = ''
     }
 }
 
@@ -467,6 +470,13 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
     connectionStore.connections = Array.from(connectionStore.connections)
     saveSort()
 }
+
+const onCancelOpen = () => {
+    if (!isEmpty(connectingServer.value)) {
+        connectionStore.closeConnection(connectingServer.value)
+        connectingServer.value = ''
+    }
+}
 </script>
 
 <template>
@@ -496,7 +506,7 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
         @update:expanded-keys="onUpdateExpandedKeys" />
 
     <!-- status display modal -->
-    <n-modal :show="openingConnection" transform-origin="center">
+    <n-modal :show="connectingServer !== ''" transform-origin="center">
         <n-card
             :bordered="false"
             :content-style="{ textAlign: 'center' }"
@@ -505,7 +515,12 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
             style="width: 400px">
             <n-spin>
                 <template #description>
-                    {{ $t('dialogue.opening_connection') }}
+                    <n-space vertical>
+                        <n-text strong>{{ $t('dialogue.opening_connection') }}</n-text>
+                        <n-button secondary size="small" :focusable="false" @click="onCancelOpen">
+                            {{ $t('dialogue.interrupt_connection') }}
+                        </n-button>
+                    </n-space>
                 </template>
             </n-spin>
         </n-card>

frontend/src/langs/en.json

@@ -99,6 +99,7 @@
     "close_confirm": "Confirm close this tab and connection",
     "edit_close_confirm": "Please close the relevant connections before editing. Do you want to continue?",
     "opening_connection": "Opening Connection...",
+    "interrupt_connection": "Cancel",
     "remove_tip": "{type} \"{name}\" will be deleted",
     "remove_group_tip": "Group \"{name}\" and all connections in it will be deleted",
     "delete_key_succ": "\"{key}\" has been deleted",

frontend/src/langs/zh-cn.json

@@ -99,6 +99,7 @@
     "close_confirm": "是否关闭当前连接",
     "edit_close_confirm": "编辑前需要关闭相关连接，是否继续",
     "opening_connection": "正在打开连接...",
+    "interrupt_connection": "中断连接",
     "remove_tip": "{type} \"{name}\" 将会被删除",
     "remove_group_tip": "分组 \"{name}\"及其所有连接将会被删除",
     "delete_key_succ": "{key} 已被删除",

frontend/src/utils/discrete.js

@@ -105,6 +105,7 @@ export async function setupDiscreteApi() {
         configProviderProps,
         messageProviderProps: {
             placement: 'bottom-right',
+            keepAliveOnHover: true,
         },
         notificationProviderProps: {
             max: 5,