Migrate Elemental to be Vue3 compliant

.nvmrc

@@ -0,0 +1 @@
+20

.vscode/settings.json

@@ -1,42 +1,12 @@
 {
   "files.exclude": {
+    ".ackrc": true,
+    ".drone.yml": true,
     ".eslintcache": true,
     ".nuxt*": true,
-    "yarn-error.log": true,
+    "LICENSE": true,
     "pkg/**/.shell": true,
     "pkg/**/node_modules": true
   },
-  "eslint.format.enable": true,
-  "eslint.run": "onSave",
-  "eslint.packageManager": "yarn",
-  "eslint.validate": ["vue","html","javascript","typescript"],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "javascript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  "cSpell.words": [
-    "autoscroll",
-    "cacerts",
-    "chainable",
-    "Codecov",
-    "epinio",
-    "hevi",
-    "kube",
-    "kubeconfig",
-    "kubectl",
-    "Kubernetes",
-    "kubevirt",
-    "nuxt",
-    "overcommit",
-    "prepending",
-    "protip",
-    "pvcs",
-    "testid",
-    "tolerations",
-    "userpreferences",
-    "virtualmachine",
-    "vuex",
-    "whatsnew"
-  ],
-}
+  "path-intellisense.showHiddenFiles": false
+}

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+pnpMode: false

package.json

