From 466246e65033c903b7c878c37444a187ec1db72a Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Tue, 3 Dec 2024 14:16:32 -0800
Subject: [PATCH 1/4] fix eslint and remove remaining ts references

---
 .eslintrc.js                                  | 45 ++++-----
 package.json                                  | 16 +++-
 pkg/capi/components/AutoImport.vue            |  5 +-
 pkg/capi/components/CCVariables/Variable.vue  | 46 ++++++----
 pkg/capi/components/CCVariables/index.vue     | 63 +++++++------
 pkg/capi/components/CardGrid.vue              | 20 ++--
 .../components/ClusterClassCard/index.vue     | 12 +--
 pkg/capi/components/ClusterListBanner.vue     |  8 +-
 pkg/capi/components/ExperimentalBanner.vue    |  9 +-
 .../ClusterConfig.vue                         | 91 +++++++++----------
 .../ControlPlaneEndpointSection.vue           |  6 +-
 .../NetworkSection.vue                        |  6 +-
 .../cluster.x-k8s.io.cluster/WorkerItem.vue   | 16 ++--
 .../edit/cluster.x-k8s.io.cluster/index.vue   | 14 +--
 .../ProviderConfig.vue                        | 45 +++++----
 .../index.vue                                 | 31 ++-----
 pkg/capi/tsconfig.json                        |  2 -
 yarn.lock                                     | 38 +++++++-
 18 files changed, 252 insertions(+), 221 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b8f0dc0..027d7c1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,31 +8,32 @@ module.exports = {
   extends: [
     'standard',
     'eslint:recommended',
-    '@nuxtjs/eslint-config-typescript',
-    'plugin:cypress/recommended'
+    // '@nuxtjs/eslint-config-typescript',
+    'plugin:cypress/recommended',
+    'plugin:vue/vue3-recommended',
   ],
   // add your custom rules here
   rules: {
-    'dot-notation':             'off',
-    'generator-star-spacing':   'off',
-    'guard-for-in':             'off',
-    'linebreak-style':          'off',
-    'new-cap':                  'off',
-    'no-empty':                 'off',
-    'no-extra-boolean-cast':    'off',
-    'no-new':                   'off',
-    'no-plusplus':              'off',
-    'no-useless-escape':        'off',
-    'nuxt/no-cjs-in-config':    'off',
-    'semi-spacing':             'off',
-    'space-in-parens':          'off',
-    strict:                     'off',
-    'unicorn/no-new-buffer':    'off',
-    'vue/html-self-closing':    'off',
-    'vue/no-unused-components': 'warn',
-    'vue/no-v-html':            'off',
-    'wrap-iife':                'off',
-    'vue/no-v-for-template-key': 'off',
+    'dot-notation':                  'off',
+    'generator-star-spacing':        'off',
+    'guard-for-in':                  'off',
+    'linebreak-style':               'off',
+    'new-cap':                       'off',
+    'no-empty':                      'off',
+    'no-extra-boolean-cast':         'off',
+    'no-new':                        'off',
+    'no-plusplus':                   'off',
+    'no-useless-escape':             'off',
+    'nuxt/no-cjs-in-config':         'off',
+    'semi-spacing':                  'off',
+    'space-in-parens':               'off',
+    strict:                          'off',
+    'unicorn/no-new-buffer':         'off',
+    'vue/html-self-closing':         'off',
+    'vue/no-unused-components':      'warn',
+    'vue/no-v-html':                 'off',
+    'wrap-iife':                     'off',
+    'vue/no-v-for-template-key':     'off',
     'array-bracket-spacing':             'warn',
     'arrow-parens':                      'warn',
     'arrow-spacing':                     ['warn', { before: true, after: true }],
diff --git a/package.json b/package.json
index 801cc12..58b2e7e 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,12 @@
     "@rancher/components": "^0.3.0-alpha.1",
     "@rancher/shell": "3.0.0",
     "@types/lodash": "4.14.196",
-    "core-js": "3.21.1",
-    "css-loader": "6.7.3",
-    "node-polyfill-webpack-plugin": "^3.0.0",
     "cache-loader": "^4.1.0",
     "color": "4.2.3",
-    "ip": "2.0.1"
+    "core-js": "3.21.1",
+    "css-loader": "6.7.3",
+    "ip": "2.0.1",
+    "node-polyfill-webpack-plugin": "^3.0.0"
   },
   "resolutions": {
     "**/webpack": "5",
@@ -31,5 +31,13 @@
     "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
     "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name",
     "migrate": "node ./scrips/vue-migrate.js"
+  },
+  "devDependencies": {
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-jest": "24.4.0",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-vue": "9.10.0"
   }
 }
diff --git a/pkg/capi/components/AutoImport.vue b/pkg/capi/components/AutoImport.vue
index 2e55f61..97434cd 100644
--- a/pkg/capi/components/AutoImport.vue
+++ b/pkg/capi/components/AutoImport.vue
@@ -1,9 +1,8 @@
 <script>
-import { defineComponent } from 'vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { LABELS } from '../types/capi';
 
-export default defineComponent({
+export default {
   name: 'CAPIAutoImportConfiguration',
 
   components: { Checkbox },
@@ -40,7 +39,7 @@ export default defineComponent({
     }
   },
 
-});
+};
 </script>
 
 <template>
