@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/edit/auth/github.vue

@@ -1,4 +1,9 @@
 <script>
+import { ref, computed, provide } from 'vue';
+import { useStore } from 'vuex';
+import { useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import * as z from 'zod';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
@@ -13,6 +18,7 @@ import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBann
 import FileSelector from '@shell/components/form/FileSelector';
 import GithubSteps from '@shell/edit/auth/github-steps.vue';
 import GithubAppSteps from '@shell/edit/auth/github-app-steps.vue';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: {
@@ -30,6 +36,49 @@ export default {
 
   mixins: [CreateEditView, AuthConfig],
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    // These refs sync Options API state into the Composition API for the reactive schema.
+    const isGithubAppRef = ref(false);
+    const isPublicRef = ref(true);
+
+    const coerce = (schema) => z.preprocess((v) => v ?? '', schema);
+    const requiredField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })));
+    const requiredUrlField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })).url(t('validation.genericUrl')));
+    const optionalField = coerce(z.string());
+
+    const validationSchema = computed(() => toTypedSchema(
+      z.object({
+        clientId:     requiredField('authConfig.github.clientId.label'),
+        clientSecret: requiredField('authConfig.github.clientSecret.label'),
+        appId:        isGithubAppRef.value ? requiredField('authConfig.githubapp.githubAppId.label') : optionalField,
+        privateKey:   isGithubAppRef.value ? requiredField('authConfig.githubapp.privateKey.label') : optionalField,
+        targetUrl:    !isPublicRef.value ? requiredUrlField('authConfig.github.host.label') : optionalField,
+      })
+    ));
+
+    const showAllErrors = ref(false);
+
+    provide('vee-show-all-errors', showAllErrors);
+
+    const { errors, validate } = useForm({ validationSchema });
+    const isFormValid = computed(() => Object.keys(errors.value).length === 0);
+
+    const validateAllFields = async() => {
+      await validate();
+      showAllErrors.value = true;
+    };
+
+    return {
+      isGithubAppRef,
+      isPublicRef,
+      isFormValid,
+      validateAllFields,
+    };
+  },
+
   async fetch() {
     await this.mixinFetch();
 
@@ -97,32 +146,37 @@ export default {
     },
 
     validationPassed() {
-      // Allows for configuring authorized users and groups
       if ( this.model.enabled && !this.editConfig ) {
         return true;
       }
 
-      if (!this.model.clientId || !this.model.clientSecret) {
-        return false;
-      }
-
-      if (this.isGithubApp && (!this.model.appId || !this.model.privateKey)) {
-        return false;
-      }
-
-      return true;
+      return this.isFormValid;
     },
 
   },
 
   watch: {
-    targetType: 'updateHost',
-    targetUrl:  'updateHost',
+    'model.id': {
+      handler(newVal) {
+        this.isGithubAppRef = newVal === 'githubapp';
+      },
+      immediate: true,
+    },
+
+    targetType: {
+      handler(newVal) {
+        this.isPublicRef = newVal === 'public';
+        this.updateHost();
+      },
+      immediate: true,
+    },
+
+    targetUrl: 'updateHost',
   },
 
   methods: {
     updateHost() {
-      const match = this.targetUrl.match(/^(((https?):)?\/\/)?([^/]+)(\/.*)?$/);
+      const match = this.targetUrl?.match(/^(((https?):)?\/\/)?([^/]+)(\/.*)?$/);
 
       if ( match ) {
         if ( match[3] === 'http') {
@@ -212,6 +266,7 @@ export default {
             <LabeledInput
               v-if="!isPublic"
               v-model:value="targetUrl"
+              name="targetUrl"
               :label-key="`authConfig.${NAME}.host.label`"
               :placeholder="t(`authConfig.${NAME}.host.placeholder`)"
               :required="true"
@@ -231,6 +286,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientId"
+              name="clientId"
               required
               data-testid="client-id"
               :label="t(`authConfig.${NAME}.clientId.label`)"
@@ -240,6 +296,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientSecret"
+              name="clientSecret"
               required
               data-testid="client-secret"
               type="password"
@@ -253,6 +310,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.appId"
+                name="appId"
                 required
                 data-testid="app-id"
                 :label="t(`authConfig.${NAME}.githubAppId.label`)"
@@ -272,6 +330,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.privateKey"
+                name="privateKey"
                 required
                 data-testid="private-key"
                 type="multiline"

package/edit/auth/ldap/__tests__/index.test.ts

@@ -0,0 +1,206 @@
+import { nextTick } from 'vue';
+import { mount, type VueWrapper, flushPromises } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+
+import LDAPIndex from '@shell/edit/auth/ldap/index.vue';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+const validOpenLdapModel = {
+  enabled:                         false,
+  servers:                         ['ldap.example.com'],
+  port:                            389,
+  connectionTimeout:               5000,
+  serviceAccountDistinguishedName: 'cn=admin,dc=example,dc=com',
+  serviceAccountPassword:          'secretpassword',
+  userSearchBase:                  'dc=example,dc=com',
+};
+
+const validActiveDirectoryModel = {
+  enabled:                false,
+  servers:                ['ad.example.com'],
+  port:                   389,
+  connectionTimeout:      5000,
+  serviceAccountUsername: 'DOMAIN\\admin',
+  serviceAccountPassword: 'secretpassword',
+  userSearchBase:         'dc=example,dc=com',
+};
+
+const validUsername = 'testuser';
+const validPassword = 'testpassword';
+
+const buildSetup = (type = 'openldap', modelOverride = {}, localDataOverride = {}) => ({
+  data() {
+    const baseModel = type === 'activedirectory' ? validActiveDirectoryModel : validOpenLdapModel;
+
+    return {
+      isEnabling:     false,
+      editConfig:     false,
+      model:          { ...baseModel, ...modelOverride },
+      username:       validUsername,
+      password:       validPassword,
+      errors:         [],
+      serverSetting:  null,
+      originalModel:  null,
+      principals:     [],
+      authConfigName: type,
+      ...localDataOverride,
+    } as any;
+  },
+  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()
+      },
+      $route:  { query: { AS: '' }, params: { id: type } },
+      $router: { applyQuery: jest.fn() },
+    },
+  },
+  props: {
+    value: { ...validOpenLdapModel, ...modelOverride },
+    mode:  _EDIT,
+  },
+});
+
+const mountAndValidate = async(type: string, modelOverride = {}, localDataOverride = {}) => {
+  const wrapper = mount(LDAPIndex, buildSetup(type, modelOverride, localDataOverride));
+
+  await wrapper.vm.validateAllFields();
+  await flushPromises();
+
+  return wrapper;
+};
+
+describe('ldap/index.vue', () => {
+  describe('given default valid values (openldap)', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    beforeEach(() => {
+      wrapper = mount(LDAPIndex, buildSetup());
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('has "Enable" button enabled when all required fields are filled', async() => {
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+    });
+
+    it('has "Enable" button enabled when provider is already enabled and not editing config', async() => {
+      wrapper.setData({ model: { ...validOpenLdapModel, enabled: true }, editConfig: false });
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+    });
+  });
+
+  describe('have "Enable" button disabled when required fields are empty', () => {
+    it.each([
+      ['username', { username: '', password: validPassword }],
+      ['password', { username: validUsername, password: '' }],
+    ])('given empty %s (test credentials)', async(field, localData) => {
+      const wrapper = await mountAndValidate('openldap', {}, localData);
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it.each([
+      ['serviceAccountDistinguishedName', { serviceAccountDistinguishedName: '' }],
+      ['serviceAccountPassword', { serviceAccountPassword: '' }],
+      ['userSearchBase', { userSearchBase: '' }],
+    ])('given empty %s (config field)', async(field, modelOverride) => {
+      const wrapper = await mountAndValidate('openldap', modelOverride);
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+  });
+
+  describe('certificate conditional validation', () => {
+    it('is not required when TLS and STARTTLS are disabled', async() => {
+      const wrapper = await mountAndValidate('openldap', { tls: false, starttls: false });
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+      wrapper.unmount();
+    });
+
+    it('is required and causes button disabled when TLS is enabled and certificate is empty', async() => {
+      const wrapper = await mountAndValidate('openldap', {
+        tls:         true,
+        starttls:    false,
+        certificate: '',
+      });
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('button is enabled when TLS is enabled and certificate is provided', async() => {
+      const wrapper = mount(LDAPIndex, buildSetup('openldap', {
+        tls:         true,
+        starttls:    false,
+        certificate: '-----BEGIN CERTIFICATE-----\nMIIB\n-----END CERTIFICATE-----',
+      }));
+
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+      wrapper.unmount();
+    });
+  });
+
+  describe('service account field conditional validation', () => {
+    it('requires serviceAccountDistinguishedName for openldap when empty', async() => {
+      const wrapper = await mountAndValidate('openldap', { serviceAccountDistinguishedName: '' });
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('requires serviceAccountUsername for activedirectory when empty', async() => {
+      const wrapper = await mountAndValidate('activedirectory', { serviceAccountUsername: '' });
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+      wrapper.unmount();
+    });
+
+    it('button is enabled for activedirectory when serviceAccountUsername is provided', async() => {
+      const wrapper = mount(LDAPIndex, buildSetup('activedirectory'));
+
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+      wrapper.unmount();
+    });
+  });
+});

package/edit/auth/ldap/config.vue

@@ -110,6 +110,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="hostname"
+          name="hostname"
           required
           :mode="mode"
           :hoover-tooltip="true"
@@ -121,6 +122,7 @@ export default {
       <div class="col span-4">
         <LabeledInput
           :value="model.port"
+          name="port"
           type="number"
           required
           :min="0"
@@ -156,6 +158,7 @@ export default {
       <div class="col span-12">
         <LabeledInput
           v-model:value="model.certificate"
+          name="certificate"
           required
           type="multiline"
           :mode="mode"
@@ -173,6 +176,7 @@ export default {
       <div class="col span-6">
         <UnitInput
           v-model:value="model.connectionTimeout"
+          name="connectionTimeout"
           required
           :mode="mode"
           :label="t('authConfig.ldap.serverConnectionTimeout')"
@@ -191,6 +195,7 @@ export default {
       >
         <LabeledInput
           v-model:value="model.serviceAccountUsername"
+          name="serviceAccountUsername"
           required
           :mode="mode"
           :label="t('authConfig.ldap.serviceAccountDN')"
@@ -203,6 +208,7 @@ export default {
       >
         <LabeledInput
           v-model:value="model.serviceAccountDistinguishedName"
+          name="serviceAccountDistinguishedName"
           required
           :mode="mode"
           :label="t('authConfig.ldap.serviceAccountDN')"
@@ -211,6 +217,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="model.serviceAccountPassword"
+          name="serviceAccountPassword"
           required
           type="password"
           :mode="mode"
@@ -254,6 +261,7 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="model.userSearchBase"
+          name="userSearchBase"
           required
           :mode="mode"
           :label="t('authConfig.ldap.userSearchBase.label')"

package/edit/auth/ldap/index.vue

@@ -1,4 +1,9 @@
 <script>
+import { ref, computed, provide } from 'vue';
+import { useStore } from 'vuex';
+import { useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import * as z from 'zod';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
@@ -9,6 +14,7 @@ import AuthConfig from '@shell/mixins/auth-config';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import Password from '@shell/components/form/Password';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
+import { useI18n } from '@shell/composables/useI18n';
 
 const AUTH_TYPE = 'ldap';
 
@@ -26,6 +32,49 @@ export default {
 
   mixins: [CreateEditView, AuthConfig],
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+
+    const coerce = (schema) => z.preprocess((v) => (v === null || v === undefined) ? '' : String(v), schema);
+    const requiredField = (key) => coerce(z.string().min(1, t('validation.required', { key: t(key) })));
+    const optionalField = coerce(z.string());
+
+    const tlsEnabledRef = ref(false);
+    const isActiveDirectoryRef = ref(false);
+
+    const validationSchema = computed(() => toTypedSchema(
+      z.object({
+        hostname:                        requiredField('authConfig.ldap.hostname.label'),
+        port:                            requiredField('authConfig.ldap.port'),
+        certificate:                     tlsEnabledRef.value ? requiredField('authConfig.ldap.cert') : optionalField,
+        connectionTimeout:               requiredField('authConfig.ldap.serverConnectionTimeout'),
+        serviceAccountUsername:          isActiveDirectoryRef.value ? requiredField('authConfig.ldap.serviceAccountDN') : optionalField,
+        serviceAccountDistinguishedName: !isActiveDirectoryRef.value ? requiredField('authConfig.ldap.serviceAccountDN') : optionalField,
+        serviceAccountPassword:          requiredField('authConfig.ldap.serviceAccountPassword'),
+        userSearchBase:                  requiredField('authConfig.ldap.userSearchBase.label'),
+        username:                        requiredField(`authConfig.${ AUTH_TYPE }.username`),
+        password:                        requiredField(`authConfig.${ AUTH_TYPE }.password`),
+      })
+    ));
+
+    const showAllErrors = ref(false);
+
+    provide('vee-show-all-errors', showAllErrors);
+
+    const { errors, validate } = useForm({ validationSchema });
+    const isFormValid = computed(() => Object.keys(errors.value).length === 0);
+
+    const validateAllFields = async() => {
+      await validate();
+      showAllErrors.value = true;
+    };
+
+    return {
+      isFormValid, validateAllFields, tlsEnabledRef, isActiveDirectoryRef
+    };
+  },
+
   data() {
     return {
       username: null,
@@ -33,7 +82,21 @@ export default {
     };
   },
 
+  created() {
+    this.tlsEnabledRef = !!(this.model?.tls || this.model?.starttls);
+    this.isActiveDirectoryRef = this.NAME === 'activedirectory';
+    this.registerBeforeHook(this.validateAllFields, 'willSave');
+  },
+
   computed: {
+    validationPassed() {
+      if (this.model?.enabled && !this.editConfig) {
+        return true;
+      }
+
+      return this.isFormValid;
+    },
+
     tArgs() {
       return {
         provider: this.displayName,
@@ -66,6 +129,15 @@ export default {
     },
   },
 
+  watch: {
+    'model.tls'(neu) {
+      this.tlsEnabledRef = !!(neu || this.model?.starttls);
+    },
+    'model.starttls'(neu) {
+      this.tlsEnabledRef = !!(this.model?.tls || neu);
+    },
+  },
+
 };
 </script>
 
@@ -78,7 +150,7 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="true"
+      :validation-passed="validationPassed"
       :finish-button-mode="model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
@@ -126,6 +198,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="username"
+              name="username"
               :label="t(`authConfig.${AUTH_TYPE}.username`)"
               :mode="mode"
               required
@@ -134,6 +207,7 @@ export default {
           <div class="col span-6">
             <Password
               v-model:value="password"
+              name="password"
               :label="t(`authConfig.${AUTH_TYPE}.password`)"
               :mode="mode"
               required