From 0c2ae5c512e9cfea0c3c8719df5b4edd43fb035e Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 11 Dec 2023 09:31:59 -0800
Subject: [PATCH 01/23] enums

---
 pkg/capi/components/CCVariables/Enum.vue     |  65 +++++++++++
 pkg/capi/components/CCVariables/Variable.vue | 111 +++++++++++++++++++
 pkg/capi/components/CCVariables/data.ts      |  76 +++++++++++++
 pkg/capi/components/CCVariables/index.vue    |  84 ++++++++++++++
 pkg/capi/pages/blerg.vue                     |  25 +++++
 pkg/capi/routes/capi-routing.ts              |   6 +
 pkg/capi/types/clusterClass.ts               |  39 +++++++
 7 files changed, 406 insertions(+)
 create mode 100644 pkg/capi/components/CCVariables/Enum.vue
 create mode 100644 pkg/capi/components/CCVariables/Variable.vue
 create mode 100644 pkg/capi/components/CCVariables/data.ts
 create mode 100644 pkg/capi/components/CCVariables/index.vue
 create mode 100644 pkg/capi/pages/blerg.vue
 create mode 100644 pkg/capi/types/clusterClass.ts

diff --git a/pkg/capi/components/CCVariables/Enum.vue b/pkg/capi/components/CCVariables/Enum.vue
new file mode 100644
index 0000000..15af2a2
--- /dev/null
+++ b/pkg/capi/components/CCVariables/Enum.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import RadioButton from '@/pkg/rancher-components/src/components/Form/Radio/RadioButton';
+import RadioGroup from '@/pkg/rancher-components/src/components/Form/Radio/RadioGroup';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+import { ClusterClassVariable } from '../../types/clusterClass.ts';
+
+// clusterclass variables can define a list of valid options for any 'type'
+// if type is string or number options will display in a single-choice labeledselect
+//
+// if the type is 'array':
+// if enum values are NOT arrays: show a multi-choice labeledselect
+// enum values are arrays: //TODO nb how to display complex enum?
+//
+// if the type is an object:
+// TODO nb how to display complex enum?
+//
+// if the type is boolean:
+// ...silly but possible. Show a checkbox.
+
+export default defineComponent({
+  name: 'CCVariablesEnumInput',
+
+  components: {
+    RadioGroup,
+    RadioButton,
+    LabeledSelect,
+    Checkbox
+  },
+
+  props: {
+    variable: {
+      type:     ClusterClassVariable,
+      required: true
+    },
+    value: {
+      type:    [String, Object, Boolean],
+      default: () => null
+    }
+  },
+
+  computed(){
+        schema() {
+      return this.variable?.schema?.openAPIV3Schema;
+    },
+
+    componentType(){
+      const enumValues = schema.enum
+      const isComplex = enumValues.find(val => typeof val === 'object')
+      if(enumValues.length <= 3 ){
+        return 'radio'
+      }
+
+    },
+
+    useMultiSelect(){}
+  },
+});
+</script>
+
+<template>
+<div>wow_its_fucking_nothing.jpeg</div>
+</template>
diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
new file mode 100644
index 0000000..3d9113e
--- /dev/null
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -0,0 +1,111 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import KeyValue from '@shell/components/form/KeyValue';
+import ArrayList from '@shell/components/form/ArrayList';
+
+import { ClusterClassVariable } from '../../types/clusterClass.ts';
+
+// object, array, string, integer, number or boolean.
+
+export default defineComponent({
+  name: 'CCVariable',
+
+  props: {
+    variable: {
+      type:     ClusterClassVariable,
+      required: true
+    },
+    value: {
+      type:    [String, Object, Boolean],
+      default: () => null
+    }
+  },
+
+  computed: {
+    componentForType() {
+      const { type } = this.schema;
+      let out = null;
+
+      // if the schema has valid options defined, use a different input:
+      // <=3 options: radio group
+      // >3 options: labeled select
+      // options are array or object: //TODO nb fuck
+      if (this.variableOptions) {
+        if (this.variableOptions.length <= 3) {
+          out = RadioGroup;
+        }
+      } else {
+        switch (type) {
+        case 'object':
+          out = KeyValue;
+          break;
+        case 'array':
+          out = ArrayList;
+          break;
+        case 'string':
+          out = LabeledInput;
+          break;
+        case 'integer':
+          out = LabeledInput;
+          break;
+        case 'number':
+          out = LabeledInput;
+          break;
+        case 'boolean':
+          out = Checkbox;
+          break;
+        default:
+          break;
+        }
+      }
+
+      return out;
+    },
+
+    schema() {
+      return this.variable?.schema?.openAPIV3Schema;
+    },
+
+    // the schema may define a list of valid options - format them to work correctly in labeledselect
+    variableOptions() {
+      const opts = this.schema?.enum;
+
+      if (!opts || !opts.length) {
+        return null;
+      }
+
+      return opts.map((opt: any) => {
+        switch (typeof opt) {
+        case 'boolean':
+          return opt.toString();
+        case 'string':
+          return opt;
+        // todo nb how does labeled select handle numbers?
+        case 'number':
+          return opt.toString();
+        case 'object':
+          // TODO nb fuck
+          return null;
+        }
+      });
+    }
+  },
+
+});
+</script>
+
+<template>
+  <component
+    :is="componentForType"
+    v-if="componentForType"
+    :value="value"
+    :label="variable.name"
+    :placeholder="schema.example"
+    :tooltip="schema.description"
+    :required="variable.required"
+    :title="variable.name"
+    @input="e=>$emit('input', e)"
+  />
+</template>
diff --git a/pkg/capi/components/CCVariables/data.ts b/pkg/capi/components/CCVariables/data.ts
new file mode 100644
index 0000000..2d31517
--- /dev/null
+++ b/pkg/capi/components/CCVariables/data.ts
@@ -0,0 +1,76 @@
+export default [{
+  name:     'region',
+  required: false,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'string',
+        // default:     'us-east-1',
+        description: 'The Azure region to create machines in'
+      }
+    }
+},
+
+{
+  name:     'sshKeyName',
+  required: true,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'string',
+        default:     'default',
+        description: 'SSH key name description text go here',
+        example:     'sshkeyexample'
+      }
+    }
+},
+{
+  name:     'controlPlaneMachineType',
+  required: true,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:    'string',
+        default: 't3.large'
+      }
+    }
+},
+{
+  name:     'workerMachineType',
+  required: true,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:    'string',
+        default: 't3.large'
+      }
+    }
+},
+{
+  name:     'testBoolean',
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'boolean',
+        description: 'This is a test value'
+      }
+    }
+},
+{
+  name:     'testArrayStrings',
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'array',
+        description: 'This is a test array value',
+        items:
+          { type: 'string' }
+      }
+    }
+}];
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
new file mode 100644
index 0000000..a35563b
--- /dev/null
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -0,0 +1,84 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { ClusterClassVariable } from '../../types/clusterClass.ts';
+import Variable from './Variable.vue';
+
+export default defineComponent({
+  name: 'ClusterClassVariables',
+
+  components: { Variable },
+
+  props: {
+    clusterClass: {
+      type:    Object,
+      default: () => {}
+    },
+
+    // <cluster.x-k8s.io>.spec.topology.variables
+    value: {
+      type:    Array as unknown as Array<ClusterClassVariable>,
+      default: () => {
+        return [];
+      }
+    }
+  },
+
+  created() {
+    const out = [...this.value];
+
+    this.variableDefinitions.forEach((def: ClusterClassVariable) => {
+      const defaultValue = def.schema.openAPIV3Schema.default;
+
+      if (!out.find((variable: any) => {
+        return variable.name === def.name;
+      }) && defaultValue) {
+        out.push({ name: def.name, value: defaultValue });
+      }
+    });
+
+    this.$emit('input', out);
+  },
+
+  computed: {
+    variableDefinitions() {
+      return this.clusterClass?.spec?.variables || [];
+    }
+  },
+
+  methods: {
+    valueFor(variableDef: ClusterClassVariable) {
+      return (this.value.find((variable: any) => variable.name === variableDef.name) || {}).value;
+    },
+
+    updateVariables(val: any, variableDef: ClusterClassVariable) {
+      const out = [...this.value] as Array<any>;
+      const existingIdx = this.value.findIndex((variable: any) => variable.name === variableDef.name);
+
+      if (existingIdx >= 0) {
+        out[existingIdx].value = val;
+      } else {
+        out.push({ value: val, name: variableDef.name });
+      }
+      this.$emit('input', out);
+    },
+
+  },
+
+});
+</script>
+
+<template>
+  <div>
+    <template v-if="variableDefinitions && variableDefinitions.length">
+      <Variable
+        v-for="variableDef in variableDefinitions"
+        :key="variableDef.name"
+        class="mt-10"
+        :variable="variableDef"
+        :value="valueFor(variableDef)"
+        @input="e=>updateVariables(e, variableDef)"
+      />
+    </template>
+  </div>
+</template>
diff --git a/pkg/capi/pages/blerg.vue b/pkg/capi/pages/blerg.vue
new file mode 100644
index 0000000..01baa4e
--- /dev/null
+++ b/pkg/capi/pages/blerg.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+import Vue from 'vue';
+import CCVariables from '../components/CCVariables';
+
+// TODO remove
+import data from '../components/CCVariables/data.ts';
+
+export default Vue.extend({
+  name: 'BlergPlaceholder',
+
+  components: { CCVariables },
+  data() {
+    return {
+      clusterClass: {
+        name: 'test-cc-data',
+        spec: { variables: data }
+      },
+
+      value: { spec: { topology: { variables: [] } } }
+    };
+  }
+});
+</script>
+
+<template><CCVariables v-model="value.spec.topology.variables" :cluster-class="clusterClass" /></template>
diff --git a/pkg/capi/routes/capi-routing.ts b/pkg/capi/routes/capi-routing.ts
index 17bb917..ca3381e 100644
--- a/pkg/capi/routes/capi-routing.ts
+++ b/pkg/capi/routes/capi-routing.ts
@@ -1,4 +1,5 @@
 import Dashboard from '../pages/index.vue';
+import blerg from '../pages/blerg.vue';
 
 const routes = [
   {
@@ -6,6 +7,11 @@ const routes = [
     path:      '/c/:cluster/manager/capi',
     component: Dashboard,
   },
+  {
+    name:      'c-cluster-manager-capi-blerg',
+    path:      '/c/:cluster/manager/capi/blerg',
+    component: blerg,
+  },
 ];
 
 export default routes;
diff --git a/pkg/capi/types/clusterClass.ts b/pkg/capi/types/clusterClass.ts
new file mode 100644
index 0000000..c964af4
--- /dev/null
+++ b/pkg/capi/types/clusterClass.ts
@@ -0,0 +1,39 @@
+
+export interface ClusterClassVariable {
+  name: String,
+  required: Boolean,
+  schema: {
+    openAPIV3Schema: {
+      additionalProperties?: Map<string, any>
+      default?: any
+      description?: String,
+      enum?: Array<any>,
+      example?: any,
+      exclusiveMaximum?: Boolean,
+      exclusiveMinimum?: Boolean,
+      format?: String,
+      items?: Array<any>,
+      maxItems?: Number,
+      maxLength?: Number,
+      maximum?: Number,
+      minItems?: Number,
+      minLength?: Number
+      minimum?: Number,
+      pattern?: String,
+      properties?: Map<string, any>,
+      required?: Array<String>,
+      type: String,
+      uniqueItems?: Boolean,
+      ['x-kubernetes-preserve-unknown-fields']?: Boolean
+    }
+  }
+}
+
+export interface ClusterClassSpec {
+  variables: Array<ClusterClassVariable>
+}
+
+export interface ClusterClass {
+name: String,
+spec: ClusterClassSpec
+}

From 89782ce34c1cbfb0aee7bafbd328e11ef18053f7 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:46:11 -0800
Subject: [PATCH 02/23] required validation

---
 pkg/capi/components/CCVariables/Enum.vue     | 65 -------------------
 pkg/capi/components/CCVariables/Variable.vue | 67 ++++++++++++++++++--
 pkg/capi/components/CCVariables/data.ts      | 27 ++++++++
 pkg/capi/components/CCVariables/index.vue    | 29 ++++++++-
 pkg/capi/pages/blerg.vue                     |  4 +-
 5 files changed, 120 insertions(+), 72 deletions(-)
 delete mode 100644 pkg/capi/components/CCVariables/Enum.vue

diff --git a/pkg/capi/components/CCVariables/Enum.vue b/pkg/capi/components/CCVariables/Enum.vue
deleted file mode 100644
index 15af2a2..0000000
--- a/pkg/capi/components/CCVariables/Enum.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import RadioButton from '@/pkg/rancher-components/src/components/Form/Radio/RadioButton';
-import RadioGroup from '@/pkg/rancher-components/src/components/Form/Radio/RadioGroup';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
-
-import { ClusterClassVariable } from '../../types/clusterClass.ts';
-
-// clusterclass variables can define a list of valid options for any 'type'
-// if type is string or number options will display in a single-choice labeledselect
-//
-// if the type is 'array':
-// if enum values are NOT arrays: show a multi-choice labeledselect
-// enum values are arrays: //TODO nb how to display complex enum?
-//
-// if the type is an object:
-// TODO nb how to display complex enum?
-//
-// if the type is boolean:
-// ...silly but possible. Show a checkbox.
-
-export default defineComponent({
-  name: 'CCVariablesEnumInput',
-
-  components: {
-    RadioGroup,
-    RadioButton,
-    LabeledSelect,
-    Checkbox
-  },
-
-  props: {
-    variable: {
-      type:     ClusterClassVariable,
-      required: true
-    },
-    value: {
-      type:    [String, Object, Boolean],
-      default: () => null
-    }
-  },
-
-  computed(){
-        schema() {
-      return this.variable?.schema?.openAPIV3Schema;
-    },
-
-    componentType(){
-      const enumValues = schema.enum
-      const isComplex = enumValues.find(val => typeof val === 'object')
-      if(enumValues.length <= 3 ){
-        return 'radio'
-      }
-
-    },
-
-    useMultiSelect(){}
-  },
-});
-</script>
-
-<template>
-<div>wow_its_fucking_nothing.jpeg</div>
-</template>
diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 3d9113e..1ba11d2 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -4,6 +4,8 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import KeyValue from '@shell/components/form/KeyValue';
 import ArrayList from '@shell/components/form/ArrayList';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import formRulesGenerator, { Validator } from '@shell/utils/validators/formRules';
 
 import { ClusterClassVariable } from '../../types/clusterClass.ts';
 
@@ -23,19 +25,22 @@ export default defineComponent({
     }
   },
 
+  watch: {
+    isValid(neu) {
+      this.$emit('validation-passed', neu);
+    }
+  },
+
   computed: {
     componentForType() {
       const { type } = this.schema;
       let out = null;
 
       // if the schema has valid options defined, use a different input:
-      // <=3 options: radio group
-      // >3 options: labeled select
+      // options are string or integer: labeledselect
       // options are array or object: //TODO nb fuck
       if (this.variableOptions) {
-        if (this.variableOptions.length <= 3) {
-          out = RadioGroup;
-        }
+        out = LabeledSelect;
       } else {
         switch (type) {
         case 'object':
@@ -90,6 +95,54 @@ export default defineComponent({
           return null;
         }
       });
+    },
+
+    isMultiSelect() {
+      return this.componentForType === LabeledSelect && this.schema.type === 'array' && typeof this.variableOptions?.[0] !== 'object';
+    },
+
+    /**
+     * format (string)
+     * exclusiveMinimum (integer/number)
+     * exclusiveMaximum (integer/number)
+     * maxItems (array)
+     * maxLength (string)
+     * maximum (integer/number)
+     * minItems (array)
+     * minLength (string)
+     * minimum (integer/number)
+     * pattern (string)
+     * uniqueItems (array)
+     * required (object)
+     */
+    validationRules() {
+      const out = [] as any;
+      const {
+        format,
+        exclusiveMinimum,
+        exclusiveMaximum,
+        maxItems,
+        maxLength,
+        maximum,
+        minItems,
+        minLength,
+        minimum,
+        pattern,
+        uniqueItems,
+        required: requiredFields
+      } = this.schema;
+
+      const required = this.variable?.required;
+
+      if (required) {
+        out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required);
+      }
+
+      return out;
+    },
+
+    isValid() {
+      return !this.validationRules.find((rule: Validator) => !!rule(this.value));
     }
   },
 
@@ -100,12 +153,16 @@ export default defineComponent({
   <component
     :is="componentForType"
     v-if="componentForType"
+    ref="validated-component"
     :value="value"
     :label="variable.name"
     :placeholder="schema.example"
     :tooltip="schema.description"
     :required="variable.required"
     :title="variable.name"
+    :options="variableOptions"
+    :multiple="isMultiSelect"
+    :rules="validationRules"
     @input="e=>$emit('input', e)"
   />
 </template>
diff --git a/pkg/capi/components/CCVariables/data.ts b/pkg/capi/components/CCVariables/data.ts
index 2d31517..1ff4609 100644
--- a/pkg/capi/components/CCVariables/data.ts
+++ b/pkg/capi/components/CCVariables/data.ts
@@ -52,6 +52,7 @@ export default [{
 },
 {
   name:     'testBoolean',
+  required: true,
   schema:
     {
       openAPIV3Schema:
@@ -73,4 +74,30 @@ export default [{
           { type: 'string' }
       }
     }
+},
+{
+  name:     'enums',
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'string',
+        description: 'This is a string type with enum defined',
+        enum:
+          ['option_1', 'option_2', 'option_3']
+      }
+    }
+},
+{
+  name:     'enums-multi',
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'array',
+        description: 'This is an array type with enum defined',
+        enum:
+          ['option_1', 'option_2', 'option_3']
+      }
+    }
 }];
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index a35563b..6da22bc 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import debounce from 'lodash/debounce';
 import { defineComponent } from 'vue';
 
 import { ClusterClassVariable } from '../../types/clusterClass.ts';
