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

Co-authored-by: Huang Yun Qi <yun-qi.huang@ubisoft.com>

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>