From 0e57bba42681ae3d1f14313b7f63ecaf8f2518ae Mon Sep 17 00:00:00 2001
From: Evgeniya Vashkevich <evgeniya.vashkevich@suse.com>
Date: Fri, 26 Jan 2024 16:15:35 -0800
Subject: [PATCH] Added a wizard to create cluster from cluster class (#26)

Added a wizard to create a capi cluster.

---------

Co-authored-by: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
---
 pkg/capi/components/CCVariables/Variable.vue  |   4 +-
 pkg/capi/components/CCVariables/index.vue     |   5 +-
 pkg/capi/components/CardGrid.vue              |  97 ++++
 .../ClusterClassCard/ClusterCardField.vue     |  48 ++
 .../components/ClusterClassCard/index.vue     | 186 ++++++++
 pkg/capi/edit/ClusterConfig.vue               | 448 ++++++++++++++++++
 pkg/capi/edit/ControlPlaneEndpointSection.vue |  64 +++
 pkg/capi/edit/NetworkSection.vue              | 104 ++++
 pkg/capi/edit/WorkerItem.vue                  | 254 ++++++++++
 pkg/capi/edit/cluster.x-k8s.io.cluster.vue    | 184 +++----
 pkg/capi/index.ts                             |  56 +--
 pkg/capi/l10n/en-us.yaml                      |  71 +++
 pkg/capi/package.json                         |   2 +-
 pkg/capi/tsconfig.json                        |   6 +-
 pkg/capi/types/capi.ts                        |  49 ++
 pkg/capi/util/validators.ts                   |  25 +
 vuex.d.ts                                     |  14 +
 17 files changed, 1494 insertions(+), 123 deletions(-)
 create mode 100644 pkg/capi/components/CardGrid.vue
 create mode 100644 pkg/capi/components/ClusterClassCard/ClusterCardField.vue
 create mode 100644 pkg/capi/components/ClusterClassCard/index.vue
 create mode 100644 pkg/capi/edit/ClusterConfig.vue
 create mode 100644 pkg/capi/edit/ControlPlaneEndpointSection.vue
 create mode 100644 pkg/capi/edit/NetworkSection.vue
 create mode 100644 pkg/capi/edit/WorkerItem.vue
 create mode 100644 vuex.d.ts

diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index da8a42b..06bfd52 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import type { PropType } from 'vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
@@ -12,7 +12,7 @@ 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({
+export default Vue.extend({
   name: 'CCVariable',
 
   props: {
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 668d003..4c346e5 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import debounce from 'lodash/debounce';
-import { defineComponent } from 'vue';
+import Vue from 'vue';
+
 import type { PropType } from 'vue';
 import { randomStr } from '@shell/utils/string';
 import { ClusterClassVariable } from '../../types/clusterClass';
@@ -8,7 +9,7 @@ import type { CapiClusterVariable } from '../../types/cluster.x-k8s.io.cluster';
 import { isDefined } from '../../util/validators';
 import Variable from './Variable.vue';
 
-export default defineComponent({
+export default Vue.extend({
   name: 'ClusterClassVariables',
 
   components: { Variable },
diff --git a/pkg/capi/components/CardGrid.vue b/pkg/capi/components/CardGrid.vue
new file mode 100644
index 0000000..010b1ad
--- /dev/null
+++ b/pkg/capi/components/CardGrid.vue
@@ -0,0 +1,97 @@
+<script lang="ts">
+import Vue from 'vue';
+import type { PropType } from 'vue';
+import { get } from '@shell/utils/object';
+import capitalize from 'lodash/capitalize';
+import ClusterClassCard from './../components/ClusterClassCard/index.vue';
+
+interface Card {
+  id: String,
+  obj: Object,
+  selected: Boolean
+}
+
+export default Vue.extend({
+  components: { ClusterClassCard },
+  name:       'CardGrid',
+
+  props: {
+    rows: {
+      type:     Array as PropType<Card[]>,
+      required: true,
+    },
+
+    keyField: {
+      type:    String,
+      default: 'key',
+    },
+
+    noDataKey: {
+      type:    String,
+      default: 'sortableTable.noRows',
+    },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'select-card-grid'
+    }
+  },
+
+  methods: {
+    get,
+    select(row: Card[], idx: number) {
+      this.resetSelected();
+      this.rows[idx].selected = true;
+      this.$emit('clicked', row, idx);
+    },
+    resetSelected() {
+      this.rows.map((el) => {
+        el.selected = false;
+      });
+    },
+    capitalize
+  },
+});
+</script>
+
+<template>
+  <div
+    v-if="rows.length"
+    class="container"
+  >
+    <div
+      v-for="(r, idx) in rows"
+      :key="get(r, keyField)"
+      :data-testid="componentTestid + '-' + idx"
+      @click="select(r, idx)"
+    >
+      <ClusterClassCard
+        :value="r.obj"
+        :selected="r.selected"
+      />
+    </div>
+  </div>
+  <div
+    v-else
+    class="m-50 text-center"
+  >
+    <h1 v-t="noDataKey" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/pkg/capi/components/ClusterClassCard/ClusterCardField.vue b/pkg/capi/components/ClusterClassCard/ClusterCardField.vue
new file mode 100644
index 0000000..6c3c0f5
--- /dev/null
+++ b/pkg/capi/components/ClusterClassCard/ClusterCardField.vue
@@ -0,0 +1,48 @@
+<script>
+export default {
+  props: {
+    name: {
+      type:     String,
+      required: true
+    },
+    value: {
+      type:    [Number, String, undefined],
+      default: ''
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="label">
+    <div class="text-label">
+      <slot name="name">
+        {{ name }}
+      </slot>
+    </div>
+
+    <div class="value">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.label {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  .text-label {
+    font-size: 12px;
+    line-height: $input-line-height;
+    color: var(--darker);
+  }
+
+  .value {
+    line-height: $input-line-height;
+  }
+}
+</style>
diff --git a/pkg/capi/components/ClusterClassCard/index.vue b/pkg/capi/components/ClusterClassCard/index.vue
new file mode 100644
index 0000000..4ffa7eb
--- /dev/null
+++ b/pkg/capi/components/ClusterClassCard/index.vue
@@ -0,0 +1,186 @@
+<script lang='ts'>
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import ClusterCardField from './ClusterCardField.vue';
+import { Worker } from './../../types/capi';
+
+export default Vue.extend({
+  name:       'ClusterClassCard',
+  components: { ClusterCardField },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    selected: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      cloneData: true,
+      errors:    []
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    name() {
+      return this.value?.metadata?.name || '';
+    },
+    description() {
+      return this.value?.metadata?.annotations?.description || '';
+    },
+    controlPlaneName() {
+      return this.value?.spec?.controlPlane?.ref?.name;
+    },
+    controlPlaneKind() {
+      return this.value?.spec?.controlPlane?.ref?.kind;
+    },
+    controlPlaneNamespace() {
+      return this.value?.spec?.controlPlane?.ref?.namespace;
+    },
+    machineDeploymentsCount() {
+      return this.value?.spec?.workers?.machineDeployments?.length;
+    },
+    machineDeploymentsList() {
+      return this.value?.spec?.workers?.machineDeployments?.map((w: Worker) => w.class).join(', ') || '';
+    },
+    machinePoolsCount() {
+      return this.value?.spec?.workers?.machinePools?.length;
+    },
+    machinePoolsList() {
+      return this.value?.spec?.workers?.machinePools?.map((w: Worker) => w.class).join(', ') || '';
+    }
+  },
+});
+</script>
+
+<template>
+  <div
+    class="cluster-card-container"
+    :class="{selected: !!selected}"
+    data-testid="cluster-class-card"
+  >
+    <div class="card-wrap">
+      <div class="name">
+        {{ name }}
+      </div>
+      <div class="description">
+        <p>{{ description }}</p>
+      </div>
+      <div class="container">
+        <div class="leftcol">
+          <ClusterCardField
+            :value="controlPlaneName"
+            :name="t('capi.clusterClassCard.controlPlaneName')"
+          />
+          <ClusterCardField
+            :value="controlPlaneKind"
+            :name="t('capi.clusterClassCard.controlPlaneKind')"
+          />
+          <ClusterCardField
+            :value="controlPlaneNamespace"
+            :name="t('capi.clusterClassCard.controlPlaneNamespace')"
+          />
+        </div>
+        <div class="rightcol">
+          <ClusterCardField
+            v-if="machineDeploymentsCount > 0"
+            :value="machineDeploymentsList"
+            :name="t('capi.clusterClassCard.machineDeploymentsCount',{count: machineDeploymentsCount})"
+          />
+          <ClusterCardField
+            v-if="machinePoolsCount > 0"
+            :value="machinePoolsList"
+            :name="t('capi.clusterClassCard.machinePoolsCount',{count: machinePoolsCount})"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+ .cluster-card-container {
+  display: flex;
+  flex-basis: 40%;
+  margin: 10px;
+  min-height: 100px;
+  padding: 10px 20px;
+  height: 90%;
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
+  &.selected {
+    border: 2px solid var(--app-rancher-accent );
+  }
+  &:hover {
+    box-shadow: 0 0 30px var(--shadow);
+    transition: box-shadow 0.1s ease-in-out;
+    cursor: pointer;
+    text-decoration: none !important;
+  }
+  &.rancher {
+    .side-label, .deploys-os-label {
+      background-color: var(--app-rancher-accent);
+      label {
+        color: var(--app-rancher-accent-text);
+      }
+    }
+    &:hover {
+      border-color: var(--app-rancher-accent);
+    }
+  }
+
+  &.partner {
+    .side-label, .deploys-os-label {
+      background-color: var(--app-partner-accent);
+      label {
+        color: var(--app-partner-accent-text);
+      }
+    }
+    &:hover {
+      border-color: var(--app-partner-accent);
+    }
+  }
+
+  .card-wrap {
+    width: 100%;
+  }
+
+ }
+.name {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+
+}
+.description {
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.container{
+  display: grid;
+  padding: 0px;
+  grid-template-columns: 1fr 1fr;
+  @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+    grid-template-columns: 1fr;
+  }
+
+}
+.leftcol {
+  justify-self: start;
+  margin-right: 10px;
+}
+.rightcol{
+  justify-self: end;
+  @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+    justify-self: start;
+  }
+}
+
+</style>
diff --git a/pkg/capi/edit/ClusterConfig.vue b/pkg/capi/edit/ClusterConfig.vue
new file mode 100644
index 0000000..58393b8
--- /dev/null
+++ b/pkg/capi/edit/ClusterConfig.vue
@@ -0,0 +1,448 @@
+<script lang='ts'>
+import Vue, { VueConstructor } from 'vue';
+import { set, clone } from '@shell/utils/object';
+import { clear } from '@shell/utils/array';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+import FormValidation from '@shell/mixins/form-validation';
+import Loading from '@shell/components/Loading.vue';
+import CruResource from '@shell/components/CruResource.vue';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { Translation } from '@rancher/shell/types/t';
+import ClusterClassVariables from '../components/CCVariables/index.vue';
+import { versionTest, versionValidator, hostValidator, portValidator } from '../util/validators';
+import {
+  CAPIClusterTopology, CAPIClusterNetwork, CAPIClusterCPEndpoint, ClusterClass, Worker
+} from './../types/capi';
+import CardGrid from './../components/CardGrid.vue';
+import WorkerItem from './WorkerItem.vue';
+import NetworkSection from './NetworkSection.vue';
+import ControlPlaneEndpointSection from './ControlPlaneEndpointSection.vue';
+
+const defaultTopologyConfig: CAPIClusterTopology = {
+  version: '',
+  class:   '',
+  workers:           { machineDeployments: [], machinePools: [] }
+};
+const defaultClusterNetwork: CAPIClusterNetwork = {
+  apiServerPort: 6443,
+  pods:          { cidrBlocks: [] },
+  serviceDomain: '',
+  services:      { cidrBlocks: [] }
+};
+
+const defaultCPEndpointConfig: CAPIClusterCPEndpoint = {
+  host: '',
+  port: 49152
+};
+
+export default (Vue as VueConstructor<
+  Vue & InstanceType<typeof CreateEditView>
+>).extend({
+  name:       'ClusterConfig',
+  components: {
+    CruResource,
+    Loading,
+    NameNsDescription,
+    LabeledInput,
+    WorkerItem,
+    NetworkSection,
+    ControlPlaneEndpointSection,
+    ClusterClassVariables,
+    CardGrid
+  },
+  mixins: [CreateEditView, FormValidation],
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    },
+    preselectedClass: {
+      type:     String,
+      required: false,
+      default:  ''
+    },
+    clusterClasses: {
+      type:     Array,
+      required: true
+    }
+  },
+  beforeMount() {
+    this.initSpecs();
+    this.$nextTick(() => {
+      this.loading = false;
+    });
+  },
+  data() {
+    const store = this.$store as {[key: string]: any};
+    const t = store.getters['i18n/t'] as Translation;
+    const stepClusterClass = {
+      name:           'stepClusterClass',
+      title:          t('capi.cluster.steps.clusterClass.title'),
+      label:          t('capi.cluster.steps.clusterClass.label'),
+      subtext:        '',
+      descriptionKey: 'capi.cluster.steps.clusterClass.description',
+      ready:          false,
+      weight:         30
+    };
+    const stepConfiguration = {
+      name:           'stepConfiguration',
+      title:          t('capi.cluster.steps.configuration.title'),
+      label:          t('capi.cluster.steps.configuration.label'),
+      subtext:        '',
+      descriptionKey: 'capi.cluster.steps.configuration.description',
+      ready:          false,
+      weight:         30
+    };
+
+    const stepVariables = {
+      name:           'stepVariables',
+      title:          t('capi.cluster.steps.variables.title'),
+      label:          t('capi.cluster.steps.variables.label'),
+      subtext:        '',
+      descriptionKey: 'capi.cluster.steps.variables.description',
+      ready:          true,
+      weight:         30
+    };
+    const addSteps = !!this.preselectedClass ? [stepConfiguration, stepVariables] : [stepClusterClass, stepConfiguration, stepVariables];
+
+    return {
+      addSteps,
+      fvFormRuleSets:          [
+        { path: 'metadata.name', rules: ['required'] },
+        { path: 'spec.topology.version', rules: ['required', 'version'] },
+        { path: 'spec.controlPlaneEndpoint.host', rules: ['required', 'host'] },
+        { path: 'spec.controlPlaneEndpoint.port', rules: ['required', 'port'] },
+        { path: 'spec.clusterNetwork.serviceDomain', rules: ['host'] },
+        { path: 'spec.clusterNetwork.apiServerPort', rules: ['required', 'port'] },
+      ],
+      credentialId:            '',
+      credential:              null,
+      versionInfo:             {},
+      allNamespaces:           [],
+      defaultWorkerAddValue:   {
+        name:  '',
+        class: ''
+      },
+      variablesReady:  true,
+      clusterClassObj: null,
+      loading:         true
+    };
+  },
+
+  watch: {
+    clusterClassObj(neu) {
+      const step = this.addSteps.find(s => s.name === 'stepClusterClass');
+
+      if (step) {
+        this.$set(step, 'ready', !!neu);
+      }
+    },
+
+    stepConfigurationRequires(neu) {
+      const step = this.addSteps.find(s => s.name === 'stepConfiguration');
+
+      this.$set(step, 'ready', neu);
+    },
+
+    variablesReady(neu) {
+      const step = this.addSteps.find(s => s.name === 'stepVariables');
+
+      this.$set(step, 'ready', neu);
+    }
+  },
+
+  computed: {
+    modeOptions() {
+      return [{
+        label: this.t('capi.cluster.secret.reuse'),
+        value: false,
+      }, {
+        label: this.t('capi.cluster.secret.create'),
+        value: true,
+      }];
+    },
+    fvExtraRules() {
+      return {
+        version: versionValidator(this.$store.getters['i18n/t'], this.controlPlane),
+        host:    hostValidator(this.$store.getters['i18n/t']),
+        port:    portValidator(this.$store.getters['i18n/t']),
+      };
+    },
+    stepConfigurationRequires() {
+      const nameValid: boolean = !!this.value.metadata.name;
+      const versionTestString: RegExp = versionTest(this.$store.getters['i18n/t'], this.controlPlane);
+      const versionValid: boolean = this.value?.spec?.topology?.version && !!(this.value?.spec?.topology?.version.match(versionTestString));
+      const controlPlaneEndpointValid: boolean = !!this.value?.spec?.controlPlaneEndpoint?.host && this.value?.spec?.controlPlaneEndpoint?.port && !isNaN(this.value.spec.controlPlaneEndpoint.port);
+      const machineDeploymentsValid: boolean = this.value?.spec?.topology?.workers?.machineDeployments?.length > 0 && !!this.value?.spec?.topology?.workers?.machineDeployments[0]?.name && !!this.value?.spec?.topology?.workers?.machineDeployments[0]?.class;
+      const machinePoolsValid: boolean = this.value?.spec?.topology?.workers?.machinePools?.length > 0 && !!this.value?.spec?.topology?.workers?.machinePools[0]?.name && !!this.value?.spec?.topology?.workers?.machinePools[0]?.class;
+      const networkValid:boolean = !!this.value?.spec?.clusterNetwork?.apiServerPort && !isNaN(this.value?.spec?.clusterNetwork?.apiServerPort);
+
+      return nameValid && versionValid && controlPlaneEndpointValid && networkValid && (machineDeploymentsValid || machinePoolsValid);
+    },
+    clusterNetwork() {
+      return this.value?.spec?.clusterNetwork;
+    },
+    controlPlaneEndpoint() {
+      return this.value?.spec?.controlPlaneEndpoint;
+    },
+    machineDeploymentOptions() {
+      return this.clusterClassObj?.spec?.workers?.machineDeployments?.map( (w: Worker) => w.class);
+    },
+    machinePoolOptions() {
+      return this.clusterClassObj?.spec?.workers?.machinePools?.map( (w: Worker) => w.class);
+    },
+    controlPlane() {
+      return this.clusterClassObj?.spec?.controlPlane?.ref?.name;
+    },
+    clusterClassOptions() {
+      const out: any[] = [];
+      const currentObject = this.clusterClassObj;
+
+      this.clusterClasses.forEach((obj: ClusterClass) => {
+        addType(obj);
+      });
+
+      return out;
+
+      function addType(obj: {[key: string]: any}, disabled = false) {
+        const id = obj?.metadata?.name;
+        const subtype = {
+          id,
+          obj,
+          selected: currentObject === obj
+        };
+
+        out.push(subtype);
+      }
+    },
+  },
+  methods: {
+    set,
+    setClassInfo(name: string) {
+      this.clusterClassObj = this.clusterClasses.find((x: ClusterClass) => {
+        const split = unescape(name).split('/');
+
+        return x.metadata.namespace === split[0] && x.metadata.name === split[1];
+      });
+      if ( !!this.clusterClassObj ) {
+        this.setClass();
+        this.setNamespace();
+      } else {
+        this.errors.push(this.t('error.clusterClassNotFound'));
+      }
+    },
+    setClass() {
+      const clusterClassName = this.clusterClassObj?.metadata?.name;
+
+      this.set(this.value.spec.topology, 'class', clusterClassName);
+    },
+    setNamespace() {
+      const clusterClassNs = this.clusterClassObj?.metadata?.namespace;
+
+      this.set(this.value.metadata, 'namespace', clusterClassNs);
+    },
+    async saveOverride() {
+      if ( this.errors ) {
+        clear(this.errors);
+      }
+      try {
+        await this.value.save();
+
+        return this.done();
+      } catch (err) {
+        this.errors.push(err);
+      }
+    },
+
+    initSpecs() {
+      if ( !this.value.spec ) {
+        set(this.value, 'spec', { });
+      }
+      if ( !this.value.spec.topology ) {
+        set(this.value.spec, 'topology', clone(defaultTopologyConfig));
+      }
+
+      if ( !this.value.spec.clusterNetwork ) {
+        set(this.value.spec, 'clusterNetwork', clone(defaultClusterNetwork));
+      }
+
+      if ( !this.value.spec.controlPlaneEndpoint ) {
+        set(this.value.spec, 'controlPlaneEndpoint', clone(defaultCPEndpointConfig));
+      }
+      if ( this.preselectedClass) {
+        this.setClassInfo(this.preselectedClass);
+      }
+    },
+    cancelCredential() {
+      if ( this.$refs.cruresource ) {
+        this.$refs.cruresource.emitOrRoute();
+      }
+    },
+    cancel() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
+      });
+    },
+    done() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
+      });
+    },
+    clickedType(obj: {[key:string]: any}) {
+      this.clusterClassObj = this.clusterClasses.find((x: ClusterClass) => x.metadata.name === obj.id);
+      this.setClass();
+      this.setNamespace();
+    },
+    podsCidrBlocksChanged(val: string[]) {
+      if ( !this.value.spec.clusterNetwork?.pods ) {
+        set(this.value.spec.clusterNetwork, 'pods', []);
+      }
+      set(this.value.spec.clusterNetwork.pods, 'cidrBlocks', val);
+    },
+    servicesCidrBlocksChanged(val: string[]) {
+      if ( !this.value.spec.clusterNetwork?.services ) {
+        set(this.value.spec.clusterNetwork, 'services', []);
+      }
+      set(this.value.spec.clusterNetwork.services, 'cidrBlocks', val);
+    }
+  }
+});
+</script>
+<template>
+  <Loading v-if="loading" />
+  <CruResource
+    v-else
+    :mode="mode"
+    :show-as-form="true"
+    :resource="value"
+    :errors="errors"
+    :validation-passed="true"
+    :cancel-event="true"
+    :done-route="doneRoute"
+    :apply-hooks="applyHooks"
+    :steps="addSteps"
+    component-testid="capi-cluster-create"
+    @done="done"
+    @error="e=>errors = e"
+    @finish="saveOverride"
+    @cancel="cancel"
+  >
+    <template #stepClusterClass>
+      <CardGrid
+        :rows="clusterClassOptions"
+        key-field="id"
+        name-field="label"
+        side-label-field="tag"
+        @clicked="clickedType"
+      />
+    </template>
+    <template #stepConfiguration>
+      <NameNsDescription
+        v-if="!isView"
+        v-model="value"
+        :mode="mode"
+        :namespaced="false"
+        :namespace-options="allNamespaces"
+        name-label="cluster.name.label"
+        name-placeholder="cluster.name.placeholder"
+        description-label="cluster.description.label"
+        description-placeholder="cluster.description.placeholder"
+        :rules="{name:fvGetAndReportPathRules('metadata.name')}"
+      />
+      <div class="row mb-20 ">
+        <div class="col span-3">
+          <h2>
+            <t k="capi.cluster.version.title" />
+          </h2>
+          <LabeledInput
+            v-model="value.spec.topology.version"
+            :mode="mode"
+            label-key="cluster.kubernetesVersion.label"
+            required
+            :rules="fvGetAndReportPathRules('spec.topology.version')"
+          />
+        </div>
+        <div class="col ">
+          <h2>
+            <t k="capi.cluster.controlPlaneEndpoint.title" />
+          </h2>
+          <ControlPlaneEndpointSection
+            v-model="controlPlaneEndpoint"
+            :mode="mode"
+            :rules="{host:fvGetAndReportPathRules('spec.controlPlaneEndpoint.host'), port:fvGetAndReportPathRules('spec.controlPlaneEndpoint.port') }"
+          />
+        </div>
+      </div>
+      <div class="mt-20 block">
+        <h2>
+          <t k="capi.cluster.networking.title" />
+        </h2>
+        <NetworkSection
+          v-model="clusterNetwork"
+          :mode="mode"
+          :rules="{serviceDomain:fvGetAndReportPathRules('spec.clusterNetwork.serviceDomain'), apiServerPort:fvGetAndReportPathRules('spec.clusterNetwork.apiServerPort'), pods: [], services: [] }"
+          @api-server-port-changed="(val) => $set(value.spec.clusterNetwork, 'apiServerPort', Number(val) || '')"
+          @service-domain-changed="(val) => $set(value.spec.clusterNetwork, 'serviceDomain', val)"
+          @pods-cidr-blocks-changed="podsCidrBlocksChanged"
+          @services-cidr-blocks-changed="servicesCidrBlocksChanged"
+        />
+      </div>
+      <div class="mt-20 block">
+        <h2>
+          <t k="capi.cluster.workers.title" />
+          <span class="required">*</span>
+        </h2>
+        <div class="row mb-20">
+          <div
+            v-if="!!machineDeploymentOptions"
+            class="col span-3"
+          >
+            <WorkerItem
+              v-model="value.spec.topology.workers.machineDeployments"
+              :mode="mode"
+              :title="t('capi.cluster.workers.machineDeployments.title')"
+              :default-add-value="defaultWorkerAddValue"
+              :class-options="machineDeploymentOptions"
+              :initial-empty-row="true"
+            />
+          </div>
+          <div
+            v-if="!!machinePoolOptions"
+            class="col span-3"
+          >
+            <WorkerItem
+              v-model="value.spec.topology.workers.machinePools"
+              :mode="mode"
+              :title="t('capi.cluster.workers.machinePools.title')"
+              :default-add-value="defaultWorkerAddValue"
+              :class-options="machinePoolOptions"
+              :initial-empty-row="true"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #stepVariables>
+      <h2>
+        <t k="capi.cluster.variables.title" />
+      </h2>
+      <ClusterClassVariables
+        v-model="value.spec.topology.variables"
+        :cluster-class="clusterClassObj"
+        @validation-passed="e=>variablesReady=e"
+      />
+    </template>
+  </CruResource>
+</template>
+<style lang="scss" scoped>
+.required {
+  color: var(--error);
+}
+</style>
diff --git a/pkg/capi/edit/ControlPlaneEndpointSection.vue b/pkg/capi/edit/ControlPlaneEndpointSection.vue
new file mode 100644
index 0000000..6b296f0
--- /dev/null
+++ b/pkg/capi/edit/ControlPlaneEndpointSection.vue
@@ -0,0 +1,64 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import { _EDIT } from '@shell/config/query-params';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+export default Vue.extend({
+  name:       'ControlPlaneEndpointSection',
+  components: { LabeledInput },
+  props:      {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+    rules: {
+      default: () => ({
+        host:   [],
+        port:   []
+      }),
+      type: Object,
+    },
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    clusterIsAlreadyCreated() {
+      return this.mode === _EDIT;
+    }
+  }
+});
+</script>
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        class="col"
+      >
+        <LabeledInput
+          v-model="value.host"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.controlPlaneEndpoint.host')"
+          :rules="rules.host"
+          required
+        />
+      </div>
+      <div
+        class="col"
+      >
+        <LabeledInput
+          v-model.number="value.port"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.controlPlaneEndpoint.port')"
+          :rules="rules.port"
+          required
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/capi/edit/NetworkSection.vue b/pkg/capi/edit/NetworkSection.vue
new file mode 100644
index 0000000..4c90bd1
--- /dev/null
+++ b/pkg/capi/edit/NetworkSection.vue
@@ -0,0 +1,104 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+import { _EDIT } from '@shell/config/query-params';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+export default Vue.extend({
+  components: {
+    LabeledInput,
+    ArrayList
+  },
+  props:      {
+    value: {
+      type:     Object,
+      required: true,
+    },
+    mode: {
+      type:     String,
+      required: true,
+    },
+    rules: {
+      default: () => ({
+        serviceDomain:     [],
+        apiServerPort:     [],
+        pods:              [],
+        services:          []
+      }),
+      type: Object,
+    },
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    clusterIsAlreadyCreated() {
+      return this.mode === _EDIT;
+    },
+    apiServerPort() {
+      return this.value?.apiServerPort;
+    },
+    serviceDomain() {
+      return this.value?.serviceDomain;
+    },
+    podsCidrBlocks() {
+      return this.value?.pods?.cidrBlocks;
+    },
+    servicesCidrBlocks() {
+      return this.value?.services?.cidrBlocks;
+    },
+  }
+});
+</script>
+<template>
+  <div>
+    <div class="row mb-20">
+      <div
+        class="col span-3"
+      >
+        <LabeledInput
+          :value="apiServerPort"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.networking.apiServerPort')"
+          :rules="rules.apiServerPort"
+          required
+          @input="$emit('api-server-port-changed', $event)"
+        />
+      </div>
+      <div
+        class="col span-3"
+      >
+        <LabeledInput
+          :value="serviceDomain"
+          :mode="mode"
+          :disabled="clusterIsAlreadyCreated"
+          :label="t('capi.cluster.networking.serviceDomain')"
+          :rules="rules.serviceDomain"
+          @input="$emit('service-domain-changed', $event)"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-3">
+        <ArrayList
+          :value="podsCidrBlocks"
+          :protip="false"
+          :mode="mode"
+          :title="t('capi.cluster.networking.pods')"
+          :rules="rules.pods"
+          @input="$emit('pods-cidr-blocks-changed', $event)"
+        />
+      </div>
+      <div class="col span-3">
+        <ArrayList
+          :value="servicesCidrBlocks"
+          :protip="false"
+          :mode="mode"
+          :title="t('capi.cluster.networking.services')"
+          :rules="rules.services"
+          @input="$emit('services-cidr-blocks-changed', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/pkg/capi/edit/WorkerItem.vue b/pkg/capi/edit/WorkerItem.vue
new file mode 100644
index 0000000..ab4e91b
--- /dev/null
+++ b/pkg/capi/edit/WorkerItem.vue
@@ -0,0 +1,254 @@
+<script lang="ts">
+import Vue from 'vue';
+import debounce from 'lodash/debounce';
+import { removeAt } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+
+export default Vue.extend({
+  components: { LabeledSelect, LabeledInput },
+  props:      {
+    value: {
+      type:     Array,
+      default:  null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    title: {
+      type:     String,
+      required: true
+    },
+    classOptions: {
+      type:     Array,
+      default:  null,
+    },
+    addAllowed: {
+      type:    Boolean,
+      default: true,
+    },
+    removeAllowed: {
+      type:    Boolean,
+      default: true,
+    },
+    defaultAddValue: {
+      type:    [String, Number, Object, Array],
+      default: ''
+    },
+    loading: {
+      type:    Boolean,
+      default: false
+    },
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  data() {
+    const input = (this.value as any[] || []).slice();
+    const rows = [];
+
+    for ( const value of input ) {
+      rows.push({ value });
+    }
+    if ( !rows.length ) {
+      const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
+
+      rows.push({ value });
+    }
+
+    return { rows, lastUpdateWasFromValue: false };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+    removeLabel() {
+      return this.$store.getters['i18n/t']('generic.remove');
+    },
+    addLabel() {
+      return this.$store.getters['i18n/t']('generic.add');
+    }
+  },
+  watch:    {
+    value() {
+      this.lastUpdateWasFromValue = true;
+      this.rows = (this.value || []).map(v => ({ value: v }));
+    },
+    rows: {
+      deep: true,
+      handler() {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!this.lastUpdateWasFromValue) {
+          this.queueUpdate();
+        }
+        this.lastUpdateWasFromValue = false;
+      }
+    }
+  },
+  created() {
+    this.queueUpdate = debounce(this.update, 50);
+  },
+  methods: {
+    add() {
+      this.rows.push({ value: clone(this.defaultAddValue) });
+      if (this.defaultAddValue) {
+        this.queueUpdate();
+      }
+      this.$nextTick(() => {
+        const inputs = this.$refs.value;
+
+        if ( inputs && inputs.length > 0 ) {
+          inputs[inputs.length - 1].focus();
+        }
+        this.$emit('add');
+      });
+    },
+    /**
+     * Remove item and emits removed row and its own index value
+     */
+    remove(row: {[key: string]: any}, index: number) {
+      this.$emit('remove', { row, index });
+      removeAt(this.rows, index);
+      this.queueUpdate();
+    },
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+      const out = [];
+
+      for ( const row of this.rows ) {
+        const value = row.value;
+
+        if ( typeof value !== 'undefined' ) {
+          out.push(value);
+        }
+      }
+      this.$emit('input', out);
+    },
+  }
+});
+</script>
+<template>
+  <div>
+    <div
+      v-if="title"
+      class="clearfix"
+    >
+      <slot name="title">
+        <h3>
+          {{ title }}
+        </h3>
+      </slot>
+    </div>
+
+    <template v-if="rows.length">
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+        :data-testid="`array-list-box${ idx }`"
+        class="box"
+      >
+        <slot
+          name="columns"
+          :queue-update="queueUpdate"
+          :i="idx"
+          :rows="rows"
+          :row="row"
+          :mode="mode"
+          :is-view="isView"
+        >
+          <div class="value">
+            <slot
+              name="value"
+              :row="row"
+              :mode="mode"
+              :is-view="isView"
+              :queue-update="queueUpdate"
+            >
+              <div
+                class="col mt-20"
+              >
+                <LabeledInput
+                  ref="value"
+                  v-model="row.value.name"
+                  :mode="mode"
+                  :disabled="false"
+                  :label="t('capi.cluster.workers.name')"
+                />
+              </div>
+              <div class="col mt-20">
+                <LabeledSelect
+                  v-model="row.value.class"
+                  :mode="mode"
+                  :options="classOptions"
+                  label-key="capi.cluster.workers.class"
+                />
+              </div>
+            </slot>
+            <div
+              v-if="removeAllowed"
+              class="remove"
+            >
+              <slot
+                name="remove-button"
+                :remove="() => remove(row, idx)"
+                :i="idx"
+                :row="row"
+              >
+                <button
+                  type="button"
+                  :disabled="isView"
+                  class="btn role-link"
+                  :data-testid="`remove-item-${idx}`"
+                  @click="remove(row, idx)"
+                >
+                  {{ removeLabel }}
+                </button>
+              </slot>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </template>
+    <div
+      v-else-if="mode==='view'"
+      class="text-muted"
+    >
+      &mdash;
+    </div>
+    <div v-else>
+      <slot name="empty" />
+    </div>
+    <div
+      v-if="addAllowed && !isView"
+      class="footer"
+    >
+      <slot
+        v-if="addAllowed"
+        name="add"
+        :add="add"
+      >
+        <button
+          type="button"
+          class="btn role-tertiary add"
+          :disabled="loading"
+          data-testid="array-list-button"
+          @click="add()"
+        >
+          <i
+            v-if="loading"
+            class="mr-5 icon icon-spinner icon-spin icon-lg"
+          />
+          {{ addLabel }}
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
index 07779cb..4b3b210 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster.vue
@@ -1,63 +1,79 @@
 <script lang="ts">
-import { defineComponent } from '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';
+import Vue, { VueConstructor } from 'vue';
+import { SUB_TYPE } from '@shell/config/query-params';
+import { set } from '@shell/utils/object';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Loading from '@shell/components/Loading.vue';
+import CruResource from '@shell/components/CruResource.vue';
+import type { Route } from 'vue-router';
+import ClusterConfig from './ClusterConfig.vue';
+import { CAPI, QUERY_PARAMS, ClusterClass } from './../types/capi';
 
-import { CAPI } from '../types/capi';
-import CCVariables from '../components/CCVariables/index.vue';
-const TEST_CC_ID = 'default/quickstart-more-variables';
-
-export default defineComponent({
-  name:       'EditCapiCluster',
+export default (Vue as VueConstructor<
+  Vue & InstanceType<typeof CreateEditView>
+>).extend({
+  name:       'CreateCluster',
   components: {
-    CCVariables, Tabbed, Tab, LabeledSelect, LabeledInput
+    CruResource,
+    Loading,
+    ClusterConfig
   },
+
+  mixins: [CreateEditView],
+
   props: {
     value: {
       type:    Object,
-      default: () => {
-        return {};
-      }
+      default: null,
+    },
+    componentTestid: {
+      type:    String,
+      default: 'capi-provider-create'
+    },
+    mode: {
+      type:     String,
+      required: true
     }
   },
-  async fetch() {
-    this.$set(this.value, 'spec', { topology: { variables: [], workers: { machineDeployments: [], machinePools: [] } } });
-    this.clusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+  beforeMount() {
+    if ( !this.value.spec ) {
+      set(this.value, 'spec', {});
+    }
+    if ( !this.value.id ) {
+      if ( !this.value.metadata ) {
+        set(this.value, 'metadata', {});
+      }
+    }
+    this.getClusterClasses().then((cc: any[]) => {
+      this.clusterClasses = cc;
+      this.loading = false;
+    }).catch((err) => {
+      console.error(err); this.loading = false;
+    });
   },
   data() {
+    const route = this.$route as Route;
+    const subType = route.query[SUB_TYPE] || null;
+    const classFromURL = route.query[QUERY_PARAMS.CLASS];
+    const curClass = this.value?.spec?.topology?.class;
+    const curNs = this.value?.metadata?.namespace;
+    const classFromValue = curNs && curClass ? escape(`${ curNs }/${ curClass }`) : null;
+    const preselectedClass = classFromURL || classFromValue || null;
+
     return {
-      clusterClassId:            null,
-      clusterClasses:            [],
-      variables:                 [],
-      variablesValid:            true,
-      selectedMachineDeployment: ''
+      subType, preselectedClass, capiProviders: [], clusterClasses: [] as any[], loading: 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;
-    },
-
-    machineDeploymentOptions() {
-      return (this.clusterClass?.spec?.workers?.machineDeployments || []).map((d: any) => d.class);
-    }
-  },
   methods: {
-    addDeployment() {
-      const idx = (this.value.spec.topology.workers.machineDeployments || []).length;
+    async getClusterClasses() {
+      const allClusterClasses: ClusterClass[] = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
 
-      this.value.spec.topology.workers.machineDeployments.push({
-        class: this.selectedMachineDeployment, name: `machine-${ idx }`, variables: { overrides: [] }
+      return allClusterClasses;
+    },
+    cancel() {
+      this.$router.push({
+        name:   'c-cluster-manager-capi',
+        params: {},
       });
     }
   }
@@ -66,50 +82,44 @@ export default defineComponent({
 
 <template>
   <div>
-    <div>Is valid: {{ variablesValid }}</div>
-    <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 label="Root Variables" name="rootvariables">
-        <CCVariables v-if="clusterClass" v-model="variables" :cluster-class="clusterClass" @validation-passed="e=>variablesValid=e" />
-      </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`" />
+    <Loading v-if="loading" />
+    <div v-else>
+      <ClusterConfig
+        v-if="preselectedClass"
+        v-model="value"
+        :initial-value="initialValue"
+        :live-value="liveValue"
+        :mode="mode"
+        :preselected-class="preselectedClass"
+        :cluster-classes="clusterClasses"
+      />
+      <CruResource
+        v-else
+        :mode="mode"
+        :validation-passed="true"
+        :resource="value"
+        :errors="errors"
+        :cancel-event="true"
+        :prevent-enter-submit="true"
+        class="create-cluster"
+        @finish="save"
+        @cancel="cancel"
+        @error="e=>errors = e"
+      >
+        <ClusterConfig
+          v-model="value"
+          :initial-value="initialValue"
+          :live-value="liveValue"
+          :mode="mode"
+          :cluster-classes="clusterClasses"
+        />
 
-          <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
+          #form-footer
+        >
+          <div><!-- Hide the outer footer --></div>
         </template>
-      </Tab>
-    </Tabbed>
+      </CruResource>
+    </div>
   </div>
 </template>
diff --git a/pkg/capi/index.ts b/pkg/capi/index.ts
index bac72d4..34b60d5 100644
--- a/pkg/capi/index.ts
+++ b/pkg/capi/index.ts
@@ -38,36 +38,36 @@ export default function(plugin: IPlugin): void {
   );
 
   // add enable auto-import action to namespace table
-  plugin.addAction(ActionLocation.TABLE,
-    { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
-    {
-      labelKey: 'capi.autoImport.enableAction',
-      icon:     'icon-plus',
-      enabled(target: any) {
-        return target.metadata.labels[LABELS.AUTO_IMPORT] !== 'true';
-      },
-      invoke(opts, resources = []) {
-        resources.forEach((ns) => {
-          toggleAutoImport(ns);
-        });
-      }
-    });
+  // plugin.addAction(ActionLocation.TABLE,
+  //   { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
+  //   {
+  //     labelKey: 'capi.autoImport.enableAction',
+  //     icon:     'icon-plus',
+  //     enabled(target: any) {
+  //       return target.metadata.labels[LABELS.AUTO_IMPORT] !== 'true';
+  //     },
+  //     invoke(opts, resources = []) {
+  //       resources.forEach((ns) => {
+  //         toggleAutoImport(ns);
+  //       });
+  //     }
+  //   });
 
   // add disable auto-import action to namespace table
-  plugin.addAction(ActionLocation.TABLE,
-    { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
-    {
-      labelKey: 'capi.autoImport.disableAction',
-      icon:     'icon-minus',
-      enabled(target: any) {
-        return target.metadata.labels[LABELS.AUTO_IMPORT] === 'true';
-      },
-      invoke(opts, resources = []) {
-        resources.forEach((ns) => {
-          toggleAutoImport(ns);
-        });
-      }
-    });
+  // plugin.addAction(ActionLocation.TABLE,
+  //   { path: [{ urlPath: '/c/local/explorer/projectsnamespaces', exact: true }, { urlPath: 'cluster.x-k8s.io.cluster', endsWith: true }] },
+  //   {
+  //     labelKey: 'capi.autoImport.disableAction',
+  //     icon:     'icon-minus',
+  //     enabled(target: any) {
+  //       return target.metadata.labels[LABELS.AUTO_IMPORT] === 'true';
+  //     },
+  //     invoke(opts, resources = []) {
+  //       resources.forEach((ns) => {
+  //         toggleAutoImport(ns);
+  //       });
+  //     }
+  //   });
 
   // add column to namespace table
   plugin.addTableColumn(
diff --git a/pkg/capi/l10n/en-us.yaml b/pkg/capi/l10n/en-us.yaml
index 63d9e00..4ccc687 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -14,6 +14,72 @@ capi:
     disableAction: Disable CAPI Auto-Import
   warnings:
     embeddedFeatureFlag: "It looks like the Rancher-managed cluster API feature is disabled. To provision and manage RKE2 clusters you must either enable the embedded-cluster-api feature flag or install the Rancher Turtles extension."
+  cluster:
+    steps:
+      clusterClass:
+        title: Cluster Class
+        label: Cluster Class
+        subtext:  
+        description:  ''
+      configuration:
+        title: Configuration
+        label: Configuration
+        subtext:  
+        description:  ''
+      variables:
+        title: Variables
+        label: Variables
+        subtext:  
+        description:  ''
+    secret:
+      reuse: Use existing credential
+      create: Create new credential
+    controlPlane:
+      title: Control Plane Options
+      provisioner: Type
+    providerConfig:
+      title: Infrastructure
+    clusterClass:
+      title: Cluster Class
+      label: Cluster Class
+      description: Cluster Class Description
+    variables:
+      title: Variables
+    version:
+      title: Kubernetes Version
+    networking:
+      title: Networking
+      apiServerPort: API Server Port
+      serviceDomain: Service Domain
+      pods: Pod CIDR Blocks
+      services: Service VIP CIDR Blocks
+    controlPlaneEndpoint:
+      title: Control Plane Endpoint
+      host: Host
+      port: Port
+    workers:
+      title: Workers
+      class: Class
+      name: Name
+      machineDeployments:
+        title: Machine Deployments
+      machinePools:
+        title: Machine Pools
+  clusterClassCard:
+    title: 'Cluster Class Name: {name}'
+    controlPlaneName: Control Plane Name
+    controlPlaneKind: Control Plane Kind
+    controlPlaneNamespace: Control Plane Namespace
+    machineDeploymentsCount: |-
+      {count, plural,
+        one {{count} Machine Deployment }
+        other {{count} Machine Deployments }
+      }
+    machinePoolsCount: |-
+      {count, plural,
+        one {{count} Machine Pool }
+        other {{count} Machine Pools }
+      }
 
 nav:
   group:
@@ -56,3 +122,8 @@ validation:
   pattern: '"{key}" must match the pattern <code>{pattern}</code>.'
   stringFormat: '"{key}" must be a valid {format}.'
   uniqueItems: '"{key}" may not contain duplicate elements.'
+  version: Version format must match format for this provisioner.
+  name: Name is required.
+  port: Port value must be a number.
+error:
+  clusterClassNotFound: Could not find corresponding cluster class. Please check that cluster class exists and is valid.
\ No newline at end of file
diff --git a/pkg/capi/package.json b/pkg/capi/package.json
index 5321180..43b8c2c 100644
--- a/pkg/capi/package.json
+++ b/pkg/capi/package.json
@@ -13,7 +13,7 @@
     "nuxt": "./node_modules/.bin/nuxt"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.5.18",
diff --git a/pkg/capi/tsconfig.json b/pkg/capi/tsconfig.json
index 2be96d9..56f005a 100644
--- a/pkg/capi/tsconfig.json
+++ b/pkg/capi/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    // "target": "esnext",
+    "target": "esnext",
     "module": "esnext",
-    "strict": true,
+    // "strict": true, //this causes problems with vuex typing eg "property $store does not exist on type..."
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
@@ -34,7 +34,7 @@
     ],
     "paths": {
       "@shell/*": [
-        "@rancher/shell/*"
+        "../../node_modules/@rancher/shell/*"
       ],
       "@components/*": [
         "@rancher/components/*"
diff --git a/pkg/capi/types/capi.ts b/pkg/capi/types/capi.ts
index 761451b..3c21a0a 100644
--- a/pkg/capi/types/capi.ts
+++ b/pkg/capi/types/capi.ts
@@ -10,3 +10,52 @@ export const CAPI = {
   CLUSTER_CLASS: 'cluster.x-k8s.io.clusterclass',
   PROVIDER:      'operator.cluster.x-k8s.io.infrastructureprovider',
 };
+
+export const CP_VERSIONS = {
+  'kubekey-k3s': ['k3s1', 'k3s2'],
+  rke2:          ['rke2r1', 'rke2r2']
+};
+
+export const CREDENTIALS_UPDATE_REQUIRED = ['aks'];
+export const CREDENTIALS_NOT_REQUIRED = ['docker'];
+export interface Worker {
+  name: String,
+  class: String
+}
+
+export interface CAPIClusterTopology {
+    version: String,
+    class: String,
+    workers: {
+      machineDeployments: Worker[],
+      machinePools: Worker[]
+    }
+}
+export interface CAPIClusterCPEndpoint {
+  host: String,
+  port: Number
+}
+
+export interface CAPIClusterNetwork {
+  apiServerPort?: Number,
+  pods?: {
+    cidrBlocks: String[]
+  },
+  serviceDomain?: String,
+  services?: {
+    cidrBlocks: String[]
+  },
+}
+
+export interface ClusterClass {
+  metadata: {
+    name: string,
+    namespace: string,
+    annotations?: {[key: string]: string}
+  },
+  spec: {
+    infrastructure: Object,
+    workers: Object,
+    controlPlane: Object
+  }
+}
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index 3350a44..b6cf827 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -4,6 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 import { isIpv4 } from '@shell/utils/string';
 import { isValidCIDR, isValidMac } from '@shell/utils/validators/cidr';
 import formRulesGenerator from '@shell/utils/validators/formRules/index.ts';
+import { CP_VERSIONS } from './../types/capi';
 
 /**
  *
@@ -121,3 +122,27 @@ const stringFormatValidators = function(t: Translation, { key = 'Value' }: Valid
 };
 
 export const isDefined = (val: any) => (val || val === false) || !isEmpty(val);
+
+export const versionTest = function(t: Translation, type: string): RegExp {
+  let ending = '';
+
+  if (CP_VERSIONS[type as keyof typeof CP_VERSIONS]) {
+    ending = `\\+(${ CP_VERSIONS[type as keyof typeof CP_VERSIONS].join('|') })`;
+  }
+
+  return new RegExp(`^v(\\d+.){2}\\d+${ ending }$`);
+};
+
+export const versionValidator = function(t: Translation, type: string): Validator {
+  const test = versionTest(t, type);
+
+  return regexValidator(t('validation.version'), test);
+};
+
+export const hostValidator = function(t: Translation): Validator {
+  return stringFormatValidators(t, { key: 'Host' }, 'hostname');
+};
+
+export const portValidator = function(t: Translation): Validator {
+  return (val: number) => val && isNaN(val) ? t('validation.port') : undefined;
+};
diff --git a/vuex.d.ts b/vuex.d.ts
new file mode 100644
index 0000000..42da3c6
--- /dev/null
+++ b/vuex.d.ts
@@ -0,0 +1,14 @@
+// vuex.d.ts
+import { Store } from 'vuex';
+
+declare module '@vue/runtime-core' {
+  // declare your own store states
+  interface State {
+    [key:string]: any
+  }
+
+  // provide typings for `this.$store`
+  interface ComponentCustomProperties {
+    $store: Store<State>
+  }
+}