@@ -24,6 +25,19 @@ export default defineComponent({
     }
   },
 
+  data() {
+    return { errorMap: {} };
+  },
+
+  watch: {
+    hasValidationErrors: {
+      handler: debounce(function(neu) {
+        console.log('validation passed: ', !neu);
+        this.$emit('validation-passed', !neu);
+      }, 5),
+    }
+  },
+
   created() {
     const out = [...this.value];
 
@@ -43,7 +57,11 @@ export default defineComponent({
   computed: {
     variableDefinitions() {
       return this.clusterClass?.spec?.variables || [];
-    }
+    },
+
+    hasValidationErrors() {
+      return !!Object.keys(this.errorMap).length;
+    },
   },
 
   methods: {
@@ -63,6 +81,14 @@ export default defineComponent({
       this.$emit('input', out);
     },
 
+    updateErrors(isValid: boolean, variableDef: ClusterClassVariable) {
+      if (isValid && this.errorMap[variableDef.name]) {
+        this.$delete(this.errorMap, variableDef.name);
+      } else if (!isValid && !this.errorMap[variableDef.name]) {
+        this.$set(this.errorMap, variableDef.name, true);
+      }
+    },
+
   },
 
 });
@@ -78,6 +104,7 @@ export default defineComponent({
         :variable="variableDef"
         :value="valueFor(variableDef)"
         @input="e=>updateVariables(e, variableDef)"
+        @validation-passed="e=>updateErrors(e, variableDef)"
       />
     </template>
   </div>
diff --git a/pkg/capi/pages/blerg.vue b/pkg/capi/pages/blerg.vue
index 01baa4e..fff284c 100644
--- a/pkg/capi/pages/blerg.vue
+++ b/pkg/capi/pages/blerg.vue
@@ -22,4 +22,6 @@ export default Vue.extend({
 });
 </script>
 
-<template><CCVariables v-model="value.spec.topology.variables" :cluster-class="clusterClass" /></template>
+<template>
+  <CCVariables v-model="value.spec.topology.variables" :cluster-class="clusterClass" />
+</template>

From 850caa2a8e2c2244ca2f04af156b19e05353628f Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Tue, 12 Dec 2023 16:17:08 -0800
Subject: [PATCH 03/23] style

---
 pkg/capi/components/CCVariables/Variable.vue | 78 +++++++++++---------
 pkg/capi/components/CCVariables/data.ts      | 13 ++++
 pkg/capi/components/CCVariables/index.vue    | 26 +++++--
 pkg/capi/pages/blerg.vue                     |  4 +-
 pkg/capi/types/cluster.x-k8s.io.cluster.ts   | 13 ++++
 pkg/capi/types/clusterClass.ts               | 34 ++++-----
 6 files changed, 111 insertions(+), 57 deletions(-)
 create mode 100644 pkg/capi/types/cluster.x-k8s.io.cluster.ts

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 1ba11d2..4ef7742 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import KeyValue from '@shell/components/form/KeyValue';
@@ -7,7 +8,7 @@ import ArrayList from '@shell/components/form/ArrayList';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import formRulesGenerator, { Validator } from '@shell/utils/validators/formRules';
 
-import { ClusterClassVariable } from '../../types/clusterClass.ts';
+import type { ClusterClassVariable } from '../../types/clusterClass';
 
 // object, array, string, integer, number or boolean.
 
@@ -16,11 +17,11 @@ export default defineComponent({
 
   props: {
     variable: {
-      type:     ClusterClassVariable,
+      type:     Object as PropType<ClusterClassVariable>,
       required: true
     },
     value: {
-      type:    [String, Object, Boolean],
+      type:    [String, Object, Boolean, Array],
       default: () => null
     }
   },
@@ -36,13 +37,11 @@ export default defineComponent({
       const { type } = this.schema;
       let out = null;
 
-      // if the schema has valid options defined, use a different input:
-      // options are string or integer: labeledselect
-      // options are array or object: //TODO nb fuck
       if (this.variableOptions) {
         out = LabeledSelect;
       } else {
         switch (type) {
+        // TODO nb pre-populate if schema defines fields
         case 'object':
           out = KeyValue;
           break;
@@ -69,6 +68,15 @@ export default defineComponent({
       return out;
     },
 
+    componentWidths() {
+      return {
+        LabeledSelect: 'span-3',
+        LabeledInput:  'span-3',
+        Checkbox:      'span-3',
+        ArrayList:     'span-6'
+      };
+    },
+
     schema() {
       return this.variable?.schema?.openAPIV3Schema;
     },
@@ -82,18 +90,7 @@ export default defineComponent({
       }
 
       return opts.map((opt: any) => {
-        switch (typeof opt) {
-        case 'boolean':
-          return opt.toString();
-        case 'string':
-          return opt;
-        // todo nb how does labeled select handle numbers?
-        case 'number':
-          return opt.toString();
-        case 'object':
-          // TODO nb fuck
-          return null;
-        }
+        return typeof opt === 'object' ? JSON.stringify(opt) : opt;
       });
     },
 
@@ -146,23 +143,38 @@ export default defineComponent({
     }
   },
 
+  methods: {
+    setValue(e: any) {
+      let out = e;
+
+      const { type } = this.schema;
+
+      if (type === 'object') {
+        try {
+          out = JSON.parse(e);
+        } catch {}
+      }
+      this.$emit('input', out);
+    }
+  },
 });
 </script>
 
 <template>
-  <component
-    :is="componentForType"
-    v-if="componentForType"
-    ref="validated-component"
-    :value="value"
-    :label="variable.name"
-    :placeholder="schema.example"
-    :tooltip="schema.description"
-    :required="variable.required"
-    :title="variable.name"
-    :options="variableOptions"
-    :multiple="isMultiSelect"
-    :rules="validationRules"
-    @input="e=>$emit('input', e)"
-  />
+  <div>
+    <component
+      :is="componentForType"
+      v-if="componentForType"
+      :value="value"
+      :label="variable.name"
+      :placeholder="schema.example"
+      :tooltip="schema.description"
+      :required="variable.required"
+      :title="variable.name"
+      :options="variableOptions"
+      :multiple="isMultiSelect"
+      :rules="validationRules"
+      @input="setValue"
+    />
+  </div>
 </template>
diff --git a/pkg/capi/components/CCVariables/data.ts b/pkg/capi/components/CCVariables/data.ts
index 1ff4609..d09cabe 100644
--- a/pkg/capi/components/CCVariables/data.ts
+++ b/pkg/capi/components/CCVariables/data.ts
@@ -100,4 +100,17 @@ export default [{
           ['option_1', 'option_2', 'option_3']
       }
     }
+},
+{
+  name:     'enums-object',
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'object',
+        description: 'This is an object type with enum defined',
+        enum:
+          [{ option_1: '1' }, { option_2: '2' }, { option_3: '3' }]
+      }
+    }
 }];
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 6da22bc..874bd91 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import debounce from 'lodash/debounce';
 import { defineComponent } from 'vue';
-
-import { ClusterClassVariable } from '../../types/clusterClass.ts';
+import type { PropType } from 'vue';
+import { ClusterClassVariable } from '../../types/clusterClass';
+import type { CapiClusterVariable } from '../../types/cluster.x-k8s.io.cluster';
 import Variable from './Variable.vue';
 
 export default defineComponent({
@@ -18,7 +19,7 @@ export default defineComponent({
 
     // <cluster.x-k8s.io>.spec.topology.variables
     value: {
-      type:    Array as unknown as Array<ClusterClassVariable>,
+      type:    Array as PropType<Array<CapiClusterVariable>>,
       default: () => {
         return [];
       }
@@ -32,7 +33,6 @@ export default defineComponent({
   watch: {
     hasValidationErrors: {
       handler: debounce(function(neu) {
-        console.log('validation passed: ', !neu);
         this.$emit('validation-passed', !neu);
       }, 5),
     }
@@ -95,12 +95,11 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <div class="variables">
     <template v-if="variableDefinitions && variableDefinitions.length">
       <Variable
         v-for="variableDef in variableDefinitions"
         :key="variableDef.name"
-        class="mt-10"
         :variable="variableDef"
         :value="valueFor(variableDef)"
         @input="e=>updateVariables(e, variableDef)"
@@ -109,3 +108,18 @@ export default defineComponent({
     </template>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.variables {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &>*{
+    flex: 1 0 20%;
+    margin: 0 1.75% 10px 0;
+    max-width: 23.25%;
+    align-self: center;
+  }
+}
+</style>
diff --git a/pkg/capi/pages/blerg.vue b/pkg/capi/pages/blerg.vue
index fff284c..137f418 100644
--- a/pkg/capi/pages/blerg.vue
+++ b/pkg/capi/pages/blerg.vue
@@ -23,5 +23,7 @@ export default Vue.extend({
 </script>
 
 <template>
-  <CCVariables v-model="value.spec.topology.variables" :cluster-class="clusterClass" />
+  <div>
+    <CCVariables v-model="value.spec.topology.variables" :cluster-class="clusterClass" />
+  </div>
 </template>
diff --git a/pkg/capi/types/cluster.x-k8s.io.cluster.ts b/pkg/capi/types/cluster.x-k8s.io.cluster.ts
new file mode 100644
index 0000000..9f857d5
--- /dev/null
+++ b/pkg/capi/types/cluster.x-k8s.io.cluster.ts
@@ -0,0 +1,13 @@
+
+export interface CapiClusterVariable {
+  name: string,
+  value?: any
+}
+
+export interface CapiCluster {
+  spec?: {
+    topology?: {
+      variables?: Array<CapiClusterVariable>
+    }
+  }
+}
diff --git a/pkg/capi/types/clusterClass.ts b/pkg/capi/types/clusterClass.ts
index c964af4..0612cb7 100644
--- a/pkg/capi/types/clusterClass.ts
+++ b/pkg/capi/types/clusterClass.ts
@@ -1,30 +1,30 @@
 
 export interface ClusterClassVariable {
-  name: String,
-  required: Boolean,
+  name: string,
+  required: boolean,
   schema: {
     openAPIV3Schema: {
       additionalProperties?: Map<string, any>
       default?: any
-      description?: String,
+      description?: string,
       enum?: Array<any>,
       example?: any,
-      exclusiveMaximum?: Boolean,
-      exclusiveMinimum?: Boolean,
-      format?: String,
+      exclusiveMaximum?: boolean,
+      exclusiveMinimum?: boolean,
+      format?: string,
       items?: Array<any>,
-      maxItems?: Number,
-      maxLength?: Number,
-      maximum?: Number,
-      minItems?: Number,
-      minLength?: Number
-      minimum?: Number,
-      pattern?: String,
+      maxItems?: number,
+      maxLength?: number,
+      maximum?: number,
+      minItems?: number,
+      minLength?: number
+      minimum?: number,
+      pattern?: string,
       properties?: Map<string, any>,
       required?: Array<String>,
-      type: String,
-      uniqueItems?: Boolean,
-      ['x-kubernetes-preserve-unknown-fields']?: Boolean
+      type: string,
+      uniqueItems?: boolean,
+      ['x-kubernetes-preserve-unknown-fields']?: boolean
     }
   }
 }
@@ -34,6 +34,6 @@ export interface ClusterClassSpec {
 }
 
 export interface ClusterClass {
-name: String,
+name: string,
 spec: ClusterClassSpec
 }

From 7a1106bf2ced04815f91721765a4629d422dd5df Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 13 Dec 2023 11:55:26 -0800
Subject: [PATCH 04/23] more validators

---
 pkg/capi/components/CCVariables/Variable.vue |  34 +----
 pkg/capi/components/CCVariables/data.ts      | 124 ++++++++++++++++---
 pkg/capi/l10n/en-us.yaml                     |   9 +-
 pkg/capi/util/validators.ts                  | 105 ++++++++++++++++
 4 files changed, 221 insertions(+), 51 deletions(-)
 create mode 100644 pkg/capi/util/validators.ts

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 4ef7742..57f1ac6 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -9,6 +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';
 
 // object, array, string, integer, number or boolean.
 
@@ -21,7 +22,7 @@ export default defineComponent({
       required: true
     },
     value: {
-      type:    [String, Object, Boolean, Array],
+      type:    [String, Object, Boolean, Array, Number],
       default: () => null
     }
   },
@@ -41,7 +42,6 @@ export default defineComponent({
         out = LabeledSelect;
       } else {
         switch (type) {
-        // TODO nb pre-populate if schema defines fields
         case 'object':
           out = KeyValue;
           break;
@@ -98,36 +98,8 @@ export default defineComponent({
       return this.componentForType === LabeledSelect && this.schema.type === 'array' && typeof this.variableOptions?.[0] !== 'object';
     },
 
-    /**
-     * format (string)
-     * exclusiveMinimum (integer/number)
-     * exclusiveMaximum (integer/number)
-     * maxItems (array)
-     * maxLength (string)
-     * maximum (integer/number)
-     * minItems (array)
-     * minLength (string)
-     * minimum (integer/number)
-     * pattern (string)
-     * uniqueItems (array)
-     * required (object)
-     */
     validationRules() {
-      const out = [] as any;
-      const {
-        format,
-        exclusiveMinimum,
-        exclusiveMaximum,
-        maxItems,
-        maxLength,
-        maximum,
-        minItems,
-        minLength,
-        minimum,
-        pattern,
-        uniqueItems,
-        required: requiredFields
-      } = this.schema;
+      const out = openAPIV3SchemaValidators(this.$store.getters['i18n/t'], { key: this.variable.name }, this.schema);
 
       const required = this.variable?.required;
 
diff --git a/pkg/capi/components/CCVariables/data.ts b/pkg/capi/components/CCVariables/data.ts
index d09cabe..c7bbebd 100644
--- a/pkg/capi/components/CCVariables/data.ts
+++ b/pkg/capi/components/CCVariables/data.ts
@@ -1,19 +1,19 @@
 export default [{
-  name:     'region',
-  required: false,
+  name:     'string-required',
+  required: true,
   schema:
     {
       openAPIV3Schema:
       {
         type:        'string',
-        // default:     'us-east-1',
-        description: 'The Azure region to create machines in'
+        default:     'us-east-1',
+        description: 'This string has only required validation'
       }
     }
 },
 
 {
-  name:     'sshKeyName',
+  name:     'string-min-length',
   required: true,
   schema:
     {
@@ -21,32 +21,101 @@ export default [{
       {
         type:        'string',
         default:     'default',
-        description: 'SSH key name description text go here',
-        example:     'sshkeyexample'
+        description: 'this string has a rule that its length must be greater than or equal to 3',
+        example:     'sshkeyexample',
+        minLength:   3
       }
     }
 },
 {
-  name:     'controlPlaneMachineType',
+  name:     'string-max-length',
   required: true,
   schema:
     {
       openAPIV3Schema:
       {
-        type:    'string',
-        default: 't3.large'
+        type:        'string',
+        default:     't3.large',
+        description: 'this string has a rule that its length must be less than or equal to 10',
+        maxLength:   10
       }
     }
 },
 {
-  name:     'workerMachineType',
+  name:     'string-min-max-length',
   required: true,
   schema:
     {
       openAPIV3Schema:
       {
-        type:    'string',
-        default: 't3.large'
+        type:        'string',
+        default:     't3.large',
+        description: 'this string has a rules that its length must be between 3 and 10',
+        maxLength:   10,
+        minLength:   3
+      }
+    }
+},
+
+{
+  name:     'string-pattern',
+  required: true,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'string',
+        default:     'default',
+        description: 'this string must match the pattern /^[a-z]+-[0-9]+$/',
+        example:     'sshkeyexample',
+        pattern:     '^[a-z]+-[0-9]+$'
+      }
+    }
+},
+{
+  name:     'string-no-validate',
+  required: false,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'string',
+        default:     't3.large',
+        description: 'this string has no validation'
+      }
+    }
+},
+
+{
+  name:     'number-exclusive-min-max',
+  required: false,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:             'number',
+        default:          3,
+        description:      'this string has exclusive min max of 2 and 5',
+        exclusiveMinimum: true,
+        exclusiveMaximum: true,
+        minimum:          2,
+        maximum:          5
+      }
+    }
+},
+
+{
+  name:     'number-inclusive-min-max',
+  required: false,
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'number',
+        default:     3,
+        description: 'this string has inclusive min max of 2 and 5',
+        minimum:     2,
+        maximum:     5
       }
     }
 },
@@ -63,15 +132,30 @@ export default [{
     }
 },
 {
-  name:     'testArrayStrings',
+  name:     'testArrayStrings-min',
+  schema:
+    {
+      openAPIV3Schema:
+      {
+        type:        'array',
+        description: 'This array must have at least 3 items',
+        items:
+          { type: 'string' },
+        minItems: 3
+      }
+    }
+},
+{
+  name:     'testArrayStrings-max',
   schema:
     {
       openAPIV3Schema:
       {
         type:        'array',
-        description: 'This is a test array value',
+        description: 'This array must have at most 5 items',
         items:
-          { type: 'string' }
+          { type: 'string' },
+        maxItems: 5
       }
     }
 },
@@ -95,9 +179,10 @@ export default [{
       openAPIV3Schema:
       {
         type:        'array',
-        description: 'This is an array type with enum defined',
+        description: 'This is an array type with enum defined. It may have at most two elements',
         enum:
-          ['option_1', 'option_2', 'option_3']
+          ['option_1', 'option_2', 'option_3'],
+        maxItems: 2
       }
     }
 },
@@ -113,4 +198,5 @@ export default [{
           [{ option_1: '1' }, { option_2: '2' }, { option_3: '3' }]
       }
     }
-}];
+},
+];
diff --git a/pkg/capi/l10n/en-us.yaml b/pkg/capi/l10n/en-us.yaml
index e112800..ef4d22e 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -37,4 +37,11 @@ typeLabel:
     {count, plural,
       one { Cluster Class}
       other { Cluster Classes}
-    }
\ No newline at end of file
+    }
+validation:
+  exclusiveMaxValue: '"{key}" must be less than {maximum}.'
+  exclusiveMinValue: '"{key}" must be greater than {minimum}.'
+  maxItems: '"{key}" may not contain more than {maxItems} items.'
+  minItems: '"{key}" must contain at least {minItems} items.'
+  pattern: '"{key}" must match the pattern <code>{pattern}</code>.'
+  uniqueItems: '"{key}" may not contain duplicate elements.'
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
new file mode 100644
index 0000000..7d15e6b
--- /dev/null
+++ b/pkg/capi/util/validators.ts
@@ -0,0 +1,105 @@
+// * format (string)
+// * exclusiveMinimum (integer/number)
+// * exclusiveMaximum (integer/number)
+// * maxItems (array)
+// * maxLength (string)
+// * maximum (integer/number)
+// * minItems (array)
+// * minLength (string)
+// * minimum (integer/number)
+// * pattern (string)
+// * uniqueItems (array)
+// * required (object)
+
+import formRulesGenerator, { Validator, ValidationOptions, ValidatorFactory } from '@shell/utils/validators/formRules';
+import { Translation } from '@shell/types/t';
+
+// const formatPatternMap = {
+//   "bsonobjectid", // bson object ID
+// 	"uri",          // an URI as parsed by Golang net/url.ParseRequestURI
+// 	"email",        // an email address as parsed by Golang net/mail.ParseAddress
+// 	"hostname",     // a valid representation for an Internet host name, as defined by RFC 1034, section 3.1 [RFC1034].
+// 	"ipv4",         // an IPv4 IP as parsed by Golang net.ParseIP
+// 	"ipv6",         // an IPv6 IP as parsed by Golang net.ParseIP
+// 	"cidr",         // a CIDR as parsed by Golang net.ParseCIDR
+// 	"mac",          // a MAC address as parsed by Golang net.ParseMAC
+// 	"uuid":         /(?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/,
+// 	"uuid3",        // an UUID3 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?3[0-9a-f]{3}-?[0-9a-f]{4}-?[0-9a-f]{12}$
+// 	"uuid4",        // an UUID4 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
+// 	"uuid5",        // an UUID6 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?5[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
+// 	"isbn",         // an ISBN10 or ISBN13 number string like "0321751043" or "978-0321751041"
+// 	"isbn10",       // an ISBN10 number string like "0321751043"
+// 	"isbn13",       // an ISBN13 number string like "978-0321751041"
+// 	"creditcard":   /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\\d{3})\\d{11})$/,
+// 	"ssn",          // a U.S. social security number following the regex ^\\d{3}[- ]?\\d{2}[- ]?\\d{4}$
+// 	"hexcolor",     // an hexadecimal color code like "#FFFFFF", following the regex ^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$
+// 	"rgbcolor",     // an RGB color code like rgb like "rgb(255,255,2559"
+// 	"byte",         // base64 encoded binary data
+// 	"password",     // any kind of string
+// 	"date",         // a date string like "2006-01-02" as defined by full-date in RFC3339
+// 	"duration",     // a duration string like "22 ns" as parsed by Golang time.ParseDuration or compatible with Scala duration format
+// 	"datetime",     // a date time string like "2014-12-15T19:30:20.000Z" as defined by date-time in RFC3339
+// }
+
+export default function(t: Translation, { key = 'Value' }: ValidationOptions, openAPIV3Schema: any): { [key:string]: Validator<any> | ValidatorFactory } {
+  const {
+    format,
+    exclusiveMinimum,
+    exclusiveMaximum,
+    maxItems,
+    maxLength,
+    maximum,
+    minItems,
+    minLength,
+    minimum,
+    pattern,
+    uniqueItems,
+    required: requiredFields
+  } = openAPIV3Schema;
+
+  const builtInRules = formRulesGenerator(t, { key } );
+  const out = [] as any;
+
+  if (maximum) {
+    if (exclusiveMaximum) {
+      out.push((val: string | number) => Number(val) >= Number(maximum) ? t('validation.exclusiveMaxValue', { key, maximum }) : undefined);
+    } else {
+      // out.push(builtInRules.maxValue(maximum));
+    }
+  }
+
+  if (minimum !== undefined) {
+    if (exclusiveMinimum) {
+      out.push((val: string | number) => Number(val) <= Number(minimum) ? t('validation.exclusiveMinValue', { key, minimum }) : undefined);
+    } else {
+      // out.push(builtInRules.minValue(minimum));
+    }
+  }
+  if (minLength !== undefined) {
+    // out.push(builtInRules.minLength(minLength));
+  }
+  if (maxLength) {
+    // out.push(builtInRules.maxLength(maxLength));
+  }
+  if (maxItems) {
+    out.push((val: any[]) => val?.length > maxItems ? t('validation.maxItems', { key, maxItems }) : undefined);
+  }
+
+  if (minItems !== undefined) {
+    out.push((val: any[]) => val?.length < minItems ? t('validation.minItems', { key, minItems }) : undefined);
+  }
+
+  if (pattern) {
+    out.push((val: string) => val && !val.match(new RegExp(pattern)) ? t('validation.pattern', { key, pattern }) : undefined);
+  }
+
+  if (uniqueItems) {
+    out.push((val: any[]) => val.filter((item, index) => val.indexOf(item) !== index)?.length ? t('validation.uniqueItems', { key }) : undefined);
+  }
+
+  if (requiredFields) {
+    out.push((val: any) => requiredFields.find((key: string) => val[key] === undefined) ? t('validation.requiredFields', { key, requiredFields: requiredFields.toString() }) : undefined);
+  }
+
+  return out;
+}

From c19c624beebb7c738ee293281b172429af6c13a2 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 13 Dec 2023 12:56:36 -0800
Subject: [PATCH 05/23] fix length validators

---
 pkg/capi/components/CCVariables/Variable.vue |  2 +-
 pkg/capi/components/CCVariables/index.vue    |  2 +-
 pkg/capi/util/validators.ts                  | 21 ++++++++++----------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 57f1ac6..4d14c21 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -104,7 +104,7 @@ export default defineComponent({
       const required = this.variable?.required;
 
       if (required) {
-        out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required);
+        out.push(formRulesGenerator(this.$store.getters['i18n/t'], { key: this.variable.name }).required as Validator);
       }
 
       return out;
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 874bd91..aa88746 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -27,7 +27,7 @@ export default defineComponent({
   },
 
   data() {
-    return { errorMap: {} };
+    return { errorMap: {} as {[key:string]: boolean} };
   },
 
   watch: {
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index 7d15e6b..f27e2d5 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -11,7 +11,7 @@
 // * uniqueItems (array)
 // * required (object)
 
-import formRulesGenerator, { Validator, ValidationOptions, ValidatorFactory } from '@shell/utils/validators/formRules';
+import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
 
 // const formatPatternMap = {
@@ -41,7 +41,7 @@ import { Translation } from '@shell/types/t';
 // 	"datetime",     // a date time string like "2014-12-15T19:30:20.000Z" as defined by date-time in RFC3339
 // }
 
-export default function(t: Translation, { key = 'Value' }: ValidationOptions, openAPIV3Schema: any): { [key:string]: Validator<any> | ValidatorFactory } {
+export default function(t: Translation, { key = 'Value' }: ValidationOptions, openAPIV3Schema: any): Validator[] {
   const {
     format,
     exclusiveMinimum,
@@ -57,14 +57,13 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions, op
     required: requiredFields
   } = openAPIV3Schema;
 
-  const builtInRules = formRulesGenerator(t, { key } );
-  const out = [] as any;
+  const out = [] as any[];
 
   if (maximum) {
     if (exclusiveMaximum) {
       out.push((val: string | number) => Number(val) >= Number(maximum) ? t('validation.exclusiveMaxValue', { key, maximum }) : undefined);
     } else {
-      // out.push(builtInRules.maxValue(maximum));
+      out.push((val: string | number) => Number(val) > Number(maximum) ? t('validation.maxValue', { key, max: maximum }) : undefined);
     }
   }
 
@@ -72,21 +71,21 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions, op
     if (exclusiveMinimum) {
       out.push((val: string | number) => Number(val) <= Number(minimum) ? t('validation.exclusiveMinValue', { key, minimum }) : undefined);
     } else {
-      // out.push(builtInRules.minValue(minimum));
+      out.push((val: string | number) => Number(val) < Number(minimum) ? t('validation.minValue', { key, min: minimum }) : undefined);
     }
   }
   if (minLength !== undefined) {
-    // out.push(builtInRules.minLength(minLength));
+    out.push((val: string) => val && val.length < Number(minLength) ? t('validation.minLength', { key, min: minLength }) : undefined);
   }
   if (maxLength) {
-    // out.push(builtInRules.maxLength(maxLength));
+    out.push((val: string) => val && val.length > Number(maxLength) ? t('validation.minLength', { key, max: maxLength }) : undefined);
   }
   if (maxItems) {
-    out.push((val: any[]) => val?.length > maxItems ? t('validation.maxItems', { key, maxItems }) : undefined);
+    out.push((val: any[]) => val && val.length > maxItems ? t('validation.maxItems', { key, maxItems }) : undefined);
   }
 
   if (minItems !== undefined) {
-    out.push((val: any[]) => val?.length < minItems ? t('validation.minItems', { key, minItems }) : undefined);
+    out.push((val: any[]) => val && val.length < minItems ? t('validation.minItems', { key, minItems }) : undefined);
   }
 
   if (pattern) {
@@ -94,7 +93,7 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions, op
   }
 
   if (uniqueItems) {
-    out.push((val: any[]) => val.filter((item, index) => val.indexOf(item) !== index)?.length ? t('validation.uniqueItems', { key }) : undefined);
+    out.push((val: any[]) => val && val.filter((item, index) => val.indexOf(item) !== index).length ? t('validation.uniqueItems', { key }) : undefined);
   }
 
   if (requiredFields) {

From 51566eb96b58e1623e3a2a59ff85651bd6ab167e Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:00:32 -0800
Subject: [PATCH 06/23] remove test page

---
 .vscode/settings.json                        |   3 -
 pkg/capi/components/CCVariables/Variable.vue |   2 +-
 pkg/capi/components/CCVariables/data.ts      | 202 -------------------
 pkg/capi/pages/blerg.vue                     |  29 ---
 pkg/capi/routes/capi-routing.ts              |   6 -
 pkg/capi/util/validators.ts                  |  28 ---
 6 files changed, 1 insertion(+), 269 deletions(-)
 delete mode 100644 .vscode/settings.json
 delete mode 100644 pkg/capi/components/CCVariables/data.ts
 delete mode 100644 pkg/capi/pages/blerg.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 3662b37..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 4d14c21..88bd6c8 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -81,7 +81,7 @@ export default defineComponent({
       return this.variable?.schema?.openAPIV3Schema;
     },
 
-    // the schema may define a list of valid options - format them to work correctly in labeledselect
+    // options may be arrays or objects - stringify them to display in labeledselect
     variableOptions() {
       const opts = this.schema?.enum;
 
diff --git a/pkg/capi/components/CCVariables/data.ts b/pkg/capi/components/CCVariables/data.ts
deleted file mode 100644
index c7bbebd..0000000
--- a/pkg/capi/components/CCVariables/data.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-export default [{
-  name:     'string-required',
-  required: true,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        default:     'us-east-1',
-        description: 'This string has only required validation'
-      }
-    }
-},
-
-{
-  name:     'string-min-length',
-  required: true,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        default:     'default',
-        description: 'this string has a rule that its length must be greater than or equal to 3',
-        example:     'sshkeyexample',
-        minLength:   3
-      }
-    }
-},
-{
-  name:     'string-max-length',
-  required: true,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        default:     't3.large',
-        description: 'this string has a rule that its length must be less than or equal to 10',
-        maxLength:   10
-      }
-    }
-},
-{
-  name:     'string-min-max-length',
-  required: true,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        default:     't3.large',
-        description: 'this string has a rules that its length must be between 3 and 10',
-        maxLength:   10,
-        minLength:   3
-      }
-    }
-},
-
-{
-  name:     'string-pattern',
-  required: true,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        default:     'default',
-        description: 'this string must match the pattern /^[a-z]+-[0-9]+$/',
-        example:     'sshkeyexample',
-        pattern:     '^[a-z]+-[0-9]+$'
-      }
-    }
-},
-{
-  name:     'string-no-validate',
-  required: false,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        default:     't3.large',
-        description: 'this string has no validation'
-      }
-    }
-},
-
-{
-  name:     'number-exclusive-min-max',
-  required: false,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:             'number',
-        default:          3,
-        description:      'this string has exclusive min max of 2 and 5',
-        exclusiveMinimum: true,
-        exclusiveMaximum: true,
-        minimum:          2,
-        maximum:          5
-      }
-    }
-},
-
-{
-  name:     'number-inclusive-min-max',
-  required: false,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'number',
-        default:     3,
-        description: 'this string has inclusive min max of 2 and 5',
-        minimum:     2,
-        maximum:     5
-      }
-    }
-},
-{
-  name:     'testBoolean',
-  required: true,
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'boolean',
-        description: 'This is a test value'
-      }
-    }
-},
-{
-  name:     'testArrayStrings-min',
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'array',
-        description: 'This array must have at least 3 items',
-        items:
-          { type: 'string' },
-        minItems: 3
-      }
-    }
-},
-{
-  name:     'testArrayStrings-max',
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'array',
-        description: 'This array must have at most 5 items',
-        items:
-          { type: 'string' },
-        maxItems: 5
-      }
-    }
-},
-{
-  name:     'enums',
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'string',
-        description: 'This is a string type with enum defined',
-        enum:
-          ['option_1', 'option_2', 'option_3']
-      }
-    }
-},
-{
-  name:     'enums-multi',
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'array',
-        description: 'This is an array type with enum defined. It may have at most two elements',
-        enum:
-          ['option_1', 'option_2', 'option_3'],
-        maxItems: 2
-      }
-    }
-},
-{
-  name:     'enums-object',
-  schema:
-    {
-      openAPIV3Schema:
-      {
-        type:        'object',
-        description: 'This is an object type with enum defined',
-        enum:
-          [{ option_1: '1' }, { option_2: '2' }, { option_3: '3' }]
-      }
-    }
-},
-];
diff --git a/pkg/capi/pages/blerg.vue b/pkg/capi/pages/blerg.vue
deleted file mode 100644
index 137f418..0000000
--- a/pkg/capi/pages/blerg.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-import Vue from 'vue';
-import CCVariables from '../components/CCVariables';
-
-// TODO remove
-import data from '../components/CCVariables/data.ts';
-
-export default Vue.extend({
-  name: 'BlergPlaceholder',
-
-  components: { CCVariables },
-  data() {
-    return {
-      clusterClass: {
-        name: 'test-cc-data',
-        spec: { variables: data }
-      },
-
-      value: { spec: { topology: { variables: [] } } }
-    };
-  }
-});
-</script>
-
-<template>
-  <div>
-    <CCVariables v-model="value.spec.topology.variables" :cluster-class="clusterClass" />
-  </div>
-</template>
diff --git a/pkg/capi/routes/capi-routing.ts b/pkg/capi/routes/capi-routing.ts
index ca3381e..17bb917 100644
--- a/pkg/capi/routes/capi-routing.ts
+++ b/pkg/capi/routes/capi-routing.ts
@@ -1,5 +1,4 @@
 import Dashboard from '../pages/index.vue';