diff --git a/pkg/capi/components/CCVariables/Variable.vue b/pkg/capi/components/CCVariables/Variable.vue
index c8906bb..68ba9c4 100644
--- a/pkg/capi/components/CCVariables/Variable.vue
+++ b/pkg/capi/components/CCVariables/Variable.vue
@@ -1,6 +1,4 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
+<script>
 import isEqual from 'lodash/isEqual';
 
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
@@ -8,19 +6,16 @@ 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',
+export default {
+  name:  'CCVariable',
   emits: ['validation-passed', 'update:value'],
   props: {
     variable: {
-      type:     Object as PropType<ClusterClassVariable>,
+      type:     Object,
       required: true
     },
 
@@ -50,9 +45,9 @@ export default defineComponent({
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
-    componentForType(): {component: any, name: string} | undefined {
+    componentForType() {
       const { type } = this.schema;
-      let out: any;
+      let out;
 
       if (this.variableOptions) {
         out = { component: LabeledSelect, name: 'text-var' };
@@ -99,7 +94,7 @@ export default defineComponent({
         return null;
       }
 
-      return opts.map((opt: any) => {
+      return opts.map((opt) => {
         return typeof opt === 'object' ? JSON.stringify(opt) : opt;
       });
     },
@@ -108,13 +103,13 @@ export default defineComponent({
       if (this.isDefaultValue) {
         return [];
       }
-      const t = this.t as Translation;
+      const t = this.t;
       const out = openAPIV3SchemaValidators(t, { key: this.variable.name }, this.schema);
 
       const required = this.variable?.required;
 
       if (required && this.validateRequired) {
-        out.push((val: any) => !isDefined(val) ? t('validation.required', { key: this.variable.name }) : undefined);
+        out.push((val) => !isDefined(val) ? t('validation.required', { key: this.variable.name }) : undefined);
       }
 
       return out;
@@ -135,7 +130,7 @@ export default defineComponent({
     },
 
     validationErrors() {
-      return this.validationRules.reduce((errs: string[], rule: Validator) => {
+      return this.validationRules.reduce((errs, rule) => {
         const message = rule(this.value);
 
         if (message) {
@@ -152,7 +147,7 @@ export default defineComponent({
   },
 
   methods: {
-    setValue(e: any) {
+    setValue(e) {
       let out = e;
 
       const { type } = this.schema;
@@ -165,11 +160,14 @@ export default defineComponent({
       this.$emit('update:value', out);
     }
   },
-});
+};
 </script>
 
 <template>
-  <div v-if="componentForType" :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"
@@ -187,8 +185,16 @@ export default defineComponent({
       <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" />
+            <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>
diff --git a/pkg/capi/components/CCVariables/index.vue b/pkg/capi/components/CCVariables/index.vue
index 5a5e7ee..511baf8 100644
--- a/pkg/capi/components/CCVariables/index.vue
+++ b/pkg/capi/components/CCVariables/index.vue
@@ -1,18 +1,14 @@
-<script lang="ts">
+<script>
 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';
 
-export default defineComponent({
+export default {
   name: 'ClusterClassVariables',
 
   components: { Variable },
-  emits:['validation-passed', 'update:value'],
+  emits:      ['validation-passed', 'update:value'],
 
   props: {
     clusterClass: {
@@ -21,7 +17,7 @@ export default defineComponent({
     },
 
     value: {
-      type:    Array as PropType<Array<CapiClusterVariable>>,
+      type:    Array,
       default: () => {
         return [];
       }
@@ -47,7 +43,7 @@ export default defineComponent({
 
   watch: {
     errorCount: {
-      handler: debounce(function(this: any, neu) {
+      handler: debounce(( neu) => {
         this.$emit('validation-passed', !neu);
       }, 5),
     },
@@ -71,7 +67,7 @@ export default defineComponent({
       if (!this.machineDeploymentClass && !this.machinePoolClass) {
         return allVariableDefinitions;
       }
-      const variableNames = this.machineScopedJsonPatches.reduce((names: string[], patch: any) => {
+      const variableNames = this.machineScopedJsonPatches.reduce((names, patch) => {
         const valueFromVariable = patch?.valueFrom?.variable;
 
         if (!valueFromVariable) {
@@ -88,23 +84,23 @@ export default defineComponent({
         return names;
       }, []);
 
-      return allVariableDefinitions.filter((v: ClusterClassVariable) => variableNames.includes(v.name));
+      return allVariableDefinitions.filter((v) => variableNames.includes(v.name));
     },
 
     machineScopedJsonPatches() {
       if (!this.machineDeploymentClass && !this.machinePoolClass) {
         return [];
       }
-      const out = [] as any[];
+      const out = [];
       const matchName = this.machineDeploymentClass || this.machinePoolClass;
       const matchKey = this.machineDeploymentClass ? 'machineDeploymentClass' : 'machinePoolClass';
 
       const patches = this.clusterClass?.spec?.patches || [];
 
-      patches.forEach((p: any) => {
+      patches.forEach((p) => {
         const definitions = p?.definitions || [];
 
-        definitions.forEach((definition: any) => {
+        definitions.forEach((definition) => {
           const matchMachines = definition?.selector?.matchResources?.[matchKey]?.names || [];
 
           if (matchMachines.includes(matchName)) {
@@ -118,13 +114,13 @@ export default defineComponent({
   },
 
   methods: {
-    valueFor(variableDef: ClusterClassVariable) {
-      return (this.value.find((variable: any) => variable.name === variableDef.name) || {}).value;
+    valueFor(variableDef) {
+      return (this.value.find((variable) => 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);
+    updateVariables(val, variableDef) {
+      const out = [...this.value];
+      const existingIdx = this.value.findIndex((variable) => variable.name === variableDef.name);
 
       if (existingIdx >= 0) {
         out[existingIdx].value = val;
@@ -135,16 +131,16 @@ export default defineComponent({
     },
 
     // update the cluster's variables when the cluster class changes
-    updateVariableDefaults(neu: ClusterClassVariable[], old: ClusterClassVariable[]) {
+    updateVariableDefaults(neu, old) {
       // 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);
+      const out = [...this.value].reduce((acc, existingVar) => {
+        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;
+        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 (oldDefault !== undefined && existingVar.value === oldDefault) {
@@ -174,7 +170,7 @@ export default defineComponent({
         if (def.schema?.openAPIV3Schema?.type === 'boolean' && !newDefault) {
           newDefault = false;
         }
-        if (newDefault !== undefined && !out.find(v => v.name === def.name)) {
+        if (newDefault !== undefined && !out.find((v) => v.name === def.name)) {
           out.push({ name: def.name, value: newDefault });
         }
       });
@@ -183,7 +179,7 @@ export default defineComponent({
       this.$emit('update:value', out);
     },
 
-    updateErrors(isValid: boolean) {
+    updateErrors(isValid) {
       if (!isValid) {
         this.errorCount++;
       } else {
@@ -191,8 +187,8 @@ export default defineComponent({
       }
     },
 
-    newComponentType(variableDef: ClusterClassVariable, i: number) {
-      const refs = this.$refs as {[key:string]: any[]};
+    newComponentType(variableDef, i) {
+      const refs = this.$refs;
       const inputEl = refs[`${ variableDef.name }-input`]?.[0]?.$el;
       const nextInputEl = refs[`${ this.variableDefinitions[i + 1]?.name }-input`]?.[0]?.$el;
 
@@ -204,13 +200,16 @@ export default defineComponent({
     }
   },
 
-});
+};
 </script>
 
 <template>
   <div class="variables">
     <template v-if="variableDefinitions && variableDefinitions.length">
-      <template v-for="(variableDef, i) in variableDefinitions" :key="`${variableDef.name}`">
+      <template
+        v-for="(variableDef, i) in variableDefinitions"
+        :key="`${variableDef.name}`"
+      >
         <Variable
           :ref="`${variableDef.name}-input`"
           :variable="variableDef"
@@ -219,7 +218,11 @@ export default defineComponent({
           @update:value="e=>updateVariables(e, variableDef)"
           @validation-passed="updateErrors"
         />
-        <div v-if="newComponentType(variableDef, i)" :key="`${i}-${rerenderKey}`" class="force-newline" />
+        <div
+          v-if="newComponentType(variableDef, i)"
+          :key="`${i}-${rerenderKey}`"
+          class="force-newline"
+        />
       </template>
     </template>
   </div>
diff --git a/pkg/capi/components/CardGrid.vue b/pkg/capi/components/CardGrid.vue
index 5a8eae0..04c1099 100644
--- a/pkg/capi/components/CardGrid.vue
+++ b/pkg/capi/components/CardGrid.vue
@@ -1,24 +1,16 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
+<script>
 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 defineComponent({
+export default {
   components: { ClusterClassCard },
   name:       'CardGrid',
-  emits: ['clicked'],
+  emits:      ['clicked'],
 
   props: {
     rows: {
-      type:     Array as PropType<Card[]>,
+      type:     Array,
       required: true,
     },
 
@@ -44,7 +36,7 @@ export default defineComponent({
 
   methods: {
     get,
-    select(row: Card[], idx: number) {
+    select(row, idx) {
       this.resetSelected();
       this.rows[idx].selected = true;
       this.$emit('clicked', row, idx);
@@ -56,7 +48,7 @@ export default defineComponent({
     },
     capitalize
   },
-});
+};
 </script>
 
 <template>
diff --git a/pkg/capi/components/ClusterClassCard/index.vue b/pkg/capi/components/ClusterClassCard/index.vue
index b51a4d4..00be9b3 100644
--- a/pkg/capi/components/ClusterClassCard/index.vue
+++ b/pkg/capi/components/ClusterClassCard/index.vue
@@ -1,10 +1,8 @@
-<script lang='ts'>
-import { defineComponent } from 'vue';
+<script>
 import { mapGetters } from 'vuex';
 import ClusterCardField from './ClusterCardField.vue';
-import { Worker } from './../../types/capi';
 
-export default defineComponent({
+export default {
   name:       'ClusterClassCard',
   components: { ClusterCardField },
 
@@ -48,16 +46,16 @@ export default defineComponent({
       return this.value?.spec?.workers?.machineDeployments?.length;
     },
     machineDeploymentsList() {
-      return this.value?.spec?.workers?.machineDeployments?.map((w: Worker) => w.class).join(', ') || '';
+      return this.value?.spec?.workers?.machineDeployments?.map((w) => w.class).join(', ') || '';
     },
     machinePoolsCount() {
       return this.value?.spec?.workers?.machinePools?.length;
     },
     machinePoolsList() {
-      return this.value?.spec?.workers?.machinePools?.map((w: Worker) => w.class).join(', ') || '';
+      return this.value?.spec?.workers?.machinePools?.map((w) => w.class).join(', ') || '';
     }
   },
-});
+};
 </script>
 
 <template>
diff --git a/pkg/capi/components/ClusterListBanner.vue b/pkg/capi/components/ClusterListBanner.vue
index a0d1692..a91d281 100644
--- a/pkg/capi/components/ClusterListBanner.vue
+++ b/pkg/capi/components/ClusterListBanner.vue
@@ -31,4 +31,10 @@ export default {
 };
 </script>
 
-<template><Banner v-if="showWarning" color="warning" label-key="capi.warnings.embeddedFeatureFlag" /></template>
+<template>
+  <Banner
+    v-if="showWarning"
+    color="warning"
+    label-key="capi.warnings.embeddedFeatureFlag"
+  />
+</template>
diff --git a/pkg/capi/components/ExperimentalBanner.vue b/pkg/capi/components/ExperimentalBanner.vue
index 0610459..85f44ed 100644
--- a/pkg/capi/components/ExperimentalBanner.vue
+++ b/pkg/capi/components/ExperimentalBanner.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import Banner from '@components/Banner/Banner.vue';
 
 export default {
@@ -9,4 +9,9 @@ export default {
 };
 </script>
 
-<template><Banner color="warning" label-key="capi.experimental" /></template>
+<template>
+  <Banner
+    color="warning"
+    label-key="capi.experimental"
+  />
+</template>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster/ClusterConfig.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster/ClusterConfig.vue
index 152d1dc..334bec6 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster/ClusterConfig.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster/ClusterConfig.vue
@@ -1,41 +1,34 @@
-<script lang='ts'>
-import { PropType } from 'vue';
+<script>
 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, cidrValidator, cidrArrayValid
 } from '../../util/validators';
-import { ClusterClass, Worker, CAPIClusterTopology, CAPIClusterNetwork, CAPIClusterCPEndpoint } from '../../types/capi';
+
 import CardGrid from '../../components/CardGrid.vue';
 import WorkerItem from './WorkerItem.vue';
 import NetworkSection from './NetworkSection.vue';
 import ControlPlaneEndpointSection from './ControlPlaneEndpointSection.vue';
 
-interface Step {
-  name: String
-}
-
-const defaultTopologyConfig: CAPIClusterTopology = {
+const defaultTopologyConfig = {
   version: '',
   class:   '',
   workers:           { machineDeployments: [], machinePools: [] }
 };
-const defaultClusterNetwork: CAPIClusterNetwork = {
+const defaultClusterNetwork = {
   apiServerPort: 6443,
   pods:          { cidrBlocks: [] },
   serviceDomain: '',
   services:      { cidrBlocks: [] }
 };
 
-const defaultCPEndpointConfig: CAPIClusterCPEndpoint = {
+const defaultCPEndpointConfig = {
   host: '',
   port: 49152
 };
@@ -44,7 +37,6 @@ export default {
   name:       'ClusterConfig',
   components: {
     CruResource,
-    Loading,
     NameNsDescription,
     LabeledInput,
     WorkerItem,
@@ -54,7 +46,7 @@ export default {
     CardGrid
   },
   mixins: [CreateEditView, FormValidation],
-  emits:['update:value'],
+  emits:  ['update:value'],
   props:      {
     mode: {
       type:     String,
@@ -70,7 +62,7 @@ export default {
       default:  ''
     },
     clusterClasses: {
-      type:     Array as PropType<ClusterClass[]>,
+      type:     Array,
       required: true
     }
   },
@@ -81,8 +73,8 @@ export default {
     });
   },
   data() {
-    const store = this.$store as {[key: string]: any};
-    const t = store.getters['i18n/t'] as Translation;
+    const store = this.$store;
+    const t = store.getters['i18n/t'];
     const stepClusterClass = {
       name:           'stepClusterClass',
       title:          t('capi.cluster.steps.clusterClass.title'),
@@ -133,14 +125,14 @@ export default {
         class: ''
       },
       variablesReady:  true,
-      clusterClassObj: null as ClusterClass | null,
+      clusterClassObj: null,
       loading:         true
     };
   },
 
   watch: {
     clusterClassObj(neu) {
-      const step = this.addSteps.find((s: Step) => s.name === 'stepClusterClass');
+      const step = this.addSteps.find((s) => s.name === 'stepClusterClass');
 
       if (step) {
         step.ready = !!neu;
@@ -148,13 +140,13 @@ export default {
     },
 
     stepConfigurationRequires(neu) {
-      const step = this.addSteps.find((s: Step) => s.name === 'stepConfiguration');
+      const step = this.addSteps.find((s) => s.name === 'stepConfiguration');
 
       step.ready = !!neu;
     },
 
     variablesReady(neu) {
-      const step = this.addSteps.find((s: Step) => s.name === 'stepVariables');
+      const step = this.addSteps.find((s) => s.name === 'stepVariables');
 
       step.ready = !!neu;
     }
@@ -170,16 +162,16 @@ export default {
       };
     },
     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 controlPlaneEndpointPortValid: boolean = !portValidator(this.$store.getters['i18n/t'])(this.value?.spec?.controlPlaneEndpoint?.port);
-      const controlPlaneEndpointHostValid: boolean = !hostValidator(this.$store.getters['i18n/t'])(this.value?.spec?.controlPlaneEndpoint?.host);
-      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 networkPodsValid: boolean = !this.value?.spec?.clusterNetwork?.pods?.cidrBlocks || cidrArrayValid(this.value.spec.clusterNetwork.pods.cidrBlocks);
-      const networkServicesValid: boolean = !this.value?.spec?.clusterNetwork?.services?.cidrBlocks || cidrArrayValid(this.value.spec.clusterNetwork.services.cidrBlocks);
-      const networkValid:boolean = !!this.value?.spec?.clusterNetwork?.apiServerPort && !isNaN(this.value?.spec?.clusterNetwork?.apiServerPort) && networkPodsValid && networkServicesValid;
+      const nameValid = !!this.value.metadata.name;
+      const versionTestString = versionTest(this.$store.getters['i18n/t'], this.controlPlane);
+      const versionValid = this.value?.spec?.topology?.version && !!(this.value?.spec?.topology?.version.match(versionTestString));
+      const controlPlaneEndpointPortValid = !portValidator(this.$store.getters['i18n/t'])(this.value?.spec?.controlPlaneEndpoint?.port);
+      const controlPlaneEndpointHostValid = !hostValidator(this.$store.getters['i18n/t'])(this.value?.spec?.controlPlaneEndpoint?.host);
+      const machineDeploymentsValid = 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 = 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 networkPodsValid = !this.value?.spec?.clusterNetwork?.pods?.cidrBlocks || cidrArrayValid(this.value.spec.clusterNetwork.pods.cidrBlocks);
+      const networkServicesValid = !this.value?.spec?.clusterNetwork?.services?.cidrBlocks || cidrArrayValid(this.value.spec.clusterNetwork.services.cidrBlocks);
+      const networkValid = !!this.value?.spec?.clusterNetwork?.apiServerPort && !isNaN(this.value?.spec?.clusterNetwork?.apiServerPort) && networkPodsValid && networkServicesValid;
 
       return nameValid && versionValid && controlPlaneEndpointHostValid && controlPlaneEndpointPortValid && networkValid && (machineDeploymentsValid || machinePoolsValid);
     },
@@ -189,32 +181,32 @@ export default {
     controlPlaneEndpoint() {
       return this.value?.spec?.controlPlaneEndpoint;
     },
-    machineDeployments(){
-        return this.value.spec.topology.workers.machineDeployments;
+    machineDeployments() {
+      return this.value.spec.topology.workers.machineDeployments;
     },
-    machinePools(){
-        return this.value.spec.topology.workers.machinePools;
+    machinePools() {
+      return this.value.spec.topology.workers.machinePools;
     },
     machineDeploymentOptions() {
-      return this.clusterClassObj?.spec?.workers?.machineDeployments?.map( (w: Worker) => w.class);
+      return this.clusterClassObj?.spec?.workers?.machineDeployments?.map( (w) => w.class);
     },
     machinePoolOptions() {
-      return this.clusterClassObj?.spec?.workers?.machinePools?.map( (w: Worker) => w.class);
+      return this.clusterClassObj?.spec?.workers?.machinePools?.map( (w) => w.class);
     },
     controlPlane() {
       return this.clusterClassObj?.spec?.controlPlane?.ref?.name;
     },
     clusterClassOptions() {
-      const out: any[] = [];
+      const out = [];
       const currentObject = this.clusterClassObj;
 
-      this.clusterClasses.forEach((obj: ClusterClass) => {
+      this.clusterClasses.forEach((obj) => {
         addType(obj);
       });
 
       return out;
 
-      function addType(obj: {[key: string]: any}) {
+      function addType(obj) {
         const id = obj?.id;
         const subtype = {
           id,
@@ -228,8 +220,8 @@ export default {
   },
   methods: {
     set,
-    setClassInfo(name: string) {
-      this.clusterClassObj = this.clusterClasses.find((x: ClusterClass) => {
+    setClassInfo(name) {
+      this.clusterClassObj = this.clusterClasses.find((x) => {
         const split = unescape(name).split('/');
 
         return x.metadata.namespace === split[0] && x.metadata.name === split[1];
@@ -243,11 +235,13 @@ export default {
     },
     setClass() {
       const clusterClassName = this.clusterClassObj?.metadata?.name;
-      this.$emit('update:value', {k: 'spec.topology.class', val: clusterClassName});
+
+      this.$emit('update:value', { k: 'spec.topology.class', val: clusterClassName });
     },
     setNamespace() {
       const clusterClassNs = this.clusterClassObj?.metadata?.namespace;
-      this.$emit('update:value', {k: 'metadata.namespace', val: clusterClassNs});
+
+      this.$emit('update:value', { k: 'metadata.namespace', val: clusterClassNs });
     },
     async saveOverride() {
       if ( this.errors ) {
@@ -263,7 +257,8 @@ export default {
     },
 
     initSpecs() {
-        const val = this.value;
+      const val = this.value;
+
       if ( !val ) {
         set(val, 'spec', { });
       }
@@ -278,7 +273,7 @@ export default {
       if ( !val.spec.controlPlaneEndpoint ) {
         set(val.spec, 'controlPlaneEndpoint', clone(defaultCPEndpointConfig));
       }
-      this.$emit('update:value', {k: 'spec', val: val.spec});
+      this.$emit('update:value', { k: 'spec', val: val.spec });
 
       if ( this.preselectedClass) {
         this.setClassInfo(this.preselectedClass);
@@ -301,8 +296,8 @@ export default {
         params: {},
       });
     },
-    clickedType(obj: {[key:string]: any}) {
-      this.clusterClassObj = this.clusterClasses.find((x: ClusterClass) => x.id === obj.id) || null;
+    clickedType(obj) {
+      this.clusterClassObj = this.clusterClasses.find((x) => x.id === obj.id) || null;
       this.setClass();
       this.setNamespace();
     }
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster/ControlPlaneEndpointSection.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster/ControlPlaneEndpointSection.vue
index 114b9ce..13e6d6f 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster/ControlPlaneEndpointSection.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster/ControlPlaneEndpointSection.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import { mapGetters } from 'vuex';
 import { _EDIT } from '@shell/config/query-params';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
@@ -6,7 +6,7 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 export default {
   name:       'ControlPlaneEndpointSection',
   components: { LabeledInput },
-  emits: ['update:value'],
+  emits:      ['update:value'],
   props:      {
     value: {
       type:     Object,
@@ -57,7 +57,7 @@ export default {
           :rules="rules.port"
           type="number"
         />
-    </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster/NetworkSection.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster/NetworkSection.vue
index 5ef5dc0..b8bfaf8 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster/NetworkSection.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster/NetworkSection.vue
@@ -1,10 +1,12 @@
-<script lang="ts">
+<script>
 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 {
+  name: 'NetworkSelection',
+
   components: {
     LabeledInput,
     ArrayList
@@ -71,7 +73,6 @@ export default {
           :mode="mode"
           :title="t('capi.cluster.networking.pods')"
           :rules="rules.pods"
-          
         />
       </div>
       <div class="col span-3">
@@ -81,7 +82,6 @@ export default {
           :mode="mode"
           :title="t('capi.cluster.networking.services')"
           :rules="rules.services"
-          
         />
       </div>
     </div>
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster/WorkerItem.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster/WorkerItem.vue
index cddaf29..4d8aa5e 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster/WorkerItem.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster/WorkerItem.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import debounce from 'lodash/debounce';
 import { removeAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
@@ -8,8 +8,8 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 export default {
   components: { LabeledSelect, LabeledInput },
-  emits: ['add', 'remove', 'update:value'],
-  props: {
+  emits:      ['add', 'remove', 'update:value'],
+  props:      {
     value: {
       type:     Array,
       default:  null,
@@ -48,7 +48,7 @@ export default {
     },
   },
   data() {
-    const input = (this.value as any[] || [])?.slice();
+    const input = (this.value || [])?.slice();
     const rows = [];
 
     for ( const value of input ) {
@@ -79,7 +79,7 @@ export default {
       deep: true,
       handler() {
         this.lastUpdateWasFromValue = true;
-        this.rows = (this.value || []).map(v => ({ value: v }));
+        this.rows = (this.value || []).map((v) => ({ value: v }));
       }
     },
     rows: {
@@ -115,7 +115,7 @@ export default {
     /**
      * Remove item and emits removed row and its own index value
      */
-    remove(row: {[key: string]: any}, index: number) {
+    remove(row, index) {
       this.$emit('remove', { row, index });
       removeAt(this.rows, index);
       this.queueUpdate();
@@ -135,8 +135,8 @@ export default {
       }
       this.$emit('update:value', out);
     },
-    valUpdate(val, key){
-        key.value.name = val.data
+    valUpdate(val, key) {
+      key.value.name = val.data;
     }
   }
 };
diff --git a/pkg/capi/edit/cluster.x-k8s.io.cluster/index.vue b/pkg/capi/edit/cluster.x-k8s.io.cluster/index.vue
index 2b9a8b7..e5c0e14 100644
--- a/pkg/capi/edit/cluster.x-k8s.io.cluster/index.vue
+++ b/pkg/capi/edit/cluster.x-k8s.io.cluster/index.vue
@@ -1,10 +1,10 @@
-<script lang="ts">
+<script>
 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 { CAPI, QUERY_PARAMS, ClusterClass } from '../../types/capi';
+import { CAPI, QUERY_PARAMS } from '../../types/capi';
 import ClusterConfig from './ClusterConfig.vue';
 
 export default {
@@ -14,7 +14,7 @@ export default {
     Loading,
     ClusterConfig
   },
-  emits: ['update:value'],
+  emits:  ['update:value'],
   mixins: [CreateEditView],
 
   props: {
@@ -40,10 +40,10 @@ export default {
         set(this.value, 'metadata', {});
       }
     }
-    this.getClusterClasses().then((cc: any[]) => {
+    this.getClusterClasses().then((cc) => {
       this.clusterClasses = cc;
       this.loading = false;
-    }).catch((err: Error) => {
+    }).catch((err) => {
       this.errors.push(err);
       this.loading = false;
     });
@@ -58,13 +58,13 @@ export default {
     const preselectedClass = classFromURL || classFromValue || null;
 
     return {
-      subType, preselectedClass, capiProviders: [], clusterClasses: [] as any[], loading: true
+      subType, preselectedClass, capiProviders: [], clusterClasses: [], loading: true
     };
   },
   methods: {
     set,
     async getClusterClasses() {
-      const allClusterClasses: ClusterClass[] = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
+      const allClusterClasses = await this.$store.dispatch('management/findAll', { type: CAPI.CLUSTER_CLASS });
 
       return allClusterClasses;
     },
diff --git a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
index 90b48b9..89cdc91 100644
--- a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
+++ b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script>
 import { mapGetters } from 'vuex';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { clear } from '@shell/utils/array';
@@ -17,7 +17,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Banner from '@components/Banner/Banner.vue';
 import { _EDIT } from '@shell/config/query-params';
 import { allHash } from '@shell/utils/promise';
-import { PROVIDER_TYPES, RANCHER_TURTLES_SYSTEM_NAMESPACE, RANCHER_TURTLES_SYSTEM_NAME, Provider } from '../../types/capi';
+import { PROVIDER_TYPES, RANCHER_TURTLES_SYSTEM_NAMESPACE, RANCHER_TURTLES_SYSTEM_NAME } from '../../types/capi';
 import { providerNameValidator, providerVersionValidator, urlValidator } from '../../util/validators';
 
 const defaultFeatures = {
@@ -43,19 +43,8 @@ const customProviderSpec = {
 
 const providerTypes = ['infrastructure', 'bootstrap', 'controlPlane', 'addon', 'ipam', 'runtimeextension', 'core'];
 
-interface Secret {
-  metadata: {
-    name: string,
-    namespace: string
-  }
-}
-interface Hash {
-  namespaces: [],
-  coreProviderSecret: Secret[]
-}
-
 export default {
-    name: 'ProviderConfig',
+  name:       'ProviderConfig',
   components: {
     CruResource,
     Loading,
@@ -68,7 +57,7 @@ export default {
     Banner
   },
   mixins: [CreateEditView, FormValidation],
-  emits:['update:value'],
+  emits:  ['update:value'],
   props:      {
     mode: {
       type:     String,
@@ -84,19 +73,19 @@ export default {
     }
   },
   beforeMount() {
-    this.getDependencies().then((hash: Hash) => {
+    this.getDependencies().then((hash) => {
       this.allNamespaces = hash.namespaces || [];
       this.coreProviderSecret = hash.coreProviderSecret || {};
       this.initSpecs();
       this.loading = false;
-    }).catch((err: Error) => {
+    }).catch((err) => {
       this.errors.push(err);
       this.initSpecs();
       this.loading = false;
     });
   },
   data() {
-    const providerDetails: Provider = PROVIDER_TYPES.find(p => p.id === this.provider) || { disabled: false, id: '0' };
+    const providerDetails = PROVIDER_TYPES.find((p) => p.id === this.provider) || { disabled: false, id: '0' };
 
     return {
       loading:            true,
@@ -191,7 +180,7 @@ export default {
         variables: clone(defaultVariables)
       };
     },
-    generateName(name: string) {
+    generateName(name) {
       return name ? `${ name }-credentials-${ randomStr(5).toLowerCase() }` : undefined;
     },
     async getDependencies() {
@@ -207,8 +196,7 @@ export default {
       return await allHash(hashPromises);
     },
 
-    async saveOverride(btnCb: Function) {
-
+    async saveOverride(btnCb) {
       if ( this.errors ) {
         clear(this.errors);
       }
@@ -321,8 +309,14 @@ export default {
         </div>
       </div>
     </div>
-    <div v-if="credentialComponent" class="mb-40" />
-    <h2 v-if="hasFeatures || hasVariables" class="mb-20">
+    <div
+      v-if="credentialComponent"
+      class="mb-40"
+    />
+    <h2
+      v-if="hasFeatures || hasVariables"
+      class="mb-20"
+    >
       <t k="capi.provider.secret.title" />
     </h2>
     <div v-if="credentialComponent">
@@ -346,7 +340,10 @@ export default {
       >
         {{ t('capi.provider.banner') }}
       </Banner>
-      <div v-if="hasFeatures" class="mb-40">
+      <div
+        v-if="hasFeatures"
+        class="mb-40"
+      >
         <h3 class="mb-20">
           <t k="capi.provider.features.title" />
         </h3>
diff --git a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
index 9277c6e..aba8e0c 100644
--- a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
+++ b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource.vue';
 import SelectIconGrid from '@shell/components/SelectIconGrid.vue';
@@ -7,17 +7,6 @@ import { PROVIDER_TYPES } from '../../types/capi';
 import ProviderConfig from './ProviderConfig.vue';
 import { set } from '@shell/utils/object';
 
-interface ProviderType {
-  id: string,
-  label: string,
-  description: string,
-  icon: HTMLImageElement
-  disabled: boolean,
-}
-type Route = {
-  query: {[index: string]:any},
-};
-
 export default {
   name: 'CreateProvider',
 
@@ -28,7 +17,7 @@ export default {
   },
 
   mixins: [CreateEditView],
-  emits:['set-subtype', 'update:value'],
+  emits:  ['set-subtype', 'update:value'],
 
   props: {
 
@@ -53,15 +42,15 @@ export default {
   },
 
   data() {
-    const route = this.$route as Route;
-    const subType: string | null = route?.query[SUB_TYPE] || null;
+    const route = this.$route;
+    const subType = route?.query[SUB_TYPE] || null;
 
     return { subType };
   },
 
   computed: {
     subTypes() {
-      const out: ProviderType[] = [];
+      const out = [];
       const getters = this.$store.getters;
 
       PROVIDER_TYPES?.forEach((provider) => {
@@ -70,7 +59,7 @@ export default {
 
       return out;
 
-      function addType(id: string, disabled = false) {
+      function addType(id, disabled = false) {
         const label = getters['i18n/withFallback'](`cluster.provider."${ id }"`, null, id);
         const description = getters['i18n/withFallback'](`cluster.providerDescription."${ id }"`, null, '');
         let icon;
@@ -85,7 +74,7 @@ export default {
           }
         }
 
-        const providerType: ProviderType = {
+        const providerType = {
           id,
           label,
           description,
@@ -100,14 +89,14 @@ export default {
 
   methods: {
     set,
-    clickedType(obj: ProviderType) {
+    clickedType(obj) {
       const id = obj.id;
 
       this.$router?.applyQuery({ [SUB_TYPE]: id });
       this.selectType(id);
     },
 
-    selectType(type: string) {
+    selectType(type) {
       this.subType = type;
       this.$emit('set-subtype', this.$store.getters['i18n/withFallback'](`cluster.provider."${ type }"`, null, type));
     },
@@ -116,7 +105,7 @@ export default {
 </script>
 
 <template>
-  <CruResource               
+  <CruResource
     :mode="mode"
     :validation-passed="true"
     :selected-subtype="subType"
diff --git a/pkg/capi/tsconfig.json b/pkg/capi/tsconfig.json
index 5eb3e07..07c9c46 100644
--- a/pkg/capi/tsconfig.json
+++ b/pkg/capi/tsconfig.json
@@ -21,7 +21,6 @@
       "node",
       "webpack-env",
       "@types/node",
-      "@types/jest",
       "@types/lodash",
       "rancher",
       "shell"
@@ -45,7 +44,6 @@
     "**/*.ts",
     "**/*.d.ts",
     "**/*.tsx",
-    "**/*.vue"
   ],
   "exclude": [
     "node_modules",
diff --git a/yarn.lock b/yarn.lock
index bd1d016..d439fb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2765,6 +2765,13 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -7938,6 +7945,14 @@ eslint-plugin-cypress@2.12.1:
   dependencies:
     globals "^11.12.0"
 
+eslint-plugin-es@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz#75a7cdfdccddc0589934aeeb384175f221c57893"
+  integrity sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==
+  dependencies:
+    eslint-utils "^2.0.0"
+    regexpp "^3.0.0"
+
 eslint-plugin-es@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz#f0822f0c18a535a97c3e714e89f88586a7641ec9"
@@ -7988,6 +8003,25 @@ eslint-plugin-n@15.2.0:
     resolve "^1.10.1"
     semver "^6.3.0"
 
+eslint-plugin-node@11.1.0:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz#c95544416ee4ada26740a30474eefc5402dc671d"
+  integrity sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==
+  dependencies:
+    eslint-plugin-es "^3.0.0"
+    eslint-utils "^2.0.0"
+    ignore "^5.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.10.1"
+    semver "^6.1.0"
+
+eslint-plugin-promise@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-7.2.1.tgz#a0652195700aea40b926dc3c74b38e373377bfb0"
+  integrity sha512-SWKjd+EuvWkYaS+uN2csvj0KoP43YTu7+phKQ5v+xw6+A0gutVX2yqCeCkC3uLCJFiPfR2dD8Es5L7yUsmvEaA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+
 eslint-plugin-vue@9.10.0:
   version "9.10.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.10.0.tgz#bb6423166e6eab800344245b6eef6ce9480c78a7"
@@ -8041,7 +8075,7 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
+eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
@@ -12734,7 +12768,7 @@ selfsigned@^2.1.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+semver@^6.0.0, semver@^6.1.0, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==

From 3b8acd35fd318a7d69485af4b0aa8cb233380961 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 9 Dec 2024 08:53:54 -0800
Subject: [PATCH 2/4] fix capiprovider edit and prevent duplicate provider ids

---
 .../ProviderConfig.vue                        |  6 ++--
 .../index.vue                                 | 36 +++++++++++++++----
 pkg/capi/l10n/en-us.yaml                      |  3 +-
 pkg/capi/util/validators.ts                   |  4 +--
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
index 89cdc91..7ab0aca 100644
--- a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
+++ b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
@@ -105,7 +105,7 @@ export default {
     fvExtraRules() {
       return {
         name:    providerNameValidator(this.$store.getters['i18n/t']),
-        version: providerVersionValidator(this.$store.getters['i18n/t'], this.isCustom),
+        version: providerVersionValidator(this.$store.getters['i18n/t']),
         url:     urlValidator(this.$store.getters['i18n/t'])
       };
     },
@@ -288,8 +288,8 @@ export default {
             :mode="mode"
             label-key="capi.provider.version.label"
             placeholder-key="capi.provider.version.placeholder"
+            :tooltip="t('capi.provider.version.tooltip')"
             :rules="fvGetAndReportPathRules('spec.version')"
-            required
             @update:value="$emit('update:value', {k: 'spec.version', val: $event})"
           />
         </div>
@@ -325,7 +325,7 @@ export default {
       </h3>
       <SelectCredential
         v-model:value="value.spec.credentials.rancherCloudCredentialNamespaceName"
-        :mode="mode"
+        :mode="isEdit? 'view' : mode"
         :provider="credentialComponent"
         :cancel="cancelCredential"
         :showing-form="showForm"
diff --git a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
index aba8e0c..084645c 100644
--- a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
+++ b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
@@ -3,7 +3,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource.vue';
 import SelectIconGrid from '@shell/components/SelectIconGrid.vue';
 import { SUB_TYPE } from '@shell/config/query-params';
-import { PROVIDER_TYPES } from '../../types/capi';
+import { CAPI, PROVIDER_TYPES } from '../../types/capi';
 import ProviderConfig from './ProviderConfig.vue';
 import { set } from '@shell/utils/object';
 
@@ -35,9 +35,17 @@ export default {
       default: 'capi-provider-create'
     }
   },
-  beforeMount() {
-    if ( this.value?.spec?.name) {
-      this.selectType(this.value.spec.name);
+  async beforeMount() {
+    this.capiProviders = await this.$store.dispatch('management/findAll', { type: CAPI.PROVIDER });
+    const name = this.value.spec?.name;
+
+    if (!name) {
+      return;
+    }
+    if (this.value.spec?.fetchConfig && !this.subTypes.find(({ id }) => id === name)) {
+      this.selectType('custom');
+    } else {
+      this.selectType(name);
     }
   },
 
@@ -45,7 +53,7 @@ export default {
     const route = this.$route;
     const subType = route?.query[SUB_TYPE] || null;
 
-    return { subType };
+    return { subType, capiProviders: [] };
   },
 
   computed: {
@@ -54,7 +62,9 @@ export default {
       const getters = this.$store.getters;
 
       PROVIDER_TYPES?.forEach((provider) => {
-        addType(provider.id, provider.disabled);
+        const disabled = provider.disabled || this.enabledProviderTypes.includes(provider.id);
+
+        addType(provider.id, disabled);
       });
 
       return out;
@@ -84,6 +94,18 @@ export default {
 
         out.push(providerType);
       }
+    },
+
+    enabledProviderTypes() {
+      return this.capiProviders.reduce((types, p) => {
+        const { name } = p?.spec || {};
+
+        if (!types.includes(name)) {
+          types.push(name);
+        }
+
+        return types;
+      }, []);
     }
   },
 
@@ -137,6 +159,8 @@ export default {
     <ProviderConfig
       v-if="subType"
       :value="value"
+      :initial-value="initialValue"
+      :live-value="liveValue"
       :mode="mode"
       :provider="subType"
       @update:value="set(value, $event.k, $event.val)"
diff --git a/pkg/capi/l10n/en-us.yaml b/pkg/capi/l10n/en-us.yaml
index 0780af4..c249f41 100644
--- a/pkg/capi/l10n/en-us.yaml
+++ b/pkg/capi/l10n/en-us.yaml
@@ -5,7 +5,7 @@ capi:
     title: Rancher Turtles
     description: The Rancher Turtles operator allows users to import CAPI-provisioned clusters into Rancher.
     disableFeatureFlag: The <code>embedded-cluster-api</code> feature flag must be disabled before installing the CAPI Turtles extension. Follow instructions in the documentation <a aria-label="Read how to disable the embedded CAPI feature flag" target="_blank" rel="noopener noreferrer nofollow" href="https://docs.rancher-turtles.com/docs/getting-started/rancher#setting-up-rancher-for-rancher-turtles">here</a> to do so.
-    turtlesNeeded: Either the user doesn't have permission to run the Turtles extension or the Turtles operator isn't installed. To learn how to install the Rancher Turtles extension, read the <a aria-label="Read how to install the Rancher Turtles operator" href="https://docs.rancher-turtles.com/docs/getting-started/install_turtles_operator" target="_blank" rel="noopener noreferrer nofollow">documentation.</a>
+    turtlesNeeded: Either the user doesn't have permission to run the Turtles extension or the Turtles operator isn't installed. To learn how to install the Rancher Turtles extension, read the <a aria-label="Read how to install the Rancher Turtles operator" href="https://turtles.docs.rancher.com/turtles/v0.13/en/index.html" target="_blank" rel="noopener noreferrer nofollow">documentation.</a>
   autoImport:
     label: CAPI Auto-Import
     checkbox:
@@ -111,6 +111,7 @@ capi:
     version:
       label: Version
       placeholder: eg. v1.0.0
+      tooltip: If unspecified, the latest version will be used.
     fetchConfigURL:
       label: URL
       placeholder: https://github.com/example/releases/latest/client.yaml
diff --git a/pkg/capi/util/validators.ts b/pkg/capi/util/validators.ts
index 6b441b5..8ecdb87 100644
--- a/pkg/capi/util/validators.ts
+++ b/pkg/capi/util/validators.ts
@@ -159,8 +159,8 @@ export const urlValidator = function(t: Translation): Validator {
   return (val: string) => val && !val.match(/^https?:\/\/(.*)$/) ? t('validation.url') : undefined;
 };
 
-export const providerVersionValidator = function(t: Translation, required: boolean): Validator {
-  return (val: string) => (required && !val) || (val && !val.match(/^v(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/)) ? t('validation.version') : undefined;
+export const providerVersionValidator = function(t: Translation): Validator {
+  return (val: string) => (val && !val.match(/^v(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/)) ? t('validation.version') : undefined;
 };
 
 export const providerNameValidator = function(t: Translation): Validator {

From 5a29863f716e2958ebe4f5114939be948cb9fc6e Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:01:14 -0800
Subject: [PATCH 3/4] fix creating a capi provider with no version

---
 .../turtles-capi.cattle.io.capiprovider/ProviderConfig.vue  | 6 ++++--
 pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
index 7ab0aca..2389a50 100644
--- a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
+++ b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/ProviderConfig.vue
@@ -38,7 +38,6 @@ const customProviderSpec = {
   configSecret: { name: '' },
   credentials:  { rancherCloudCredentialNamespaceName: '' },
   fetchConfig:  { url: '' },
-  version:      ''
 };
 
 const providerTypes = ['infrastructure', 'bootstrap', 'controlPlane', 'addon', 'ipam', 'runtimeextension', 'core'];
@@ -203,6 +202,9 @@ export default {
       if ( !this.credentialComponent && !this.value.spec?.credentials?.rancherCloudCredentialNamespaceName ) {
         this.value.spec.credentials = null;
       }
+      if (this.value?.spec?.version === '') {
+        delete this.value.spec.version;
+      }
       try {
         await this.save(btnCb, null);
       } catch (err) {
@@ -325,7 +327,7 @@ export default {
       </h3>
       <SelectCredential
         v-model:value="value.spec.credentials.rancherCloudCredentialNamespaceName"
-        :mode="isEdit? 'view' : mode"
+        :mode="mode"
         :provider="credentialComponent"
         :cancel="cancelCredential"
         :showing-form="showForm"
diff --git a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
index 084645c..23032a9 100644
--- a/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
+++ b/pkg/capi/edit/turtles-capi.cattle.io.capiprovider/index.vue
@@ -100,7 +100,7 @@ export default {
       return this.capiProviders.reduce((types, p) => {
         const { name } = p?.spec || {};
 
-        if (!types.includes(name)) {
+        if (!types.includes(name) && name !== 'custom') {
           types.push(name);
         }
 

From c6fd7068868e9f44ef945497f4298e9b9dff1132 Mon Sep 17 00:00:00 2001
From: Nancy Butler <42977925+mantis-toboggan-md@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:06:55 -0800
Subject: [PATCH 4/4] remove unused type files

---
 .eslintrc.js                                  |  1 -
 .../models/cluster.x-k8s.io.clusterclass.js   |  1 +
 pkg/capi/types/capi.ts                        | 52 +------------------
 pkg/capi/types/cluster.x-k8s.io.cluster.ts    | 13 -----
 pkg/capi/types/clusterClass.ts                | 39 --------------
 5 files changed, 2 insertions(+), 104 deletions(-)
 delete mode 100644 pkg/capi/types/cluster.x-k8s.io.cluster.ts
 delete mode 100644 pkg/capi/types/clusterClass.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 027d7c1..9407c14 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,7 +8,6 @@ module.exports = {
   extends: [
     'standard',
     'eslint:recommended',
-    // '@nuxtjs/eslint-config-typescript',
     'plugin:cypress/recommended',
     'plugin:vue/vue3-recommended',
   ],
diff --git a/pkg/capi/models/cluster.x-k8s.io.clusterclass.js b/pkg/capi/models/cluster.x-k8s.io.clusterclass.js
index 77ed8f3..3a293a1 100644
--- a/pkg/capi/models/cluster.x-k8s.io.clusterclass.js
+++ b/pkg/capi/models/cluster.x-k8s.io.clusterclass.js
@@ -33,6 +33,7 @@ export default class ClusterClass extends SteveModel {
 
   saveYaml(yaml) {
     const localCluster = this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, LOCAL_CLUSTER);
+
     return localCluster.doAction('apply', { yaml });
   }
 }
diff --git a/pkg/capi/types/capi.ts b/pkg/capi/types/capi.ts
index 5dd7155..076c238 100644
--- a/pkg/capi/types/capi.ts
+++ b/pkg/capi/types/capi.ts
@@ -21,58 +21,8 @@ export const CP_VERSIONS = {
 
 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 {
-  id: string,
-  metadata: {
-    name: string,
-    namespace: string,
-    annotations?: {[key: string]: string}
-  },
-  spec: {
-    infrastructure: Object,
-    workers: {
-      machinePools: [],
-      machineDeployments: []
-    },
-    controlPlane: {ref: {name: string}}
-  }
-}
-export interface Provider {
-  id: string,
-  disabled: boolean,
-  credential?: string
-}
-
-export const PROVIDER_TYPES: Provider[] = [
+export const PROVIDER_TYPES = [
   {
     id: 'aws', disabled: false, credential: 'aws'
   },
diff --git a/pkg/capi/types/cluster.x-k8s.io.cluster.ts b/pkg/capi/types/cluster.x-k8s.io.cluster.ts
deleted file mode 100644
index 9f857d5..0000000
--- a/pkg/capi/types/cluster.x-k8s.io.cluster.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-
-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
deleted file mode 100644
index 0612cb7..0000000
--- a/pkg/capi/types/clusterClass.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-
-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
-}