From 5747e979afa29c3a6f55f2edcef70fde67517792 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 8 Nov 2024 11:24:40 -0700
Subject: [PATCH 1/2] Fix `clean-tooltip` directive in Vue3

The interface for custom directives has changed in some important ways in Vue3.

- `bind` is now `beforeMount`
- `update` has been removed and `updated` is recommended

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/directives/clean-tooltip.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/shell/directives/clean-tooltip.js b/shell/directives/clean-tooltip.js
index 59bd3f28a45..bfb868deba2 100644
--- 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;

From ba5c899e6d2abe472c03348f43fc7b2d44dadbc8 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 8 Nov 2024 11:27:07 -0700
Subject: [PATCH 2/2] Replace all usages of `v-tooltip` with `v-clean-tooltip`

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 pkg/aks/components/AksNodePool.vue     |  4 ++--
 shell/components/SideNav.vue           |  2 +-
 shell/components/TableDataUserIcon.vue |  2 +-
 shell/components/nav/TopLevelMenu.vue  | 22 +++++++++++-----------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/pkg/aks/components/AksNodePool.vue b/pkg/aks/components/AksNodePool.vue
index f81abf459ba..e293eb3e484 100644
--- 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
index 237f191d8cd..e69e3b05512 100644
--- 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
index 9575713e6ed..c07b667d2f7 100644
--- 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
index f565b8da71e..04d689f11f2 100644
--- 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"
                   />