@rancher/shell 2.0.1 → 3.0.0-rc.2

package/assets/styles/base/_variables.scss

@@ -7,6 +7,7 @@ $max-width: 1440px !default;
 $min-width: 75% !default;
 $input-height: 61px;
 $unlabeled-input-height: 40px;
+$unlabaled-select-padding: 3px 0;
 
 $input-padding-lg: 18px;
 $input-padding-sm: 10px;

package/assets/styles/global/_labeled-input.scss

@@ -24,6 +24,7 @@
     color: var(--input-label);
     pointer-events: none;
     width: calc(100% - 20px);
+
     i {
       pointer-events: initial;
     }
@@ -43,7 +44,8 @@
     color: var(--error);
   }
 
-  INPUT, SELECT {
+  INPUT,
+  SELECT {
     position: relative;
     font-size: 14px;
     display: block;
@@ -59,9 +61,15 @@
     user-select: none;
   }
 
-  INPUT, INPUT:hover, INPUT:focus,
-  TEXTAREA, TEXTAREA:hover, TEXTAREA:focus,
-  SELECT, SELECT:hover, SELECT:focus {
+  INPUT,
+  INPUT:hover,
+  INPUT:focus,
+  TEXTAREA,
+  TEXTAREA:hover,
+  TEXTAREA:focus,
+  SELECT,
+  SELECT:hover,
+  SELECT:focus {
     border: none;
     background-color: transparent;
     outline: 0;
@@ -74,18 +82,19 @@
     }
   }
 
-  &.view > DIV:not(.addon) {
+  &.view>DIV:not(.addon) {
     font-size: 14px;
     padding: $input-padding-lg 0 0 0;
 
     &.no-label {
-      padding-top:0px;
+      padding-top: 0px;
     }
   }
 
   &.create,
   &.edit,
   &.view {
+
     .addon,
     .addon.btn {
       display: table-cell;
@@ -110,15 +119,16 @@
     padding-right: 8px;
   }
 
-  &.suffix.has-tooltip INPUT {
+  &.suffix.v-popper--has-tooltip INPUT {
     width: calc(100% - 30px);
   }
 
-  &.suffix.has-tooltip INPUT {
+  &.suffix.v-popper--has-tooltip INPUT {
     width: calc(100% - 30px);
   }
 
-  .cron-label, .sub-label {
+  .cron-label,
+  .sub-label {
     position: absolute;
     top: 100%;
     width: 100%;
@@ -128,10 +138,11 @@
     pointer-events: initial;
   }
 
-  .validation-message, .sub-label.validation-message {
+  .validation-message,
+  .sub-label.validation-message {
     color: var(--error);
   }
 
 
 
-}
+}

package/assets/styles/global/_layout.scss

@@ -119,15 +119,15 @@ HEADER {
 }
 
 .localeSelector {
-  ::v-deep .popover-inner {
+  :deep(.v-popper__inner) {
     padding: 50px 0;
   }
 
-  ::v-deep .popover-arrow {
+  :deep(.v-popper__arrow-container) {
     display: none;
   }
 
-  ::v-deep .popover:focus {
+  :deep(.v-popper:focus) {
     outline: 0;
   }
 
@@ -152,4 +152,4 @@ HEADER {
   opacity: 1;
 }
 
-// !END
+// !END

package/assets/styles/global/_select.scss

@@ -142,7 +142,7 @@
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   color: var(--input-text);
-  padding: 3px 0;
+  padding: $unlabaled-select-padding;
 
   .vs--single .vs__selected-options {
     flex-wrap: nowrap;

package/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,43 +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.
@@ -192,6 +159,6 @@
 }
 
 //icon tooltip
-.icon-info.has-tooltip {
+.icon-info.v-popper--has-tooltip {
   font-size: 14px;
-}
+}

package/assets/translations/en-us.yaml

@@ -507,6 +507,11 @@ authConfig:
     UID: UID Field
     adfs: Configure an AD FS account
     api: '{vendor} API Host'
+    sloTitle: Log Out behavior
+    sloOptions:
+      onlyRancher: Log out of Rancher and not {name}
+      logoutAll: Log out of Rancher and {name} (includes all other applications registered with {name})
+      choose: Allow the user to choose one of the above in an additional log out step
     cert:
       label: Certificate
       placeholder: Paste in the certificate, starting with -----BEGIN CERTIFICATE-----
@@ -1782,7 +1787,9 @@ cluster:
     rke2-k3-reprovisioning: 'Making changes to cluster configuration may result in nodes reprovisioning. For more information see the <a href="{docsBase}/how-to-guides/new-user-guides/launch-kubernetes-with-rancher/rke1-vs-rke2-differences#cluster-api" target="_blank" rel="noopener nofollow">documentation</a>.'
     desiredNodeGroupWarning: There are 0 nodes available to run the cluster agent. The cluster will not become active until at least one node is available.
     haveArgInfo: Configuration information is not available for the selected Kubernetes version.  The options available on this screen will be limited; you may want to use the YAML editor.
-    cloudProviderAddConfig: 'On Kubernetes 1.27 or greater, the Amazon Cloud Provider requires additional configuration. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/amazon" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
+    cloudProviderAddConfig: 'On Kubernetes 1.27 or greater, the <b>Amazon</b> Cloud Provider requires additional configuration. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/amazon" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
+    cloudProviderUnsupportedAzure: 'On Kubernetes 1.30 or greater, the <b>Azure</b> Cloud Provider has been removed. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/azure" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
+    cloudProviderMigrateAzure: 'On Kubernetes 1.30 or greater, the <b>Azure</b> Cloud Provider has been removed. To upgrade Kubernetes, the cluster should be migrated to External provider first.<br> See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/azure" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
     machinePoolError: |-
       {count, plural,
         =1 { {pool_name}: The provided value for {fields} was not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
@@ -3263,6 +3270,7 @@ login:
   welcome: Welcome to {vendor}
   loggedOut: You have been logged out.
   loggedOutFromSso: You've been logged out of Rancher, however you may still be logged in to your single sign-on identity provider.
+  loggedOutFromSlo: You've been logged out of Rancher and from your single sign-on identity provider.
   loginAgain: Log in again to continue.
   serverError:
     authFailedCreds: "Logging in failed: Check credentials, or your account may not be authorized to log in."
@@ -3287,6 +3295,10 @@ login:
 
 logout:
   message: Logging Out...
+  error: 'An error occurred logging out: {msg}'
+  specificError:
+    unknown: Unknown.\n\nPlease contact your system administrator.
+    500: "Server-side error.\n\nPlease contact your system administrator."
 
 managementNode:
   customName: Custom Name
@@ -4646,6 +4658,15 @@ promptScaleMachineDown:
   retainedMachine1: At least one Machine must exist for roles Control Plane and Etcd.
   retainedMachine2: <b>{ name }</b> will remain
 
+promptSlo:
+  title: "Log out"
+  text: "Log out of only Rancher, or all {name} applications."
+  rancher:
+    active: Only log out of Rancher
+  all:
+    active: Log out of {name}
+    waiting: Logging Out
+
 promptRemove:
   title: Are you sure?
   andOthers: |-
@@ -7402,7 +7423,7 @@ performance:
       When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable incremental loading
     inputLabel: Resource Threshold
-    incompatibleDescription: "Incremental Loading is incomaptible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
+    incompatibleDescription: "Incremental Loading is incompatible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
   manualRefresh:
     label: Manual Refresh
     setting: You can configure a threshold above which manual refresh will be enabled.
@@ -7411,7 +7432,7 @@ performance:
       When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable manual refresh of data for lists
     inputLabel: Resource Threshold
-    incompatibleDescription: "Manual Refresh is incomaptible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
+    incompatibleDescription: "Manual Refresh is incompatible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
   websocketNotification:
     label: Websocket Notifications
     description: |-
@@ -7442,7 +7463,7 @@ performance:
     label: Require Namespace / Project Filtering
     description: Require the user to select namespaces and/or projects. This restricts the number of resources fetched when viewing lists and should help the responsiveness of the UI in systems with a lot of resources.
     checkboxLabel: Enable Required Namespace / Project Filtering
-    incompatibleDescription: "Required Namespace / Project Filtering is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
+    incompatibleDescription: "Required Namespace / Project Filtering is incompatible with Manual Refresh and Incremental Loading. Enabling this will disable them."
   advancedWorker:
     label: Websocket Web Worker
     description: Updates to resources pushed to the UI come via WebSocket and are handled in the UI thread. Enable this option to handle cluster WebSocket updates in a Web Worker in a separate thread. This should help the responsiveness of the UI in systems where resources change often.
@@ -7459,7 +7480,7 @@ performance:
     description: By default Lists will fetch all resources and paginate in the browser (create the page given sorting and filtering settings). Change this setting to enable pagination server-side. This should help the responsiveness of the UI in systems with a lot of resources.
     checkboxLabel: Enable Server-side Pagination
     applicable: "This applies to the following resource types"
-    incompatibleDescription: "Server-side Pagination is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
+    incompatibleDescription: "Server-side Pagination is incompatible with Manual Refresh and Incremental Loading. Enabling this will disable them."
     featureFlag: The&nbsp;<a href="{ffUrl}">Feature Flag</a>&nbsp;`ui-sql-cache` must be enabled to use this feature
     resources:
       generic: most resources in the cluster's 'More Resources' section

package/chart/__tests__/S3.test.ts

@@ -1,13 +1,10 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import S3 from '@shell/chart/rancher-backup/S3';
 import Vuex from 'vuex';
 
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
 describe('rancher-backup: S3', () => {
   const mockStore = {
     getters: {
@@ -17,7 +14,10 @@ describe('rancher-backup: S3', () => {
       'cluster/paginationEnabled': () => false
     }
   };
-  const wrapper = mount(S3, { mocks: { $store: mockStore, $fetchState: { pending: false } } });
+  const wrapper = mount(S3, {
+    plugins: [Vuex],
+    global:  { mocks: { $store: mockStore, $fetchState: { pending: false } } }
+  });
 
   it('should emit invalid when form is not filled', () => {
     expect(wrapper.emitted('valid')).toHaveLength(1);
@@ -25,8 +25,6 @@ describe('rancher-backup: S3', () => {
   });
 
   it('should emit valid when required fields are filled', async() => {
-    const bucketName = wrapper.find('[data-testid="S3-bucketName"]').find('input');
-    const endpoint = wrapper.find('[data-testid="S3-endpoint"]').find('input');
     const testCases = [
       {
         bucketNameInput: 'val',
@@ -41,16 +39,25 @@ describe('rancher-backup: S3', () => {
     ];
 
     for (const testCase of testCases) {
-      bucketName.setValue(testCase.bucketNameInput);
-      endpoint.setValue(testCase.endpointInput);
-      await wrapper.vm.$nextTick();
+      wrapper.setProps({
+        value: {
+          bucketName: testCase.bucketNameInput,
+          endpoint:   testCase.endpointInput
+        }
+      });
+
+      await nextTick();
       expect(wrapper.emitted('valid')).toHaveLength(1);
       expect(wrapper.emitted('valid')![0][0]).toBe(false);
     }
 
-    bucketName.setValue('val1');
-    endpoint.setValue('val2');
-    await wrapper.vm.$nextTick();
+    wrapper.setProps({
+      value: {
+        bucketName: 'val1',
+        endpoint:   'val2'
+      }
+    });
+    await nextTick();
     expect(wrapper.emitted('valid')).toHaveLength(2);
     expect(wrapper.emitted('valid')![1][0]).toBe(true);
   });

package/chart/example.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <template>
-  <LabeledInput v-model="value.foo" />
+  <LabeledInput v-model:value="value.foo" />
 </template>

package/chart/gatekeeper.vue

@@ -30,7 +30,7 @@ export default {
       set(values) {
         const crdInfo = this.autoInstallInfo.find((info) => info.chart.name.includes('crd'));
 
-        this.$set(crdInfo, 'allValues', values);
+        crdInfo['allValues'] = values;
       }
     }
   }
@@ -41,7 +41,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <UnitInput
-          v-model="value.auditInterval"
+          v-model:value="value.auditInterval"
           :label="t('gatekeeperInstall.auditInterval')"
           :suffix="t('suffix.seconds', {count: value.auditInterval})"
         />
@@ -50,7 +50,7 @@ export default {
     <div class="row mt-10">
       <div class="col span-6">
         <UnitInput
-          v-model="value.constraintViolationsLimit"
+          v-model:value="value.constraintViolationsLimit"
           :label="t('gatekeeperInstall.constraintViolationsLimit')"
           :suffix="t('gatekeeperIndex.violations')"
         />
@@ -61,7 +61,7 @@ export default {
       <!-- gatekeeper versions <1.0.2 do not have this option -->
       <Checkbox
         v-if="crdValues.enableRuntimeDefaultSeccompProfile ||crdValues.enableRuntimeDefaultSeccompProfile === false"
-        v-model="crdValues.enableRuntimeDefaultSeccompProfile"
+        v-model:value="crdValues.enableRuntimeDefaultSeccompProfile"
         :label="t('gatekeeperInstall.runtimeDefaultSeccompProfile')"
       />
     </template>

package/chart/istio.vue

@@ -104,7 +104,7 @@ export default {
 
   methods: {
     update() {
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
 
     valuesChanged(value) {
@@ -147,9 +147,9 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.cni.enabled"
+          v-model:value="value.cni.enabled"
           :label="t('istio.cni')"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -157,7 +157,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.ingressGateways.enabled"
+          v-model:value="value.ingressGateways.enabled"
           :label="t('istio.ingressGateway')"
         />
       </div>
@@ -166,7 +166,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.egressGateways.enabled"
+          v-model:value="value.egressGateways.enabled"
           :label="t('istio.egressGateway')"
         />
       </div>
@@ -177,7 +177,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.pilot.enabled"
+          v-model:value="value.pilot.enabled"
           :label="t('istio.pilot')"
           :disabled="value.kiali && value.kiali.enabled"
         />
@@ -187,7 +187,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.policy.enabled"
+          v-model:value="value.policy.enabled"
           :label="t('istio.policy')"
         />
       </div>
@@ -196,7 +196,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.telemetry.enabled"
+          v-model:value="value.telemetry.enabled"
           :label="t('istio.telemetry')"
         />
       </div>
@@ -207,9 +207,9 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.kiali.enabled"
+          v-model:value="value.kiali.enabled"
           :label="t('istio.kiali')"
-          @input="changeKiali"
+          @update:value="changeKiali"
         />
       </div>
       <div
@@ -217,7 +217,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.tracing.enabled"
+          v-model:value="value.tracing.enabled"
           :label="t('istio.tracing')"
         />
       </div>