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

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

package/edit/secret/tls.vue

@@ -1,7 +1,10 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
+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 },
@@ -18,6 +21,28 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'tls.key',
+          rules:          ['required'],
+          translationKey: 'secret.certificate.privateKey',
+        },
+        {
+          path:           'tls.crt',
+          rules:          ['required'],
+          translationKey: 'secret.certificate.certificate',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     // do not show existing key when editing
     const originalKey = this.value.decodedData['tls.key'] || '';
@@ -63,9 +88,12 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="key"
+          name="tls.key"
+          required
           type="multiline"
           :label="t('secret.certificate.privateKey')"
           :mode="mode"
+          :rules="getRules('tls.key')"
           :placeholder="t('secret.certificate.privateKeyPlaceholder')"
         />
         <FileSelector
@@ -77,10 +105,12 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="crt"
+          name="tls.crt"
           required
           type="multiline"
           :label="t('secret.certificate.certificate')"
           :mode="mode"
+          :rules="getRules('tls.crt')"
           :placeholder="t('secret.certificate.certificatePlaceholder')"
         />
         <FileSelector

package/edit/service.vue

@@ -203,10 +203,9 @@ export default {
     },
 
     provisioningCluster() {
-      const out = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((c) => c?.status?.clusterName === this.currentCluster.metadata.name);
-
-      return out;
+      return this.currentCluster.provCluster;
     },
+
     errorMessages() {
       if (!this.serviceType) {
         return [];
@@ -273,8 +272,9 @@ export default {
         const hash = {};
 
         if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
-          hash.provClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+          hash.provClusters = this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
         }
+
         if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {
           hash.harvesterConfigs = this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG });
         }

package/edit/workload/Upgrading.vue

@@ -133,10 +133,10 @@ export default {
       } = this;
       let { maxSurge, maxUnavailable } = this;
 
-      if (this.surgeUnits === '%' && !maxSurge.includes('%')) {
+      if (this.surgeUnits === '%' && !`${ maxSurge }`.includes('%')) {
         maxSurge = `${ maxSurge }%`;
       }
-      if (this.unavailableUnits === '%' && !maxUnavailable.includes('%')) {
+      if (this.unavailableUnits === '%' && !`${ maxUnavailable }`.includes('%')) {
         maxUnavailable = `${ maxUnavailable }%`;
       }
 
@@ -204,7 +204,7 @@ export default {
       if (units === 'Pods') {
         this[target] = parseInt(value);
       } else {
-        this[target] = `${ value }%`;
+        this[target] = value;
       }
       if (target === 'maxSurge') {
         this.surgeUnits = units;

package/edit/workload/__tests__/Upgrading.test.ts

@@ -25,20 +25,17 @@ describe('component: Upgrading', () => {
     expect(wrapper.props('value')?.[key]).toBe(newValue);
   });
 
-  // TODO: #6179: Integrate test with component fix, as the scope is not to check the value of the input
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip.each([
-    ['surge', 'maxSurge', '%'],
-    ['unavailable', 'maxUnavailable', '%'],
-  ])('should set typed value in %p into %p and unit', (field, key, unit) => {
+  it.each([
+    ['maxSurge', '%'],
+    ['maxUnavailable', '%'],
+  ])('should set typed value in %p with %p unit', (key, unit) => {
     const wrapper = mount(Upgrading);
-    const input = wrapper.find(`[data-testid="input-policy-${ field }"]`).find('input');
     const newValue = 123;
     const expectation = `${ newValue }${ unit }`;
 
-    input.setValue(newValue);
-    input.trigger('blur');
+    wrapper.vm.updateWithUnits({ selected: unit, text: newValue }, key);
 
+    expect(wrapper.vm[key]).toBe(newValue);
     expect(wrapper.props('value')?.strategy.rollingUpdate[key]).toBe(expectation);
   });
 

package/edit/workload/mixins/workload.js

@@ -151,7 +151,8 @@ export default {
     const fetches = {};
 
     if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
-      fetches.rancherClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+      // I could only find one place where a prov cluster might be used by this and parent components - shell/components/form/WorkloadPorts.vue provisioningCluster
+      fetches.rancherCluster = this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
     }
 
     if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {

package/list/fleet.cattle.io.bundle.vue

@@ -1,19 +1,9 @@
 <script>
-import { FLEET } from '@shell/config/types';
-import { Banner } from '@components/Banner';
-import ResourceTable from '@shell/components/ResourceTable';
-import ResourceFetch from '@shell/mixins/resource-fetch';
-import {
-  AGE,
-  STATE,
-  NAME,
-} from '@shell/config/table-headers';
-import { isHarvesterCluster } from '@shell/utils/cluster';
+import FleetBundles from '@shell/components/fleet/FleetBundles';
 
 export default {
   name:       'ListBundle',
-  components: { Banner, ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { FleetBundles },
   props:      {
     resource: {
       type:     String,
@@ -28,100 +18,13 @@ export default {
       default: false
     }
   },
-
-  async fetch() {
-    await this.$fetchType(this.resource);
-    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
-      this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
-    }
-  },
-
-  data() {
-    return { allFleet: [] };
-  },
-
-  computed: {
-    harvesterClusters() {
-      const harvester = {};
-
-      this.allFleet.forEach((c) => {
-        if (isHarvesterCluster(c)) {
-          harvester[c.metadata.name] = c;
-        }
-      });
-
-      return harvester;
-    },
-
-    bundles() {
-      const harvester = this.harvesterClusters;
-
-      return this.rows.filter((bundle) => {
-        const targets = bundle.spec?.targets || [];
-
-        // Filter out any bundle that has one target whose cluster is a harvester cluster
-        if (targets.length === 1) {
-          return !harvester[targets[0].clusterName];
-        }
-
-        return true;
-      });
-    },
-
-    hidden() {
-      return this.rows.length - this.bundles.length;
-    },
-
-    headers() {
-      const out = [
-        STATE,
-        NAME,
-        {
-          name:     'deploymentsReady',
-          labelKey: 'tableHeaders.bundleDeploymentsReady',
-          value:    'status.display.readyClusters',
-          sort:     'status.display.readyClusters',
-          search:   ['status.summary.ready', 'status.summary.desiredReady'],
-        },
-        AGE
-      ];
-
-      return out;
-    },
-  },
-
-  // override with relevant info for the loading indicator since this doesn't use it's own masthead
-  $loadingResources() {
-    // results are filtered so we wouldn't get the correct count on indicator...
-    return { loadIndeterminate: true };
-  },
 };
 </script>
 
 <template>
-  <div>
-    <Banner
-      v-if="hidden"
-      color="info"
-      :label="t('fleet.bundles.harvester', {count: hidden} )"
-    />
-    <ResourceTable
-      :schema="schema"
-      :headers="headers"
-      :rows="bundles"
-      :loading="loading"
-      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-    >
-      <template #cell:deploymentsReady="{row}">
-        <span
-          v-if="row.status && row.status.summary && (row.status.summary.desiredReady !== row.status.summary.ready)"
-          class="text-warning"
-        >
-          {{ row.status.summary.ready || 0 }}/{{ row.status.summary.desiredReady }}</span>
-        <span v-else-if="row.status && row.status.summary">{{ row.status.summary.desiredReady }}</span>
-        <span v-else>-</span>
-      </template>
-    </ResourceTable>
-  </div>
+  <FleetBundles
+    :resource="resource"
+    :schema="schema"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+  />
 </template>