From fdfd04d4bf73b06093bba893c45d145514840968 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 3 Jul 2024 22:34:07 +0800
Subject: [PATCH] pref: add a tooltip if the type filter is not supported
 (#274)

---
 .../components/common/RedisTypeSelector.vue   | 58 +++++++++++++------
 .../content_value/ContentValueWrapper.vue     |  4 +-
 .../src/components/sidebar/BrowserPane.vue    |  1 +
 .../src/components/sidebar/BrowserTree.vue    |  2 +-
 frontend/src/langs/en-us.json                 |  3 +-
 frontend/src/langs/es-es.json                 |  3 +-
 frontend/src/langs/fr-fr.json                 |  3 +-
 frontend/src/langs/ja-jp.json                 |  3 +-
 frontend/src/langs/ko-kr.json                 |  3 +-
 frontend/src/langs/pt-br.json                 |  3 +-
 frontend/src/langs/ru-ru.json                 |  3 +-
 frontend/src/langs/zh-cn.json                 |  3 +-
 frontend/src/langs/zh-tw.json                 |  3 +-
 13 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/common/RedisTypeSelector.vue b/frontend/src/components/common/RedisTypeSelector.vue
index 6cba5fb..d19931d 100644
--- a/frontend/src/components/common/RedisTypeSelector.vue
+++ b/frontend/src/components/common/RedisTypeSelector.vue
@@ -2,7 +2,7 @@
 import { computed, h } from 'vue'
 import { NSpace, useThemeVars } from 'naive-ui'
 import { types, typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
-import { get, map, toUpper } from 'lodash'
+import { get, isEmpty, map, toUpper } from 'lodash'
 import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
 
 const props = defineProps({
@@ -18,6 +18,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    disableTip: {
+        type: String,
+        default: '',
+    },
 })
 
 const emit = defineEmits(['update:value', 'select'])
@@ -86,24 +90,42 @@ const handleSelect = (select) => {
 </script>
 
 <template>
-    <n-dropdown
-        :disabled="props.disabled"
-        :options="options"
-        :placement="props.placement"
-        :render-icon="renderIcon"
-        :render-label="renderLabel"
-        show-arrow
-        @select="handleSelect">
-        <n-tag
-            :bordered="true"
-            :color="{ color: backgroundColor, textColor: fontColor }"
+    <template v-if="props.disabled">
+        <n-tooltip :disabled="isEmpty(props.disableTip)">
+            <div>{{ props.disableTip }}</div>
+            <template #trigger>
+                <n-tag
+                    :bordered="true"
+                    :color="{ color: backgroundColor, textColor: fontColor }"
+                    class="redis-tag"
+                    disabled
+                    size="medium"
+                    strong>
+                    {{ displayValue }}
+                </n-tag>
+            </template>
+        </n-tooltip>
+    </template>
+    <template v-else>
+        <n-dropdown
             :disabled="props.disabled"
-            class="redis-tag"
-            size="medium"
-            strong>
-            {{ displayValue }}
-        </n-tag>
-    </n-dropdown>
+            :options="options"
+            :placement="props.placement"
+            :render-icon="renderIcon"
+            :render-label="renderLabel"
+            show-arrow
+            @select="handleSelect">
+            <n-tag
+                :bordered="true"
+                :color="{ color: backgroundColor, textColor: fontColor }"
+                :disabled="props.disabled"
+                class="redis-tag"
+                size="medium"
+                strong>
+                {{ displayValue }}
+            </n-tag>
+        </n-dropdown>
+    </template>
 </template>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/content_value/ContentValueWrapper.vue b/frontend/src/components/content_value/ContentValueWrapper.vue
index 40b3d88..a998313 100644
--- a/frontend/src/components/content_value/ContentValueWrapper.vue
+++ b/frontend/src/components/content_value/ContentValueWrapper.vue
@@ -209,8 +209,6 @@ watch(() => data.value?.keyPath, initContent)
     <!-- FIXME: keep alive may cause virtual list null value error. -->
     <!-- <keep-alive v-else> -->
     <component
-        tabindex="0"
-        @keydown="onKeyShortcut"
         :is="valueComponents[data.type]"
         v-else
         ref="contentRef"
@@ -226,7 +224,9 @@ watch(() => data.value?.keyPath, initContent)
         :size="data.size"
         :ttl="data.ttl"
         :value="data.value"
+        tabindex="0"
         @delete="onDelete"
+        @keydown="onKeyShortcut"
         @loadall="onLoadAll"
         @loadmore="onLoadMore"
         @match="onMatch"
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 9ed7e96..ad92735 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -311,6 +311,7 @@ watch(
                     <redis-type-selector
                         v-model:value="filterForm.type"
                         :disabled="!showTypeFilter"
+                        :disable-tip="$t('dialogue.filter.filter_type_not_support')"
                         @update:value="onSelectFilterType" />
                 </template>
             </content-search-input>
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index c623819..0983b1e 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -812,6 +812,7 @@ defineExpose({
             :expand-on-click="false"
             :expanded-keys="expandedKeys"
             :filter="(pattern, node) => includes(node.redisKey, pattern)"
+            :keyboard="false"
             :node-props="nodeProps"
             :pattern="props.pattern"
             :render-label="renderLabel"
@@ -822,7 +823,6 @@ defineExpose({
             check-strategy="child"
             class="fill-height"
             virtual-scroll
-            :keyboard="false"
             @keydown="onKeyShortcut"
             @update:selected-keys="onUpdateSelectedKeys"
             @update:expanded-keys="onUpdateExpanded"
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index 55a8fde..deb037e 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -331,7 +331,8 @@
       "set_key_filter": "Set Key Filter",
       "filter_pattern": "Pattern",
       "filter_pattern_tip": "Filter by directly input, and scan by press 'Enter'.\n\n* matches 0 or more chars, e.g. 'key*'  \n? matches single char, e.g. 'key?'\n[] matches range, e.g. 'key[1-3]'\n\\ escapes special chars",
-      "exact_match_tip": "Exact Match"
+      "exact_match_tip": "Exact Match",
+      "filter_type_not_support": "Type filtering is not supported for Redis 5.x and below."
     },
     "export": {
       "name": "Export Data",
diff --git a/frontend/src/langs/es-es.json b/frontend/src/langs/es-es.json
index 31fbe2f..bb52e10 100644
--- a/frontend/src/langs/es-es.json
+++ b/frontend/src/langs/es-es.json
@@ -331,7 +331,8 @@
       "set_key_filter": "Establecer filtro de clave",
       "filter_pattern": "Patrón",
       "filter_pattern_tip": "Filtre la lista actual ingresando directamente, y escanee el servidor presionando 'Ingresar'.\n\n* coincide con 0 o más caracteres, ej. 'key*'\n? coincide con un carácter, ej. 'key?'\n[] coincide con un rango, ej. 'key[1-3]'\n\\ escapa caracteres especiales",
-      "exact_match_tip": "Coincidencia exacta"
+      "exact_match_tip": "Coincidencia exacta",
+      "filter_type_not_support": "El filtrado por tipo no es compatible con Redis 5.x y versiones anteriores"
     },
     "export": {
       "name": "Exportar datos",
diff --git a/frontend/src/langs/fr-fr.json b/frontend/src/langs/fr-fr.json
index bf94402..56478bb 100644
--- a/frontend/src/langs/fr-fr.json
+++ b/frontend/src/langs/fr-fr.json
@@ -331,7 +331,8 @@
       "set_key_filter": "Définir le filtre de clé",
       "filter_pattern": "Modèle",
       "filter_pattern_tip": "Filtrez la liste actuelle en saisissant directement, et scannez le serveur en appuyant sur 'Entrée'.\n\n* correspond à 0 ou plusieurs caractères, ex : 'key*'\n? correspond à un seul caractère, ex : 'key?'\n[] correspond à une plage, ex : 'key[1-3]' échappe les caractères spéciaux",
-      "exact_match_tip": "Correspondance exacte"
+      "exact_match_tip": "Correspondance exacte",
+      "filter_type_not_support": "Le filtrage par type n’est pas pris en charge pour Redis 5.x et les versions antérieures"
     },
     "export": {
       "name": "Exporter les données",
diff --git a/frontend/src/langs/ja-jp.json b/frontend/src/langs/ja-jp.json
index d476a26..1009fcc 100644
--- a/frontend/src/langs/ja-jp.json
+++ b/frontend/src/langs/ja-jp.json
@@ -331,7 +331,8 @@
       "set_key_filter": "キーフィルターを設定",
       "filter_pattern": "パターン",
       "filter_pattern_tip": "直接入力して現在のリストをフィルタリングし、Enterキーを押すとサーバーをスキャンできます。\n\n*：0文字以上にマッチ。例：\"key*\"は\"key\"で始まるすべてのキーにマッチ\n?：1文字にマッチ。例：\"key?\"は\"key1\"、\"key2\"にマッチ\n[ ]：指定範囲の1文字にマッチ。例：\"key[1-3]\"は\"key1\"、\"key2\"、\"key3\"にマッチ\n\\：エスケープ文字。*、?、[、]をリテラルとして解釈したい場合は\"\\ \"をつける",
-      "exact_match_tip": "完全一致"
+      "exact_match_tip": "完全一致",
+      "filter_type_not_support": "タイプフィルタリングは、Redis 5.x 以前のバージョンには対応していません"
     },
     "export": {
       "name": "データをエクスポート",
diff --git a/frontend/src/langs/ko-kr.json b/frontend/src/langs/ko-kr.json
index 9030c11..28906ad 100644
--- a/frontend/src/langs/ko-kr.json
+++ b/frontend/src/langs/ko-kr.json
@@ -331,7 +331,8 @@
       "set_key_filter": "키 필터 설정",
       "filter_pattern": "패턴",
       "filter_pattern_tip": "직접 입력하여 현재 목록을 필터링하고, Enter키를 누르면 서버를 스캔할 수 있습니다.\n\n* 0개 이상의 문자 일치, 예) 'key*'\n? 단일 문자 일치, 예) 'key?'\n[] 범위 일치, 예) 'key[1-3]'\n\\ 특수문자 이스케이프",
-      "exact_match_tip": "완전 일치"
+      "exact_match_tip": "완전 일치",
+      "filter_type_not_support": "타입 필터링은 Redis 5.x 및 이전 버전을 지원하지 않습니다"
     },
     "export": {
       "name": "데이터 내보내기",
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index 7cedba6..10c8277 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -331,7 +331,8 @@
       "set_key_filter": "Definir Filtro de Chave",
       "filter_pattern": "Padrão",
       "filter_pattern_tip": "Filtre a lista atual inserindo diretamente, e escaneie o servidor pressionando 'Enter'.\n\n* corresponde a 0 ou mais caracteres, ex: 'chave*'\n? corresponde a um único caractere, ex: 'chave?'\n[] corresponde a um intervalo, ex: 'chave[1-3]'\n\\ escapa caracteres especiais",
-      "exact_match_tip": "Correspondência Exata"
+      "exact_match_tip": "Correspondência Exata",
+      "filter_type_not_support": "A filtragem por tipo não é suportada para Redis 5.x e versões anteriores"
     },
     "export": {
       "name": "Exportar Dados",
diff --git a/frontend/src/langs/ru-ru.json b/frontend/src/langs/ru-ru.json
index 5cc4f22..3ac782e 100644
--- a/frontend/src/langs/ru-ru.json
+++ b/frontend/src/langs/ru-ru.json
@@ -331,7 +331,8 @@
       "set_key_filter": "Установить фильтр ключей",
       "filter_pattern": "Шаблон",
       "filter_pattern_tip": "Отфильтруйте текущий список, введя напрямую, и выполните сканирование сервера, нажав 'Enter'.\n\n* соответствует 0 или более символов, напр. 'key*'\n? соответствует одному символу, напр. 'key?'\n[] соответствует диапазону, напр. 'key[1-3]'\n\\ экранирует спецсимволы",
-      "exact_match_tip": "Точное совпадение"
+      "exact_match_tip": "Точное совпадение",
+      "filter_type_not_support": "Фильтрация по типу не поддерживается для Redis версии 5.x и ниже"
     },
     "export": {
       "name": "Экспорт данных",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 6aa1cff..8971f94 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -331,7 +331,8 @@
       "set_key_filter": "设置键过滤器",
       "filter_pattern": "过滤表达式",
       "filter_pattern_tip": "直接输入筛选当前列表，回车后可对服务器进行扫描。\n\n *：匹配零个或多个字符。例如：\"key*\"匹配到以\"key\"开头的所有键\n?：匹配单个字符。例如：\"key?\"匹配\"key1\"、\"key2\"\n[ ]：匹配指定范围内的单个字符。例如：\"key[1-3]\"可以匹配类似于 \"key1\"、\"key2\"、\"key3\" 的键\n\\：转义字符。如果想要匹配 *、?、[、或]，需要使用反斜杠\"\\\"进行转义",
-      "exact_match_tip": "完全匹配"
+      "exact_match_tip": "完全匹配",
+      "filter_type_not_support": "类型筛选不支持 Redis 5.x 及以下版本"
     },
     "export": {
       "name": "导出数据",
diff --git a/frontend/src/langs/zh-tw.json b/frontend/src/langs/zh-tw.json
index 6cd7867..69e09a9 100644
--- a/frontend/src/langs/zh-tw.json
+++ b/frontend/src/langs/zh-tw.json
@@ -331,7 +331,8 @@
       "set_key_filter": "設定鍵過濾器",
       "filter_pattern": "過濾表示式",
       "filter_pattern_tip": "直接鍵入篩選目前清單，按Enter鍵後可對伺服器進行掃描。\n\n*：匹配零個或多個字元。例如：\"key*\"匹配到以\"key\"開頭的所有鍵\n?：匹配單個字元。例如：\"key?\"匹配\"key1\", \"key2\"\n[ ]：匹配指定範圍內的單個字元。例如：\"key[1-3]\"可以匹配類似於 \"key1\", \"key2\", \"key3\" 的鍵\n\\：轉義字元。如果想要匹配 *, ?, [, 或]，需要使用反斜線\"\\\"進行轉義",
-      "exact_match_tip": "精準匹配"
+      "exact_match_tip": "精準匹配",
+      "filter_type_not_support": "類型篩選不支援 Redis 5.x 以下版本"
     },
     "export": {
       "name": "匯出資料",