fIx: side toolbar tab tooltip not reactive when changing locale (#4213)

Co-authored-by: Huang Yun Qi <[email protected]>

Author: hyq2015

src/components/sidebar/SideToolbar.vue

@@ -6,7 +6,8 @@
         :key="tab.id"
         :icon="tab.icon"
         :icon-badge="tab.iconBadge"
-        :tooltip="tab.tooltip + getTabTooltipSuffix(tab)"
+        :tooltip="tab.tooltip"
+        :tooltip-suffix="getTabTooltipSuffix(tab)"
         :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"

src/components/sidebar/SidebarIcon.spec.ts

@@ -4,6 +4,7 @@ import PrimeVue from 'primevue/config'
 import OverlayBadge from 'primevue/overlaybadge'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
 
 import SidebarIcon from './SidebarIcon.vue'
 
@@ -15,6 +16,14 @@ type SidebarIconProps = {
   iconBadge?: string | (() => string | null)
 }
 
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {}
+  }
+})
+
 describe('SidebarIcon', () => {
   const exampleProps: SidebarIconProps = {
     icon: 'pi pi-cog',
@@ -24,7 +33,7 @@ describe('SidebarIcon', () => {
   const mountSidebarIcon = (props: Partial<SidebarIconProps>, options = {}) => {
     return mount(SidebarIcon, {
       global: {
-        plugins: [PrimeVue],
+        plugins: [PrimeVue, i18n],
         directives: { tooltip: Tooltip },
         components: { OverlayBadge, Button }
       },

src/components/sidebar/SidebarIcon.vue

@@ -1,6 +1,10 @@
 <template>
   <Button
-    v-tooltip="{ value: tooltip, showDelay: 300, hideDelay: 300 }"
+    v-tooltip="{
+      value: computedTooltip,
+      showDelay: 300,
+      hideDelay: 300
+    }"
     text
     :pt="{
       root: {
@@ -9,7 +13,7 @@
             ? 'p-button-primary side-bar-button-selected'
             : 'p-button-secondary'
         }`,
-        'aria-label': tooltip
+        'aria-label': computedTooltip
       }
     }"
     @click="emit('click', $event)"
@@ -27,16 +31,20 @@
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const {
   icon = '',
   selected = false,
   tooltip = '',
+  tooltipSuffix = '',
   iconBadge = ''
 } = defineProps<{
   icon?: string
   selected?: boolean
   tooltip?: string
+  tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
 }>()
 
@@ -47,6 +55,7 @@ const overlayValue = computed(() =>
   typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
+const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 </script>
 
 <style>

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,19 +1,16 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
-
   return {
     id: 'model-library',
     icon: 'pi pi-box',
-    title: t('sideToolbar.modelLibrary'),
-    tooltip: t('sideToolbar.modelLibrary'),
+    title: 'sideToolbar.modelLibrary',
+    tooltip: 'sideToolbar.modelLibrary',
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {

src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts

@@ -1,16 +1,14 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   return {
     id: 'node-library',
     icon: 'pi pi-book',
-    title: t('sideToolbar.nodeLibrary'),
-    tooltip: t('sideToolbar.nodeLibrary'),
+    title: 'sideToolbar.nodeLibrary',
+    tooltip: 'sideToolbar.nodeLibrary',
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   }

src/composables/sidebarTabs/useQueueSidebarTab.ts

@@ -1,12 +1,10 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
 import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useQueueSidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
   return {
     id: 'queue',
@@ -15,8 +13,8 @@ export const useQueueSidebarTab = (): SidebarTabExtension => {
       const value = queuePendingTaskCountStore.count.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolbar.queue'),
-    tooltip: t('sideToolbar.queue'),
+    title: 'sideToolbar.queue',
+    tooltip: 'sideToolbar.queue',
     component: markRaw(QueueSidebarTab),
     type: 'vue'
   }

src/composables/sidebarTabs/useWorkflowsSidebarTab.ts

@@ -1,16 +1,13 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
-
   return {
     id: 'workflows',
     icon: 'pi pi-folder-open',
@@ -23,8 +20,8 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
       const value = workflowStore.openWorkflows.length.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolbar.workflows'),
-    tooltip: t('sideToolbar.workflows'),
+    title: 'sideToolbar.workflows',
+    tooltip: 'sideToolbar.workflows',
     component: markRaw(WorkflowsSidebarTab),
     type: 'vue'
   }

src/stores/workspace/sidebarTabStore.ts

@@ -28,7 +28,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
     useCommandStore().registerCommand({
       id: `Workspace.ToggleSidebarTab.${tab.id}`,
       icon: tab.icon,
-      label: `Toggle ${tab.title} Sidebar`,
+      label: tab.title,
       tooltip: tab.tooltip,
       versionAdded: '1.3.9',
       function: () => {