Fix editing capi providers

.eslintrc.js

@@ -8,31 +8,31 @@ module.exports = {
   extends: [
     'standard',
     'eslint:recommended',
-    '@nuxtjs/eslint-config-typescript',
-    'plugin:cypress/recommended'
+    '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 }],

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"
   }
 }

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>

pkg/capi/components/CCVariables/Variable.vue

@@ -1,26 +1,21 @@
-<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';
 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>