Merge pull request rancher#6539 from Sean-McQ/fix/workloads-form/add-…

…form-validation-back-in Adds form-validation back in after deployments redesign
richard-cox · Jul 29, 2022 · 57f9a37 · 57f9a37
2 parents 3878303 + a2716df
commit 57f9a37
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/shell/edit/workload/mixins/workload.js b/shell/edit/workload/mixins/workload.js
@@ -42,6 +42,7 @@ import { UI_MANAGED } from '@shell/config/labels-annotations';
 import { removeObject } from '@shell/utils/array';
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
+import formRulesGenerator from '@shell/utils/validators/formRules';
 
 const TAB_WEIGHT_MAP = {
   general:              99,
@@ -213,10 +214,18 @@ export default {
       podFsGroup:        podTemplateSpec.securityContext?.fsGroup,
       savePvcHookName:   'savePvcHook',
       tabWeightMap:      TAB_WEIGHT_MAP,
+      fvFormRuleSets:      [{
+        path: 'image', rootObject: this.container, rules: ['required'], translationKey: 'workload.container.image'
+      }],
+      fvReportedValidationPaths: ['spec']
     };
   },
 
   computed: {
+    tabErrors() {
+      return { general: this.fvGetPathErrors(['image'])?.length > 0 };
+    },
+
     isEdit() {
       return this.mode === _EDIT;
     },
@@ -321,7 +330,13 @@ export default {
 
           return each;
         }),
-      ];
+      ].map((container) => {
+        const containerImageRule = formRulesGenerator(this.$store.getters['i18n/t'], { name: container.name }).containerImage;
+
+        container.error = containerImageRule(container);
+
+        return container;
+      });
     },
 
     flatResources: {

diff --git a/shell/edit/workload/types/Deployment.vue b/shell/edit/workload/types/Deployment.vue
@@ -1,10 +1,11 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 
 export default {
   name:       'WorkloadDeployments',
-  mixins:     [CreateEditView, WorkLoadMixin],
+  mixins:     [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
 
   data() {
     return { selectedName: null };
@@ -26,11 +27,11 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <form v-else class="filled-height">
     <CruResource
-      :validation-passed="true"
+      :validation-passed="fvFormIsValid"
       :selected-subtype="type"
       :resource="value"
       :mode="mode"
-      :errors="errors"
+      :errors="fvUnreportedValidationErrors"
       :done-route="doneRoute"
       :subtypes="workloadSubTypes"
       :apply-hooks="applyHooks"
@@ -39,9 +40,11 @@ export default {
       @select-type="selectType"
       @error="e=>errors = e"
     >
+      <!-- <pre>{{ JSON.stringify(allContainers, null, 2) }}</pre> -->
       <NameNsDescription
         :value="value"
         :mode="mode"
+        :rules="{name: fvGetAndReportPathRules('metadata.name'), namespace: fvGetAndReportPathRules('metadata.namespace'), description: []}"
         @change="name=value.metadata.name"
       />
       <div v-if="isCronJob || isReplicable || isStatefulSet || containerOptions.length > 1" class="row mb-20">
@@ -52,6 +55,7 @@ export default {
             required
             :mode="mode"
             :label="t('workload.cronSchedule')"
+            :rules="fvGetAndReportPathRules('spec.schedule')"
             placeholder="0 * * * *"
           />
         </div>
@@ -78,9 +82,16 @@ export default {
         </div>
       </div>
       <Tabbed class="deployment-tabs">
-        <Tab :label="t('workload.tabs.labels.containers')" name="containers">
+        <Tab :label="t('workload.tabs.labels.containers')" name="containers" :error="tabErrors.general">
           <Tabbed :side-tabs="true" @changed="changed">
-            <Tab v-for="(tab, i) in allContainers" :key="i" :label="tab.name" :name="tab.name" :weight="tab.weight">
+            <Tab
+              v-for="(tab, i) in allContainers"
+              :key="i"
+              :label="tab.name"
+              :name="tab.name"
+              :weight="tab.weight"
+              :error="!!tab.error"
+            >
               <template #tab-header-right class="tab-content-controls">
                 <button v-if="allContainers.length > 1 && !isView" type="button" class="btn-sm role-link" @click="removeContainer(tab)">
                   {{ t('workload.container.removeContainer') }}
@@ -110,7 +121,7 @@ export default {
                       :mode="mode"
                       :label="t('workload.container.image')"
                       :placeholder="t('generic.placeholder', {text: 'nginx:latest'}, true)"
-                      required
+                      :rules="fvGetAndReportPathRules('image')"
                     />
                   </div>
                   <div class="col span-6">

diff --git a/shell/edit/workload/types/Generic.vue b/shell/edit/workload/types/Generic.vue
@@ -1,22 +1,23 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 
 export default {
   name:       'WorkloadGeneric',
-  mixins: [CreateEditView, WorkLoadMixin],
+  mixins: [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
 };
 </script>
 
 <template>
   <Loading v-if="$fetchState.pending" />
   <form v-else class="filled-height">
     <CruResource
-      :validation-passed="true"
+      :validation-passed="fvFormIsValid"
       :selected-subtype="type"
       :resource="value"
       :mode="mode"
-      :errors="errors"
+      :errors="fvUnreportedValidationErrors"
       :done-route="doneRoute"
       :subtypes="workloadSubTypes"
       :apply-hooks="applyHooks"
@@ -28,16 +29,17 @@ export default {
       <NameNsDescription
         :value="value"
         :mode="mode"
+        :rules="{name: fvGetAndReportPathRules('metadata.name'), namespace: fvGetAndReportPathRules('metadata.namespace'), description: []}"
         @change="name=value.metadata.name"
       />
       <div v-if="isCronJob || isReplicable || isStatefulSet || containerOptions.length > 1" class="row mb-20">
         <div v-if="isCronJob" class="col span-3">
           <LabeledInput
             v-model="spec.schedule"
             type="cron"
-            required
             :mode="mode"
             :label="t('workload.cronSchedule')"
+            :rules="fvGetAndReportPathRules('spec.schedule')"
             placeholder="0 * * * *"
           />
         </div>
@@ -73,7 +75,7 @@ export default {
       </div>
 
       <Tabbed :key="containerChange" :side-tabs="true">
-        <Tab :label="t('workload.container.titles.general')" name="general" :weight="tabWeightMap['general']">
+        <Tab :label="t('workload.container.titles.general')" name="general" :weight="tabWeightMap['general']" :error="tabErrors.general">
           <div>
             <div :style="{'align-items':'center'}" class="row mb-20">
               <div class="col span-6">
@@ -98,7 +100,7 @@ export default {
                   :mode="mode"
                   :label="t('workload.container.image')"
                   :placeholder="t('generic.placeholder', {text: 'nginx:latest'}, true)"
-                  required
+                  :rules="fvGetAndReportPathRules('image')"
                 />
               </div>
               <div class="col span-6">