pref: add a tooltip if the type filter is not supported (#274)

Author: tiny-craft

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>

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"

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>

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"

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",

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",

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",

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": "データをエクスポート",

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": "데이터 내보내기",

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",