fix(ui): add missing filter tooltips

There is plenty of buttons within the filter. Tooltips should explain their functionality.
kestra-io · Nov 15, 2024 · 5df8037 · 5df8037
1 parent f3edfbc
commit 5df8037
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/ui/src/components/filter/KestraFilter.vue b/ui/src/components/filter/KestraFilter.vue
@@ -55,7 +55,9 @@
         </el-select>
 
         <el-button-group class="d-inline-flex">
-            <el-button :icon="Magnify" @click="triggerSearch" />
+            <kicon :tooltip="$t('search')" placement="bottom">
+                <el-button :icon="Magnify" @click="triggerSearch" />
+            </kicon>
             <Save :disabled="!current.length" :prefix :current />
             <Refresh v-if="refresh.shown" @refresh="refresh.callback" />
             <Settings :charts />
@@ -82,6 +84,7 @@
     import History from "./components/history/History.vue";
     import Save from "./components/Save.vue";
     import Settings from "./components/Settings.vue";
+    import Kicon from "../Kicon.vue";
 
     import Magnify from "vue-material-design-icons/Magnify.vue";
 

diff --git a/ui/src/components/filter/components/Save.vue b/ui/src/components/filter/components/Save.vue
@@ -3,7 +3,9 @@
         <el-button disabled :icon="Save" @click="toggle(true)" />
     </el-tooltip>
 
-    <el-button v-else :icon="Save" @click="toggle(true)" />
+    <kicon v-else :tooltip="$t('filters.save.dialog.heading')" placement="bottom">
+        <el-button :icon="Save" @click="toggle(true)" />
+    </kicon>
 
     <el-dialog
         v-model="visible"
@@ -51,6 +53,8 @@
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
 
+    import Kicon from "../../Kicon.vue";
+
     import Save from "vue-material-design-icons/ContentSaveOutline.vue";
 
     const props = defineProps({

diff --git a/ui/src/components/filter/components/Settings.vue b/ui/src/components/filter/components/Settings.vue
@@ -1,6 +1,8 @@
 <template>
     <el-dropdown trigger="click" placement="bottom-end">
-        <el-button :icon="TableCog" />
+        <kicon :tooltip="$t('settings.label')" placement="bottom">
+            <el-button :icon="TableCog" />
+        </kicon>
 
         <template #dropdown>
             <el-dropdown-menu class="py-2 settings-dropdown">
@@ -18,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+    import Kicon from "../../Kicon.vue";
+
     import TableCog from "vue-material-design-icons/TableCog.vue";
 
     import {useI18n} from "vue-i18n";

diff --git a/ui/src/components/filter/components/history/History.vue b/ui/src/components/filter/components/history/History.vue
@@ -4,7 +4,9 @@
         placement="bottom-start"
         @visible-change="loadAll"
     >
-        <el-button :icon="History" class="rounded-0 rounded-start" />
+        <kicon :tooltip="$t('filters.recent.label')" placement="bottom">
+            <el-button :icon="History" class="rounded-0 rounded-start" />
+        </kicon>
 
         <template #dropdown>
             <el-dropdown-menu class="py-2 history-dropdown">
@@ -67,6 +69,7 @@
     const {t} = useI18n({useScope: "global"});
 
     import HistoryItem from "./HistoryItem.vue";
+    import Kicon from "../../../Kicon.vue";
 
     import History from "vue-material-design-icons/History.vue";
     import DeleteOutline from "vue-material-design-icons/DeleteOutline.vue";