chore(ui): removing recent filter functionality (#6420)

kestra-io · Dec 12, 2024 · 1488719 · 1488719
1 parent 41e64cc
commit 1488719
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 84 deletions.
diff --git a/ui/src/components/filter/KestraFilter.vue b/ui/src/components/filter/KestraFilter.vue
@@ -147,14 +147,9 @@
     });
 
     import {useFilters, compare} from "./useFilters.js";
-    const {
-        getRecentItems,
-        setRecentItems,
-        COMPARATORS,
-        OPTIONS,
-        encodeParams,
-        decodeParams,
-    } = useFilters(props.prefix);
+    const {COMPARATORS, OPTIONS, encodeParams, decodeParams} = useFilters(
+        props.prefix,
+    );
 
     const select = ref<InstanceType<typeof ElSelect> | null>(null);
     const updateHoveringIndex = (index) => {
@@ -443,13 +438,6 @@
     };
 
     const triggerSearch = () => {
-        if (current.value.length) {
-            const r = getRecentItems().filter((i) =>
-                compare(i.value, current.value),
-            );
-            setRecentItems([...r, {value: current.value}]);
-        }
-
         router.push({query: encodeParams(current.value)});
     };
 

diff --git a/ui/src/components/filter/components/Save.vue b/ui/src/components/filter/components/Save.vue
@@ -14,7 +14,7 @@
     <el-dialog
         v-model="visible"
         :title="t('filters.save.dialog.heading')"
-        :width="400"
+        :width="540"
         align-center
         append-to-body
         @opened="input?.focus"
@@ -27,7 +27,7 @@
                 ref="input"
                 v-model="label"
                 :placeholder="t('filters.save.dialog.placeholder')"
-                class="pt-1"
+                class="pt-2 bg-transparent"
                 @keydown.enter.prevent="save()"
             />
         </section>

diff --git a/ui/src/components/filter/components/history/History.vue b/ui/src/components/filter/components/history/History.vue
@@ -4,59 +4,37 @@
         placement="bottom-start"
         @visible-change="loadAll"
     >
-        <KestraIcon :tooltip="$t('filters.recent.label')" placement="bottom">
+        <KestraIcon :tooltip="$t('filters.save.label')" placement="bottom">
             <el-button :icon="History" class="rounded-0 rounded-start" />
         </KestraIcon>
 
         <template #dropdown>
             <el-dropdown-menu class="py-2 history-dropdown">
-                <p class="title">
-                    {{ t("filters.recent.label") }}
+                <p class="pt-3 title">
+                    {{ t("filters.save.label") }}
                 </p>
-                <el-dropdown-item
-                    v-if="!recents.length"
-                    @click="emits('search', {})"
-                >
-                    <small class="text-secondary label">
-                        {{ t("filters.recent.empty") }}
-                    </small>
-                </el-dropdown-item>
-                <template v-else>
+                <div class="overflow-x-auto saved scroller">
                     <el-dropdown-item
-                        v-for="(recent, rIdx) in recents.slice(0, 5)"
-                        :key="rIdx"
-                        @click="emits('search', recent.value)"
+                        v-if="!saved.length"
+                        @click="emits('search', {})"
+                        class="pe-none"
                     >
-                        <HistoryItem :item="recent">
+                        <small class="text-secondary label">
+                            {{ t("filters.save.empty") }}
+                        </small>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                        v-for="(save, index) in saved"
+                        :key="index"
+                        @click="emits('search', save.value)"
+                    >
+                        <HistoryItem :item="save">
                             <template #delete>
-                                <DeleteOutline
-                                    @click.stop="remove('recents', rIdx)"
-                                />
+                                <DeleteOutline @click.stop="remove(index)" />
                             </template>
                         </HistoryItem>
                     </el-dropdown-item>
-                </template>
-
-                <template v-if="saved.length">
-                    <p class="pt-3 title">
-                        {{ t("filters.save.label") }}
-                    </p>
-                    <div class="overflow-x-auto saved scroller">
-                        <el-dropdown-item
-                            v-for="(save, sIdx) in saved"
-                            :key="sIdx"
-                            @click="emits('search', save.value)"
-                        >
-                            <HistoryItem :item="save">
-                                <template #delete>
-                                    <DeleteOutline
-                                        @click.stop="remove('saved', sIdx)"
-                                    />
-                                </template>
-                            </HistoryItem>
-                        </el-dropdown-item>
-                    </div>
-                </template>
+                </div>
             </el-dropdown-menu>
         </template>
     </el-dropdown>
@@ -78,25 +56,19 @@
     const props = defineProps({prefix: {type: String, required: true}});
 
     import {useFilters} from "../../useFilters.js";
-    const {getRecentItems, removeRecentItem, getSavedItems, removeSavedItem} =
-        useFilters(props.prefix);
+    const {getSavedItems, removeSavedItem} = useFilters(props.prefix);
 
-    let recents = ref([]);
     let saved = ref([]);
 
     const loadAll = () => {
-        recents.value = getRecentItems().reverse();
         saved.value = getSavedItems().reverse();
     };
 
     loadAll();
 
-    const remove = (prefix, index) => {
-        const list = prefix === "recents" ? recents : saved;
-        const action = prefix === "recents" ? removeRecentItem : removeSavedItem;
-
-        action(list.value[index]);
-        list.value.splice(index, 1);
+    const remove = (index) => {
+        removeSavedItem(saved.value[index]);
+        saved.value.splice(index, 1);
     };
 </script>
 

diff --git a/ui/src/components/filter/useFilters.js b/ui/src/components/filter/useFilters.js
@@ -31,7 +31,7 @@ const filterItems = (items, element) => {
 export function useFilters(prefix) {
     const {t} = useI18n({useScope: "global"});
 
-    const keys = {recent: `recent__${prefix}`, saved: `saved__${prefix}`};
+    const keys = {saved: `saved__${prefix}`};
 
     const COMPARATORS = {
         IS: {
@@ -295,17 +295,6 @@ export function useFilters(prefix) {
     };
 
     return {
-        getRecentItems: () => {
-            return getItem(keys.recent);
-        },
-        setRecentItems: (value) => {
-            return setItem(keys.recent, value);
-        },
-        removeRecentItem: (element) => {
-            const filtered = filterItems(getItem(keys.recent), element);
-            return setItem(keys.recent, filtered);
-        },
-
         getSavedItems: () => {
             return getItem(keys.saved);
         },

diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -994,12 +994,9 @@
         "between": "between",
         "starts_with": "starts with"
       },
-      "recent": {
-        "label": "Recent searches",
-        "empty": "You still haven't searched for anything."
-      },
       "save": {
         "label": "Saved searches",
+        "empty": "You still haven't saved any search.",
         "tooltip": "You can't save empty search criteria.",
         "dialog": {
           "heading": "Save current search",