@@ -1,34 +1,43 @@
 {
   "name": "elemental-ui",
   "description": "Elemental UI extension",
-  "version": "2.0.0",
+  "version": "3.0.0-rc.1",
   "private": false,
   "engines": {
-    "node": ">=12"
+    "node": ">=20"
   },
   "dependencies": {
-    "@rancher/components": "0.2.1-alpha.0",
-    "@rancher/shell": "2.0.0",
-    "@types/lodash": "4.14.184",
-    "core-js": "3.21.1",
-    "css-loader": "4.3.0"
+    "@rancher/shell": "^3.0.0-rc.3",
+    "cache-loader": "^4.1.0",
+    "node-polyfill-webpack-plugin": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "18.11.9",
-    "@types/semver": "^7.5.8",
-    "semver": "^7.6.0"
+    "vue3-resize": "0.2.0"
+  },
+  "resolutions": {
+    "@types/node": "~20.10.0",
+    "d3-color": "3.1.0",
+    "ejs": "3.1.9",
+    "follow-redirects": "1.15.2",
+    "glob": "7.2.3",
+    "glob-parent": "6.0.2",
+    "json5": "2.2.3",
+    "@types/lodash": "4.17.5",
+    "merge": "2.1.1",
+    "node-forge": "1.3.1",
+    "nth-check": "2.1.1",
+    "qs": "6.11.1",
+    "roarr": "7.0.4",
+    "semver": "7.5.4",
+    "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
   "scripts": {
     "dev": "NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve",
-    "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name",
     "build": "./node_modules/.bin/vue-cli-service build",
     "clean": "./node_modules/@rancher/shell/scripts/clean",
     "build-pkg": "./node_modules/@rancher/shell/scripts/build-pkg.sh",
     "serve-pkgs": "./node_modules/@rancher/shell/scripts/serve-pkgs",
-    "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish"
-  },
-  "resolutions": {
-    "**/webpack": "4",
-    "glob": "7.2.3"
+    "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
+    "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name"
   }
 }

pkg/elemental/components/BuildMedia.vue

@@ -241,7 +241,7 @@ export default {
         class="col span-2"
       >
         <LabeledSelect
-          v-model="registrationEndpointSelected"
+          v-model:value="registrationEndpointSelected"
           class="mr-20"
           data-testid="select-registration-endpoint-build-media"
           :label="t('elemental.machineRegistration.create.machineReg')"
@@ -254,7 +254,7 @@ export default {
         class="col span-2"
       >
         <LabeledSelect
-          v-model="buildMediaTypeSelected"
+          v-model:value="buildMediaTypeSelected"
           class="mr-20"
           data-testid="select-media-type-build-media"
           :label="t('elemental.machineRegistration.edit.mediaType')"
@@ -265,7 +265,7 @@ export default {
       </div>
       <div class="col span-3">
         <LabeledSelect
-          v-model="buildMediaOsVersionSelected"
+          v-model:value="buildMediaOsVersionSelected"
           class="mr-20"
           data-testid="select-os-version-build-media"
           :label="t('elemental.machineRegistration.edit.osVersion')"
@@ -280,11 +280,11 @@ export default {
           mode="buildMedia"
           class="mr-20"
           data-testid="build-media-btn"
-          :disabled="!isBuildMediaBtnEnabled || isMediaBuilt"
+          :disabled="(!isBuildMediaBtnEnabled || isMediaBuilt) ? 'disabled' : null"
           @click="buildMedia"
         />
         <a
-          :disabled="!isMediaBuilt"
+          :disabled="!isMediaBuilt ? 'disabled' : null"
           class="btn role-primary"
           data-testid="download-media-btn"
           @click="$event => downloadMedia($event)"

pkg/elemental/components/DashboardView.vue

@@ -277,7 +277,7 @@ export default {
           </div>
           <PercentageBar
             class="mt-10"
-            :value="percentageBarValue"
+            :model-value="percentageBarValue"
             :color-stops="colorStops"
           />
         </div>
@@ -490,19 +490,6 @@ export default {
   }
 }
 
-::v-deep .main-tables-container {
- .download-machine-reg {
-    display: flex;
-    justify-content: center;
-    height: 59px;
-    min-width: 130px;
-
-    .icon.icon-lg {
-      display: none;
-    }
-  }
-}
-
 @media screen and (max-width: 1080px) {
   .main-tables-container {
     flex-direction: column;

pkg/elemental/components/ImportMultiple.vue

@@ -155,7 +155,7 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledSelect
-                v-model="defaultNamespace"
+                v-model:value="defaultNamespace"
                 class="pull-right"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"

pkg/elemental/detail/elemental.cattle.io.machineregistration.vue

@@ -31,11 +31,7 @@ export default {
     mode: {
       type:     String,
       required: true
-    },
-    resource: {
-      type:     String,
-      required: true
-    },
+    }
   },
   data() {
     return {
@@ -119,7 +115,7 @@ export default {
       <BuildMedia
         :display-reg-endpoints="false"
         :registration-endpoint="`${value.metadata.namespace}/${value.metadata.name}`"
-        :resource="resource"
+        :resource="value.type"
         :mode="mode"
       />
     </div>
@@ -142,7 +138,7 @@ export default {
         <h3>{{ t('elemental.machineRegistration.create.cloudConfiguration') }}</h3>
         <YamlEditor
           ref="yamleditor"
-          v-model="cloudConfig"
+          v-model:value="cloudConfig"
           class="mb-20"
           :editor-mode="editorMode"
         />

pkg/elemental/edit/elemental.cattle.io.machineregistration.vue

@@ -20,8 +20,8 @@ import { getOperatorVersion, checkGatedFeatureCompatibility, MACH_REG_CONFIG_DEF
 import { OLD_DEFAULT_CREATION_YAML, DEFAULT_CREATION_YAML } from '../models/elemental.cattle.io.machineregistration';
 
 export default {
-  name:       'MachineRegistrationEditView',
-  components: {
+  name:         'MachineRegistrationEditView',
+  components:   {
     Loading,
     CruResource,
     YamlEditor,
@@ -41,18 +41,14 @@ export default {
     mode: {
       type:     String,
       required: true
-    },
-    resource: {
-      type:     String,
-      required: true
-    },
+    }
   },
   async fetch() {
     // in CREATE mode, since YAMLEditor doesn't live update, we need to force a re-render of the component for it to update
     if (this.mode === _CREATE) {
       const operatorVersion = await getOperatorVersion(this.$store);
 
-      this.newCloudConfigcompatibilityCheck = checkGatedFeatureCompatibility(this.resource, this.mode, MACH_REG_CONFIG_DEFAULTS, operatorVersion);
+      this.newCloudConfigcompatibilityCheck = checkGatedFeatureCompatibility(this.value.type, this.mode, MACH_REG_CONFIG_DEFAULTS, operatorVersion);
 
       if (!this.value.spec) {
         this.value.spec = this.newCloudConfigcompatibilityCheck ? DEFAULT_CREATION_YAML : OLD_DEFAULT_CREATION_YAML;
@@ -208,7 +204,7 @@ export default {
       <div class="col span-12">
         <h3>{{ t('elemental.machineRegistration.create.configuration') }}</h3>
         <NameNsDescription
-          v-model="value"
+          :value="value"
           :mode="mode"
           :description-hidden="true"
           :namespaced="false"
@@ -221,7 +217,7 @@ export default {
         <YamlEditor
           :key="rerender"
           ref="yamleditor"
-          v-model="cloudConfig"
+          v-model:value="cloudConfig"
           class="mb-20"
           :editor-mode="editorMode"
         />
@@ -273,7 +269,7 @@ export default {
                 :title="t('labels.labels.title')"
                 :read-allowed="false"
                 :value-can-be-empty="true"
-                @input="updateLabels($event)"
+                @update:value="updateLabels($event)"
               />
             </div>
             <div class="row mb-10">
@@ -286,7 +282,7 @@ export default {
                 :title="t('labels.annotations.title')"
                 :read-allowed="false"
                 :value-can-be-empty="true"
-                @input="value.setAnnotations($event, 'machineInventoryAnnotations', true)"
+                @update:value="value.setAnnotations($event, 'machineInventoryAnnotations', true)"
               />
             </div>
           </Tab>
@@ -313,7 +309,7 @@ export default {
                 :title="t('labels.labels.title')"
                 :read-allowed="false"
                 :value-can-be-empty="true"
-                @input="value.setLabels($event)"
+                @update:value="value.setLabels($event)"
               />
             </div>
             <div class="row mb-10">
@@ -326,7 +322,7 @@ export default {
                 :title="t('labels.annotations.title')"
                 :read-allowed="false"
                 :value-can-be-empty="true"
-                @input="value.setAnnotations($event)"
+                @update:value="value.setAnnotations($event)"
               />
             </div>
           </Tab>