dashboard-shell-shell 1.0.122 → 1.0.1000000081

package/edit/auth/__tests__/oidc.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
-import { mount } from '@vue/test-utils';
+import { mount, type VueWrapper } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 
 import oidc from '@shell/edit/auth/oidc.vue';
@@ -32,120 +32,194 @@ const mockModel = {
 };
 
 describe('oidc.vue', () => {
-  let wrapper: any;
-  const requiredSetup = () => ({
-    data() {
-      return {
-        isEnabling:     false,
-        editConfig:     false,
-        model:          { ...mockModel },
-        serverSetting:  null,
-        errors:         [],
-        originalModel:  null,
-        principals:     [],
-        authConfigName: 'oidc',
-      };
-    },
-    global: {
-      mocks: {
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            currentStore:              () => 'current_store',
-            'current_store/schemaFor': jest.fn(),
-            'current_store/all':       jest.fn(),
-            'i18n/t':                  (val: string) => val,
-            'i18n/exists':             jest.fn(),
+  describe('given default valid values', () => {
+    let wrapper: VueWrapper<any, any>;
+    const requiredSetup = () => ({
+      data() {
+        return {
+          isEnabling:     false,
+          editConfig:     false,
+          model:          { ...mockModel },
+          serverSetting:  null,
+          errors:         [],
+          originalModel:  null,
+          principals:     [],
+          authConfigName: 'oidc',
+        } as any; // any is necessary as in pre-existing tests we are including inherited mixins values
+      },
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $store:      {
+            getters: {
+              currentStore:              () => 'current_store',
+              'current_store/schemaFor': jest.fn(),
+              'current_store/all':       jest.fn(),
+              'i18n/t':                  (val: string) => val,
+              'i18n/exists':             jest.fn(),
+            },
+            dispatch: jest.fn()
           },
-          dispatch: jest.fn()
+          $route:  { query: { AS: '' }, params: { id: 'oicd' } },
+          $router: { applyQuery: jest.fn() },
         },
-        $route:  { query: { AS: '' }, params: { id: 'oicd' } },
-        $router: { applyQuery: jest.fn() },
       },
-    },
-    props: {
-      value: { applicationSecret: '' },
-      mode:  _EDIT,
-    },
-  });
+      props: {
+        value: { applicationSecret: '' },
+        mode:  _EDIT,
+      },
+    });
 
-  beforeEach(() => {
-    wrapper = mount(oidc, { ...requiredSetup() });
-  });
-  afterEach(() => {
-    wrapper.unmount();
-  });
+    beforeEach(() => {
+      wrapper = mount(oidc, { ...requiredSetup() });
+    });
 
-  it('have "Create" button enabled when provider is enabled and not editing config', async() => {
-    wrapper.setData({ model: { enabled: true }, editConfig: false });
-    await nextTick();
+    afterEach(() => {
+      wrapper.unmount();
+    });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    describe('have "Create" button disabled', () => {
+      it('given missing Auth endpoint URL', () => {
+        wrapper.vm.model.authEndpoint = '';
+        wrapper.vm.model.scopes = 'openid profile email'; // set scope to be sure
+        wrapper.vm.oidcScope = ['openid', 'profile', 'email']; // TODO #13457: this is duplicated due wrong format of scopes
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button disabled when provider is disabled and editing config before fields are filled in', async() => {
-    wrapper.setData({ model: {}, editConfig: true });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('given missing required basic scopes', () => {
+        wrapper.vm.model.authEndpoint = 'whatever'; // set auth endpoint to be sure
+        wrapper.vm.model.scopes = 'something else'; // set wrong scope
+        wrapper.vm.oidcScope = ['something', 'else']; // TODO #13457: this is duplicated due wrong format of scopes
 
-    expect(saveButton.disabled).toBe(true);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button disabled when provider is disabled and editing config after required fields and scope is missing openid', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('when provider is disabled and editing config before fields are filled in', async() => {
+        wrapper.setData({ model: {}, editConfig: true });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(true);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button enabled when customEndpoint is disabled and required fields are filled in', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm }, oidcScope: validScope.split(' ') });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('when provider is disabled and editing config after required fields and scope is missing openid', async() => {
+        wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button enabled when customEndpoint is enabled and required fields are filled in', async() => {
-    wrapper.setData({ customEndpoint: { value: true }, oidcScope: validScope.split(' ') });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    describe('have "Create" button enabled', () => {
+      it('when customEndpoint is disabled and required fields are filled in', async() => {
+        wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm }, oidcScope: validScope.split(' ') });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl } });
-    await nextTick();
+        expect(saveButton.disabled).toBe(false);
+      });
 
-    expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
+      it('when customEndpoint is enabled and required fields are filled in', async() => {
+        wrapper.setData({ customEndpoint: { value: true }, oidcScope: validScope.split(' ') });
+        await nextTick();
 
-    wrapper.setData({ oidcUrls: { realm: validRealm } });
-    await nextTick();
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-    expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
-  });
+        expect(saveButton.disabled).toBe(false);
+      });
 
-  it('`groupSearchEnabled` defaults to false', async() => {
-    const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+      it('when provider is enabled and not editing config', async() => {
+        wrapper.setData({ model: { enabled: true }, editConfig: false });
+        await nextTick();
 
-    expect(groupSearchCheckbox.isVisible()).toBe(true);
-    expect(wrapper.vm.model.groupSearchEnabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+    });
+
+    it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
+      wrapper.setData({ oidcUrls: { url: validUrl } });
+      await nextTick();
+
+      expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
+
+      wrapper.setData({ oidcUrls: { realm: validRealm } });
+      await nextTick();
+
+      expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
+    });
+
+    it('`groupSearchEnabled` defaults to false', async() => {
+      const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+
+      expect(groupSearchCheckbox.isVisible()).toBe(true);
+      expect(wrapper.vm.model.groupSearchEnabled).toBe(false);
+    });
+
+    it('`groupSearchEnabled` updates when checkbox is clicked', async() => {
+      const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+
+      await groupSearchCheckbox.find('[role="checkbox"]').trigger('click');
+
+      expect(groupSearchCheckbox.isVisible()).toBe(true);
+      expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
+    });
+
+    it('changing URL should update issuer and auth-endpoint if Keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      const newUrl = 'whatever';
+
+      await wrapper.find(`[data-testid="oidc-url"]`).setValue(newUrl);
+      await wrapper.vm.$nextTick();
+
+      const issuerValue = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpointValue = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+
+      expect(issuerValue).toBe(`${ newUrl }/realms/`);
+      expect(endpointValue).toBe(`${ newUrl }/realms//protocol/openid-connect/auth`);
+    });
+
+    it('changing realm should update issuer and auth-endpoint if Keycloak', async() => {
+      const newRealm = 'newRealm';
+      const oldUrl = 'oldUrl';
+
+      wrapper.vm.model.id = 'keycloakoidc';
+      wrapper.vm.oidcUrls.url = oldUrl;
+
+      await wrapper.find(`[data-testid="oidc-realm"]`).setValue(newRealm);
+      await wrapper.vm.$nextTick();
+
+      const issuerValue = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpointValue = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+
+      expect(issuerValue).toBe(`${ oldUrl }/realms/${ newRealm }`);
+      expect(endpointValue).toBe(`${ oldUrl }/realms/${ newRealm }/protocol/openid-connect/auth`);
+    });
 
-  it('`groupSearchEnabled` updates when checkbox is clicked', async() => {
-    const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+    it('clear URL should clear issuer and auth-endpoint if Keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      const newUrl = 'whatever';
+      const urlInput = wrapper.find(`[data-testid="oidc-url"]`);
 
-    await groupSearchCheckbox.find('[role="checkbox"]').trigger('click');
+      await urlInput.setValue(newUrl);
+      await wrapper.vm.$nextTick();
+      await urlInput.setValue('');
+      await wrapper.vm.$nextTick();
+      const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
 
-    expect(groupSearchCheckbox.isVisible()).toBe(true);
-    expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
+      expect(issuer).toBe('');
+      expect(endpoint).toBe('');
+    });
   });
 });

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/__tests__/config.test.ts

@@ -2,20 +2,6 @@ import { mount } from '@vue/test-utils';
 import LDAPConfig from '@shell/edit/auth/ldap/config.vue';
 
 describe('lDAP config', () => {
-  it.each([
-    'openldap', 'freeipa'
-  ])('should display searchUsingServiceAccount checkbox if type %p', (type) => {
-    const wrapper = mount(LDAPConfig, {
-      propsData: {
-        value: {},
-        type,
-      }
-    });
-    const checkbox = wrapper.find('[data-testid="searchUsingServiceAccount"]');
-
-    expect(checkbox).toBeDefined();
-  });
-
   it('updates user login filter when value is entered', async() => {
     const wrapper = mount(
       LDAPConfig,

package/edit/auth/ldap/config.vue

@@ -11,8 +11,6 @@ const DEFAULT_TLS_PORT = 636;
 
 export const SHIBBOLETH = 'shibboleth';
 export const OKTA = 'okta';
-export const OPEN_LDAP = 'openldap';
-export const FREE_IPA = 'freeipa';
 
 export default {
   emits: ['update:value'],
@@ -66,11 +64,6 @@ export default {
     // Does the auth provider support LDAP for search in addition to SAML?
     isSamlProvider() {
       return this.type === SHIBBOLETH || this.type === OKTA;
-    },
-
-    // Allow to enable user search just for these providers
-    isSearchAllowed() {
-      return this.type === OPEN_LDAP || this.type === FREE_IPA;
     }
   },
 
@@ -233,23 +226,6 @@ export default {
         />
       </div>
     </div>
-
-    <div
-      v-if="isSearchAllowed"
-      class="row mb-20"
-    >
-      <div class="col">
-        <Checkbox
-          v-model:value="model.searchUsingServiceAccount"
-          :mode="mode"
-          data-testid="searchUsingServiceAccount"
-          class="full-height"
-          :label="t('authConfig.ldap.searchUsingServiceAccount.label')"
-          :tooltip="t('authConfig.ldap.searchUsingServiceAccount.tip')"
-        />
-      </div>
-    </div>
-
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput

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,13 +149,19 @@ 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 = isKeycloak ? 'auth/realms' : 'realms';
+      const realmsPath = 'realms';
 
       this.model.issuer = `${ url }/${ realmsPath }/${ this.oidcUrls.realm || '' }`;
 
@@ -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/autoscaling.horizontalpodautoscaler/metric-identifier.vue

@@ -65,14 +65,17 @@ export default {
     </div>
     <div class="row">
       <div class="col span-12">
-        <h3>Metric Selector</h3>
         <MatchExpressions
           :mode="mode"
           :value="matchExpressions"
           :label="t('hpa.metricIdentifier.selector.label')"
           :show-remove="false"
           @input="matchChanged($event)"
-        />
+        >
+          <template #header>
+            <h3>{{ t('hpa.metricIdentifier.selector.header') }}</h3>
+          </template>
+        </MatchExpressions>
       </div>
     </div>
   </div>