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
-
+
@@ -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 }}
-
+