Alter IconButton component as NButton to support disable property

backend/storage/connections.go

@@ -85,6 +85,7 @@ func (c *ConnectionsStorage) GetConnection(name string) *types.Connection {
 	for _, group := range conns {
 		for _, conn := range group.Connections {
 			if conn.Name == name {
+				conn.Group = group.GroupName
 				return &conn
 			}
 		}

frontend/src/components/common/IconButton.vue

@@ -5,15 +5,9 @@ import { NIcon } from 'naive-ui'
 const emit = defineEmits(['click'])
 
 const props = defineProps({
-    tooltip: {
+    tooltip: String,
-        type: String,
+    tTooltip: String,
-    },
+    icon: [String, Object],
-    tTooltip: {
-        type: String,
-    },
-    icon: {
-        type: [String, Object],
-    },
     size: {
         type: [Number, String],
         default: 20,
@@ -26,6 +20,18 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    disabled: Boolean,
+})
+
+const disableColor = computed(() => {
+    const baseColor = props.color
+    const grayScale = Math.round(
+        0.299 * parseInt(baseColor.substring(1, 2), 16) +
+            0.587 * parseInt(baseColor.substring(3, 2), 16) +
+            0.114 * parseInt(baseColor.substring(5, 2), 16)
+    )
+    const color = `#${grayScale.toString(16).repeat(3)}`
+    return color
 })
 
 const hasTooltip = computed(() => {
@@ -36,15 +42,19 @@ const hasTooltip = computed(() => {
 <template>
     <n-tooltip v-if="hasTooltip">
         <template #trigger>
-            <n-icon :color="props.color" :size="props.size" class="icon-btn" @click="emit('click')">
+            <n-button text :disabled="disabled" @click="emit('click')">
-                <component :is="props.icon" :stroke-width="props.strokeWidth"></component>
+                <n-icon :size="props.size" :color="props.color">
+                    <component :is="props.icon" :stroke-width="props.strokeWidth" />
                 </n-icon>
+            </n-button>
         </template>
         {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
     </n-tooltip>
-    <n-icon v-else :color="props.color" :size="props.size" class="icon-btn" @click="emit('click')">
+    <n-button v-else text :disabled="disabled" @click="emit('click')">
-        <component :is="props.icon" :stroke-width="props.strokeWidth"></component>
+        <n-icon :size="props.size" :color="props.color">
+            <component :is="props.icon" :stroke-width="props.strokeWidth" />
         </n-icon>
+    </n-button>
 </template>
 
 <style lang="scss"></style>

frontend/src/components/sidebar/ConnectionPane.vue

@@ -7,8 +7,11 @@ import Sort from '../icons/Sort.vue'
 import IconButton from '../common/IconButton.vue'
 import Filter from '../icons/Filter.vue'
 import ConnectionTree from './ConnectionTree.vue'
+import Unlink from '../icons/Unlink.vue'
+import useConnectionStore from '../../stores/connections.js'
 
 const dialogStore = useDialogStore()
+const connectionStore = useConnectionStore()
 
 const onSort = () => {
     dialogStore.openPreferencesDialog()
@@ -37,6 +40,15 @@ const onSort = () => {
                 t-tooltip="new_group"
                 @click="dialogStore.openNewKeyDialog('aa:bb')"
             />
+            <icon-button
+                :disabled="!connectionStore.anyConnectionOpened"
+                :icon="Unlink"
+                color="#555"
+                size="20"
+                stroke-width="4"
+                t-tooltip="disconnect_all"
+                @click="dialogStore.openNewKeyDialog('aa:bb')"
+            />
             <n-divider style="margin: 0 4px; --n-color: #aaa; width: 2px" vertical />
             <icon-button :icon="Sort" color="#555" size="20" stroke-width="4" t-tooltip="sort_conn" @click="onSort" />
             <n-input placeholder="">

frontend/src/components/sidebar/ConnectionTree.vue

@@ -80,7 +80,7 @@ const menuOptions = {
                     icon: renderIcon(CopyLink),
                 },
                 {
-                    key: 'server_config',
+                    key: 'server_edit',
                     label: i18n.t('edit_conn'),
                     icon: renderIcon(Config),
                 },
@@ -171,7 +171,7 @@ const openConnection = async (name) => {
             await connectionStore.openConnection(name)
         }
         tabStore.upsertTab({
-            server: nae,
+            server: name,
         })
     } catch (e) {
         message.error(e.message)
@@ -185,7 +185,7 @@ const dialog = useDialog()
 const removeConnection = async (name) => {
     dialog.warning({
         title: i18n.t('warning'),
-        content: i18n.t('delete_key_tip', { key: name }),
+        content: i18n.t('remove_conn_tip', { conn: name }),
         closable: false,
         autoFocus: false,
         transformOrigin: 'center',
@@ -195,8 +195,6 @@ const removeConnection = async (name) => {
             connectionStore.removeConnection(name).then(({ success, msg }) => {
                 if (!success) {
                     message.error(msg)
-                } else {
-                    message.success(i18n.t('delete_key_succ', { key: name }))
                 }
             })
         },

frontend/src/langs/en.json

@@ -7,11 +7,13 @@
   "save": "Save",
   "new_conn": "Add New Connection",
   "new_group": "Add New Group",
+  "disconnect_all": "Disconnect all connections",
   "sort_conn": "Resort Connections",
   "reload_key": "Reload Current Key",
   "close_confirm_title": "Confirm Close",
   "close_confirm": "Confirm close this tab and connection",
   "opening_connection": "Opening Connection...",
+  "remove_conn_tip": "Connection \"{conn}\" will be deleted",
   "ttl": "TTL",
   "forever": "Forever",
   "rename_key": "Rename Key",

frontend/src/langs/zh-cn.json

@@ -7,11 +7,13 @@
   "save": "保存",
   "new_conn": "添加新连接",
   "new_group": "添加新分组",
+  "disconnect_all": "断开所有连接",
   "sort_conn": "调整连接顺序",
   "reload_key": "重新载入此键内容",
   "close_confirm_title": "关闭确认",
   "close_confirm": "是否关闭当前连接",
   "opening_connection": "正在打开连接...",
+  "remove_conn_tip": "连接 \"{conn}\" 将会被删除",
   "ttl": "TTL",
   "forever": "永久",
   "rename_key": "重命名键",

frontend/src/stores/connections.js

@@ -20,7 +20,7 @@ import {
     SetListItem,
     SetSetItem,
     UpdateSetItem,
-    UpdateZSetValue
+    UpdateZSetValue,
 } from '../../wailsjs/go/services/connectionService.js'
 import { ConnectionType } from '../consts/connection_type.js'
 import useTabStore from './tab.js'
@@ -56,7 +56,7 @@ const useConnectionStore = defineStore('connections', {
     state: () => ({
         groups: [], // all group name
         connections: [], // all connections
-        databases: {, // all databases in opened connections group by name
+        databases: {}, // all databases in opened connections group by name
     }),
     getters: {
         anyConnectionOpened() {
@@ -111,7 +111,7 @@ const useConnectionStore = defineStore('connections', {
                         key: group.groupName,
                         label: group.groupName,
                         type: ConnectionType.Group,
-                        children
+                        children,
                     })
                 }
             }
@@ -127,6 +127,7 @@ const useConnectionStore = defineStore('connections', {
         async getConnectionProfile(name) {
             try {
                 const { data, success } = await GetConnection(name)
+                console.log(JSON.stringify(data))
                 if (success) {
                     return data
                 }
@@ -152,7 +153,7 @@ const useConnectionStore = defineStore('connections', {
                 keySeparator: ':',
                 connTimeout: 60,
                 execTimeout: 60,
-                markColor: ''
+                markColor: '',
             }
         },