Merge pull request #11771 from aalves08/11684-popover-fix

Fix Vue3: Popover regressions in header
rancher · Sep 5, 2024 · 7d6201c · 7d6201c
2 parents 9316481 + 297431b
commit 7d6201c
Show file tree

Hide file tree

Showing 25 changed files with 148 additions and 169 deletions.
diff --git 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
@@ -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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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');

diff --git 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);

diff --git 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;
   }
 

diff --git 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,175 +7,141 @@
   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;
+  &[data-popper-placement^="top"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      bottom: -4px;
-    }
-
-    margin-bottom: $triangle-size;
-
-    .tooltip-arrow {
-      bottom: -$triangle-inner-size;
-
-      &: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;
+  &[data-popper-placement^="bottom"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      top: -$triangle-inner-size;
-
-      &: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;
+  &[data-popper-placement^="left"] {
+    .v-popper__arrow-container {
 
-    .tooltip-arrow {
-      right: -$triangle-inner-size;
-
-      &: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);
         }
       }
     }
   }
 }
 
-.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;
     border-radius: var(--border-radius);
     box-shadow: 0 5px 20px var(--shadow);
+    border: none;
 
     a {
       color: var(--popover-text);
     }
   }
 
-  .popover-arrow {
+  .v-popper__arrow-container {
     border-color: transparent;
   }
-
-  &[x-placement^="bottom"] {
-    .popover-arrow {
-      &:after {
-        // border-bottom-color: var(--popover-bg);
-        border-bottom-width: 0;
-      }
-    }
-  }
-
 }
 
-.v-popover {
+.v-popper {
   display: inline;
 }
 
-.tooltip,
-.popover {
+.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
     // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.

diff --git 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
@@ -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;"