@rancher/shell 3.0.5-rc.9 → 3.0.5

package/assets/translations/en-us.yaml

@@ -478,6 +478,12 @@ addProjectMemberDialog:
   title: Add Project Member
 
 authConfig:
+  slo:
+    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
   accessMode:
     label: 'Configure who should be able to login and use {vendor}'
     required: Restrict access to only the authorized users & groups
@@ -627,11 +633,6 @@ 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-----
@@ -698,6 +699,9 @@ authConfig:
         title: Are you sure? This update is irreversible.
         body: '<p><b>You may need to make some additional changes</b>. Please ensure the Azure AD app has the Directory.Read.All <b>Application</b> permission added to Microsoft Graph.<br> If any endpoints were customized while configuring Azure AD authentication in Rancher, they will not be automatically updated. </p>'
   oidc:
+    endSessionEndpoint: 
+      title: End Session Endpoint
+      tooltip: Provider specific URL used for logging a user out of their session
     genericoidc: Configure an OIDC account
     keycloakoidc: Configure a Keycloak OIDC account
     cognito: Configure an Amazon Cognito account
@@ -7566,6 +7570,8 @@ model:
       saml: SAML
       oauth: OAuth
       oidc: OIDC
+      keycloakoidc: Keycloak
+      genericoidc: OIDC provider
       cognito: Amazon Cognito
     name:
       keycloak: Keycloak (SAML)

package/components/PodSecurityAdmission.vue

