@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

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

@@ -7,11 +7,11 @@ import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthS
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SecretSelector from '@shell/components/form/SecretSelector';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import { isBase64 } from '@shell/utils/string';
+import { isBase64EncodedCert } from '@shell/utils/string';
 import { base64Decode, base64Encode } from '@shell/utils/crypto';
 
 export default {
-  emits: ['updateConfigs'],
+  emits: ['updateConfigs', 'validation-changed'],
 
   components: {
     ArrayListGrouped,
@@ -62,6 +62,34 @@ export default {
         return TYPES.TLS;
       },
     },
+
+    caBundleRules() {
+      return [
+        (value) => {
+          if (!value) {
+            return undefined;
+          }
+
+          const isPem = value.trimStart().startsWith('-----BEGIN ');
+          const isValidBase64 = isBase64EncodedCert(value);
+
+          return (!isPem && !isValidBase64) ? this.t('registryConfig.caBundle.validationError') : undefined;
+        }
+      ];
+    },
+
+    // Derives validation state from entries directly, so it auto-updates when entries are added or removed
+    allCaBundlesValid() {
+      return this.entries.every((entry) => {
+        return this.caBundleRules.every((rule) => !rule(entry.caBundle));
+      });
+    },
+  },
+
+  watch: {
+    allCaBundlesValid(valid) {
+      this.$emit('validation-changed', valid);
+    },
   },
 
   mounted() {
@@ -78,7 +106,8 @@ export default {
 
         const caBundle = configMap[hostname].caBundle ?? this.defaultAddValue.caBundle;
 
-        configMap[hostname].caBundle = isBase64(caBundle) ? base64Decode(caBundle) : caBundle;
+        // Decode base64 for display so the user sees readable PEM text
+        configMap[hostname].caBundle = isBase64EncodedCert(caBundle) ? base64Decode(caBundle) : caBundle;
 
         configMap[hostname].tlsSecretName = configMap[hostname].tlsSecretName ?? this.defaultAddValue.tlsSecretName;
       }
@@ -103,7 +132,8 @@ export default {
 
         configs[h] = {
           ...entry,
-          caBundle: entry.caBundle ? base64Encode(entry.caBundle) : null
+          // If the value is already base64, use as-is to avoid double-encoding
+          caBundle: entry.caBundle ? (isBase64EncodedCert(entry.caBundle) ? entry.caBundle : base64Encode(entry.caBundle)) : null
         };
 
         delete configs[h].hostname;
@@ -192,6 +222,9 @@ export default {
               type="multiline"
               label="CA Cert Bundle"
               :mode="mode"
+              :rules="caBundleRules"
+              :require-dirty="false"
+              :tooltip="t('registryConfig.caBundle.tooltip')"
             />
 
             <div>

package/edit/provisioning.cattle.io.cluster/tabs/registries/__tests__/RegistryConfigs.test.ts

@@ -4,6 +4,9 @@ import { _EDIT } from '@shell/config/query-params';
 import { PROV_CLUSTER } from '@shell/edit/provisioning.cattle.io.cluster/__tests__/utils/cluster';
 import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryConfigs.vue';
 
+const VALID_BASE64_CERT = 'LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t';
+const VALID_PEM_TEXT = '-----BEGIN CERTIFICATE-----\nMIIBkTCB+wIJA';
+
 describe('component: RegistryConfigs', () => {
   let wrapper: Wrapper<InstanceType<typeof RegistryConfigs> & { [key: string]: any }>;
 
@@ -18,14 +21,14 @@ describe('component: RegistryConfigs', () => {
         SelectOrCreateAuthSecret: true,
         SecretSelector:           true,
       },
-      mocks: { $store: { getters: { 'i18n/t': jest.fn() } } }
+      mocks: { $store: { getters: { 'i18n/t': jest.fn((key: string) => key) } } }
     }
   };
 
   describe('key CA Cert Bundle', () => {
     it.each([
-      ['source is plain text', 'Zm9vYmFy', 'foobar'],
-      ['source is base64', 'foobar', 'foobar'],
+      ['source is base64', VALID_BASE64_CERT, '-----BEGIN CERTIFICATE-----'],
+      ['source is plain text', 'foobar', 'foobar'],
     ])('should display key, %p', (_, sourceCaBundle, displayedCaBundle) => {
       const value = clone(PROV_CLUSTER);
 
@@ -43,10 +46,10 @@ describe('component: RegistryConfigs', () => {
       expect(registry.props().value).toBe(displayedCaBundle);
     });
 
-    it('should update key in base64 format', async() => {
+    it('should base64 encode plain PEM text on save', async() => {
       const value = clone(PROV_CLUSTER);
 
-      value.spec.rkeConfig.registries.configs = { foo: { caBundle: 'Zm9vYmFy' } };
+      value.spec.rkeConfig.registries.configs = { foo: { caBundle: VALID_BASE64_CERT } };
 
       mountOptions.propsData.value = value;
 
@@ -57,10 +60,132 @@ describe('component: RegistryConfigs', () => {
 
       const registry = wrapper.findComponent('[data-testid^="registry-caBundle"]');
 
-      registry.vm.$emit('update:value', 'ssh key');
+      registry.vm.$emit('update:value', VALID_PEM_TEXT);
       wrapper.vm.update();
 
-      expect(wrapper.emitted('updateConfigs')[0][0]['foo']['caBundle']).toBe('c3NoIGtleQ==');
+      expect(wrapper.emitted('updateConfigs')[0][0]['foo']['caBundle']).toBe('LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0tCk1JSUJrVENCK3dJSkE=');
+    });
+
+    it('should keep base64 value as-is on save', async() => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = { foo: { caBundle: VALID_BASE64_CERT } };
+
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(
+        RegistryConfigs,
+        mountOptions
+      );
+
+      const registry = wrapper.findComponent('[data-testid^="registry-caBundle"]');
+
+      registry.vm.$emit('update:value', VALID_BASE64_CERT);
+      wrapper.vm.update();
+
+      expect(wrapper.emitted('updateConfigs')[0][0]['foo']['caBundle']).toBe(VALID_BASE64_CERT);
+    });
+  });
+
+  describe('cA Cert Bundle validation', () => {
+    it('should pass validation for valid base64 value', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {};
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      const rule = wrapper.vm.caBundleRules[0];
+
+      expect(rule(VALID_BASE64_CERT)).toBeUndefined();
+    });
+
+    it('should pass validation for PEM text', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {};
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      const rule = wrapper.vm.caBundleRules[0];
+
+      expect(rule(VALID_PEM_TEXT)).toBeUndefined();
+    });
+
+    it('should pass validation for empty value', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {};
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      const rule = wrapper.vm.caBundleRules[0];
+
+      expect(rule('')).toBeUndefined();
+      expect(rule(null)).toBeUndefined();
+      expect(rule(undefined)).toBeUndefined();
+    });
+
+    it('should fail validation for invalid value', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {};
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      const rule = wrapper.vm.caBundleRules[0];
+
+      expect(rule('not-valid-base64!')).toContain('registryConfig.caBundle.validationError');
+    });
+
+    it('should report allCaBundlesValid as true when all entries have valid caBundles', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {
+        'reg1.example.com': { caBundle: VALID_BASE64_CERT },
+        'reg2.example.com': { caBundle: VALID_BASE64_CERT },
+      };
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      expect(wrapper.vm.allCaBundlesValid).toBe(true);
+    });
+
+    it('should report allCaBundlesValid as false when any entry has an invalid caBundle', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {
+        'reg1.example.com': { caBundle: VALID_BASE64_CERT },
+        'reg2.example.com': { caBundle: 'not-valid!' },
+      };
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      expect(wrapper.vm.allCaBundlesValid).toBe(false);
+    });
+
+    it('should update validation when an invalid entry is removed', () => {
+      const value = clone(PROV_CLUSTER);
+
+      value.spec.rkeConfig.registries.configs = {
+        'reg1.example.com': { caBundle: VALID_BASE64_CERT },
+        'reg2.example.com': { caBundle: 'not-valid!' },
+      };
+      mountOptions.propsData.value = value;
+
+      wrapper = mount(RegistryConfigs, mountOptions);
+
+      expect(wrapper.vm.allCaBundlesValid).toBe(false);
+
+      wrapper.vm.entries.splice(1, 1);
+
+      expect(wrapper.vm.allCaBundlesValid).toBe(true);
     });
   });
 });

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

@@ -8,7 +8,7 @@ import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/reg
 import RegistryMirrors from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors';
 
 export default {
-  emits:      ['custom-registry-changed', 'registry-host-changed', 'registry-secret-changed', 'input', 'update-configs-changed'],
+  emits:      ['custom-registry-changed', 'registry-host-changed', 'registry-secret-changed', 'input', 'update-configs-changed', 'registry-validation-changed'],
   components: {
     LabeledInput,
     Banner,
@@ -142,6 +142,7 @@ export default {
           :cluster-register-before-hook="registerBeforeHook"
           @update:value="$emit('input', $event)"
           @updateConfigs="$emit('update-configs-changed', $event)"
+          @validation-changed="$emit('registry-validation-changed', $event)"
         />
       </AdvancedSection>
     </div>

package/edit/secret/__tests__/ssh.test.ts

@@ -1,18 +1,17 @@
 import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import Ssh from '@shell/edit/secret/ssh.vue';
 
-const mockedStore = () => {
-  return { getters: { 'i18n/t': jest.fn() } };
-};
-
 const mockedRoute = { query: {} };
 
 const requiredSetup = () => {
+  const store = createStore({ getters: { 'i18n/t': () => jest.fn() } });
+
   return {
     global: {
-      mocks: {
-        $store:      mockedStore(),
+      plugins: [store],
+      mocks:   {
         $route:      mockedRoute,
         $fetchState: {},
       }

package/edit/secret/basic.vue

@@ -1,5 +1,8 @@
 <script>
+import { useStore } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { useFormRules } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: { LabeledInput },
@@ -16,6 +19,28 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'username',
+          rules:          ['required'],
+          translationKey: 'secret.basic.username',
+        },
+        {
+          path:           'password',
+          rules:          ['required'],
+          translationKey: 'secret.basic.password',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     const username = this.value.decodedData.username || '';
     const password = this.value.decodedData.password || '';
@@ -46,18 +71,24 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="username"
+          name="username"
           required
           :label="t('secret.basic.username')"
           :mode="mode"
+          :rules="getRules('username')"
           data-testid="secret-basic-username"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
           v-model:value="password"
+          name="password"
+          required
           :label="t('secret.basic.password')"
           :mode="mode"
           type="password"
+          :rules="getRules('password')"
+          data-testid="secret-basic-password"
         />
       </div>
     </div>

package/edit/secret/index.vue

@@ -7,7 +7,9 @@ import {
 } from '@shell/config/query-params';
 import { MANAGEMENT, NAMESPACE, DEFAULT_WORKSPACE, VIRTUAL_TYPES } from '@shell/config/types';
 import { CAPI, UI_PROJECT_SECRET } from '@shell/config/labels-annotations';
-import FormValidation from '@shell/mixins/form-validation';
+import { useStore } from 'vuex';
+import { useFormValidation } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { LabeledInput } from '@components/Form/LabeledInput';
@@ -48,7 +50,46 @@ export default {
     SelectIconGrid
   },
 
-  mixins: [CreateEditView, FormValidation],
+  mixins: [CreateEditView],
+
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const {
+      getRules, isFormValid, validateForm, veeErrors
+    } = useFormValidation(
+      t,
+      [
+        {
+          path:           'metadata.name',
+          rules:          ['required'],
+          translationKey: 'nameNsDescription.name.label',
+        },
+        {
+          path:           'metadata.namespace',
+          rules:          ['required'],
+          translationKey: 'nameNsDescription.namespace.label',
+        },
+        {
+          path:           'secretType',
+          rules:          ['required'],
+          translationKey: 'secret.type',
+        },
+        {
+          path:           'secret._type',
+          rules:          ['required'],
+          translationKey: 'secret.customType',
+        },
+      ]
+    );
+
+    return {
+      getRules,
+      isFormValid,
+      veeValidateForm: validateForm,
+      veeErrors,
+    };
+  },
 
   async fetch() {
     if ( this.isCloud ) {
@@ -119,16 +160,6 @@ export default {
       secretType:        this.value._type,
       initialSecretType: this.value._type,
       projectName:       null,
-      fvFormRuleSets:    [
-        {
-          path:  'metadata.name',
-          rules: ['required'],
-        },
-        {
-          path:  'metadata.namespace',
-          rules: ['required'],
-        },
-      ],
     };
   },
 
@@ -261,6 +292,12 @@ export default {
       return this.$store.getters['prefs/get'](HIDE_SENSITIVE);
     },
 
+    dataTabHasError() {
+      const topLevelFields = new Set(['metadata.name', 'metadata.namespace', 'secretType', 'secret._type']);
+
+      return Object.keys(this.veeErrors).some((key) => !topLevelFields.has(key));
+    },
+
     dataLabel() {
       switch (this.value._type) {
       case TYPES.TLS:
@@ -288,6 +325,14 @@ export default {
 
   methods: {
     async saveSecret(btnCb) {
+      const { valid } = await this.veeValidateForm();
+
+      if (!valid) {
+        btnCb(false);
+
+        return;
+      }
+
       if ( this.errors ) {
         clear(this.errors);
       }
@@ -399,7 +444,7 @@ export default {
     <CruResource
       v-else
       :mode="mode"
-      :validation-passed="fvFormIsValid"
+      :validation-passed="isFormValid"
       :selected-subtype="value._type"
       :resource="value"
       :errors="errors"
@@ -416,6 +461,9 @@ export default {
         :value="value"
         :mode="mode"
         :namespaced="!isCloud"
+        :name-field-name="'metadata.name'"
+        :namespace-field-name="'metadata.namespace'"
+        :rules="{ name: getRules('metadata.name'), namespace: getRules('metadata.namespace'), description: [] }"
         @update:value="$emit('input', $event)"
       />
       <NameNsDescription
@@ -423,10 +471,8 @@ export default {
         :value="value"
         :namespaced="false"
         :mode="mode"
-        :rules="{
-          name: fvGetAndReportPathRules('metadata.name'),
-          namespace: fvGetAndReportPathRules('metadata.namespace'),
-        }"
+        :name-field-name="'metadata.name'"
+        :rules="{ name: getRules('metadata.name'), namespace: [], description: [] }"
       >
         <template #project-selector>
           <LabeledSelect
@@ -448,11 +494,13 @@ export default {
         <div class="col span-3">
           <LabeledSelect
             v-model:value="secretType"
+            name="secretType"
             :options="secretTypes"
             :searchable="false"
             :mode="mode"
             :multiple="false"
             :reduce="(e) => e.value"
+            :rules="getRules('secretType')"
             label-key="secret.type"
             required
             @update:value="selectCustomType"
@@ -465,8 +513,10 @@ export default {
             ref="customType"
             v-model:value="value._type"
             v-focus
+            name="secret._type"
             label-key="secret.customType"
             :mode="mode"
+            :rules="getRules('secret._type')"
             required
           />
         </div>
@@ -492,6 +542,7 @@ export default {
           name="data"
           :label="dataLabel"
           :weight="99"
+          :error="dataTabHasError"
         >
           <component
             :is="dataComponent"

package/edit/secret/registry.vue

@@ -1,6 +1,9 @@
 <script>
+import { useStore } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
+import { useFormRules } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: { LabeledInput, RadioGroup },
@@ -17,6 +20,33 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'registryUrl',
+          rules:          ['required'],
+          translationKey: 'secret.registry.domainName',
+        },
+        {
+          path:           'username',
+          rules:          ['required'],
+          translationKey: 'secret.registry.username',
+        },
+        {
+          path:           'password',
+          rules:          ['required'],
+          translationKey: 'secret.registry.password',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     let registryProvider = 'Custom';
 
@@ -118,26 +148,34 @@ export default {
     >
       <LabeledInput
         v-model:value="registryUrl"
+        name="registryUrl"
         required
         :label="t('secret.registry.domainName')"
         placeholder="e.g. index.docker.io"
         :mode="mode"
+        :rules="getRules('registryUrl')"
       />
     </div>
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
           v-model:value="username"
+          name="username"
+          required
           :label="t('secret.registry.username')"
           :mode="mode"
+          :rules="getRules('username')"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
           v-model:value="password"
+          name="password"
+          required
           :label="t('secret.registry.password')"
           :mode="mode"
           type="password"
+          :rules="getRules('password')"
         />
       </div>
     </div>

package/edit/secret/ssh.vue

@@ -1,6 +1,9 @@
 <script>
+import { useStore } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+import { useFormRules } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: { LabeledInput, FileSelector },
@@ -17,6 +20,28 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'ssh-publickey',
+          rules:          ['required'],
+          translationKey: 'secret.ssh.public',
+        },
+        {
+          path:           'ssh-privatekey',
+          rules:          ['required'],
+          translationKey: 'secret.ssh.private',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     const username = this.value.decodedData['ssh-publickey'] || '';
     const password = this.value.decodedData['ssh-privatekey'] || '';
@@ -60,10 +85,12 @@ export default {
         <LabeledInput
           v-model:value="username"
           type="multiline"
+          name="ssh-publickey"
           data-testid="ssh-public-key"
           :label="t('secret.ssh.public')"
           :mode="mode"
           required
+          :rules="getRules('ssh-publickey')"
           :placeholder="t('secret.ssh.publicPlaceholder')"
         />
         <FileSelector
@@ -76,10 +103,12 @@ export default {
         <LabeledInput
           v-model:value="password"
           type="multiline"
+          name="ssh-privatekey"
           data-testid="ssh-private-key"
           :label="t('secret.ssh.private')"
           :mode="mode"
           required
+          :rules="getRules('ssh-privatekey')"
           :placeholder="t('secret.ssh.privatePlaceholder')"
         />
         <FileSelector