@rancher/shell 3.0.4 → 3.0.5-rc.2

package/edit/auth/azuread.vue

@@ -363,7 +363,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           provider="azuread"
@@ -388,6 +388,7 @@ export default {
           <label class="reply-url">{{ t('authConfig.azuread.reply.label') }} </label>
           <CopyToClipboardText
             :plain="true"
+            :aria-label="t('authConfig.azuread.reply.ariaLabel')"
             :text="replyUrl"
           />
         </InfoBox>

package/edit/auth/github.vue

@@ -143,7 +143,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           provider="github"

package/edit/auth/googleoauth.vue

@@ -90,7 +90,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           provider="googleoauth"
@@ -143,12 +143,14 @@ export default {
               <b>{{ t('authConfig.googleoauth.steps.1.body.2', {}, true) }}</b> {{ t('authConfig.googleoauth.steps.1.topPrivateDomain', {}, true) }} <CopyToClipboardText
                 :plain="true"
                 :text="tArgs.hostname"
+                :aria-label="t('authConfig.googleoauth.steps.1.ariaLabel.hostname')"
               />
             </li>
             <li>
               <b>{{ t('authConfig.googleoauth.steps.1.body.3', {}, true) }}</b> <CopyToClipboardText
                 :plain="true"
                 :text="serverUrl"
+                :aria-label="t('authConfig.googleoauth.steps.1.ariaLabel.serverUrl')"
               />
             </li>
             <li>{{ t('authConfig.googleoauth.steps.1.body.4', {}, true) }} </li>
@@ -170,12 +172,14 @@ export default {
                   <b>{{ t('authConfig.googleoauth.steps.2.body.2', {}, true) }}</b> <CopyToClipboardText
                     :plain="true"
                     :text="serverUrl"
+                    :aria-label="t('authConfig.googleoauth.steps.1.ariaLabel.serverUrl')"
                   />
                 </li>
                 <li>
                   <b>{{ t('authConfig.googleoauth.steps.2.body.3', {}, true) }}</b> <CopyToClipboardText
                     :plain="true"
                     :text="serverUrl+'/verify-auth'"
+                    :aria-label="t('authConfig.googleoauth.steps.2.ariaLabel.serverUrlVerify')"
                   />
                 </li>
                 <li>{{ t('authConfig.googleoauth.steps.2.body.4', {}, true) }} </li>

package/edit/auth/ldap/index.vue

@@ -99,7 +99,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           :provider="NAME"

package/edit/auth/oidc.vue

@@ -12,6 +12,7 @@ import ArrayList from '@shell/components/form/ArrayList';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
+import { BASE_SCOPES } from '@shell/store/auth';
 
 export default {
   components: {
@@ -50,6 +51,7 @@ export default {
         tokenEndpoint:    null,
         userInfoEndpoint: null,
       },
+      // TODO #13457: this is duplicated due wrong format
       oidcScope: []
     };
   },
@@ -76,9 +78,10 @@ export default {
       }
 
       const { clientId, clientSecret } = this.model;
-      const isValidScope = this.model.id === 'keycloakoidc' || this.oidcScope?.includes('openid');
+      const isMissingAuthEndpoint = (this.requiresAuthEndpoint && !this.model.authEndpoint);
+      const isMissingScopes = !this.requiredScopes.every((scope) => this.oidcScope.includes(scope));
 
-      if ( !isValidScope ) {
+      if (isMissingAuthEndpoint || isMissingScopes) {
         return false;
       }
 
@@ -91,6 +94,19 @@ export default {
 
         return !!(clientId && clientSecret && rancherUrl && issuer);
       }
+    },
+
+    requiresAuthEndpoint() {
+      return ['genericoidc', 'keycloakoidc'].includes(this.model.id);
+    },
+
+    /**
+     * TODO #13457: Refactor scopes to be an array of terms
+     * Return valid scopes
+     * The scopes for given auth provider (model.id) have format of ['scope1 scope2 scope3']
+     */
+    requiredScopes() {
+      return this.model.id ? (BASE_SCOPES[this.model.id] || []) ? (BASE_SCOPES[this.model.id] || [])[0].split(' ') : [] : [];
     }
   },
 
@@ -104,6 +120,7 @@ export default {
     },
 
     'model.enabled'(neu) {
+      // TODO #13457: Refactor scopes to be an array of terms
       // Cover case where oidc gets disabled and we return to the edit screen with a reset model
       if (!neu) {
         this.oidcUrls = {
@@ -114,8 +131,10 @@ export default {
           userInfoEndpoint: null,
         };
         this.customEndpoint.value = false;
+        // TODO #13457: Refactor scopes to be an array of terms
         this.oidcScope = this.model?.scope?.split(' ');
       } else {
+        // TODO #13457: Refactor scopes to be an array of terms
         this.oidcScope = this.model?.scope?.split(' ');
       }
     },
@@ -130,10 +149,16 @@ export default {
 
   methods: {
     updateEndpoints() {
+      const isKeycloak = this.model.id === 'keycloakoidc';
+
       if (!this.oidcUrls.url) {
+        this.model.issuer = '';
+        if (isKeycloak) {
+          this.model.authEndpoint = '';
+        }
+
         return;
       }
-      const isKeycloak = this.model.id === 'keycloakoidc';
 
       const url = this.oidcUrls.url.replaceAll(' ', '');
       const realmsPath = 'realms';
@@ -184,7 +209,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           :provider="NAME"
@@ -201,6 +226,7 @@ export default {
 
         <h3>{{ t(`authConfig.oidc.${NAME}`) }}</h3>
 
+        <!-- Auth credentials -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -222,6 +248,7 @@ export default {
           </div>
         </div>
 
+        <!-- Key/Certificate -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -255,6 +282,7 @@ export default {
           </div>
         </div>
 
+        <!-- Allow group search -->
         <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
@@ -267,6 +295,7 @@ export default {
           </div>
         </div>
 
+        <!-- Scopes -->
         <div class="row mb-20">
           <div class="col span-6">
             <ArrayList
@@ -280,6 +309,7 @@ export default {
           </div>
         </div>
 
+        <!-- Generated vs Specific Endpoints -->
         <div class="row mb-20">
           <div class="col span-6">
             <RadioGroup
@@ -297,6 +327,7 @@ export default {
           </div>
         </div>
 
+        <!-- Generated endpoints -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -320,6 +351,7 @@ export default {
           </div>
         </div>
 
+        <!-- Specific Endpoints -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -350,12 +382,13 @@ export default {
               :label="t(`authConfig.oidc.authEndpoint`)"
               :mode="mode"
               :disabled="!customEndpoint.value"
-              :required="model.id === 'keycloakoidc'"
+              :required="requiresAuthEndpoint"
               data-testid="oidc-auth-endpoint"
             />
           </div>
         </div>
 
+        <!-- Advanced section -->
         <AdvancedSection :mode="mode">
           <div class="row mb-20">
             <div class="col span-6">

package/edit/auth/saml.vue

@@ -223,7 +223,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr>
+        <hr role="none">
 
         <AllowedPrincipals
           :provider="NAME"

package/edit/cloudcredential.vue

@@ -100,6 +100,30 @@ export default {
   computed: {
     rke2Enabled: mapFeature(RKE2_FEATURE),
 
+    hasCustomCloudCredentialComponent() {
+      const driverName = this.driverName;
+
+      return this.$store.getters['type-map/hasCustomCloudCredentialComponent'](driverName);
+    },
+
+    cloudCredentialComponent() {
+      const driverName = this.driverName;
+
+      return this.$store.getters['type-map/importCloudCredential'](driverName);
+    },
+
+    genericCloudCredentialComponent() {
+      return this.$store.getters['type-map/importCloudCredential']('generic');
+    },
+
+    cloudComponent() {
+      if (this.hasCustomCloudCredentialComponent) {
+        return this.cloudCredentialComponent;
+      }
+
+      return this.genericCloudCredentialComponent;
+    },
+
     validationPassed() {
       return this.credCustomComponentValidation && this.nameRequiredValidation;
     },
@@ -112,14 +136,6 @@ export default {
       return this.value?.provider;
     },
 
-    cloudComponent() {
-      if (this.$store.getters['type-map/hasCustomCloudCredentialComponent'](this.driverName)) {
-        return this.$store.getters['type-map/importCloudCredential'](this.driverName);
-      }
-
-      return this.$store.getters['type-map/importCloudCredential']('generic');
-    },
-
     // array of id, label, description, initials for type selection step
     secretSubTypes() {
       const out = [];
@@ -194,7 +210,6 @@ export default {
   },
 
   methods: {
-
     createValidationChanged(passed) {
       this.credCustomComponentValidation = passed;
     },

package/edit/logging.banzaicloud.io.output/__tests__/logging.banzaicloud.io.output.test.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Banzai from '@shell/edit/logging.banzaicloud.io.output/index.vue';
+import { createStore } from 'vuex';
 
 const outputSchema = {
   id:    'logging.banzaicloud.io.output',
@@ -109,16 +110,26 @@ describe('view: logging.banzaicloud.io.output', () => {
     ['http://localhost:3100', []],
     ['not a proper URL', ['logging.loki.urlInvalid']],
   ])('should validate Loki URL on save', (url, expectation) => {
+    const store = createStore({
+      getters: {
+        namespaces:          () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const wrapper = mount(Banzai, {
       data:  () => ({ selectedProvider: 'loki' }),
       props: {
         value: {
-          save: jest.fn(),
-          spec: { loki: { url } }
+          save:          jest.fn(),
+          setAnnotation: jest.fn(),
+          spec:          { loki: { url } },
+          metadata:      {},
         }
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $fetchState: { pending: false },
           $store:      {
             dispatch: jest.fn(),
@@ -149,16 +160,26 @@ describe('view: logging.banzaicloud.io.output', () => {
   });
 
   it('should load the default YAML data for output buffer config (from schema) in a CREATE scenario', async() => {
+    const store = createStore({
+      getters: {
+        namespaces:          () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const wrapper = mount(Banzai, {
       data:  () => ({ selectedProvider: 'awsElasticsearch' }),
       props: {
         value: {
-          save: jest.fn(),
-          spec: {}
+          save:          jest.fn(),
+          setAnnotation: jest.fn(),
+          spec:          {},
+          metadata:      {},
         }
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $fetchState: { pending: false },
           $store:      {
             dispatch(arg: any) {
@@ -230,16 +251,26 @@ describe('view: logging.banzaicloud.io.output', () => {
   });
 
   it('should load current output buffer config in an EDIT scenario', async() => {
+    const store = createStore({
+      getters: {
+        namespaces:          () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const wrapper = mount(Banzai, {
       data:  () => ({ selectedProvider: 'awsElasticsearch' }),
       props: {
         value: {
-          save: jest.fn(),
-          spec: { awsElasticsearch: { buffer: '#chunk_limit_records: int' } }
+          save:          jest.fn(),
+          setAnnotation: jest.fn(),
+          spec:          { awsElasticsearch: { buffer: '#chunk_limit_records: int' } },
+          metadata:      {}
         }
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $fetchState: { pending: false },
           $store:      {
             dispatch(arg: any) {

package/edit/management.cattle.io.user.vue

@@ -15,6 +15,8 @@ export default {
     ChangePassword, GlobalRoleBindings, CruResource, LabeledInput, Loading
   },
 
+  emits: ['update:mode'],
+
   mixins: [
     CreateEditView
   ],
@@ -40,6 +42,7 @@ export default {
         roles:        !showGlobalRoles,
         rolesChanged: false,
       },
+      watchOverride: false,
     };
   },
 
@@ -115,7 +118,11 @@ export default {
         this.$router.replace({ name: this.doneRoute });
         buttonDone(true);
       } catch (err) {
-        this.errors = exceptionToErrorsArray(err);
+        if (err?.message?.includes('errors due to escalation')) {
+          this.errors = [this.t('rbac.errors.escalation')];
+        } else {
+          this.errors = exceptionToErrorsArray(err);
+        }
         buttonDone(false);
       }
     },
@@ -150,7 +157,7 @@ export default {
 
       const normanUser = await this.$store.dispatch('rancher/find', {
         type: NORMAN.USER,
-        id:   this.value.id,
+        id:   this.value.id || this.user?.id,
       });
 
       // Save change of password
@@ -181,8 +188,25 @@ export default {
     },
 
     async updateRoles(userId) {
-      if (this.$refs.grb) {
+      if (!this.$refs.grb) {
+        return;
+      }
+
+      try {
         await this.$refs.grb.save(userId);
+      } catch (err) {
+        if (this.isCreate) {
+          this.watchOverride = true;
+          this.$emit(
+            'update:mode',
+            {
+              userId,
+              mode:     _EDIT,
+              resource: 'management.cattle.io.user',
+            }
+          );
+        }
+        throw err;
       }
     }
   }
@@ -255,6 +279,7 @@ export default {
         :user-id="value.id || liveValue.id"
         :mode="mode"
         :real-mode="realMode"
+        :watch-override="watchOverride"
         type="user"
         @hasChanges="validation.rolesChanged = $event"
         @canLogIn="validation.roles = $event"

package/edit/namespace.vue

@@ -11,7 +11,6 @@ import Tab from '@shell/components/Tabbed/Tab';
 import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
 import CruResource from '@shell/components/CruResource';
 import { PROJECT_ID, _VIEW, FLAT_VIEW, _CREATE } from '@shell/config/query-params';
-import MoveModal from '@shell/components/MoveModal';
 import ResourceQuota from '@shell/components/form/ResourceQuota/Namespace';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_TYPES, RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
@@ -31,8 +30,7 @@ export default {
     PodSecurityAdmission,
     ResourceQuota,
     Tab,
-    ResourceTabs,
-    MoveModal
+    ResourceTabs
   },
 
   mixins:       [CreateEditView],
@@ -277,6 +275,5 @@ export default {
         />
       </Tab>
     </ResourceTabs>
-    <MoveModal v-if="projects" />
   </CruResource>
 </template>

package/edit/networking.k8s.io.ingress/IngressClass.vue

@@ -5,6 +5,7 @@ import { get, set, remove } from '@shell/utils/object';
 
 export default {
   components: { LabeledSelect },
+  emits:      ['update:value'],
   props:      {
     value: {
       type:    Object,
@@ -37,13 +38,16 @@ export default {
   },
   methods: {
     update(e) {
-      if (!e || e.label === this.t('generic.none')) {
+      if (!e || e === '' || e.label === this.t('generic.none')) {
         remove(this.value, 'spec.ingressClassName');
         this.ingressClassName = '';
+        this.$emit('update:value', this.value);
       } else {
         // when a user manually types an ingress class name, the event emitted has a 'label' but no 'value'
-        this.ingressClassName = e.value ? e.value : e.label;
+        this.ingressClassName = e.label || e;
         set(this.value, 'spec.ingressClassName', this.ingressClassName);
+
+        this.$emit('update:value', this.value);
       }
     }
   }
@@ -59,7 +63,7 @@ export default {
       :label="t('ingress.ingressClass.label')"
       :options="ingressClassOptions"
       option-label="label"
-      @selecting="update"
+      @update:value="update"
     />
   </div>
 </template>

package/edit/networking.k8s.io.ingress/__tests__/IngressClass.test.ts

@@ -0,0 +1,58 @@
+import { shallowMount } from '@vue/test-utils';
+import IngressClass from '@shell/edit/networking.k8s.io.ingress/IngressClass.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { _EDIT } from '@shell/config/query-params';
+
+jest.mock('@shell/components/form/LabeledSelect', () => ({
+  name:     'LabeledSelect',
+  template: '<div></div>',
+  props:    ['value', 'taggable', 'searchable', 'mode', 'label', 'options', 'optionLabel'],
+  emits:    ['update:value'],
+}));
+
+describe('ingressClass.vue', () => {
+  it('renders correctly', () => {
+    const wrapper = shallowMount(IngressClass, {
+      props: {
+        value:          {},
+        ingressClasses: [],
+        mode:           _EDIT,
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.findComponent(LabeledSelect).exists()).toBe(true);
+  });
+
+  it('updates ingressClassName correctly', async() => {
+    const wrapper = shallowMount(IngressClass, {
+      props: {
+        value:          {},
+        ingressClasses: [{ label: 'nginx', value: 'nginx' }],
+        mode:           _EDIT,
+      },
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'nginx');
+
+    expect(wrapper.vm.ingressClassName).toBe('nginx');
+    expect(wrapper.props('value').spec.ingressClassName).toBe('nginx');
+    expect(wrapper.emitted()['update:value']).toBeTruthy();
+  });
+
+  it('removes ingressClassName when none is selected', async() => {
+    const wrapper = shallowMount(IngressClass, {
+      props: {
+        value:          { spec: { ingressClassName: 'nginx' } },
+        ingressClasses: [{ label: 'nginx', value: 'nginx' }],
+        mode:           _EDIT,
+      },
+    });
+
+    await wrapper.findComponent(LabeledSelect).vm.$emit('update:value', '');
+
+    expect(wrapper.vm.ingressClassName).toBe('');
+    expect(wrapper.props('value').spec.ingressClassName).toBeUndefined();
+    expect(wrapper.emitted()['update:value']).toBeTruthy();
+  });
+});

package/edit/persistentvolume/__tests__/persistentvolume.test.ts

@@ -9,7 +9,13 @@ describe('view: PersistentVolume', () => {
     };
     const resource = 'PersistentVolume';
     const wrapper = mount(PersistentVolume as ExtendedVue<Vue, {}, {}, {}, PersistentVolume>, {
-      props: { value: { spec: { } } },
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          spec:          {},
+          metadata:      {},
+        }
+      },
 
       global: {
         mocks: {
@@ -54,7 +60,13 @@ describe('view: PersistentVolume', () => {
     const plugin = 'csi';
     const resource = 'PersistentVolume';
     const wrapper = mount(PersistentVolume as ExtendedVue<Vue, {}, {}, {}, PersistentVolume>, {
-      props:  { value: { spec: { [plugin]: { value: plugin } } } },
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          spec:          { [plugin]: { value: plugin } },
+          metadata:      {},
+        }
+      },
       global: {
         mocks: {
           $store: {

package/edit/provisioning.cattle.io.cluster/CustomCommand.vue

@@ -260,7 +260,10 @@ export default {
       />
 
       <template v-if="cluster.supportsWindows">
-        <hr class="mt-20 mb-20">
+        <hr
+          class="mt-20 mb-20"
+          role="none"
+        >
         <h4 v-t="'cluster.custom.registrationCommand.windowsDetail'" />
         <Banner
           v-if="readyForWindows"