Added a wizard to create a cluster

pkg/capi/components/CCVariables/Variable.vue

@@ -9,7 +9,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import formRulesGenerator, { Validator } from '@shell/utils/validators/formRules';
 
 import type { ClusterClassVariable } from '../../types/clusterClass';
-import { openAPIV3SchemaValidators } from '../../util/validators';
+import { isDefined, openAPIV3SchemaValidators } from '../../util/validators';
 
 export default defineComponent({
   name: 'CCVariable',
@@ -98,17 +98,31 @@ export default defineComponent({
       const required = this.variable?.required;
 
       if (required) {
-        out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required as Validator);
+        // out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required as Validator);
+
+        out.push(val => !isDefined(val) ? this.$store.getters['i18n/t']('validation.required', { key: this.variable.name }) : null);
       }
 
       return out;
     },
 
     isValid() {
-      return !this.validationRules.find((rule: Validator) => !!rule(this.value));
+      return !this.validationErrors.length;
     },
 
-    widerComponent() {
+    validationErrors() {
+      return this.validationRules.reduce((errs: string[], rule: Validator) => {
+        const message = rule(this.value);
+
+        if (message) {
+          errs.push(message);
+        }
+
+        return errs;
+      }, []);
+    },
+
+    listComponent() {
       return this.componentForType?.name === 'arraylist-var' || this.componentForType?.name === 'keyvalue-var';
     }
   },
@@ -131,7 +145,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="{'wider': widerComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
+  <div :class="{'wider': listComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
     <component
       :is="componentForType.component"
       v-if="componentForType"
@@ -142,15 +156,33 @@ export default defineComponent({
       :required="variable.required"
       :title="variable.name"
       :options="variableOptions"
-      :rules="validationRules"
+      :rules="!listComponent ? validationRules : []"
       :type="schema.type === 'number' || schema.type === 'integer' ? 'number' : 'text'"
       @input="setValue"
-    />
+    >
+      <template #title>
+        <div class="input-label">
+          <span>{{ variable.name }}
+            <i v-if="schema.description" v-clean-tooltip="schema.description" class="icon icon-sm icon-info" />
+            <i v-if="!isValid" v-clean-tooltip="validationErrors.join(' ')" class="icon icon-warning" />
+          </span>
+        </div>
+      </template>
+    </component>
     <div class="flexbox-newline" />
   </div>
 </template>
 <style lang="scss" scoped>
 .align-center {
   align-self: 'center'
 }
+.input-label{
+  color: var(--input-label);
+  margin-bottom: 5px;
+  display: block;
+  width:100%;
+  .icon-warning{
+    color: var(--error)
+  }
+}
 </style>

pkg/capi/components/CCVariables/index.vue

@@ -5,6 +5,7 @@ import type { PropType } from 'vue';
 import { randomStr } from '@shell/utils/string';
 import { ClusterClassVariable } from '../../types/clusterClass';
 import type { CapiClusterVariable } from '../../types/cluster.x-k8s.io.cluster';
+import { isDefined } from '../../util/validators';
 import Variable from './Variable.vue';
 
 export default defineComponent({
@@ -19,11 +20,25 @@ export default defineComponent({
     },
 
     // <cluster.x-k8s.io>.spec.topology.variables
+    // OR <cluster.x-k8s.io>.spec.topology.workers.machineDeployments[].variables.overrides
+    // OR <cluster.x-k8s.io>.spec.topology.workers.machinePools[].variables.overrides
     value: {
       type:    Array as PropType<Array<CapiClusterVariable>>,
       default: () => {
         return [];
       }
+    },
+
+    // if this and machinePoolClass are empty, ALL variables will be shown
+    // only 1 of machinePoolClass and machineDeploymentClass should be set
+    machineDeploymentClass: {
+      type:    String,
+      default: null
+    },
+
+    machinePoolClass: {
+      type:    String,
+      default: null
     }
   },
 
@@ -38,6 +53,7 @@ export default defineComponent({
         this.$emit('validation-passed', !neu);
       }, 5),
     },
+
     variableDefinitions(neu, old) {
       this.updateVariableDefaults(neu, old);
       this.$nextTick(() => {
@@ -52,9 +68,55 @@ export default defineComponent({
 
   computed: {
     variableDefinitions() {
-      return this.clusterClass?.spec?.variables || [];
+      const allVariableDefinitions = this.clusterClass?.spec?.variables || [];
+
+      if (!this.machineDeploymentClass && !this.machinePoolClass) {
+        return allVariableDefinitions;
+      }
+      const variableNames = this.machineScopedJsonPatches.reduce((names, patch) => {
+        const valueFromVariable = patch?.valueFrom?.variable;
+
+        if (!valueFromVariable) {
+          return names;
+        }
+
+        // the value here could be a field or index of the variable, defined <variable definition.name>.<some field> or <variable definition name>[i]
+        const parsedName = valueFromVariable.split(/\.|\[/)[0];
+
+        if (parsedName !== 'builtin') {
+          names.push(parsedName);
+        }
+
+        return names;
+      }, []);
+
+      return allVariableDefinitions.filter((v: ClusterClassVariable) => variableNames.includes(v.name));
     },
 
+    machineScopedJsonPatches() {
+      if (!this.machineDeploymentClass && !this.machinePoolClass) {
+        return [];
+      }
+      const out = [] as any[];
+      const matchName = this.machineDeploymentClass || this.machinePoolClass;
+      const matchKey = this.machineDeploymentClass ? 'machineDeploymentClass' : 'machinePoolClass';
+
+      const patches = this.clusterClass?.spec?.patches || [];
+
+      patches.forEach((p) => {
+        const definitions = p?.definitions || [];
+
+        definitions.forEach((definition: any) => {
+          const matchMachines = definition?.selector?.matchResources?.[matchKey]?.names || [];
+
+          if (matchMachines.includes(matchName)) {
+            out.push(...definition.jsonPatches);
+          }
+        });
+      });
+
+      return out;
+    },
   },
 
   methods: {
@@ -90,12 +152,15 @@ export default defineComponent({
         }
         const oldDefault = (old || []).find(d => d.name === existingVar.name)?.schema?.openAPIV3Schema?.default;
 
-        if (oldDefault && existingVar.value === oldDefault) {
+        if (isDefined(oldDefault) && existingVar.value === oldDefault) {
           delete existingVar.value;
         }
-        const newDefault = neuDef.schema?.openAPIV3Schema?.default;
+        let newDefault = neuDef.schema?.openAPIV3Schema?.default;
 
-        if (newDefault && !existingVar.value) {
+        if (neuDef.schema?.openAPIV3Schema?.type === 'boolean' && !newDefault) {
+          newDefault = false;
+        }
+        if (isDefined(newDefault) && !existingVar.value) {
           existingVar.value = newDefault;
         }
         acc.push(existingVar);
@@ -104,9 +169,12 @@ export default defineComponent({
       }, []);
 
       neu.forEach((def) => {
-        const newDefault = def.schema?.openAPIV3Schema?.default;
+        let newDefault = def.schema?.openAPIV3Schema?.default;
 
-        if (newDefault && !out.find(v => v.name === def.name)) {
+        if (def.schema?.openAPIV3Schema?.type === 'boolean' && !newDefault) {
+          newDefault = false;
+        }
+        if (isDefined(newDefault) && !out.find(v => v.name === def.name)) {
           out.push({ name: def.name, value: newDefault });
         }
       });