-import blerg from '../pages/blerg.vue';
 
 const routes = [
   {
@@ -7,11 +6,6 @@ const routes = [
     path:      '/c/:cluster/manager/capi',
     component: Dashboard,
   },
-  {
-    name:      'c-cluster-manager-capi-blerg',
-    path:      '/c/:cluster/manager/capi/blerg',
-    component: blerg,
-  },
 ];
 
 export default routes;
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index f27e2d5..c770ae3 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -14,36 +14,8 @@
 import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
 
-// const formatPatternMap = {
-//   "bsonobjectid", // bson object ID
-// 	"uri",          // an URI as parsed by Golang net/url.ParseRequestURI
-// 	"email",        // an email address as parsed by Golang net/mail.ParseAddress
-// 	"hostname",     // a valid representation for an Internet host name, as defined by RFC 1034, section 3.1 [RFC1034].
-// 	"ipv4",         // an IPv4 IP as parsed by Golang net.ParseIP
-// 	"ipv6",         // an IPv6 IP as parsed by Golang net.ParseIP
-// 	"cidr",         // a CIDR as parsed by Golang net.ParseCIDR
-// 	"mac",          // a MAC address as parsed by Golang net.ParseMAC
-// 	"uuid":         /(?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/,
-// 	"uuid3",        // an UUID3 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?3[0-9a-f]{3}-?[0-9a-f]{4}-?[0-9a-f]{12}$
-// 	"uuid4",        // an UUID4 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
-// 	"uuid5",        // an UUID6 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?5[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
-// 	"isbn",         // an ISBN10 or ISBN13 number string like "0321751043" or "978-0321751041"
-// 	"isbn10",       // an ISBN10 number string like "0321751043"
-// 	"isbn13",       // an ISBN13 number string like "978-0321751041"
-// 	"creditcard":   /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\\d{3})\\d{11})$/,
-// 	"ssn",          // a U.S. social security number following the regex ^\\d{3}[- ]?\\d{2}[- ]?\\d{4}$
-// 	"hexcolor",     // an hexadecimal color code like "#FFFFFF", following the regex ^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$
-// 	"rgbcolor",     // an RGB color code like rgb like "rgb(255,255,2559"
-// 	"byte",         // base64 encoded binary data
-// 	"password",     // any kind of string
-// 	"date",         // a date string like "2006-01-02" as defined by full-date in RFC3339
-// 	"duration",     // a duration string like "22 ns" as parsed by Golang time.ParseDuration or compatible with Scala duration format
-// 	"datetime",     // a date time string like "2014-12-15T19:30:20.000Z" as defined by date-time in RFC3339
-// }
-
 export default function(t: Translation, { key = 'Value' }: ValidationOptions, openAPIV3Schema: any): Validator[] {
   const {
-    format,
     exclusiveMinimum,
     exclusiveMaximum,
     maxItems,

From f07b726eaf58a71312298b37fc34454913adc7a2 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 13 Dec 2023 13:11:06 -0800
Subject: [PATCH 07/23] jsdoc openapiv3schema validator function

---
 pkg/capi/components/CCVariables/Variable.vue | 13 +---------
 pkg/capi/util/validators.ts                  | 26 ++++++++------------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 88bd6c8..53e74fb 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -9,9 +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';
-
-// object, array, string, integer, number or boolean.
+import { openAPIV3SchemaValidators } from '../../util/validators';
 
 export default defineComponent({
   name: 'CCVariable',
@@ -68,15 +66,6 @@ export default defineComponent({
       return out;
     },
 
-    componentWidths() {
-      return {
-        LabeledSelect: 'span-3',
-        LabeledInput:  'span-3',
-        Checkbox:      'span-3',
-        ArrayList:     'span-6'
-      };
-    },
-
     schema() {
       return this.variable?.schema?.openAPIV3Schema;
     },
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index c770ae3..424aebc 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -1,20 +1,14 @@
-// * format (string)
-// * exclusiveMinimum (integer/number)
-// * exclusiveMaximum (integer/number)
-// * maxItems (array)
-// * maxLength (string)
-// * maximum (integer/number)
-// * minItems (array)
-// * minLength (string)
-// * minimum (integer/number)
-// * pattern (string)
-// * uniqueItems (array)
-// * required (object)
-
 import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
-
-export default function(t: Translation, { key = 'Value' }: ValidationOptions, openAPIV3Schema: any): Validator[] {
+/**
+ *
+ * @param t this.$store.getters[i18n/t]
+ * @param param1 param1.key should be the (already localized) label of the field being validated
+ * @param openAPIV3Schema cluster class variable schema.openapiv3schema
+ *
+ * @returns an array of validator functions that work with the form-validation mixin. These can be supplied to any component wth the labeled-form-element mixin using the rules prop
+ */
+export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value' }: ValidationOptions, openAPIV3Schema: any): Validator[] {
   const {
     exclusiveMinimum,
     exclusiveMaximum,
@@ -73,4 +67,4 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions, op
   }
 
   return out;
-}
+};

From eabe1464e996fb0fd48725d8dec1039014cc8c66 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 18 Dec 2023 11:11:05 -0800
Subject: [PATCH 08/23] fix variable widths and new rows

---
 pkg/capi/components/CCVariables/Variable.vue | 31 +++++++----
 pkg/capi/components/CCVariables/index.vue    | 47 ++++++++++++----
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue   | 57 ++++++++++++++++++++
 pkg/capi/util/validators.ts                  |  2 +-
 4 files changed, 117 insertions(+), 20 deletions(-)
 create mode 100644 pkg/capi/edit/cluster.x-k8s.io.cluster.vue

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 53e74fb..4257fbe 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -37,26 +37,29 @@ export default defineComponent({
       let out = null;
 
       if (this.variableOptions) {
-        out = LabeledSelect;
+        out = { component: LabeledSelect, name: 'LabeledSelect' };
       } else {
         switch (type) {
         case 'object':
-          out = KeyValue;
+          out = { component: KeyValue, name: 'KeyValue' };
           break;
         case 'array':
-          out = ArrayList;
+          out = { component: ArrayList, name: 'ArrayList' };
           break;
         case 'string':
-          out = LabeledInput;
+          out = { component: LabeledInput, name: 'LabeledInput' };
           break;
         case 'integer':
-          out = LabeledInput;
+          out = { component: LabeledInput, name: 'LabeledInput' };
+
           break;
         case 'number':
-          out = LabeledInput;
+          out = { component: LabeledInput, name: 'LabeledInput' };
+
           break;
         case 'boolean':
-          out = Checkbox;
+          out = { component: Checkbox, name: 'Checkbox' };
+
           break;
         default:
           break;
@@ -101,6 +104,10 @@ export default defineComponent({
 
     isValid() {
       return !this.validationRules.find((rule: Validator) => !!rule(this.value));
+    },
+
+    widerComponent() {
+      return this.componentForType?.name === 'ArrayList' || this.componentForType?.name === 'KeyValue';
     }
   },
 
@@ -122,9 +129,9 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <div :class="{'wider': widerComponent, 'align-center': componentForType?.name==='Checkbox'}">
     <component
-      :is="componentForType"
+      :is="componentForType.component"
       v-if="componentForType"
       :value="value"
       :label="variable.name"
@@ -135,7 +142,13 @@ export default defineComponent({
       :options="variableOptions"
       :multiple="isMultiSelect"
       :rules="validationRules"
+      :type="schema.type === 'number' || schema.type === 'integer' ? 'number' : 'text'"
       @input="setValue"
     />
   </div>
 </template>
+<style lang="scss" scoped>
+.align-center {
+  align-self: 'center'
+}
+</style>
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index aa88746..435df30 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -89,6 +89,22 @@ export default defineComponent({
       }
     },
 
+    newComponentType(variableDef: ClusterClassVariable, idx: number) {
+      const ref = `${ variableDef.name }-input`;
+      const nextDef = this.variableDefinitions[idx + 1];
+
+      if (!nextDef) {
+        return false;
+      }
+      const nextRef = `${ nextDef.name }-input`;
+
+      const nextComponent = this.$refs?.[nextRef]?.[0]?.componentForType;
+      const currentComponent = this.$refs?.[ref]?.[0]?.componentForType;
+
+      console.log(this.$refs?.[ref]?.[0]);
+
+      return nextComponent && currentComponent && (nextComponent?.name !== currentComponent?.name);
+    },
   },
 
 });
@@ -97,14 +113,17 @@ export default defineComponent({
 <template>
   <div class="variables">
     <template v-if="variableDefinitions && variableDefinitions.length">
-      <Variable
-        v-for="variableDef in variableDefinitions"
-        :key="variableDef.name"
-        :variable="variableDef"
-        :value="valueFor(variableDef)"
-        @input="e=>updateVariables(e, variableDef)"
-        @validation-passed="e=>updateErrors(e, variableDef)"
-      />
+      <template v-for="(variableDef, i) in variableDefinitions">
+        <Variable
+          :key="variableDef.name"
+          :ref="`${variableDef.name}-input`"
+          :variable="variableDef"
+          :value="valueFor(variableDef)"
+          @input="e=>updateVariables(e, variableDef)"
+          @validation-passed="e=>updateErrors(e, variableDef)"
+        />
+        <div v-if="newComponentType(variableDef, i)" :key="`${variableDef.name}-break`" class="row-break" />
+      </template>
     </template>
   </div>
 </template>
@@ -116,10 +135,18 @@ export default defineComponent({
   flex-wrap: wrap;
 
   &>*{
-    flex: 1 0 20%;
+    flex: 0 0 23.25%;
     margin: 0 1.75% 10px 0;
     max-width: 23.25%;
-    align-self: center;
+    &::v-deep.wider{
+      flex: 0 0 48.25%;
+      max-width: 48.25%;
+    }
+    &.row-break {
+      flex: 1 0 100%;
+      max-width: 100%;
+      margin: 10px 0px 0px 0px;
+    }
   }
 }
 </style>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
new file mode 100644
index 0000000..e17e48e
--- /dev/null
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -0,0 +1,57 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { CAPI } from '../types/capi';
+import CCVariables from '../components/CCVariables';
+
+const TEST_CC_ID = 'default/quickstart-more-variables';
+
+export default defineComponent({
+  name: 'EditCapiCluster',
+
+  components: {
+    CCVariables, Tabbed, Tab
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+
+  async fetch() {
+    this.$set(this.value, 'spec', { topology: { variables: [] } });
+    this.clusterClass = await this.$store.dispatch('management/find', { type: CAPI.CLUSTER_CLASS, id: TEST_CC_ID });
+  },
+
+  data() {
+    return { clusterClass: null, variables: [] };
+  },
+
+  // computed: {
+  //   variables: {
+  //     get() {
+  //       return this.value?.spec?.topology?.variables || [];
+  //     },
+  //     set(neu) {
+  //       this.$set(this.value, 'spec.topology.variables', neu);
+  //     }
+  //   }
+  // },
+
+});
+</script>
+
+<template>
+  <div>
+    <Tabbed :side-tabs="true">
+      <Tab name="variables">
+        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" />
+      </tab>
+    </Tabbed>
+  </div>
+</template>
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index 424aebc..b376140 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -44,7 +44,7 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
     out.push((val: string) => val && val.length < Number(minLength) ? t('validation.minLength', { key, min: minLength }) : undefined);
   }
   if (maxLength) {
-    out.push((val: string) => val && val.length > Number(maxLength) ? t('validation.minLength', { key, max: maxLength }) : undefined);
+    out.push((val: string) => val && val.length > Number(maxLength) ? t('validation.maxLength', { key, max: maxLength }) : undefined);
   }
   if (maxItems) {
     out.push((val: any[]) => val && val.length > maxItems ? t('validation.maxItems', { key, maxItems }) : undefined);

From da8dac3b48ac2e2a11570b0624ffa99044597ef4 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:12:41 -0800
Subject: [PATCH 09/23] refactor error handling

---
 pkg/capi/components/CCVariables/Variable.vue | 11 +++++----
 pkg/capi/components/CCVariables/index.vue    | 24 ++++++++------------
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue   | 19 +++++-----------
 3 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 4257fbe..80ee191 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -31,6 +31,12 @@ export default defineComponent({
     }
   },
 
+  created() {
+    if (!this.isValid) {
+      this.$emit('validation-passed', false);
+    }
+  },
+
   computed: {
     componentForType() {
       const { type } = this.schema;
@@ -86,10 +92,6 @@ export default defineComponent({
       });
     },
 
-    isMultiSelect() {
-      return this.componentForType === LabeledSelect && this.schema.type === 'array' && typeof this.variableOptions?.[0] !== 'object';
-    },
-
     validationRules() {
       const out = openAPIV3SchemaValidators(this.$store.getters['i18n/t'], { key: this.variable.name }, this.schema);
 
@@ -140,7 +142,6 @@ export default defineComponent({
       :required="variable.required"
       :title="variable.name"
       :options="variableOptions"
-      :multiple="isMultiSelect"
       :rules="validationRules"
       :type="schema.type === 'number' || schema.type === 'integer' ? 'number' : 'text'"
       @input="setValue"
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 435df30..32dd433 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -27,11 +27,11 @@ export default defineComponent({
   },
 
   data() {
-    return { errorMap: {} as {[key:string]: boolean} };
+    return { errorCount: 0 };
   },
 
   watch: {
-    hasValidationErrors: {
+    errorCount: {
       handler: debounce(function(neu) {
         this.$emit('validation-passed', !neu);
       }, 5),
@@ -57,11 +57,7 @@ export default defineComponent({
   computed: {
     variableDefinitions() {
       return this.clusterClass?.spec?.variables || [];
-    },
-
-    hasValidationErrors() {
-      return !!Object.keys(this.errorMap).length;
-    },
+    }
   },
 
   methods: {
@@ -81,11 +77,11 @@ export default defineComponent({
       this.$emit('input', out);
     },
 
-    updateErrors(isValid: boolean, variableDef: ClusterClassVariable) {
-      if (isValid && this.errorMap[variableDef.name]) {
-        this.$delete(this.errorMap, variableDef.name);
-      } else if (!isValid && !this.errorMap[variableDef.name]) {
-        this.$set(this.errorMap, variableDef.name, true);
+    updateErrors(isValid: boolean) {
+      if (!isValid) {
+        this.errorCount++;
+      } else {
+        this.errorCount--;
       }
     },
 
@@ -101,8 +97,6 @@ export default defineComponent({
       const nextComponent = this.$refs?.[nextRef]?.[0]?.componentForType;
       const currentComponent = this.$refs?.[ref]?.[0]?.componentForType;
 
-      console.log(this.$refs?.[ref]?.[0]);
-
       return nextComponent && currentComponent && (nextComponent?.name !== currentComponent?.name);
     },
   },
@@ -120,7 +114,7 @@ export default defineComponent({
           :variable="variableDef"
           :value="valueFor(variableDef)"
           @input="e=>updateVariables(e, variableDef)"
-          @validation-passed="e=>updateErrors(e, variableDef)"
+          @validation-passed="updateErrors"
         />
         <div v-if="newComponentType(variableDef, i)" :key="`${variableDef.name}-break`" class="row-break" />
       </template>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
index e17e48e..0579a67 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -29,28 +29,21 @@ export default defineComponent({
   },
 
   data() {
-    return { clusterClass: null, variables: [] };
+    return {
+      clusterClass: null, variables: [], variablesValid: true
+    };
   },
 
-  // computed: {
-  //   variables: {
-  //     get() {
-  //       return this.value?.spec?.topology?.variables || [];
-  //     },
-  //     set(neu) {
-  //       this.$set(this.value, 'spec.topology.variables', neu);
-  //     }
-  //   }
-  // },
-
 });
 </script>
 
 <template>
   <div>
+    <div>Is valid: {{ variablesValid }}</div>
+
     <Tabbed :side-tabs="true">
       <Tab name="variables">
-        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" />
+        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
       </tab>
     </Tabbed>
   </div>

From 1423371058e0df5a6671cd17c34ba83e7d3b8359 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:44:38 -0800
Subject: [PATCH 10/23] remove test file

---
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue | 50 ----------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 pkg/capi/edit/cluster.x-k8s.io.cluster.vue

diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
deleted file mode 100644
index 0579a67..0000000
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Tabbed from '@shell/components/Tabbed';
-import Tab from '@shell/components/Tabbed/Tab';
-import { CAPI } from '../types/capi';
-import CCVariables from '../components/CCVariables';
-
-const TEST_CC_ID = 'default/quickstart-more-variables';
-
-export default defineComponent({
-  name: 'EditCapiCluster',
-
-  components: {
-    CCVariables, Tabbed, Tab
-  },
-
-  props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-
-  async fetch() {
-    this.$set(this.value, 'spec', { topology: { variables: [] } });
-    this.clusterClass = await this.$store.dispatch('management/find', { type: CAPI.CLUSTER_CLASS, id: TEST_CC_ID });
-  },
-
-  data() {
-    return {
-      clusterClass: null, variables: [], variablesValid: true
-    };
-  },
-
-});
-</script>
-
-<template>
-  <div>
-    <div>Is valid: {{ variablesValid }}</div>
-
-    <Tabbed :side-tabs="true">
-      <Tab name="variables">
-        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
-      </tab>
-    </Tabbed>
-  </div>
-</template>

From ae0d883140da0bf3f2917d205d491eb5057a7e6d Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 20 Dec 2023 09:32:29 -0800
Subject: [PATCH 11/23] re-set variables when clusterclass changes

---
 pkg/capi/components/CCVariables/index.vue  | 67 ++++++++++++++++------
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue | 58 +++++++++++++++++++
 pkg/capi/util/validators.ts                | 49 ++++++++++++++++
 3 files changed, 157 insertions(+), 17 deletions(-)
 create mode 100644 pkg/capi/edit/cluster.x-k8s.io.cluster.vue

diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 32dd433..038c98c 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -35,23 +35,14 @@ export default defineComponent({
       handler: debounce(function(neu) {
         this.$emit('validation-passed', !neu);
       }, 5),
-    }
+    },
+    variableDefinitions(neu, old) {
+      this.updateVariableDefaults(neu, old);
+    },
   },
 
   created() {
-    const out = [...this.value];
-
-    this.variableDefinitions.forEach((def: ClusterClassVariable) => {
-      const defaultValue = def.schema.openAPIV3Schema.default;
-
-      if (!out.find((variable: any) => {
-        return variable.name === def.name;
-      }) && defaultValue) {
-        out.push({ name: def.name, value: defaultValue });
-      }
-    });
-
-    this.$emit('input', out);
+    this.updateVariableDefaults(this.variableDefinitions, []);
   },
 
   computed: {
@@ -77,6 +68,47 @@ export default defineComponent({
       this.$emit('input', out);
     },
 
+    /**
+   * When the cluster class changes, update the variables array:
+   *  remove any variables not defined in the new cluster class
+   *  if a variable is defined in both cluster classes, clear out the old default
+   *  set default values from the new cluster class definitions
+   *  if a variable is defined in both old and new cluster classes, and the user has set its value to something other than the old default, preserve that
+   */
+    updateVariableDefaults(neu: ClusterClassVariable[], old: ClusterClassVariable[]) {
+      const out = [...this.value].reduce((acc: CapiClusterVariable[], existingVar: CapiClusterVariable) => {
+        const neuDef = (neu || []).find(n => n.name === existingVar.name);
+
+        if (!neuDef) {
+          return acc;
+        }
+        const oldDefault = (old || []).find(d => d.name === existingVar.name)?.schema?.openAPIV3Schema?.default;
+
+        if (oldDefault && existingVar.value === oldDefault) {
+          delete existingVar.value;
+        }
+        const newDefault = neuDef.schema?.openAPIV3Schema?.default;
+
+        if (newDefault && !existingVar.value) {
+          existingVar.value = newDefault;
+        }
+        acc.push(existingVar);
+
+        return acc;
+      }, []);
+
+      neu.forEach((def) => {
+        const newDefault = def.schema?.openAPIV3Schema?.default;
+
+        if (newDefault && !out.find(v => v.name === def.name)) {
+          out.push({ name: def.name, value: newDefault });
+        }
+      });
+
+      this.errorCount = 0;
+      this.$emit('input', out);
+    },
+
     updateErrors(isValid: boolean) {
       if (!isValid) {
         this.errorCount++;
@@ -86,6 +118,7 @@ export default defineComponent({
     },
 
     newComponentType(variableDef: ClusterClassVariable, idx: number) {
+      console.log('calculating new component type');
       const ref = `${ variableDef.name }-input`;
       const nextDef = this.variableDefinitions[idx + 1];
 
@@ -105,18 +138,18 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="variables">
+  <div :key="`${clusterClass.id}`" class="variables">
     <template v-if="variableDefinitions && variableDefinitions.length">
       <template v-for="(variableDef, i) in variableDefinitions">
         <Variable
-          :key="variableDef.name"
+          :key="`${variableDef.name}`"
           :ref="`${variableDef.name}-input`"
           :variable="variableDef"
           :value="valueFor(variableDef)"
           @input="e=>updateVariables(e, variableDef)"
           @validation-passed="updateErrors"
         />
-        <div v-if="newComponentType(variableDef, i)" :key="`${variableDef.name}-break`" class="row-break" />
+        <div v-if="newComponentType(variableDef, i)" :key="`${variableDef.name}-${clusterClass.id}-break`" class="row-break" />
       </template>
     </template>
   </div>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
new file mode 100644
index 0000000..4fd6d84
--- /dev/null
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+import { CAPI } from '../types/capi';
+import CCVariables from '../components/CCVariables';
+const TEST_CC_ID = 'default/quickstart-more-variables';
+
+export default defineComponent({
+  name:       'EditCapiCluster',
+  components: {
+    CCVariables, Tabbed, Tab, LabeledSelect
+  },
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  async fetch() {
+    this.$set(this.value, 'spec', { topology: { variables: [] } });
+    this.clusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+  },
+  data() {
+    return {
+      clusterClassId: null, clusterClasses: [], variables: [], variablesValid: true
+    };
+  },
+
+  computed: {
+
+    clusterClassOptions() {
+      return (this.clusterClasses || []).map((cc: any) => {
+        return { label: cc.metadata.name, value: cc.id };
+      });
+    },
+    clusterClass() {
+      return this.clusterClassId && this.clusterClasses ? this.clusterClasses.find(cc => cc.id === this.clusterClassId) : null;
+    }
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div>Is valid: {{ variablesValid }}</div>
+    <LabeledSelect v-if="clusterClasses" v-model="clusterClassId" :options="clusterClassOptions" />
+    <Tabbed :side-tabs="true">
+      <Tab name="variables">
+        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
+      </tab>
+    </Tabbed>
+  </div>
+</template>
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index b376140..ee7717e 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -1,5 +1,54 @@
 import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
+
+// const stringFormats = {
+//   // this is a mongodb id - requires library to validate?
+//   // "bsonobjectid", // bson object ID
+
+// // "uri",          // an URI as parsed by Golang net/url.ParseRequestURI
+// // "email",        // an email address as parsed by Golang net/mail.ParseAddress
+// // use wildcardHostname
+// "hostname",     // a valid representation for an Internet host name, as defined by RFC 1034, section 3.1 [RFC1034].
+
+// // use utils/string/isIpv4
+// "ipv4",         // an IPv4 IP as parsed by Golang net.ParseIP
+
+// // "ipv6",         // an IPv6 IP as parsed by Golang net.ParseIP
+
+// //use isValidCIDR
+// "cidr",         // a CIDR as parsed by Golang net.ParseCIDR
+
+// //use isValidMac
+// "mac",          // a MAC address as parsed by Golang net.ParseMAC
+
+// // use toLowerCase() instead of mode modifier
+// "uuid",         // an UUID that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$
+// "uuid3",        // an UUID3 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?3[0-9a-f]{3}-?[0-9a-f]{4}-?[0-9a-f]{12}$
+// "uuid4",        // an UUID4 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
+// "uuid5",        // an UUID6 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?5[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
+
+// //use https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s13.html
+// "isbn",         // an ISBN10 or ISBN13 number string like "0321751043" or "978-0321751041"
+// "isbn10",       // an ISBN10 number string like "0321751043"
+// "isbn13",       // an ISBN13 number string like "978-0321751041"
+
+// "creditcard",   // a credit card number defined by the regex ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\\d{3})\\d{11})$ with any non digit characters mixed in
+// "ssn",          // a U.S. social security number following the regex ^\\d{3}[- ]?\\d{2}[- ]?\\d{4}$
+// "hexcolor",     // an hexadecimal color code like "#FFFFFF", following the regex ^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$
+
+// // /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/
+// "rgbcolor",     // an RGB color code like rgb like "rgb(255,255,2559"
+
+// //use base64Decode?
+// "byte",         // base64 encoded binary data
+
+// "password",     // any kind of string
+
+// "date",         // a date string like "2006-01-02" as defined by full-date in RFC3339
+// "duration",     // a duration string like "22 ns" as parsed by Golang time.ParseDuration or compatible with Scala duration format
+// "datetime",     // a date time string like "2014-12-15T19:30:20.000Z" as defined by date-time in RFC3339}
+// }
+
 /**
  *
  * @param t this.$store.getters[i18n/t]

From c069fb2e1636133b21a15339d73180618d2d0ed7 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 20 Dec 2023 12:33:27 -0800
Subject: [PATCH 12/23] fix spacer element visibility when cluster class
 changes

---
 pkg/capi/components/CCVariables/Variable.vue | 19 +++----
 pkg/capi/components/CCVariables/index.vue    | 52 +++++++++++---------
 2 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 80ee191..2359b4f 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -43,28 +43,28 @@ export default defineComponent({
       let out = null;
 
       if (this.variableOptions) {
-        out = { component: LabeledSelect, name: 'LabeledSelect' };
+        out = { component: LabeledSelect, name: 'text-var' };
       } else {
         switch (type) {
         case 'object':
-          out = { component: KeyValue, name: 'KeyValue' };
+          out = { component: KeyValue, name: 'keyvalue-var' };
           break;
         case 'array':
-          out = { component: ArrayList, name: 'ArrayList' };
+          out = { component: ArrayList, name: 'arraylist-var' };
           break;
         case 'string':
-          out = { component: LabeledInput, name: 'LabeledInput' };
+          out = { component: LabeledInput, name: 'text-var' };
           break;
         case 'integer':
-          out = { component: LabeledInput, name: 'LabeledInput' };
+          out = { component: LabeledInput, name: 'text-var' };
 
           break;
         case 'number':
-          out = { component: LabeledInput, name: 'LabeledInput' };
+          out = { component: LabeledInput, name: 'text-var' };
 
           break;
         case 'boolean':
-          out = { component: Checkbox, name: 'Checkbox' };
+          out = { component: Checkbox, name: 'checkbox-var' };
 
           break;
         default:
@@ -109,7 +109,7 @@ export default defineComponent({
     },
 
     widerComponent() {
-      return this.componentForType?.name === 'ArrayList' || this.componentForType?.name === 'KeyValue';
+      return this.componentForType?.name === 'arraylist-var' || this.componentForType?.name === 'keyvalue-var';
     }
   },
 
@@ -131,7 +131,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="{'wider': widerComponent, 'align-center': componentForType?.name==='Checkbox'}">
+  <div :class="{'wider': widerComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
     <component
       :is="componentForType.component"
       v-if="componentForType"
@@ -146,6 +146,7 @@ export default defineComponent({
       :type="schema.type === 'number' || schema.type === 'integer' ? 'number' : 'text'"
       @input="setValue"
     />
+    <div class="flexbox-newline" />
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 038c98c..6d1c64e 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -2,6 +2,7 @@
 import debounce from 'lodash/debounce';
 import { defineComponent } from 'vue';
 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 Variable from './Variable.vue';
@@ -27,7 +28,8 @@ export default defineComponent({
   },
 
   data() {
-    return { errorCount: 0 };
+    // this key is used on the spacer element so it can be forced to re-calculate its visibility when the cluster class changes
+    return { errorCount: 0, rerenderKey: randomStr() };
   },
 
   watch: {
@@ -38,6 +40,9 @@ export default defineComponent({
     },
     variableDefinitions(neu, old) {
       this.updateVariableDefaults(neu, old);
+      this.$nextTick(() => {
+        this.rerenderKey = randomStr();
+      });
     },
   },
 
@@ -48,7 +53,8 @@ export default defineComponent({
   computed: {
     variableDefinitions() {
       return this.clusterClass?.spec?.variables || [];
-    }
+    },
+
   },
 
   methods: {
@@ -117,28 +123,23 @@ export default defineComponent({
       }
     },
 
-    newComponentType(variableDef: ClusterClassVariable, idx: number) {
-      console.log('calculating new component type');
-      const ref = `${ variableDef.name }-input`;
-      const nextDef = this.variableDefinitions[idx + 1];
+    newComponentType(variableDef: ClusterClassVariable, i: number) {
+      const inputEl = this.$refs[`${ variableDef.name }-input`]?.[0]?.$el;
+      const nextInputEl = this.$refs[`${ this.variableDefinitions[i + 1]?.name }-input`]?.[0]?.$el;
 
-      if (!nextDef) {
+      if (!nextInputEl) {
         return false;
       }
-      const nextRef = `${ nextDef.name }-input`;
-
-      const nextComponent = this.$refs?.[nextRef]?.[0]?.componentForType;
-      const currentComponent = this.$refs?.[ref]?.[0]?.componentForType;
 
-      return nextComponent && currentComponent && (nextComponent?.name !== currentComponent?.name);
-    },
+      return inputEl?._prevClass !== nextInputEl._prevClass;
+    }
   },
 
 });
 </script>
 
 <template>
-  <div :key="`${clusterClass.id}`" class="variables">
+  <div class="variables">
     <template v-if="variableDefinitions && variableDefinitions.length">
       <template v-for="(variableDef, i) in variableDefinitions">
         <Variable
@@ -149,31 +150,34 @@ export default defineComponent({
           @input="e=>updateVariables(e, variableDef)"
           @validation-passed="updateErrors"
         />
-        <div v-if="newComponentType(variableDef, i)" :key="`${variableDef.name}-${clusterClass.id}-break`" class="row-break" />
+        <div v-if="newComponentType(variableDef, i)" :key="`${i}-${rerenderKey}`" class="force-newline" />
       </template>
     </template>
   </div>
 </template>
 
 <style lang="scss" scoped>
+$standard-input: 23.25%;
+$wider-input: 48.25%;
+
 .variables {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 
   &>*{
-    flex: 0 0 23.25%;
+    flex: 0 1 $standard-input;
     margin: 0 1.75% 10px 0;
-    max-width: 23.25%;
+    max-width: $standard-input;
     &::v-deep.wider{
-      flex: 0 0 48.25%;
-      max-width: 48.25%;
-    }
-    &.row-break {
-      flex: 1 0 100%;
-      max-width: 100%;
-      margin: 10px 0px 0px 0px;
+      flex: 0 1 $wider-input;
+      max-width: $wider-input;
     }
+
+  }
+  &>.force-newline {
+    flex: 1 0 100%;
+    max-width: initial;
   }
 }
 </style>

From f74e8681b47d95608721ff0df0f44615a0b4402a Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 20 Dec 2023 15:38:28 -0800
Subject: [PATCH 13/23] update required validator to account for a required
 boolean

---
 pkg/capi/components/CCVariables/Variable.vue |  6 ++++--
 pkg/capi/components/CCVariables/index.vue    | 17 ++++++++++++-----
 pkg/capi/util/validators.ts                  |  2 ++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 2359b4f..9aba92f 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/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,7 +98,9 @@ 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;
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 6d1c64e..7d14795 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/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({
@@ -90,12 +91,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 +108,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 });
         }
       });
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index ee7717e..d7a4803 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -117,3 +117,5 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
 
   return out;
 };
+
+export const isDefined = (val: any) => val || val === false;

From b30c156aa6da2020eb36ce8c91b715924f1e994f Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Thu, 21 Dec 2023 16:05:49 -0800
Subject: [PATCH 14/23] add machine-scoped ccvariables

---
 pkg/capi/components/CCVariables/index.vue  | 60 ++++++++++++++++++-
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue | 69 ++++++++++++++++++++--
 2 files changed, 122 insertions(+), 7 deletions(-)

diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 7d14795..1d27480 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -20,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
     }
   },
 
@@ -53,9 +67,53 @@ 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;
+        }
+
+        const parsedName = valueFromVariable.split(/\.|\[/)[0];
+
+        names.push(parsedName);
+
+        // the value here could be a field or index of the variable, defined <variable definition.name>.<some field> or <variable definition name>[i]
+        return names;
+      }, []);
+
+      return allVariableDefinitions.filter(v => 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) => {
+          const matchMachines = definition?.selector?.matchResources?.[matchKey]?.names || [];
+
+          if (matchMachines.includes(matchName)) {
+            out.push(...definition.jsonPatches);
+          }
+        });
+      });
+
+      return out;
+    },
   },
 
   methods: {
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
index 4fd6d84..ed3158f 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -3,6 +3,7 @@ import { defineComponent } from 'vue';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 import { CAPI } from '../types/capi';
 import CCVariables from '../components/CCVariables';
@@ -11,7 +12,7 @@ const TEST_CC_ID = 'default/quickstart-more-variables';
 export default defineComponent({
   name:       'EditCapiCluster',
   components: {
-    CCVariables, Tabbed, Tab, LabeledSelect
+    CCVariables, Tabbed, Tab, LabeledSelect, LabeledInput
   },
   props: {
     value: {
@@ -22,12 +23,16 @@ export default defineComponent({
     }
   },
   async fetch() {
-    this.$set(this.value, 'spec', { topology: { variables: [] } });
+    this.$set(this.value, 'spec', { topology: { variables: [], workers: { machineDeployments: [], machinePools: [] } } });
     this.clusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
   },
   data() {
     return {
-      clusterClassId: null, clusterClasses: [], variables: [], variablesValid: true
+      clusterClassId:            null,
+      clusterClasses:            [],
+      variables:                 [],
+      variablesValid:            true,
+      selectedMachineDeployment: ''
     };
   },
 
@@ -38,8 +43,22 @@ export default defineComponent({
         return { label: cc.metadata.name, value: cc.id };
       });
     },
+
     clusterClass() {
       return this.clusterClassId && this.clusterClasses ? this.clusterClasses.find(cc => cc.id === this.clusterClassId) : null;
+    },
+
+    machineDeploymentOptions() {
+      return (this.clusterClass?.spec?.workers?.machineDeployments || []).map((d: any) => d.class);
+    }
+  },
+  methods: {
+    addDeployment() {
+      const idx = (this.value.spec.topology.workers.machineDeployments || []).length;
+
+      this.value.spec.topology.workers.machineDeployments.push({
+        class: this.selectedMachineDeployment, name: `machine-${ idx }`, variables: { overrides: [] }
+      });
     }
   }
 });
@@ -48,11 +67,49 @@ export default defineComponent({
 <template>
   <div>
     <div>Is valid: {{ variablesValid }}</div>
-    <LabeledSelect v-if="clusterClasses" v-model="clusterClassId" :options="clusterClassOptions" />
+    <div class="row">
+      <div class="col span-6">
+        <LabeledSelect v-if="clusterClasses" v-model="clusterClassId" label="cluster class" :options="clusterClassOptions" />
+      </div>
+    </div>
     <Tabbed :side-tabs="true">
-      <Tab name="variables">
+      <Tab label="Root Variables" name="rootvariables">
         <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
-      </tab>
+      </Tab>
+      <Tab v-if="clusterClass" label="Machine Deployment Variables" name="mcvariables">
+        <div class="row">
+          <div class="col span-6">
+            <LabeledSelect v-model="selectedMachineDeployment" label="machine pool class" :options="machineDeploymentOptions" />
+          </div>
+          <div class="col span-6">
+            <button class="btn-sm role-secondary" type="button" label="machine deployment name" @click="addDeployment">
+              add
+            </button>
+          </div>
+        </div>
+        <template v-for="(md, i) in value.spec.topology.workers.machineDeployments">
+          <hr :key="`${md.class}-${i}-hr`" />
+
+          <div :key="`${md.class}-${i}`" class="row mt-10">
+            <div class="col span-6">
+              <LabeledInput v-model="md.name" label="machine deployment name" />
+            </div>
+          </div>
+
+          <h3 :key="`${md.class}-${i}-title`" class="mt-20">
+            {{ md.class }} Variable Overrides
+          </h3>
+
+          <CCVariables
+            v-if="clusterClass"
+            :key="`${md.class}-${i}-vars`"
+            v-model="md.variables.overrides"
+            :machine-deployment-class="md.class"
+            :cluster-class="clusterClass"
+            @validation-passed="e=>variablesValid=e"
+          />
+        </template>
+      </Tab>
     </Tabbed>
   </div>
 </template>

From dff4855d41b6c9627750203b1213daa80970d7b4 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Fri, 22 Dec 2023 08:48:14 -0800
Subject: [PATCH 15/23] exclude patches using builtin vars

---
 pkg/capi/components/CCVariables/index.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 1d27480..07a125e 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -53,6 +53,7 @@ export default defineComponent({
         this.$emit('validation-passed', !neu);
       }, 5),
     },
+
     variableDefinitions(neu, old) {
       this.updateVariableDefaults(neu, old);
       this.$nextTick(() => {
@@ -79,15 +80,17 @@ export default defineComponent({
           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];
 
-        names.push(parsedName);
+        if (parsedName !== 'builtin') {
+          names.push(parsedName);
+        }
 
-        // the value here could be a field or index of the variable, defined <variable definition.name>.<some field> or <variable definition name>[i]
         return names;
       }, []);
 
-      return allVariableDefinitions.filter(v => variableNames.includes(v.name));
+      return allVariableDefinitions.filter((v: ClusterClassVariable) => variableNames.includes(v.name));
     },
 
     machineScopedJsonPatches() {
@@ -103,7 +106,7 @@ export default defineComponent({
       patches.forEach((p) => {
         const definitions = p?.definitions || [];
 
-        definitions.forEach((definition) => {
+        definitions.forEach((definition: any) => {
           const matchMachines = definition?.selector?.matchResources?.[matchKey]?.names || [];
 
           if (matchMachines.includes(matchName)) {

From f6469e87e443b876504ea20523aed965ec02bd55 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Fri, 22 Dec 2023 10:46:35 -0800
Subject: [PATCH 16/23] update list component validation, required validator

---
 pkg/capi/components/CCVariables/Variable.vue | 40 +++++++++++++++++---
 pkg/capi/util/validators.ts                  |  3 +-
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 9aba92f..bd1d0f8 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -107,10 +107,22 @@ export default defineComponent({
     },
 
     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';
     }
   },
@@ -133,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"
@@ -144,10 +156,19 @@ 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>
@@ -155,4 +176,13 @@ export default defineComponent({
 .align-center {
   align-self: 'center'
 }
+.input-label{
+  color: var(--input-label);
+  margin-bottom: 5px;
+  display: block;
+  width:100%;
+  .icon-warning{
+    color: var(--error)
+  }
+}
 </style>
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index d7a4803..b932b8b 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -1,5 +1,6 @@
 import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
+import isEmpty from 'lodash/isEmpty';
 
 // const stringFormats = {
 //   // this is a mongodb id - requires library to validate?
@@ -118,4 +119,4 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
   return out;
 };
 
-export const isDefined = (val: any) => val || val === false;
+export const isDefined = (val: any) => (val || val === false) && !isEmpty(val);

From 4ffe7310ad9c2aeb050970caeec3b4849394516a Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Tue, 2 Jan 2024 17:17:38 -0800
Subject: [PATCH 17/23] add string format validation

---
 pkg/capi/components/CCVariables/Variable.vue |  13 ++-
 pkg/capi/components/CCVariables/index.vue    |   1 +
 pkg/capi/l10n/en-us.yaml                     |   1 +
 pkg/capi/util/validators.ts                  | 103 ++++++++++---------
 4 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index bd1d0f8..1965081 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -6,7 +6,6 @@ import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import KeyValue from '@shell/components/form/KeyValue';
 import ArrayList from '@shell/components/form/ArrayList';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import formRulesGenerator, { Validator } from '@shell/utils/validators/formRules';
 
 import type { ClusterClassVariable } from '../../types/clusterClass';
 import { isDefined, openAPIV3SchemaValidators } from '../../util/validators';
@@ -19,9 +18,15 @@ export default defineComponent({
       type:     Object as PropType<ClusterClassVariable>,
       required: true
     },
+
     value: {
       type:    [String, Object, Boolean, Array, Number],
       default: () => null
+    },
+
+    validateRequired: {
+      type:    Boolean,
+      default: true
     }
   },
 
@@ -97,9 +102,7 @@ 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);
-
+      if (required && this.validateRequired) {
         out.push(val => !isDefined(val) ? this.$store.getters['i18n/t']('validation.required', { key: this.variable.name }) : null);
       }
 
@@ -153,7 +156,7 @@ export default defineComponent({
       :label="variable.name"
       :placeholder="schema.example"
       :tooltip="schema.description"
-      :required="variable.required"
+      :required="variable.required && validateRequired"
       :title="variable.name"
       :options="variableOptions"
       :rules="!listComponent ? validationRules : []"
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 07a125e..1eb0a10 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -215,6 +215,7 @@ export default defineComponent({
           :ref="`${variableDef.name}-input`"
           :variable="variableDef"
           :value="valueFor(variableDef)"
+          :validate-required="!machineDeploymentClass && !machinePoolClass"
           @input="e=>updateVariables(e, variableDef)"
           @validation-passed="updateErrors"
         />
diff --git a/pkg/capi/l10n/en-us.yaml b/pkg/capi/l10n/en-us.yaml
index ef4d22e..ad317fb 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -44,4 +44,5 @@ validation:
   maxItems: '"{key}" may not contain more than {maxItems} items.'
   minItems: '"{key}" must contain at least {minItems} items.'
   pattern: '"{key}" must match the pattern <code>{pattern}</code>.'
+  stringFormat: '"{key}" must be a valid {format}.'
   uniqueItems: '"{key}" may not contain duplicate elements.'
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index b932b8b..3350a44 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -1,54 +1,9 @@
 import { Validator, ValidationOptions } from '@shell/utils/validators/formRules';
 import { Translation } from '@shell/types/t';
 import isEmpty from 'lodash/isEmpty';
-
-// const stringFormats = {
-//   // this is a mongodb id - requires library to validate?
-//   // "bsonobjectid", // bson object ID
-
-// // "uri",          // an URI as parsed by Golang net/url.ParseRequestURI
-// // "email",        // an email address as parsed by Golang net/mail.ParseAddress
-// // use wildcardHostname
-// "hostname",     // a valid representation for an Internet host name, as defined by RFC 1034, section 3.1 [RFC1034].
-
-// // use utils/string/isIpv4
-// "ipv4",         // an IPv4 IP as parsed by Golang net.ParseIP
-
-// // "ipv6",         // an IPv6 IP as parsed by Golang net.ParseIP
-
-// //use isValidCIDR
-// "cidr",         // a CIDR as parsed by Golang net.ParseCIDR
-
-// //use isValidMac
-// "mac",          // a MAC address as parsed by Golang net.ParseMAC
-
-// // use toLowerCase() instead of mode modifier
-// "uuid",         // an UUID that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$
-// "uuid3",        // an UUID3 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?3[0-9a-f]{3}-?[0-9a-f]{4}-?[0-9a-f]{12}$
-// "uuid4",        // an UUID4 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
-// "uuid5",        // an UUID6 that allows uppercase defined by the regex (?i)^[0-9a-f]{8}-?[0-9a-f]{4}-?5[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$
-
-// //use https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s13.html
-// "isbn",         // an ISBN10 or ISBN13 number string like "0321751043" or "978-0321751041"
-// "isbn10",       // an ISBN10 number string like "0321751043"
-// "isbn13",       // an ISBN13 number string like "978-0321751041"
-
-// "creditcard",   // a credit card number defined by the regex ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\\d{3})\\d{11})$ with any non digit characters mixed in
-// "ssn",          // a U.S. social security number following the regex ^\\d{3}[- ]?\\d{2}[- ]?\\d{4}$
-// "hexcolor",     // an hexadecimal color code like "#FFFFFF", following the regex ^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$
-
-// // /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/
-// "rgbcolor",     // an RGB color code like rgb like "rgb(255,255,2559"
-
-// //use base64Decode?
-// "byte",         // base64 encoded binary data
-
-// "password",     // any kind of string
-
-// "date",         // a date string like "2006-01-02" as defined by full-date in RFC3339
-// "duration",     // a duration string like "22 ns" as parsed by Golang time.ParseDuration or compatible with Scala duration format
-// "datetime",     // a date time string like "2014-12-15T19:30:20.000Z" as defined by date-time in RFC3339}
-// }
+import { isIpv4 } from '@shell/utils/string';
+import { isValidCIDR, isValidMac } from '@shell/utils/validators/cidr';
+import formRulesGenerator from '@shell/utils/validators/formRules/index.ts';
 
 /**
  *
@@ -70,7 +25,8 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
     minimum,
     pattern,
     uniqueItems,
-    required: requiredFields
+    required: requiredFields,
+    format
   } = openAPIV3Schema;
 
   const out = [] as any[];
@@ -105,7 +61,11 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
   }
 
   if (pattern) {
-    out.push((val: string) => val && !val.match(new RegExp(pattern)) ? t('validation.pattern', { key, pattern }) : undefined);
+    out.push(regexValidator(t('validation.pattern', { key, pattern }), new RegExp(pattern)));
+  }
+
+  if (format && stringFormatValidators(t, { key }, format)) {
+    out.push(stringFormatValidators(t, { key }, format));
   }
 
   if (uniqueItems) {
@@ -119,4 +79,45 @@ export const openAPIV3SchemaValidators = function(t: Translation, { key = 'Value
   return out;
 };
 
-export const isDefined = (val: any) => (val || val === false) && !isEmpty(val);
+const regexValidator = function(errorMessage: string, regexp: RegExp ): Validator {
+  return (val: string) => val && !val.match(regexp) ? errorMessage : undefined;
+};
+
+// strings can be evaluated against regular expressions by defining 'pattern' or validated against a common set of regexp using 'format'
+/**
+ *
+ * @param t this.$store.getters[i18n/t]
+ * @param param1 param1.key should be the (already localized) label of the field being validated
+ * @param format one of a set list of string formats defined here https://github.com/kubernetes/apiextensions-apiserver/blob/master/pkg/apiserver/validation/formats.go
+ *
+ * @returns a form validator for the string format, OR undefined if the format specified is invalid or a format we're not validating for practical reasons
+ */
+const stringFormatValidators = function(t: Translation, { key = 'Value' }: ValidationOptions, format: string): Validator | undefined {
+  const formRules = formRulesGenerator(t, { key } );
+  const errorMessage = t('validation.stringFormat', { key, format });
+
+  // there are actually 24 formats in total validated on the backend with some odd options eg ISBN, creditcard
+  // this subset of formats are the most universal, which we can be confident we are validating correctly
+  switch (format) {
+  case 'hostname':
+    return (val: string) => formRules.wildcardHostname(val);
+  case 'ipv4':
+    return (val: string) => val && !isIpv4(val) ? errorMessage : undefined;
+  case 'cidr':
+    return (val: string) => val && !isValidCIDR(val) ? errorMessage : undefined;
+  case 'mac':
+    return (val: string) => val && !isValidMac(val) ? errorMessage : undefined;
+  case 'uuid':
+    return regexValidator(errorMessage, /^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/i);
+  case 'uuid3':
+    return regexValidator(errorMessage, /^[0-9a-f]{8}-?[0-9a-f]{4}-?3[0-9a-f]{3}-?[0-9a-f]{4}-?[0-9a-f]{12}$/i);
+  case 'uuid4':
+    return regexValidator(errorMessage, /^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$/i);
+  case 'uuid5':
+    return regexValidator(errorMessage, /^[0-9a-f]{8}-?[0-9a-f]{4}-?5[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$/i);
+  default:
+    return undefined;
+  }
+};
+
+export const isDefined = (val: any) => (val || val === false) || !isEmpty(val);

From 8fba487c9e105d61945fa36398d635352fc9ce49 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Tue, 2 Jan 2024 17:21:07 -0800
Subject: [PATCH 18/23] cleanup following review

---
 pkg/capi/components/CCVariables/Variable.vue | 2 +-
 pkg/capi/components/CCVariables/index.vue    | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index 1965081..c639557 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -148,7 +148,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="{'wider': listComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
+  <div v-if="componentForType" :class="{'wider': listComponent, 'align-center': componentForType?.name==='checkbox-var', [`${componentForType.name}`]: true}">
     <component
       :is="componentForType.component"
       v-if="componentForType"
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 1eb0a10..fa2a80f 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -19,9 +19,6 @@ export default defineComponent({
       default: () => {}
     },
 
-    // <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: () => {

From 18d82edb4ccb79f2856dda93a8edab6822b8e041 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 3 Jan 2024 10:47:50 -0800
Subject: [PATCH 19/23] fix component imports

---
 .vscode/settings.json                        | 1 +
 pkg/capi/components/CCVariables/Variable.vue | 6 +++---
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue   | 8 ++++----
 3 files changed, 8 insertions(+), 7 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index c639557..f485411 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -3,9 +3,9 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
-import KeyValue from '@shell/components/form/KeyValue';
-import ArrayList from '@shell/components/form/ArrayList';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 
 import type { ClusterClassVariable } from '../../types/clusterClass';
 import { isDefined, openAPIV3SchemaValidators } from '../../util/validators';
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
index ed3158f..e04d0cf 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Tabbed from '@shell/components/Tabbed';
-import Tab from '@shell/components/Tabbed/Tab';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Tabbed from '@shell/components/Tabbed.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 import { CAPI } from '../types/capi';
-import CCVariables from '../components/CCVariables';
+import CCVariables from '../components/CCVariables/index.vue';
 const TEST_CC_ID = 'default/quickstart-more-variables';
 
 export default defineComponent({

From da0982ac3bd3736d77a8edb6897065a7a18ed913 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 3 Jan 2024 11:05:51 -0800
Subject: [PATCH 20/23] fix ts warnings

---
 pkg/capi/components/CCVariables/Variable.vue | 10 +++++++---
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue   |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index f485411..a8a35a9 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -6,10 +6,12 @@ import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 import ArrayList from '@shell/components/form/ArrayList.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { Validator } from '@shell/utils/validators/formRules';
 
+import { mapGetters } from 'vuex';
+import { Translation } from '@rancher/shell/types/t';
 import type { ClusterClassVariable } from '../../types/clusterClass';
 import { isDefined, openAPIV3SchemaValidators } from '../../util/validators';
-
 export default defineComponent({
   name: 'CCVariable',
 
@@ -43,6 +45,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapGetters({ t: 'i18n/t' }),
     componentForType() {
       const { type } = this.schema;
       let out = null;
@@ -98,12 +101,13 @@ export default defineComponent({
     },
 
     validationRules() {
-      const out = openAPIV3SchemaValidators(this.$store.getters['i18n/t'], { key: this.variable.name }, this.schema);
+      const t = this.t as Translation;
+      const out = openAPIV3SchemaValidators(t, { key: this.variable.name }, this.schema);
 
       const required = this.variable?.required;
 
       if (required && this.validateRequired) {
-        out.push(val => !isDefined(val) ? this.$store.getters['i18n/t']('validation.required', { key: this.variable.name }) : null);
+        out.push(val => !isDefined(val) ? t('validation.required', { key: this.variable.name }) : undefined);
       }
 
       return out;
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
index e04d0cf..07779cb 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Tabbed from '@shell/components/Tabbed.vue';
+import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';

From dceb67d7cde82732d2b293cc398005051953148b Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Wed, 3 Jan 2024 11:45:35 -0800
Subject: [PATCH 21/23] typescript fixes 2 electric bugaloo

---
 pkg/capi/components/CCVariables/index.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index fa2a80f..b999020 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -136,9 +136,8 @@ export default defineComponent({
     /**
    * When the cluster class changes, update the variables array:
    *  remove any variables not defined in the new cluster class
-   *  if a variable is defined in both cluster classes, clear out the old default
+   *  if a variable is defined in both cluster classes, clear out the old value
    *  set default values from the new cluster class definitions
-   *  if a variable is defined in both old and new cluster classes, and the user has set its value to something other than the old default, preserve that
    */
     updateVariableDefaults(neu: ClusterClassVariable[], old: ClusterClassVariable[]) {
       const out = [...this.value].reduce((acc: CapiClusterVariable[], existingVar: CapiClusterVariable) => {
@@ -189,8 +188,9 @@ export default defineComponent({
     },
 
     newComponentType(variableDef: ClusterClassVariable, i: number) {
-      const inputEl = this.$refs[`${ variableDef.name }-input`]?.[0]?.$el;
-      const nextInputEl = this.$refs[`${ this.variableDefinitions[i + 1]?.name }-input`]?.[0]?.$el;
+      const refs = this.$refs as {[key:string]: any[]};
+      const inputEl = refs[`${ variableDef.name }-input`]?.[0]?.$el;
+      const nextInputEl = refs[`${ this.variableDefinitions[i + 1]?.name }-input`]?.[0]?.$el;
 
       if (!nextInputEl) {
         return false;

From 30c7beceb8f0b213446464d6eef043608d5b334b Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Thu, 11 Jan 2024 14:49:18 -0800
Subject: [PATCH 22/23] fix vscode settings after rebase

---
 .vscode/settings.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9e26dfe..3662b37 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1 +1,3 @@
-{}
\ No newline at end of file
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file

From c8bfd1eb4147a6636bc25ab9464807eff8faf0ae Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Tue, 16 Jan 2024 14:16:59 -0800
Subject: [PATCH 23/23] updates following review

---
 pkg/capi/components/CCVariables/Variable.vue  |  6 ++--
 pkg/capi/components/CCVariables/index.vue     | 21 ++++++-----
 pkg/capi/l10n/en-us.yaml                      | 12 +++++--
 ...cluster.x-k8s.io.infrastructureprovider.js | 36 +++++++++++++++++++
 pkg/capi/tsconfig.json                        |  2 +-
 5 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 pkg/capi/models/operator.cluster.x-k8s.io.infrastructureprovider.js

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index a8a35a9..da8a42b 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -46,9 +46,9 @@ export default defineComponent({
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
-    componentForType() {
+    componentForType(): {component: any, name: string} | undefined {
       const { type } = this.schema;
-      let out = null;
+      let out: any;
 
       if (this.variableOptions) {
         out = { component: LabeledSelect, name: 'text-var' };
@@ -107,7 +107,7 @@ export default defineComponent({
       const required = this.variable?.required;
 
       if (required && this.validateRequired) {
-        out.push(val => !isDefined(val) ? t('validation.required', { key: this.variable.name }) : undefined);
+        out.push((val: any) => !isDefined(val) ? t('validation.required', { key: this.variable.name }) : undefined);
       }
 
       return out;
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index b999020..668d003 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -46,7 +46,7 @@ export default defineComponent({
 
   watch: {
     errorCount: {
-      handler: debounce(function(neu) {
+      handler: debounce(function(this: any, neu) {
         this.$emit('validation-passed', !neu);
       }, 5),
     },
@@ -70,7 +70,7 @@ export default defineComponent({
       if (!this.machineDeploymentClass && !this.machinePoolClass) {
         return allVariableDefinitions;
       }
-      const variableNames = this.machineScopedJsonPatches.reduce((names, patch) => {
+      const variableNames = this.machineScopedJsonPatches.reduce((names: string[], patch: any) => {
         const valueFromVariable = patch?.valueFrom?.variable;
 
         if (!valueFromVariable) {
@@ -100,7 +100,7 @@ export default defineComponent({
 
       const patches = this.clusterClass?.spec?.patches || [];
 
-      patches.forEach((p) => {
+      patches.forEach((p: any) => {
         const definitions = p?.definitions || [];
 
         definitions.forEach((definition: any) => {
@@ -133,29 +133,31 @@ export default defineComponent({
       this.$emit('input', out);
     },
 
-    /**
-   * When the cluster class changes, update the variables array:
-   *  remove any variables not defined in the new cluster class
-   *  if a variable is defined in both cluster classes, clear out the old value
-   *  set default values from the new cluster class definitions
-   */
+    // update the cluster's variables when the cluster class changes
     updateVariableDefaults(neu: ClusterClassVariable[], old: ClusterClassVariable[]) {
+      // remove or update variables from previous cc
       const out = [...this.value].reduce((acc: CapiClusterVariable[], existingVar: CapiClusterVariable) => {
         const neuDef = (neu || []).find(n => n.name === existingVar.name);
 
+        // do not include variables not defined in the new cluster class
         if (!neuDef) {
           return acc;
         }
         const oldDefault = (old || []).find(d => d.name === existingVar.name)?.schema?.openAPIV3Schema?.default;
 
+        // if a variable is set to the previous definition's default, clear it out
         if (isDefined(oldDefault) && existingVar.value === oldDefault) {
           delete existingVar.value;
         }
         let newDefault = neuDef.schema?.openAPIV3Schema?.default;
 
+        // leaving boolean values undefined causes confusing form validation behaviour if the boolean is marked as required
+        // if the default value isn't set for a boolean, assume the default is false
         if (neuDef.schema?.openAPIV3Schema?.type === 'boolean' && !newDefault) {
           newDefault = false;
         }
+
+        // if the value hasn't been touched by the user set it to the new cc default
         if (isDefined(newDefault) && !existingVar.value) {
           existingVar.value = newDefault;
         }
@@ -164,6 +166,7 @@ export default defineComponent({
         return acc;
       }, []);
 
+      // add variables not defined in the old cluster class
       neu.forEach((def) => {
         let newDefault = def.schema?.openAPIV3Schema?.default;
 
diff --git a/pkg/capi/l10n/en-us.yaml b/pkg/capi/l10n/en-us.yaml
index ad317fb..fb4b057 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -41,8 +41,16 @@ typeLabel:
 validation:
   exclusiveMaxValue: '"{key}" must be less than {maximum}.'
   exclusiveMinValue: '"{key}" must be greater than {minimum}.'
-  maxItems: '"{key}" may not contain more than {maxItems} items.'
-  minItems: '"{key}" must contain at least {minItems} items.'
+  maxItems: |-
+    {maxItems, plural,
+      one {"{key}" may contain no more than {maxItems} item.}
+      other {"{key}" may contain no more than {maxItems} items.}
+    }
+  minItems: |-
+    {minItems, plural,
+      one {"{key}" must contain at least {minItems} item.}
+      other {"{key}" must contain at least {minItems} items.}
+    }
   pattern: '"{key}" must match the pattern <code>{pattern}</code>.'
   stringFormat: '"{key}" must be a valid {format}.'
   uniqueItems: '"{key}" may not contain duplicate elements.'
diff --git a/pkg/capi/models/operator.cluster.x-k8s.io.infrastructureprovider.js b/pkg/capi/models/operator.cluster.x-k8s.io.infrastructureprovider.js
new file mode 100644
index 0000000..def3c04
--- /dev/null
+++ b/pkg/capi/models/operator.cluster.x-k8s.io.infrastructureprovider.js
@@ -0,0 +1,36 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { CAPI } from '@shell/config/types';
+import { BLANK_CLUSTER, QUERY_PARAMS } from '../types/capi';
+
+export class infraProvider extends SteveModel {
+  // get _availableActions() {
+  //   const out = super._availableActions;
+
+  //   out.unshift({
+  //     action:  'goToCreateCluster',
+  //     label:   'action.createCluster',
+  //     icon:    'icon icon-copy',
+  //     enabled: true
+  //   });
+
+  //   return out;
+  // }
+
+  canYaml() {
+    return false;
+  }
+
+  // goToCreateCluster() {
+  //   const escapedID = escape(this.id);
+  //   const location = {
+  //     name:   'c-cluster-manager-resource-create',
+  //     params: {
+  //       cluster:  BLANK_CLUSTER,
+  //       resource: CAPI.CAPI_CLUSTER
+  //     },
+  //     query: { [QUERY_PARAMS.CLASS]: escapedID }
+  //   };
+
+  //   this.currentRouter().push(location);
+  // }
+}
diff --git a/pkg/capi/tsconfig.json b/pkg/capi/tsconfig.json
index d66d599..2be96d9 100644
--- a/pkg/capi/tsconfig.json
+++ b/pkg/capi/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    "target": "esnext",
+    // "target": "esnext",
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",