@@ -222,6 +222,7 @@ export default defineComponent({
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"
+          :mode="mode"
           :data-testid="componentTestid + '--psaControl-' + i + '-active'"
           :label="level"
           :label-key="`podSecurityAdmission.labels.${ level }`"
@@ -281,6 +282,7 @@ export default defineComponent({
         <span class="col span-2">
           <Checkbox
             v-model:value="psaExemptionsControl.active"
+            :mode="mode"
             :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-active'"
             :label="dimension"
             :label-key="`podSecurityAdmission.labels.${ dimension }`"

package/components/form/ProjectMemberEditor.vue

@@ -286,6 +286,7 @@ export default {
       <template v-slot:body>
         <RadioGroup
           v-model:value="value.permissionGroup"
+          :mode="mode"
           data-testid="permission-options"
           :options="options"
           name="permission-group"
@@ -301,6 +302,7 @@ export default {
           >
             <Checkbox
               v-model:value="permission.value"
+              :mode="mode"
               :data-testid="`custom-permission-${i}`"
               :disabled="permission.locked"
               class="mb-5"

package/components/nav/Header.vue

@@ -29,6 +29,7 @@ import {
   RcDropdownSeparator,
   RcDropdownTrigger
 } from '@components/RcDropdown';
+import { SLO_AUTH_PROVIDERS } from '@shell/store/auth';
 
 export default {
 
@@ -99,10 +100,10 @@ export default {
       'showWorkspaceSwitcher'
     ]),
 
-    samlAuthProviderEnabled() {
+    sloAuthProviderEnabled() {
       const publicAuthProviders = this.$store.getters['rancher/all']('authProvider');
 
-      return publicAuthProviders.find((authProvider) => configType[authProvider.id] === 'saml') || {};
+      return publicAuthProviders.find((authProvider) => SLO_AUTH_PROVIDERS.includes(configType[authProvider?.id])) || {};
     },
 
     shouldShowSloLogoutModal() {
@@ -111,7 +112,7 @@ export default {
         return false;
       }
 
-      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = this.samlAuthProviderEnabled;
+      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = this.sloAuthProviderEnabled;
 
       return logoutAllSupported && logoutAllEnabled && !logoutAllForced;
     },
@@ -276,8 +277,8 @@ export default {
     showSloModal() {
       this.$store.dispatch('management/promptModal', {
         component:      'SloDialog',
-        componentProps: { authProvider: this.samlAuthProviderEnabled },
-        modalWidth:     '500px'
+        componentProps: { authProvider: this.sloAuthProviderEnabled },
+        modalWidth:     '600px'
       });
     },
     // Sizes the product area of the header such that it shrinks to ensure the whole header bar can be shown

package/config/store.js

@@ -39,6 +39,7 @@ let store = {};
   resolveStoreModules(require('../store/customisation.js'), 'customisation.js');
   resolveStoreModules(require('../store/cru-resource.ts'), 'cru-resource.ts');
   resolveStoreModules(require('../store/notifications.ts'), 'notifications.ts');
+  resolveStoreModules(require('../store/cookies.ts'), 'cookies.ts');
 
   // If the environment supports hot reloading...
 
@@ -69,6 +70,7 @@ let store = {};
       '../store/customisation.js',
       '../store/cru-resource.ts',
       '../store/notifications.ts',
+      '../store/cookies.ts',
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules();

package/dialog/SloDialog.vue

@@ -17,7 +17,7 @@ export default {
 
   computed: {
     name() {
-      return this.authProvider?.nameDisplay;
+      return this.t(`model.authConfig.provider."${ this.authProvider?.id }"`);
     }
   },
 

package/edit/auth/oidc.vue

@@ -1,7 +1,7 @@
 <script>
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
-import AuthConfig from '@shell/mixins/auth-config';
+import AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
 import CruResource from '@shell/components/CruResource';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import FileSelector from '@shell/components/form/FileSelector';
@@ -15,6 +15,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { BASE_SCOPES } from '@shell/store/auth';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
+import isUrl from 'is-url';
 
 export default {
   components: {
@@ -33,6 +34,8 @@ export default {
     CopyToClipboardText,
   },
 
+  emits: ['validationChanged'],
+
   mixins: [CreateEditView, AuthConfig],
 
   data() {
@@ -56,7 +59,8 @@ export default {
         userInfoEndpoint: null,
       },
       // TODO #13457: this is duplicated due wrong format
-      oidcScope: []
+      oidcScope: [],
+      SLO_OPTION_VALUES
     };
   },
 
@@ -89,6 +93,11 @@ export default {
         return false;
       }
 
+      // make sure that if SLO options are enabled on radio group, field "endSessionEndpoint" is required
+      if (this.isLogoutAllSupported && this.sloEndSessionEndpointUiEnabled && (!this.model.endSessionEndpoint || !isUrl(this.model.endSessionEndpoint))) {
+        return false;
+      }
+
       if (this.isAmazonCognito) {
         const { issuer } = this.model;
 
@@ -129,10 +138,36 @@ export default {
 
     isAmazonCognito() {
       return this.model?.id === 'cognito';
+    },
+
+    isLogoutAllSupported() {
+      return this.model?.logoutAllSupported;
+    },
+
+    sloOptions() {
+      return [
+        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.slo.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.slo.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.slo.sloOptions.choose') },
+      ];
+    },
+
+    sloTypeText() {
+      const sloOptionSelected = this.sloOptions.find((item) => item.value === this.sloType);
+
+      return sloOptionSelected?.label || '';
+    },
+
+    sloEndSessionEndpointUiEnabled() {
+      return this.sloType === SLO_OPTION_VALUES.all || this.sloType === SLO_OPTION_VALUES.both;
     }
   },
 
   watch: {
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
+    },
+
     'oidcUrls.url'() {
       this.updateEndpoints();
     },
@@ -166,6 +201,25 @@ export default {
       if (!old && neu) {
         this.customEndpoint.value = !this.oidcUrls.url && !!this.model.issuer;
       }
+    },
+
+    // sloType is defined on shell/mixins/auth-config.js
+    sloType(neu) {
+      switch (neu) {
+      case SLO_OPTION_VALUES.rancher:
+        this.model.logoutAllEnabled = false;
+        this.model.logoutAllForced = false;
+        this.model.endSessionEndpoint = '';
+        break;
+      case SLO_OPTION_VALUES.all:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = true;
+        break;
+      case SLO_OPTION_VALUES.both:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = false;
+        break;
+      }
     }
   },
 
@@ -224,11 +278,19 @@ export default {
           :edit="goToEdit"
         >
           <template #rows>
-            <tr><td>{{ t(`authConfig.oidc.rancherUrl`) }}: </td><td>{{ model.rancherUrl }}</td></tr>
-            <tr><td>{{ t(`authConfig.oidc.clientId`) }}: </td><td>{{ model.clientId }}</td></tr>
-            <tr><td>{{ t(`authConfig.oidc.issuer`) }}: </td><td>{{ model.issuer }}</td></tr>
+            <tr><td>{{ t('authConfig.oidc.rancherUrl') }}: </td><td>{{ model.rancherUrl }}</td></tr>
+            <tr><td>{{ t('authConfig.oidc.clientId') }}: </td><td>{{ model.clientId }}</td></tr>
+            <tr><td>{{ t('authConfig.oidc.issuer') }}: </td><td>{{ model.issuer }}</td></tr>
             <tr v-if="model.authEndpoint">
-              <td>{{ t(`authConfig.oidc.authEndpoint`) }}: </td><td>{{ model.authEndpoint }}</td>
+              <td>{{ t('authConfig.oidc.authEndpoint') }}: </td><td>{{ model.authEndpoint }}</td>
+            </tr>
+            <tr v-if="isLogoutAllSupported">
+              <td>{{ t('authConfig.slo.sloTitle') }}: </td><td>{{ sloTypeText }}</td>
+            </tr>
+            <tr v-if="isLogoutAllSupported && sloEndSessionEndpointUiEnabled">
+              <td>
+                {{ t('authConfig.oidc.endSessionEndpoint.title') }}:
+              </td><td>{{ model.endSessionEndpoint }}</td>
             </tr>
           </template>
         </AuthBanner>
@@ -494,6 +556,44 @@ export default {
             </div>
           </div>
         </template>
+
+        <!-- SLO logout -->
+        <div
+          v-if="isLogoutAllSupported"
+          class="mt-40 mb-20"
+        >
+          <div class="row">
+            <div class="col span-12">
+              <h3>{{ t('authConfig.slo.sloTitle') }}</h3>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-4">
+              <RadioGroup
+                v-model:value="sloType"
+                :mode="mode"
+                :options="sloOptions"
+                :disabled="!model.logoutAllSupported"
+                name="sloTypeRadio"
+              />
+            </div>
+          </div>
+          <div
+            v-if="sloEndSessionEndpointUiEnabled"
+            class="row mt-20"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.endSessionEndpoint"
+                :tooltip="t('authConfig.oidc.endSessionEndpoint.tooltip')"
+                :label="t('authConfig.oidc.endSessionEndpoint.title')"
+                :mode="mode"
+                required
+                data-testid="oidc-endSessionEndpoint"
+              />
+            </div>
+          </div>
+        </div>
       </template>
     </CruResource>
   </div>

package/edit/auth/saml.vue

@@ -73,9 +73,9 @@ export default {
 
     sloOptions() {
       return [
-        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.saml.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
-        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.saml.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
-        { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.saml.sloOptions.choose') },
+        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.slo.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.slo.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.slo.sloOptions.choose') },
       ];
     },
 
@@ -175,7 +175,7 @@ export default {
             <tr><td>{{ t(`authConfig.saml.api`) }}: </td><td>{{ model.rancherApiHost }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.groups`) }}: </td><td>{{ model.groupsField }}</td></tr>
             <tr v-if="isLogoutAllSupported">
-              <td>{{ t(`authConfig.saml.sloTitle`) }}: </td><td>{{ sloTypeText }}</td>
+              <td>{{ t(`authConfig.slo.sloTitle`) }}: </td><td>{{ sloTypeText }}</td>
             </tr>
           </template>
 
@@ -357,7 +357,7 @@ export default {
         >
           <div class="row">
             <div class="col span-12">
-              <h3>{{ t('authConfig.saml.sloTitle') }}</h3>
+              <h3>{{ t('authConfig.slo.sloTitle') }}</h3>
             </div>
           </div>
           <div class="row">

package/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest.vue

@@ -41,6 +41,7 @@ export default {
     <YamlEditor
       ref="yaml-additional"
       v-model:value="additionalManifest"
+      :mode="mode"
       :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
       initial-yaml-values="# Additional Manifest YAML"
       class="yaml-editor"

package/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig.vue

@@ -99,6 +99,7 @@ export default {
         ref="yaml-values"
         data-testid="addon-yaml-editor"
         :value="initYamlEditor(addonVersion.name)"
+        :mode="mode"
         :scrolling="true"
         :as-object="true"
         :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"

package/edit/provisioning.cattle.io.cluster/tabs/Basics.vue

@@ -493,6 +493,7 @@ export default {
         />
         <Checkbox
           :value="showDeprecatedPatchVersions"
+          :mode="mode"
           :label="t('cluster.kubernetesVersion.deprecatedPatches')"
           :tooltip="t('cluster.kubernetesVersion.deprecatedPatchWarning')"
           class="patch-version"

package/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue

@@ -165,6 +165,7 @@ export default {
       <LabeledInput
         v-if="!config.skipSSLVerify"
         v-model:value="config.endpointCA"
+        :mode="mode"
         type="multiline"
         :label="t('cluster.rke2.etcd.s3config.endpointCA.label')"
         :placeholder="ccData.defaultEndpointCA"

package/edit/provisioning.cattle.io.cluster/tabs/registries/index.vue

@@ -78,6 +78,7 @@ export default {
     <div class="row">
       <Checkbox
         :value="showCustomRegistryInput"
+        :mode="mode"
         :label="t('cluster.privateRegistry.label')"
         data-testid="registries-enable-checkbox"
         @update:value="$emit('custom-registry-changed', $event)"
@@ -90,6 +91,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           :value="registryHost"
+          :mode="mode"
           label-key="catalog.chart.registry.custom.inputLabel"
           placeholder-key="catalog.chart.registry.custom.placeholder"
           :min-height="30"

package/edit/provisioning.cattle.io.cluster/tabs/upgrade/DrainOptions.vue

@@ -102,6 +102,7 @@ export default {
       <div class="mt-20">
         <Checkbox
           v-model:value="deleteEmptyDirData"
+          :mode="mode"
           label-key="cluster.rke2.drain.deleteEmptyDir.label"
           tooltip-key="cluster.rke2.drain.deleteEmptyDir.tooltip"
           @update:value="update"
@@ -110,6 +111,7 @@ export default {
       <div>
         <Checkbox
           v-model:value="force"
+          :mode="mode"
           label="Delete standalone pods"
           label-key="cluster.rke2.drain.force.label"
           tooltip="Delete standalone pods which are not managed by a Workload controller (Deployment, Job, etc).  Draining will fail if this is not set and there are standalone pods."
@@ -120,12 +122,14 @@ export default {
       <div>
         <Checkbox
           v-model:value="customGracePeriod"
+          :mode="mode"
           label-key="cluster.rke2.drain.gracePeriod.checkboxLabel"
           @update:value="update"
         />
         <UnitInput
           v-if="customGracePeriod"
           v-model:value="gracePeriod"
+          :mode="mode"
           label-key="cluster.rke2.drain.gracePeriod.inputLabel"
           :suffix="t('suffix.seconds', {count: timeout})"
           class="mb-10"
@@ -135,12 +139,14 @@ export default {
       <div>
         <Checkbox
           v-model:value="customTimeout"
+          :mode="mode"
           label-key="cluster.rke2.drain.timeout.checkboxLabel"
           @update:value="update"
         />
         <UnitInput
           v-if="customTimeout"
           v-model:value="timeout"
+          :mode="mode"
           label-key="cluster.rke2.drain.timeout.inputLabel"
           :suffix="t('suffix.seconds', {count: timeout})"
           class="drain-timeout"

package/initialize/install-plugins.js

@@ -12,7 +12,6 @@ import i18n from '@shell/plugins/i18n';
 import globalFormatters from '@shell/plugins/global-formatters';
 
 import axios from '@shell/utils/axios';
-import cookieUniversal from '@shell/utils/cookie-universal';
 import config from '@shell/utils/config';
 import axiosShell from '@shell/plugins/axios';
 import codeMirror from '@shell/plugins/codemirror-loader';
@@ -47,7 +46,7 @@ export async function installPlugins(vueApp) {
 }
 
 export async function installInjectedPlugins(app, vueApp) {
-  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie, internalApiPlugin];
+  const pluginDefinitions = [config, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie, internalApiPlugin];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {
@@ -64,7 +63,6 @@ export async function installInjectedPlugins(app, vueApp) {
   // If there's any performance reasons this can be done concurrently with all of the installation promises above but I felt it was organizationally better to keep both i18n items together.
   await app.store.dispatch('i18n/init');
 
-  // Order matters here. This is coming after the other plugins specifically so $cookies can be installed. i18n/init relies on prefs/get which relies on $cookies.
   vueApp.use(i18n, { store: app.store });
 }
 

package/mixins/__tests__/auth-config.test.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import authConfigMixin from '@shell/mixins/auth-config';
-
+import childHook from '@shell/mixins/child-hook';
+//
 describe('mixin: authConfigMixin', () => {
   describe('method: save', () => {
     const componentMock = (model: any) => ({
@@ -11,10 +12,7 @@ describe('mixin: authConfigMixin', () => {
       computed: { principal: () => ({ me: {} }) },
       global:   {
         mocks: {
-          $store: {
-            dispatch: () => model,
-            commit:   () => ({ 'auth/loggedInAs': jest.fn() }),
-          },
+          $store: { dispatch: () => model },
           $route: {
             params: { id: '123' },
             query:  { mode: 'edit' },
@@ -24,7 +22,7 @@ describe('mixin: authConfigMixin', () => {
     });
     const FakeComponent = {
       render() {},
-      mixins:  [authConfigMixin],
+      mixins:  [authConfigMixin, childHook],
       methods: { applyHooks: jest.fn() },
     };
 

package/mixins/__tests__/chart.test.ts

@@ -235,7 +235,7 @@ describe('chartMixin', () => {
       expect(wrapper.vm.action).toStrictEqual({
         name: 'downgrade',
         tKey: 'downgrade',
-        icon: 'icon-history',
+        icon: 'icon-downgrade-alt',
       });
     });
   });

package/mixins/auth-config.js

@@ -1,7 +1,7 @@
 import { _EDIT } from '@shell/config/query-params';
 import { NORMAN, MANAGEMENT } from '@shell/config/types';
 import { AFTER_SAVE_HOOKS, BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
-import { BASE_SCOPES } from '@shell/store/auth';
+import { BASE_SCOPES, SLO_AUTH_PROVIDERS } from '@shell/store/auth';
 import { addObject, findBy } from '@shell/utils/array';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import difference from 'lodash/difference';
@@ -30,6 +30,10 @@ export default {
     }
   },
 
+  created() {
+    this.registerAfterHook(this.updateAuthProviders, 'force-update-auth-providers');
+  },
+
   async fetch() {
     await this.mixinFetch();
   },
@@ -88,6 +92,23 @@ export default {
   },
 
   methods: {
+    updateAuthProviders() {
+      // we need to forcefully re-fetch the authProviders list so that we can update the logout method
+      // this is to satisfy the SLO usecase where after setting an auth provider the logout method
+      // wasn't being updated because the resource is not watchable
+      this.$store.dispatch('auth/getAuthProviders', { force: true });
+    },
+
+    setSloType(selectedModel) {
+      if (!selectedModel.logoutAllEnabled && !selectedModel.logoutAllForced) {
+        this.sloType = SLO_OPTION_VALUES.rancher;
+      } else if (selectedModel.logoutAllEnabled && selectedModel.logoutAllForced) {
+        this.sloType = SLO_OPTION_VALUES.all;
+      } else if (selectedModel.logoutAllEnabled && !selectedModel.logoutAllForced) {
+        this.sloType = SLO_OPTION_VALUES.both;
+      }
+    },
+
     async mixinFetch() {
       this.authConfigName = this.$route.params.id;
 
@@ -115,20 +136,16 @@ export default {
       if (this.model.openLdapConfig) {
         this.showLdap = true;
       }
-      if (this.value.configType === 'saml') {
+
+      // Logic for Single Logout/SLO for auth providers
+      if (this.value?.configType && SLO_AUTH_PROVIDERS.includes(this.value?.configType)) {
         if (!this.model.rancherApiHost || !this.model.rancherApiHost.length) {
           this.model['rancherApiHost'] = this.serverUrl;
         }
 
         // setting data for SLO
         if (this.model && Object.keys(this.model).includes('logoutAllSupported')) {
-          if (!this.model.logoutAllEnabled && !this.model.logoutAllForced) {
-            this.sloType = SLO_OPTION_VALUES.rancher;
-          } else if (this.model.logoutAllEnabled && this.model.logoutAllForced) {
-            this.sloType = SLO_OPTION_VALUES.all;
-          } else if (this.model.logoutAllEnabled && !this.model.logoutAllForced) {
-            this.sloType = SLO_OPTION_VALUES.both;
-          }
+          this.setSloType(this.model);
         }
       }
 
@@ -220,7 +237,7 @@ export default {
               addObject(this.model.allowedPrincipalIds, this.principal.id);
             }
             // Session has switched to new 'me', ensure we react
-            this.$store.commit('auth/loggedInAs', this.principal.id);
+            this.$store.dispatch('auth/loggedInAs', this.principal.id);
           } else {
             console.warn(`Unable to find principal marked as 'me'`); // eslint-disable-line no-console
           }
@@ -292,6 +309,12 @@ export default {
         // must be cancelling edit of an enabled config; reset any changes and return to add users/groups view for that config
         this.$store.dispatch(`rancher/clone`, { resource: this.originalModel }).then((cloned) => {
           this.model = cloned;
+
+          // reset SLO type (radio option)
+          if (cloned && Object.keys(cloned).includes('logoutAllSupported')) {
+            this.setSloType(cloned);
+          }
+
           this.editConfig = false;
         });
       }

package/mixins/chart.js

@@ -247,7 +247,7 @@ export default {
       }
 
       return {
-        name: 'downgrade', tKey: 'downgrade', icon: 'icon-history'
+        name: 'downgrade', tKey: 'downgrade', icon: 'icon-downgrade-alt'
       };
     },
 

package/models/management.cattle.io.cluster.js

@@ -278,7 +278,7 @@ export default class MgmtCluster extends SteveModel {
 
   // Color to use as the underline for the icon in the app bar
   get iconColor() {
-    return this.metadata?.annotations[CLUSTER_BADGE.COLOR];
+    return this.metadata?.annotations?.[CLUSTER_BADGE.COLOR];
   }
 
   // Custom badge to show for the Cluster (if the appropriate annotations are set)

package/models/workload.js

@@ -43,7 +43,7 @@ export default class Workload extends WorkloadService {
       insertAt(out, 0, {
         action:  'toggleRollbackModal',
         label:   this.t('action.rollback'),
-        icon:    'icon icon-history',
+        icon:    'icon icon-downgrade-alt',
         enabled: !!this.links.update,
       });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.5-rc.9",
+  "version": "3.0.5",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/auth/login.vue

@@ -134,7 +134,8 @@ export default {
   },
 
   async fetch() {
-    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
+    const cookie = this.$store.getters['cookies/get']({ key: USERNAME, options: { parseJSON: false } });
+    const username = cookie || '';
 
     this.username = username;
     this.remember = !!username;
@@ -272,15 +273,19 @@ export default {
         }
 
         if ( this.remember ) {
-          this.$cookies.set(USERNAME, this.username, {
+          const options = {
             encode:   (x) => x,
             maxAge:   86400 * 365,
             path:     '/',
             sameSite: true,
             secure:   true,
+          };
+
+          this.$store.commit('cookies/set', {
+            key: USERNAME, value: this.username, options
           });
         } else {
-          this.$cookies.remove(USERNAME);
+          this.$store.commit('cookies/remove', { key: USERNAME });
         }
 
         // User logged with local login - we don't do any redirect/reload, so the boot-time plugin will not run again to laod the plugins

package/pages/auth/logout.vue

@@ -1,19 +1,20 @@
 <script>
 import { configType } from '@shell/models/management.cattle.io.authconfig';
+import { SLO_AUTH_PROVIDERS } from '@shell/store/auth';
 
 export default {
   async fetch() {
     const publicAuthProviders = await this.$store.dispatch('auth/getAuthProviders');
 
-    const samlAuthProvider = publicAuthProviders.find((authProvider) => configType[authProvider.id] === 'saml');
+    const sloAuthProvider = publicAuthProviders.find((authProvider) => SLO_AUTH_PROVIDERS.includes(configType[authProvider?.id]));
 
-    if (!!samlAuthProvider) {
-      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = samlAuthProvider;
+    if (!!sloAuthProvider) {
+      const { logoutAllSupported, logoutAllEnabled, logoutAllForced } = sloAuthProvider;
 
       if (logoutAllSupported && logoutAllEnabled && logoutAllForced) {
-        // SAML - force SLO (logout from all apps)
+        // force SLO (logout from all apps)
         await this.$store.dispatch('auth/logout', {
-          force: true, slo: true, provider: samlAuthProvider
+          force: true, slo: true, provider: sloAuthProvider
         }, { root: true });
       } else {
         // simple logout

package/pages/c/_cluster/explorer/tools/__tests__/index.test.ts

@@ -117,7 +117,7 @@ describe('page: cluster tools', () => {
       });
       expect(actions[2]).toStrictEqual({
         label:  'catalog.tools.action.downgrade',
-        icon:   'icon-history',
+        icon:   'icon-downgrade-alt',
         action: 'downgrade'
       });
       expect(actions[3]).toStrictEqual({ divider: true });

package/pages/c/_cluster/explorer/tools/index.vue

@@ -158,7 +158,7 @@ export default {
         if (currentIndex !== -1 && currentIndex < versions.length - 1) {
           actions.push({
             label:  this.t('catalog.tools.action.downgrade'),
-            icon:   'icon-history',
+            icon:   'icon-downgrade-alt',
             action: 'downgrade',
           });
         }

package/plugins/axios.js

@@ -2,13 +2,14 @@ import https from 'https';
 import { CSRF } from '@shell/config/cookies';
 
 export default function({
-  $axios, $cookies, isDev, req
+  $axios, store, isDev, req
 }) {
   $axios.defaults.headers.common['Accept'] = 'application/json';
   $axios.defaults.withCredentials = true;
 
   $axios.onRequest((config) => {
-    const csrf = $cookies.get(CSRF, { parseJSON: false });
+    const options = { parseJSON: false };
+    const csrf = store.getters['cookies/get']({ key: CSRF, options });
 
     if ( csrf ) {
       config.headers['x-api-csrf'] = csrf;

package/plugins/ember-cookie.js

@@ -1,13 +1,17 @@
 import { REDIRECTED } from '@shell/config/cookies';
 
-export default function({ $cookies }) {
+export default function({ store }) {
   // This tells Ember not to redirect back to us once you've already been to dashboard once.
   // TODO: Remove this once the ember portion of the app is no longer needed
-  if ( !$cookies.get(REDIRECTED) ) {
-    $cookies.set(REDIRECTED, 'true', {
+  if ( !store.getters['cookies/get']({ key: REDIRECTED })) {
+    const options = {
       path:     '/',
       sameSite: true,
       secure:   true,
+    };
+
+    store.commit('cookies/set', {
+      key: REDIRECTED, value: 'true', options
     });
   }
 }

package/plugins/steve/subscribe.js

@@ -369,13 +369,15 @@ const sharedActions = {
       if (!this.$workers[getters.storeName]) {
         await createWorker(this, ctx);
       }
+      const options = { parseJSON: false };
+      const csrf = rootGetters['cookies/get']({ key: CSRF, options });
 
       // if the worker is in advanced mode then it'll contain it's own socket which it calls a 'watcher'
       this.$workers[getters.storeName].postMessage({
         createWatcher: {
           metadata,
-          url:  `${ state.config.baseUrl }/subscribe`,
-          csrf: this.$cookies.get(CSRF, { parseJSON: false }),
+          url: `${ state.config.baseUrl }/subscribe`,
+          csrf,
           maxTries
         }
       });

package/scripts/test-plugins-build.sh

@@ -239,7 +239,6 @@ function clone_repo_test_extension_build() {
 clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
 clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
 clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
-clone_repo_test_extension_build "rancher" "capi-ui-extension" "capi"
 clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
 clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
 

package/store/__tests__/cookies.test.ts

@@ -0,0 +1,72 @@
+import cookieStore from '../cookies';
+
+// Mock cookie-universal
+const mockCookie = {
+  get:                  jest.fn(),
+  set:                  jest.fn(),
+  remove:               jest.fn(),
+  getAll:               jest.fn(),
+  addChangeListener:    jest.fn(),
+  removeChangeListener: jest.fn()
+};
+
+jest.mock('cookie-universal', () => {
+  return jest.fn(() => mockCookie);
+});
+
+describe('store: cookies', () => {
+  let state: any;
+
+  beforeEach(() => {
+    state = cookieStore.state();
+    // Reset mocks before each test
+    mockCookie.get.mockClear();
+    mockCookie.set.mockClear();
+    mockCookie.remove.mockClear();
+  });
+
+  describe('getters', () => {
+    it('get should call cookies.get with the correct parameters', () => {
+      const { getters } = cookieStore;
+      const key = 'test-key';
+      const options = { from: 'server' };
+
+      getters.get(state, {}, {}, {})({ key, options });
+      expect(mockCookie.get).toHaveBeenCalledWith(key, options);
+    });
+  });
+
+  describe('mutations', () => {
+    it('set should call cookies.set with the correct parameters', () => {
+      const { mutations } = cookieStore;
+      const key = 'test-key';
+      const value = { data: 'test-value' };
+      const options = { path: '/' };
+
+      mutations.set(state, {
+        key, value, options
+      });
+      expect(mockCookie.set).toHaveBeenCalledWith(key, value, options);
+    });
+
+    it('remove should call cookies.remove with the correct key', () => {
+      const { mutations } = cookieStore;
+      const key = 'test-key';
+
+      mutations.remove(state, { key });
+      expect(mockCookie.remove).toHaveBeenCalledWith(key);
+    });
+  });
+
+  describe('state', () => {
+    it('should return a cookies object', () => {
+      expect(state.cookies).toBeDefined();
+    });
+  });
+
+  describe('namespaced', () => {
+    it('should be namespaced', () => {
+      expect(cookieStore.namespaced).toBe(true);
+    });
+  });
+});

package/store/auth.js

@@ -8,6 +8,13 @@ import { removeEmberPage } from '@shell/utils/ember-page';
 import { randomStr } from '@shell/utils/string';
 import { addParams, parse as parseUrl, removeParam } from '@shell/utils/url';
 
+// configuration for Single Logout/SLO
+// admissable auth providers compatible with SLO, based on shell/models/management.cattle.io.authconfig "configType"
+export const SLO_AUTH_PROVIDERS = ['oidc', 'saml'];
+
+// this is connected to the redirect url, for which the logic can be found in "shell/store/auth"
+const SLO_TOKENS_ENDPOINT_LOGOUT_RES_BASETYPE = ['authConfigLogoutOutput'];
+
 export const BASE_SCOPES = {
   github:       ['read:org'],
   googleoauth:  ['openid profile email'],
@@ -85,8 +92,6 @@ export const mutations = {
   loggedInAs(state, principalId) {
     state.loggedIn = true;
     state.principalId = principalId;
-
-    this.$cookies.remove(KEY);
   },
 
   loggedOut(state) {
@@ -136,10 +141,18 @@ export const actions = {
     commit('initialPass', pass);
   },
 
-  getAuthProviders({ dispatch }) {
+  getAuthProviders({ dispatch }, opt) {
+    let force = false;
+
+    if (opt?.force) {
+      force = true;
+    }
+
     return dispatch('rancher/findAll', {
       type: 'authProvider',
-      opt:  { url: `/v3-public/authProviders`, watch: false }
+      opt:  {
+        url: `/v3-public/authProviders`, watch: false, force
+      }
     }, { root: true });
   },
 
@@ -183,13 +196,17 @@ export const actions = {
    * Save nonce details. Information it contains will be used to validate auth requests/responses
    * Note - this may be structurally different than the nonce we encode and send
    */
-  saveNonce(ctx, opt) {
+  saveNonce({ commit }, opt) {
     const strung = JSON.stringify(opt);
 
-    this.$cookies.set(KEY, strung, {
+    const options = {
       path:     '/',
       sameSite: true,
       secure:   true,
+    };
+
+    commit('cookies/set', {
+      key: KEY, value: strung, options
     });
 
     return strung;
@@ -265,8 +282,8 @@ export const actions = {
     }
   },
 
-  verifyOAuth({ dispatch }, { nonce, code, provider }) {
-    const expectJSON = this.$cookies.get(KEY, { parseJSON: false });
+  verifyOAuth({ dispatch, rootGetters }, { nonce, code, provider }) {
+    const expectJSON = rootGetters['cookies/get']({ key: KEY, options: { parseJSON: false } });
     let parsed;
 
     try {
@@ -351,6 +368,12 @@ export const actions = {
     }
   },
 
+  loggedInAs({ commit }, principalId) {
+    commit('loggedInAs', principalId);
+
+    commit('cookies/remove', { key: KEY });
+  },
+
   uiLogout({ commit, dispatch }) {
     removeEmberPage();
 
@@ -398,8 +421,8 @@ export const actions = {
         redirectUnauthorized: false,
       }, { root: true });
 
-      // Single-sign logout for SAML providers that allow for it
-      if (res.baseType === 'samlConfigLogoutOutput' && res.idpRedirectUrl) {
+      // Single-sign logout redirect for SLO compatible auth providers
+      if (SLO_TOKENS_ENDPOINT_LOGOUT_RES_BASETYPE.includes(res.baseType) && res.idpRedirectUrl) {
         window.location.href = res.idpRedirectUrl;
 
         return;

package/store/cookies.ts

@@ -0,0 +1,30 @@
+import { MutationTree, GetterTree, ActionTree } from 'vuex';
+import Cookie, { ICookie, ICookieGetOpts } from 'cookie-universal';
+
+type State = { cookies: ICookie };
+const options = { parseJSON: true };
+const state = (): State => ({ cookies: Cookie(undefined, undefined, options.parseJSON) });
+
+const getters: GetterTree<State, any> = {
+  get(state) {
+    return ({ key, options }: {key: string, options?: ICookieGetOpts}) => state.cookies.get(key, options);
+  }
+};
+const mutations: MutationTree<State> = {
+  set(state, { key, value, options }) {
+    return state.cookies.set(key, value, options);
+  },
+
+  remove(state, { key }) {
+    return state.cookies.remove(key);
+  },
+};
+const actions: ActionTree<State, any> = {};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+};

package/store/prefs.js

@@ -289,12 +289,16 @@ export const actions = {
     commit('load', { key, value });
 
     if ( definition.asCookie ) {
-      const opt = {
+      const options = {
         ...cookieOptions,
         parseJSON: definition.parseJSON === true
       };
 
-      this.$cookies.set(`${ cookiePrefix }${ key }`.toUpperCase(), value, opt);
+      const computedKey = `${ cookiePrefix }${ key }`.toUpperCase();
+
+      commit('cookies/set', {
+        key: computedKey, value, options
+      }, { root: true });
     }
 
     if ( definition.asUserPreference ) {
@@ -336,7 +340,7 @@ export const actions = {
     await dispatch('set', { key: THEME, value: val });
   },
 
-  loadCookies({ state, commit }) {
+  loadCookies({ state, commit, rootGetters }) {
     if ( state.cookiesLoaded ) {
       return;
     }
@@ -348,8 +352,9 @@ export const actions = {
         continue;
       }
 
-      const opt = { parseJSON: definition.parseJSON === true };
-      const value = this.$cookies.get(`${ cookiePrefix }${ key }`.toUpperCase(), opt);
+      const options = { parseJSON: definition.parseJSON === true };
+      const computedKey = `${ cookiePrefix }${ key }`.toUpperCase();
+      const value = rootGetters['cookies/get']({ key: computedKey, options });
 
       if (value !== undefined) {
         commit('load', { key, value });

package/types/shell/index.d.ts

@@ -3601,9 +3601,10 @@ export namespace actions {
     function setTheme({ dispatch }: {
         dispatch: any;
     }, val: any): Promise<void>;
-    function loadCookies({ state, commit }: {
+    function loadCookies({ state, commit, rootGetters }: {
         state: any;
         commit: any;
+        rootGetters: any;
     }): void;
     function loadTheme({ dispatch }: {
         dispatch: any;
@@ -3850,16 +3851,6 @@ declare function _default(context: any, inject: any): void;
 export default _default;
 }
 
-// @shell/utils/cookie-universal
-
-declare module '@shell/utils/cookie-universal' {
-declare function _default({ req, res }: {
-    req: any;
-    res: any;
-}, inject: any): void;
-export default _default;
-}
-
 // @shell/utils/create-yaml
 
 declare module '@shell/utils/create-yaml' {

package/utils/auth.js

@@ -263,7 +263,7 @@ export async function tryInitialSetup(store, password = 'admin') {
  */
 export async function isLoggedIn(store, userData) {
   store.commit('auth/hasAuth', true);
-  store.commit('auth/loggedInAs', userData.id);
+  store.dispatch('auth/loggedInAs', userData.id);
 
   // Init the notification center now that we know who the user is
   await store.dispatch('notifications/init', userData);

package/utils/cookie-universal.js

@@ -1,10 +0,0 @@
-import cookieUniversal from 'cookie-universal';
-
-export default ({ req, res }, inject) => {
-  const options = {
-    alias:     'cookies',
-    parseJSON: true
-  };
-
-  inject(options.alias, cookieUniversal(req, res, options.parseJSON));
-};