From 8894a539ba06f2d0fea9904216d864dec7ffdc7e Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Thu, 29 Aug 2024 15:48:18 +0100
Subject: [PATCH 1/9] working on popover fix

---
 shell/assets/styles/global/_tooltip.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/shell/assets/styles/global/_tooltip.scss b/shell/assets/styles/global/_tooltip.scss
index 4ce40138f97..e89fb559157 100644
--- a/shell/assets/styles/global/_tooltip.scss
+++ b/shell/assets/styles/global/_tooltip.scss
@@ -138,12 +138,12 @@
   }
 }
 
-.popover {
+.v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
   border-radius: var(--border-radius);
 
-  .popover-inner {
+  .v-popper__inner {
     background: $color;
     color: var(--popover-text);
     padding: 10px;
@@ -155,12 +155,12 @@
     }
   }
 
-  .popover-arrow {
+  .v-popper__arrow-container {
     border-color: transparent;
   }
 
   &[x-placement^="bottom"] {
-    .popover-arrow {
+    .v-popper__arrow-container {
       &:after {
         // border-bottom-color: var(--popover-bg);
         border-bottom-width: 0;
@@ -175,7 +175,7 @@
 }
 
 .tooltip,
-.popover {
+.v-popper {
   &[aria-hidden='true'] {
     // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
     // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.

From 5a813024bc83d2f457890d6b752b514bf2d6224d Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Thu, 29 Aug 2024 17:54:31 +0100
Subject: [PATCH 2/9] fix styling for locale selectors

---
 shell/assets/styles/global/_layout.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/shell/assets/styles/global/_layout.scss b/shell/assets/styles/global/_layout.scss
index 504e628d044..42fb5f2e7df 100644
--- a/shell/assets/styles/global/_layout.scss
+++ b/shell/assets/styles/global/_layout.scss
@@ -119,15 +119,15 @@ HEADER {
 }
 
 .localeSelector {
-  :deep(.popover-inner) {
+  :deep(.v-popper__inner) {
     padding: 50px 0;
   }
 
-  :deep(.popover-arrow) {
+  :deep(.v-popper__arrow-container) {
     display: none;
   }
 
-  :deep(.popover:focus) {
+  :deep(.v-popper:focus) {
     outline: 0;
   }
 

From 297f76e476f84e6574d69dd29b804c6a6aa2ba96 Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Thu, 29 Aug 2024 19:21:43 +0100
Subject: [PATCH 3/9] fix header user menu styling

---
 shell/assets/styles/global/_tooltip.scss |  4 ++--
 shell/components/nav/Header.vue          | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/shell/assets/styles/global/_tooltip.scss b/shell/assets/styles/global/_tooltip.scss
index e89fb559157..f8b68a71137 100644
--- a/shell/assets/styles/global/_tooltip.scss
+++ b/shell/assets/styles/global/_tooltip.scss
@@ -149,6 +149,7 @@
     padding: 10px;
     border-radius: var(--border-radius);
     box-shadow: 0 5px 20px var(--shadow);
+    border: none;
 
     a {
       color: var(--popover-text);
@@ -167,10 +168,9 @@
       }
     }
   }
-
 }
 
-.v-popover {
+.v-popper {
   display: inline;
 }
 
diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index 2d354465eb8..2f69935fbe1 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -664,6 +664,7 @@ export default {
         class="user user-menu"
         data-testid="nav_header_showUserMenu"
         tabindex="0"
+        @blur="showMenu(false)"
         @click="showMenu(true)"
         @focus.capture="showMenu(true)"
       >
@@ -671,6 +672,8 @@ export default {
           :triggers="[]"
           :shown="isPopoverOpen"
           :autoHide="false"
+          :flip="false"
+          :container="false"
         >
           <div class="user-image text-right hand">
             <img
@@ -1011,7 +1014,7 @@ export default {
         outline: none;
         width: var(--header-height);
 
-        .v-popover {
+        .v-popper {
           display: flex;
           :deep() .trigger{
           .user-image {
@@ -1026,7 +1029,7 @@ export default {
         }
 
         &:focus {
-          .v-popover {
+          .v-popper {
             :deep() .trigger {
               line-height: 0;
               .user-image {
@@ -1084,7 +1087,7 @@ export default {
     }
   }
 
-  .popover .popover-inner {
+  .v-popper__popper .v-popper__inner {
     padding: 0;
     border-radius: 0;
   }
@@ -1096,18 +1099,21 @@ export default {
   }
 
   .user-menu {
+    :deep() .v-popper__arrow-container {
+      display: none;
+    }
     // Remove the default padding on the popup so that the hover on menu items goes full width of the menu
-    :deep() .popover-inner {
-      padding: 10px 0;
+    :deep() .v-popper__inner {
+      padding: 0 0 10px 0;
     }
 
-    :deep() .v-popover {
+    :deep() .v-popper {
       display: flex;
     }
   }
 
   .actions {
-    :deep() .popover:focus {
+    :deep() .v-popper:focus {
       outline: 0;
     }
 

From 60026587c3f25e4033245a0aa6a96de2684f642e Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 30 Aug 2024 15:48:50 +0100
Subject: [PATCH 4/9] fixing tooltips and metions of tooltips and dropdowns
 wherever I could find them

---
 .../keyboard-mapping-indicator.po.ts          |  2 +-
 .../e2e/po/components/sortable-table.po.ts    |  2 +-
 shell/assets/styles/global/_tooltip.scss      | 96 ++++++-------------
 shell/components/ActionDropdown.vue           | 22 ++---
 shell/components/LocaleSelector.vue           |  2 +-
 shell/components/SideNav.vue                  |  6 +-
 shell/components/fleet/FleetStatus.vue        | 27 +++---
 .../components/formatter/AppSummaryGraph.vue  |  2 +-
 .../formatter/FleetSummaryGraph.vue           |  2 +-
 .../formatter/MachineSummaryGraph.vue         |  2 +-
 shell/components/formatter/Scale.vue          |  2 +-
 shell/components/formatter/Weight.vue         |  2 +-
 shell/components/nav/Header.vue               | 13 +--
 shell/components/nav/TopLevelMenu.vue         | 13 +--
 .../nav/WindowManager/ContainerLogs.vue       |  2 +-
 .../helm.cattle.io.projecthelmchart.vue       | 53 +++++-----
 16 files changed, 105 insertions(+), 143 deletions(-)

diff --git a/cypress/e2e/po/components/keyboard-mapping-indicator.po.ts b/cypress/e2e/po/components/keyboard-mapping-indicator.po.ts
index 8ebbe270373..a1341896f7d 100644
--- a/cypress/e2e/po/components/keyboard-mapping-indicator.po.ts
+++ b/cypress/e2e/po/components/keyboard-mapping-indicator.po.ts
@@ -10,6 +10,6 @@ export default class KeyboardMappingIndicatorPo extends ComponentPo {
   }
 
   getTooltipContent(): Cypress.Chainable {
-    return cy.get('.tooltip.vue-tooltip-theme .tooltip-inner');
+    return cy.get('.v-popper__popper.v-popper--theme-tooltip .v-popper__inner');
   }
 }
diff --git a/cypress/e2e/po/components/sortable-table.po.ts b/cypress/e2e/po/components/sortable-table.po.ts
index 8f069e0953c..5f59b1849b4 100644
--- a/cypress/e2e/po/components/sortable-table.po.ts
+++ b/cypress/e2e/po/components/sortable-table.po.ts
@@ -37,7 +37,7 @@ export default class SortableTablePo extends ComponentPo {
    * @returns
    */
   bulkActionDropDownPopOver() {
-    return this.bulkActionDropDown().find(`.v-popover .popover .popover-inner`);
+    return this.bulkActionDropDown().find(`.v-popper .v-popper__inner`);
   }
 
   /**
diff --git a/shell/assets/styles/global/_tooltip.scss b/shell/assets/styles/global/_tooltip.scss
index f8b68a71137..1249e9bb7e7 100644
--- a/shell/assets/styles/global/_tooltip.scss
+++ b/shell/assets/styles/global/_tooltip.scss
@@ -1,4 +1,4 @@
-.tooltip {
+.v-popper__popper.v-popper--theme-tooltip {
   $triangle-size: 8px;
   $triangle-inner-size: $triangle-size - 1px;
   $center: calc(50% - #{$triangle-size});
@@ -7,130 +7,105 @@
   z-index: z-index('tooltip');
   max-width: 50vw;
 
-  .tooltip-inner {
+  .v-popper__inner {
     background: var(--tooltip-bg);
     color: var(--tooltip-text);
     border-radius: var(--border-radius);
     padding: 8px;
   }
 
-  .tooltip-arrow {
+  .v-popper__arrow-container {
     width: 0;
     height: 0;
     border: 0 solid transparent;
     position: absolute;
     z-index: 1;
 
-    &:after {
-      position: absolute;
+    .v-popper__arrow-inner {
       border: $triangle-inner-size solid transparent;
-      content: '';
     }
   }
 
-  &[x-placement^="top"] {
-    margin-bottom: $triangle-size;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      bottom: -4px;
-    }
-
-    margin-bottom: $triangle-size;
-
-    .tooltip-arrow {
-      bottom: -$triangle-inner-size;
+  &[data-popper-placement^="top"] {
+    .v-popper__arrow-container {
 
-      &:after {
+      .v-popper__arrow-outer {
         border-bottom-width: 0;
         border-top-color: var(--tooltip-bg);
-        bottom: 1px;
         left: -$triangle-inner-size;
       }
     }
   }
 
 
-  &[x-placement^="bottom"] {
-    margin-top: $triangle-size;
-
-    .tooltip-arrow {
-      top: -$triangle-inner-size;
+  &[data-popper-placement^="bottom"] {
+    .v-popper__arrow-container {
 
-      &:after {
+      .v-popper__arrow-outer {
         border-top-width: 0;
         border-bottom-color: var(--tooltip-bg);
-        top: 1px;
         left: -$triangle-inner-size;
         background: transparent;
       }
     }
   }
 
-  &[x-placement^="right"] {
-    margin-left: $triangle-size;
-
-    .tooltip-arrow {
-      left: -$triangle-inner-size;
+  &[data-popper-placement^="right"] {
+    .v-popper__arrow-container {
 
-      &:after {
-        border-left-width: 0;
+      .v-popper__arrow-outer {
         border-right-color: var(--tooltip-bg);
-        left: 1px;
         top: -$triangle-inner-size;
+        border-left-width: 0;
       }
     }
   }
 
-  &[x-placement^="left"] {
-    margin-right: $triangle-size;
-
-    .tooltip-arrow {
-      right: -$triangle-inner-size;
+  &[data-popper-placement^="left"] {
+    .v-popper__arrow-container {
 
-      &:after {
+      .v-popper__arrow-outer {
         border-right-width: 0;
         border-left-color: var(--tooltip-bg);
-        right: 1px;
         top: -$triangle-inner-size;
       }
     }
   }
 
   &.tooltip-warning {
-    .tooltip-inner {
+    .v-popper__inner {
       background: var(--tooltip-bg-warning);
       color: var(--tooltip-text-warning);
     }
 
-    &[x-placement^="top"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="top"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-top-color: var(--tooltip-bg-warning);
         }
       }
     }
 
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-bottom-color: var(--body-bg);
         }
       }
     }
 
-    &[x-placement^="right"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="right"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-right-color: var(--tooltip-bg-warning);
         }
       }
     }
 
-    &[x-placement^="left"] {
-      .tooltip-arrow {
-        &:after {
+    &[data-popper-placement^="left"] {
+      .v-popper__arrow-container {
+        .v-popper__arrow-outer {
           border-left-color: var(--tooltip-bg-warning);
         }
       }
@@ -159,22 +134,13 @@
   .v-popper__arrow-container {
     border-color: transparent;
   }
-
-  &[x-placement^="bottom"] {
-    .v-popper__arrow-container {
-      &:after {
-        // border-bottom-color: var(--popover-bg);
-        border-bottom-width: 0;
-      }
-    }
-  }
 }
 
 .v-popper {
   display: inline;
 }
 
-.tooltip,
+.v-popper__popper.v-popper--theme-tooltip,
 .v-popper {
   &[aria-hidden='true'] {
     // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
diff --git a/shell/components/ActionDropdown.vue b/shell/components/ActionDropdown.vue
index dc4467cb2d9..098d549be68 100644
--- a/shell/components/ActionDropdown.vue
+++ b/shell/components/ActionDropdown.vue
@@ -82,7 +82,7 @@ export default {
             Button <i class="icon icon-chevron-down" />
           </button>
         </slot>
-        <template #popover>
+        <template #popper>
           <slot name="popover-content" />
         </template>
       </v-dropdown>
@@ -123,7 +123,7 @@ export default {
   $sm-trigger-padding: 10px 10px 10px 10px;
   $lg-trigger-padding: 18px 10px 10px 10px;
 
-  .v-popover {
+  .v-popper {
     .text-right {
       margin-top: 5px;
     }
@@ -179,7 +179,7 @@ export default {
       &>.btn {
         padding: 15px 35px 15px 15px;
       }
-      .v-popover{
+      .v-popper{
         .trigger{
           position: absolute;
           top: 0px;
@@ -194,23 +194,19 @@ export default {
       }
     }
   }
-  .popover {
+  .v-popper__popper {
     border: none;
   }
-  .tooltip {
+  .v-popper__popper {
     margin-top: 0px;
 
-    &[x-placement^="bottom"] {
-      .tooltip-arrow {
-        border-bottom-color: var(--dropdown-border);
-
-        &:after {
-          border-bottom-color: var(--dropdown-bg);
-        }
+    &[data-popper-placement^="bottom"] {
+      .v-popper__arrow-container {
+        display: none;
       }
     }
 
-    .tooltip-inner {
+    .v-popper__inner {
       color: var(--dropdown-text);
       background-color: var(--dropdown-bg);
       border: 1px solid var(--dropdown-border);
diff --git a/shell/components/LocaleSelector.vue b/shell/components/LocaleSelector.vue
index b7efa7aa94e..6ffe5030704 100644
--- a/shell/components/LocaleSelector.vue
+++ b/shell/components/LocaleSelector.vue
@@ -63,7 +63,7 @@ export default {
             {{ selectedLocaleLabel }}
             <i class="icon icon-fw icon-sort-down" />
           </a>
-          <template #popover>
+          <template #popper>
             <ul
               class="list-unstyled dropdown"
               style="margin: -1px;"
diff --git a/shell/components/SideNav.vue b/shell/components/SideNav.vue
index da9d6371ad7..237f191d8cd 100644
--- a/shell/components/SideNav.vue
+++ b/shell/components/SideNav.vue
@@ -439,9 +439,9 @@ export default {
       <!-- locale selector -->
       <span v-if="isSingleProduct">
         <v-dropdown
-          popover-class="localeSelector"
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"
@@ -450,7 +450,7 @@ export default {
             {{ locale }}
           </a>
 
-          <template #popover>
+          <template #popper>
             <ul
               class="list-unstyled dropdown"
               style="margin: -1px;"
diff --git a/shell/components/fleet/FleetStatus.vue b/shell/components/fleet/FleetStatus.vue
index 1d72babedfc..c5a78c04f36 100644
--- a/shell/components/fleet/FleetStatus.vue
+++ b/shell/components/fleet/FleetStatus.vue
@@ -168,21 +168,20 @@ function toPercent(value, min, max) {
             <div class="meta-title">
               {{ meta.readyCount }} / {{ meta.total }} {{ title }} ready <i class="icon toggle icon-chevron-down" />
             </div>
-            <template
-              #popover
-              class="resources-status-list"
-            >
-              <ul
-                class="list-unstyled dropdown"
-                @click.stop="showMenu(false)"
-              >
-                <li
-                  v-for="(val, idx) in values"
-                  :key="idx"
+            <template #popper>
+              <div class="resources-status-list">
+                <ul
+                  class="list-unstyled dropdown"
+                  @click.stop="showMenu(false)"
                 >
-                  <span>{{ val.label }}</span><span class="list-count">{{ val.count }}</span>
-                </li>
-              </ul>
+                  <li
+                    v-for="(val, idx) in values"
+                    :key="idx"
+                  >
+                    <span>{{ val.label }}</span><span class="list-count">{{ val.count }}</span>
+                  </li>
+                </ul>
+              </div>
             </template>
           </v-dropdown>
         </div>
diff --git a/shell/components/formatter/AppSummaryGraph.vue b/shell/components/formatter/AppSummaryGraph.vue
index d0391e04a6f..fa8e342a33f 100644
--- a/shell/components/formatter/AppSummaryGraph.vue
+++ b/shell/components/formatter/AppSummaryGraph.vue
@@ -105,7 +105,7 @@ export default {
     </router-link>
     <span v-else>{{ displayLabel }}</span>
 
-    <template #popover>
+    <template #popper>
       <table
         v-if="show"
         class="fixed"
diff --git a/shell/components/formatter/FleetSummaryGraph.vue b/shell/components/formatter/FleetSummaryGraph.vue
index 400f0c1a396..338ba59ddfd 100644
--- a/shell/components/formatter/FleetSummaryGraph.vue
+++ b/shell/components/formatter/FleetSummaryGraph.vue
@@ -74,7 +74,7 @@ export default {
     <span v-if="summary.desiredReady === summary.ready">{{ summary.ready }}</span>
     <span v-else>{{ summary.ready }} of {{ summary.desiredReady }}</span>
 
-    <template #popover>
+    <template #popper>
       <table
         v-if="show"
         class="fixed"
diff --git a/shell/components/formatter/MachineSummaryGraph.vue b/shell/components/formatter/MachineSummaryGraph.vue
index c20972a4f37..dbbe9be6813 100644
--- a/shell/components/formatter/MachineSummaryGraph.vue
+++ b/shell/components/formatter/MachineSummaryGraph.vue
@@ -36,7 +36,7 @@ export default {
     trigger="click"
     offset="1"
   >
-    <template #popover>
+    <template #popper>
       <table class="fixed">
         <tbody>
           <tr
diff --git a/shell/components/formatter/Scale.vue b/shell/components/formatter/Scale.vue
index d28d5152695..5462c4ccc5d 100644
--- a/shell/components/formatter/Scale.vue
+++ b/shell/components/formatter/Scale.vue
@@ -83,7 +83,7 @@ export default {
       </span>
     </span>
 
-    <template #popover>
+    <template #popper>
       <div
         v-if="canAdjust"
         class="text-center pb-5"
diff --git a/shell/components/formatter/Weight.vue b/shell/components/formatter/Weight.vue
index 8dd786a2094..5adcbc18c81 100644
--- a/shell/components/formatter/Weight.vue
+++ b/shell/components/formatter/Weight.vue
@@ -110,7 +110,7 @@ export default {
       </div>
     </div>
 
-    <template #popover>
+    <template #popper>
       <div
         v-if="canAdjust"
         class="text-center pb-5"
diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index 2f69935fbe1..f813c7a2bfa 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -57,7 +57,7 @@ export default {
       authInfo:               {},
       show:                   false,
       showTooltip:            false,
-      isPopoverOpen:          false,
+      isUserMenuOpen:         false,
       isPageActionMenuOpen:   false,
       kubeConfigCopying:      false,
       searchShortcut,
@@ -275,7 +275,7 @@ export default {
       }
     },
     showMenu(show) {
-      this.isPopoverOpen = show;
+      this.isUserMenuOpen = show;
     },
 
     openImport() {
@@ -295,6 +295,7 @@ export default {
     },
 
     showPageActionsMenu(show) {
+      console.log('METHOD TRIGGERED', show);
       this.isPageActionMenuOpen = show;
     },
 
@@ -626,11 +627,11 @@ export default {
           :triggers="[]"
           :shown="isPageActionMenuOpen"
           :autoHide="false"
+          :flip="false"
+          :content="false"
         >
           <template #popper>
-            <div
-              class="user-menu"
-            >
+            <div class="user-menu">
               <ul
                 data-testid="page-actions-dropdown"
                 class="list-unstyled dropdown"
@@ -670,7 +671,7 @@ export default {
       >
         <v-dropdown
           :triggers="[]"
-          :shown="isPopoverOpen"
+          :shown="isUserMenuOpen"
           :autoHide="false"
           :flip="false"
           :container="false"
diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
index 5a320bb49e4..4bb2284ab05 100644
--- a/shell/components/nav/TopLevelMenu.vue
+++ b/shell/components/nav/TopLevelMenu.vue
@@ -692,6 +692,7 @@ export default {
                       v-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
+                      <!-- HERE LOCAL CLUSTER! -->
                       <p>{{ c.label }}</p>
                       <p
                         v-if="c.description"
@@ -903,15 +904,15 @@ export default {
   }
 
   .localeSelector {
-    .popover-inner {
+    .v-popper__inner {
       padding: 10px 0;
     }
 
-    .popover-arrow {
+    .v-popper__arrow-container {
       display: none;
     }
 
-    .popover:focus {
+    .v-popper:focus {
       outline: 0;
     }
   }
@@ -1450,15 +1451,15 @@ export default {
   }
 
   .localeSelector {
-    :deep() .popover-inner {
+    :deep() .v-popper__inner {
       padding: 50px 0;
     }
 
-    :deep() .popover-arrow {
+    :deep() .v-popper__arrow-container {
       display: none;
     }
 
-    :deep() .popover:focus {
+    :deep() .v-popper:focus {
       outline: 0;
     }
 
diff --git a/shell/components/nav/WindowManager/ContainerLogs.vue b/shell/components/nav/WindowManager/ContainerLogs.vue
index 094ae6d08ad..ab72d64e68a 100644
--- a/shell/components/nav/WindowManager/ContainerLogs.vue
+++ b/shell/components/nav/WindowManager/ContainerLogs.vue
@@ -614,7 +614,7 @@ export default {
               <i class="icon icon-chevron-up" />
             </button>
 
-            <template #popover>
+            <template #popper>
               <div class="filter-popup">
                 <LabeledSelect
                   v-model:value="range"
diff --git a/shell/detail/helm.cattle.io.projecthelmchart.vue b/shell/detail/helm.cattle.io.projecthelmchart.vue
index 0efac1dc615..888fa9a1807 100644
--- a/shell/detail/helm.cattle.io.projecthelmchart.vue
+++ b/shell/detail/helm.cattle.io.projecthelmchart.vue
@@ -166,33 +166,32 @@ export default {
               <div class="meta-title">
                 {{ t('monitoring.tabs.prometheus') }} <i class="icon icon-chevron-down" />
               </div>
-              <template
-                #popover
-                class="resources-status-list"
-              >
-                <ul
-                  class="list-unstyled dropdown"
-                  @click.stop="showMenu(false)"
-                >
-                  <li>
-                    <a
-                      :href="`${value.status.dashboardValues.prometheusURL}/graph`"
-                      target="_blank"
-                    >{{ t('monitoring.overview.linkedList.prometheusPromQl.label') }} <i class="icon icon-external-link" /></a>
-                  </li>
-                  <li>
-                    <a
-                      :href="`${value.status.dashboardValues.prometheusURL}/rules`"
-                      target="_blank"
-                    >{{ t('monitoring.overview.linkedList.prometheusRules.label') }} <i class="icon icon-external-link" /></a>
-                  </li>
-                  <li>
-                    <a
-                      :href="`${value.status.dashboardValues.prometheusURL}/targets`"
-                      target="_blank"
-                    >{{ t('monitoring.overview.linkedList.prometheusTargets.label') }} <i class="icon icon-external-link" /></a>
-                  </li>
-                </ul>
+              <template #popper>
+                <div class="resources-status-list">
+                  <ul
+                    class="list-unstyled dropdown"
+                    @click.stop="showMenu(false)"
+                  >
+                    <li>
+                      <a
+                        :href="`${value.status.dashboardValues.prometheusURL}/graph`"
+                        target="_blank"
+                      >{{ t('monitoring.overview.linkedList.prometheusPromQl.label') }} <i class="icon icon-external-link" /></a>
+                    </li>
+                    <li>
+                      <a
+                        :href="`${value.status.dashboardValues.prometheusURL}/rules`"
+                        target="_blank"
+                      >{{ t('monitoring.overview.linkedList.prometheusRules.label') }} <i class="icon icon-external-link" /></a>
+                    </li>
+                    <li>
+                      <a
+                        :href="`${value.status.dashboardValues.prometheusURL}/targets`"
+                        target="_blank"
+                      >{{ t('monitoring.overview.linkedList.prometheusTargets.label') }} <i class="icon icon-external-link" /></a>
+                    </li>
+                  </ul>
+                </div>
               </template>
             </v-dropdown>
           </div>

From 587fe2dd7a2d58e1d02670da5074919ce1d9549d Mon Sep 17 00:00:00 2001
From: Alexandre Alves <alexandre.alves@suse.com>
Date: Fri, 30 Aug 2024 15:49:17 +0100
Subject: [PATCH 5/9] fixing tooltip

---
 .../src/components/LabeledTooltip/LabeledTooltip.vue             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue b/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
index f93a3035fdc..46e9e1c7aec 100644
--- a/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
+++ b/pkg/rancher-components/src/components/LabeledTooltip/LabeledTooltip.vue
@@ -92,6 +92,7 @@ export default defineComponent({
         z-index: z-index(hoverOverContent);
      }
 
+    // I DON'T THINK iT NEEDS FiXING... I think we delete it... CHECK EDIT->PODS->GENERAL TAB-> PULL SECRETS ::TODO-ALEX
     .tooltip {
         position: absolute;
         width: calc(100% + 2px);

From e2ab4224d93b598629b3ad30775ebf2b8e27d603 Mon Sep 17 00:00:00 2001
From: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>
Date: Fri, 30 Aug 2024 13:05:00 -0700
Subject: [PATCH 6/9] fix set login popper randomly not showing up

---
 shell/mixins/page-actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shell/mixins/page-actions.js b/shell/mixins/page-actions.js
index e03f34ec377..9499677397f 100644
--- a/shell/mixins/page-actions.js
+++ b/shell/mixins/page-actions.js
@@ -13,7 +13,7 @@ export default {
     this.$store.commit('pageActionHandler', pageActionHandler);
   },
 
-  unmounted() {
+  beforeUnmount() {
     if (this.pageActions) {
       this.$store.commit(STORE_PAGE_ACTIONS, []);
     }

From 1016bce378c7205bad66d00d6f9d32e3700bcd61 Mon Sep 17 00:00:00 2001
From: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>
Date: Fri, 30 Aug 2024 14:19:43 -0700
Subject: [PATCH 7/9] fix set login popper not closing

---
 shell/components/nav/Header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index f813c7a2bfa..7a5bce0fe1c 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -295,7 +295,6 @@ export default {
     },
 
     showPageActionsMenu(show) {
-      console.log('METHOD TRIGGERED', show);
       this.isPageActionMenuOpen = show;
     },
 
@@ -619,6 +618,7 @@ export default {
         <i
           data-testid="page-actions-menu"
           class="icon icon-actions"
+          tabindex="0"
           @blur="showPageActionsMenu(false)"
           @click="showPageActionsMenu(true)"
           @focus.capture="showPageActionsMenu(true)"

From c0623cb0b6923ed7d061a390eef3fe1f788abf27 Mon Sep 17 00:00:00 2001
From: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>
Date: Tue, 3 Sep 2024 10:25:56 -0700
Subject: [PATCH 8/9] fix set login popper position and styling

---
 shell/components/nav/Header.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index 7a5bce0fe1c..eda6808753e 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -629,6 +629,9 @@ export default {
           :autoHide="false"
           :flip="false"
           :content="false"
+          :placement="'bottom-end'"
+          :distance="14"
+          :container="'#page-actions'"
         >
           <template #popper>
             <div class="user-menu">
@@ -675,6 +678,7 @@ export default {
           :autoHide="false"
           :flip="false"
           :container="false"
+          :placement="'bottom-end'"
         >
           <div class="user-image text-right hand">
             <img
@@ -1007,7 +1011,7 @@ export default {
         position: relative;
       }
 
-      .user-menu {
+      .user.user-menu {
         padding-top: 9.5px;
       }
 
@@ -1099,6 +1103,12 @@ export default {
     color: var(--secondary);
   }
 
+  #page-actions {
+    :deep() .v-popper__arrow-container {
+      display: none;
+    }
+  }
+
   .user-menu {
     :deep() .v-popper__arrow-container {
       display: none;

From f4a459659b966c3626ac5362e2e212d6fe102c6e Mon Sep 17 00:00:00 2001
From: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>
Date: Tue, 3 Sep 2024 11:21:42 -0700
Subject: [PATCH 9/9] enable some e2e tests

---
 cypress/e2e/tests/pages/manager/cluster-manager.spec.ts     | 2 +-
 cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts   | 2 +-
 cypress/e2e/tests/pages/manager/machine-deployments.spec.ts | 2 +-
 cypress/e2e/tests/pages/manager/machine-sets.spec.ts        | 2 +-
 cypress/e2e/tests/pages/manager/repositories.spec.ts        | 2 +-
 cypress/e2e/tests/pages/users-and-auth/users.spec.ts        | 6 +++---
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/cypress/e2e/tests/pages/manager/cluster-manager.spec.ts b/cypress/e2e/tests/pages/manager/cluster-manager.spec.ts
index 8181b65fbde..3474514e238 100644
--- a/cypress/e2e/tests/pages/manager/cluster-manager.spec.ts
+++ b/cypress/e2e/tests/pages/manager/cluster-manager.spec.ts
@@ -599,7 +599,7 @@ describe('Cluster Manager', { testIsolation: 'off', tags: ['@manager', '@adminUs
     clusterDashboard.waitForPage(undefined, 'cluster-events');
   });
 
-  it.skip('[Vue3 Skip]: can download YAML via bulk actions', () => {
+  it('can download YAML via bulk actions', () => {
     // Delete downloads directory. Need a fresh start to avoid conflicting file names
     cy.deleteDownloadsFolder();
 
diff --git a/cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts b/cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts
index 0e986c8f1c3..acc9d3e1c9b 100644
--- a/cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts
+++ b/cypress/e2e/tests/pages/manager/kontainer-drivers.spec.ts
@@ -174,7 +174,7 @@ describe('Kontainer Drivers', { testIsolation: 'off', tags: ['@manager', '@admin
     createCluster.gridElementExistanceByName(linodeDriver, 'exist');
   });
 
-  it.skip('[Vue3 Skip]: can deactivate drivers in bulk', () => {
+  it('can deactivate drivers in bulk', () => {
     KontainerDriversPagePo.navTo();
     driversPage.waitForPage();
     driversPage.list().details(oracleDriver, 1).should('contain', 'Active');
diff --git a/cypress/e2e/tests/pages/manager/machine-deployments.spec.ts b/cypress/e2e/tests/pages/manager/machine-deployments.spec.ts
index 8de1e7a8927..6e01ca918f6 100644
--- a/cypress/e2e/tests/pages/manager/machine-deployments.spec.ts
+++ b/cypress/e2e/tests/pages/manager/machine-deployments.spec.ts
@@ -140,7 +140,7 @@ describe('MachineDeployments', { testIsolation: 'off', tags: ['@manager', '@admi
     cy.contains(`${ this.machineDeploymentsName }-clone`).should('not.exist');
   });
 
-  it.skip('[Vue3 Skip]: can delete MachineDeployments via bulk actions', function() {
+  it('can delete MachineDeployments via bulk actions', function() {
     MachineDeploymentsPagePo.navTo();
     machineDeploymentsPage.waitForPage();
 
diff --git a/cypress/e2e/tests/pages/manager/machine-sets.spec.ts b/cypress/e2e/tests/pages/manager/machine-sets.spec.ts
index e51e15b0913..42ed441ca42 100644
--- a/cypress/e2e/tests/pages/manager/machine-sets.spec.ts
+++ b/cypress/e2e/tests/pages/manager/machine-sets.spec.ts
@@ -139,7 +139,7 @@ describe('MachineSets', { testIsolation: 'off', tags: ['@manager', '@adminUser']
     cy.contains(`${ this.machineDeploymentsName }-clone`).should('not.exist');
   });
 
-  it.skip('[Vue3 Skip]: can delete MachineSet via bulk actions', function() {
+  it('can delete MachineSet via bulk actions', function() {
     MachineSetsPagePo.navTo();
     machineSetsPage.waitForPage();
 
diff --git a/cypress/e2e/tests/pages/manager/repositories.spec.ts b/cypress/e2e/tests/pages/manager/repositories.spec.ts
index e877502c9b5..e31080d8597 100644
--- a/cypress/e2e/tests/pages/manager/repositories.spec.ts
+++ b/cypress/e2e/tests/pages/manager/repositories.spec.ts
@@ -158,7 +158,7 @@ describe('Cluster Management Helm Repositories', { testIsolation: 'off', tags: [
     repositoriesPage.list().details(`${ this.repoName }ssh`, 1).contains('Active').should('be.visible');
   });
 
-  it.skip('[Vue3 Skip]: can delete repositories via bulk actions', function() {
+  it('can delete repositories via bulk actions', function() {
     ChartRepositoriesPagePo.navTo();
     repositoriesPage.waitForPage();
 
diff --git a/cypress/e2e/tests/pages/users-and-auth/users.spec.ts b/cypress/e2e/tests/pages/users-and-auth/users.spec.ts
index 3984178ec0e..e245df0d4ce 100644
--- a/cypress/e2e/tests/pages/users-and-auth/users.spec.ts
+++ b/cypress/e2e/tests/pages/users-and-auth/users.spec.ts
@@ -186,7 +186,7 @@ describe('Users', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
       viewYaml.mastheadTitle().should('contain', standardUsername);
     });
 
-    it.skip('[Vue3 Skip]: can Download YAML', () => {
+    it('can Download YAML', () => {
       // Download YAML and verify file exists
       const downloadedFilename = path.join(downloadsFolder, `${ standardUsername }.yaml`);
 
@@ -202,7 +202,7 @@ describe('Users', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
       });
     });
 
-    it.skip('[Vue3 Skip]: can Delete user', () => {
+    it('can Delete user', () => {
       // Delete user and verify user is removed from list
       usersPo.goTo();
       usersPo.list().clickRowActionMenuItem(standardUsername, 'Delete');
@@ -217,7 +217,7 @@ describe('Users', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
     });
   });
 
-  describe.skip('[Vue3 Skip]: Bulk Actions', () => {
+  describe('Bulk Actions', () => {
     it('can Deactivate and Activate users', () => {
       // Deactivate user and check state is Inactive
       cy.intercept('PUT', '/v3/users/*').as('updateUsers');