Merge pull request #12569 from rancher/gha-portpr-11749674903-1

[backport v2.10.0] Replace `v-tooltip` with `v-clean-tooltip`
rancher · Nov 11, 2024 · 76c7e7e · 76c7e7e
2 parents 52aecc8 + ba5c899
commit 76c7e7e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git a/pkg/aks/components/AksNodePool.vue b/pkg/aks/components/AksNodePool.vue
@@ -379,7 +379,7 @@ export default defineComponent({
         <div class="text-label">
           {{ t('aks.nodePools.taints.label') }}
           <i
-            v-tooltip="t('aks.nodePools.taints.tooltip')"
+            v-clean-tooltip="t('aks.nodePools.taints.tooltip')"
             class="icon icon-info"
           />
         </div>
@@ -455,7 +455,7 @@ export default defineComponent({
         <div class="text-label">
           {{ t('labels.labels.title') }}
           <i
-            v-tooltip="t('aks.nodePools.labels.tooltip')"
+            v-clean-tooltip="t('aks.nodePools.labels.tooltip')"
             class="icon icon-info"
           />
         </div>

diff --git a/shell/components/SideNav.vue b/shell/components/SideNav.vue
@@ -482,7 +482,7 @@ export default {
       <template v-else>
         <span
           v-if="isVirtualCluster && isExplorer"
-          v-tooltip="{content: harvesterVersion, placement: 'top'}"
+          v-clean-tooltip="{content: harvesterVersion, placement: 'top'}"
           class="clip text-muted ml-5"
         >
           (Harvester-{{ harvesterVersion }})

diff --git a/shell/components/TableDataUserIcon.vue b/shell/components/TableDataUserIcon.vue
@@ -24,7 +24,7 @@ const iconClass = computed(() => {
 <template>
   <div class="icon-center">
     <i
-      v-tooltip="ucFirst(userState)"
+      v-clean-tooltip="ucFirst(userState)"
       :class="iconClass"
     />
   </div>

diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
@@ -546,7 +546,7 @@ export default {
                 :to="{ name: 'home' }"
               >
                 <svg
-                  v-tooltip="getTooltipConfig(t('nav.home'))"
+                  v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   xmlns="http://www.w3.org/2000/svg"
                   height="24"
                   viewBox="0 0 24 24"
@@ -660,13 +660,13 @@ export default {
                     @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -687,12 +687,12 @@ export default {
                     :data-testid="`pinned-menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -735,13 +735,13 @@ export default {
                     @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <!-- HERE LOCAL CLUSTER! -->
@@ -764,12 +764,12 @@ export default {
                     :data-testid="`menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -836,7 +836,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />
@@ -866,7 +866,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />

diff --git a/shell/directives/clean-tooltip.js b/shell/directives/clean-tooltip.js
@@ -13,10 +13,10 @@ function purifyContent(value) {
   }
 }
 
-function bind(el, { value, oldValue, modifiers }) {
+function beforeMount(el, { value, oldValue, modifiers }) {
   const purifiedValue = purifyContent(value);
 
-  VTooltip.bind(
+  VTooltip.beforeMount(
     el,
     {
       value: purifiedValue, oldValue, modifiers
@@ -25,8 +25,8 @@ function bind(el, { value, oldValue, modifiers }) {
 
 const cleanTooltipDirective = {
   ...VTooltip,
-  bind,
-  update: bind,
+  beforeMount,
+  updated: beforeMount,
 };
 
 export default cleanTooltipDirective;