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/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'); 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); 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; } diff --git a/shell/assets/styles/global/_tooltip.scss b/shell/assets/styles/global/_tooltip.scss index 4ce40138f97..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; + &[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); } } @@ -138,44 +113,35 @@ } } -.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 index dc4467cb2d9..098d549be68 100644 --- a/shell/components/ActionDropdown.vue +++ b/shell/components/ActionDropdown.vue @@ -82,7 +82,7 @@ export default { Button -