perf: add an 'Import Keys' option to new key dialog.

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -13,6 +13,7 @@ import { NSpace } from 'naive-ui'
 import useTabStore from 'stores/tab.js'
 import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
 import useBrowserStore from 'stores/browser.js'
+import Import from '@/components/icons/Import.vue'
 
 const i18n = useI18n()
 const newForm = reactive({
@@ -169,6 +170,11 @@ const onAdd = async () => {
 const onClose = () => {
     dialogStore.closeNewKeyDialog()
 }
+
+const onImport = () => {
+    dialogStore.closeNewKeyDialog()
+    dialogStore.openImportKeyDialog(newForm.server, newForm.db)
+}
 </script>
 
 <template>
@@ -177,17 +183,11 @@ const onClose = () => {
         :closable="false"
         :close-on-esc="false"
         :mask-closable="false"
-        :negative-button-props="{ size: 'medium' }"
-        :negative-text="$t('common.cancel')"
-        :positive-button-props="{ size: 'medium' }"
-        :positive-text="$t('common.confirm')"
         :show-icon="false"
         :title="$t('dialogue.key.new')"
         preset="dialog"
         style="width: 600px"
-        transform-origin="center"
-        @positive-click="onAdd"
-        @negative-click="onClose">
+        transform-origin="center">
         <n-scrollbar ref="scrollRef" style="max-height: 500px">
             <n-form
                 ref="newFormRef"
@@ -234,6 +234,25 @@ const onClose = () => {
                 <!--  TODO: Add import from txt file option -->
             </n-form>
         </n-scrollbar>
+
+        <template #action>
+            <div class="flex-item-expand">
+                <n-button :focusable="false" size="medium" @click="onImport">
+                    <template #icon>
+                        <n-icon :component="Import" />
+                    </template>
+                    {{ $t('interface.import_key') }}
+                </n-button>
+            </div>
+            <div class="flex-item n-dialog__action">
+                <n-button :focusable="false" size="medium" @click="onClose">
+                    {{ $t('common.cancel') }}
+                </n-button>
+                <n-button :focusable="false" size="medium" type="primary" @click="onAdd">
+                    {{ $t('common.confirm') }}
+                </n-button>
+            </div>
+        </template>
     </n-modal>
 </template>
 

frontend/src/components/sidebar/BrowserPane.vue

@@ -25,7 +25,6 @@ import More from '@/components/icons/More.vue'
 import Export from '@/components/icons/Export.vue'
 import { ConnectionType } from '@/consts/connection_type.js'
 import Import from '@/components/icons/Import.vue'
-import Down from '@/components/icons/Down.vue'
 import Checkbox from '@/components/icons/Checkbox.vue'
 import Timer from '@/components/icons/Timer.vue'
 
@@ -65,12 +64,8 @@ const dbSelectOptions = computed(() => {
     })
 })
 
-const addOptions = computed(() => [
-    { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
-])
-
 const moreOptions = computed(() => [
-    // { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
+    { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
     { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
     { key: 'divider', type: 'divider' },
     {
@@ -271,16 +266,16 @@ watch(
                     <redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
                 </template>
             </content-search-input>
-            <icon-button
-                :disabled="loading"
-                :icon="Refresh"
-                border
-                size="18"
-                small
-                stroke-width="4"
-                t-tooltip="interface.reload"
-                @click="onReload" />
             <n-button-group>
+                <icon-button
+                    :disabled="loading"
+                    :icon="Refresh"
+                    border
+                    size="18"
+                    small
+                    stroke-width="4"
+                    t-tooltip="interface.reload"
+                    @click="onReload" />
                 <icon-button
                     :disabled="loading"
                     :icon="Plus"
@@ -290,18 +285,6 @@ watch(
                     stroke-width="4"
                     t-tooltip="interface.new_key"
                     @click="onAddKey" />
-                <n-dropdown
-                    :options="addOptions"
-                    placement="bottom-end"
-                    style="min-width: 130px"
-                    trigger="click"
-                    @select="onSelectOptions">
-                    <n-button :focusable="false" size="small" style="padding: 0 3px">
-                        <n-icon size="10">
-                            <down :stroke-width="6" />
-                        </n-icon>
-                    </n-button>
-                </n-dropdown>
             </n-button-group>
         </div>
 

frontend/src/langs/en-us.json

@@ -79,7 +79,7 @@
     "rename_key": "Rename Key",
     "delete_key": "Delete Key",
     "batch_delete_key": "Batch Delete Keys",
-    "import_key": "Import Key",
+    "import_key": "Import Key(s)",
     "flush_db": "Flush Database",
     "check_mode": "Check Mode",
     "quit_check_mode": "Quit Check Mode",