Upgrade to Vue 2.7 (rancher#8654)

* upgrade @vue/cli-xxx * Update Vue to latest 2.7 * Update eslint-plugin-vue * Disable new linting rules * Remove linting issue * Pin Dom purify library version * Add resolution to avoid conflicts with packages * Update yarn/lock after the enforced resolution * Exclude node 16 types resolution
harvester · Apr 26, 2023 · 2ff7945 · 2ff7945
1 parent 1441e09
commit 2ff7945
Show file tree

Hide file tree

Showing 10 changed files with 855 additions and 1,253 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -167,6 +167,15 @@ module.exports = {
     // TODO: Move back here the HTML formatting
     'vue/html-self-closing': 'off',
     'vue/no-v-html':         'error',
+
+    // FIXME: Disabled rules due upgrade to Vue 2.7.x and ESLint 9.x.x1
+    'vue/multi-word-component-names':             'off',
+    'vue/no-reserved-component-names':            'off',
+    'vue/no-useless-template-attributes':         'off',
+    'vue/attribute-hyphenation':                  'off',
+    'vue/valid-next-tick':                        'off',
+    'vue/no-computed-properties-in-data':         'off',
+    'vue/no-side-effects-in-computed-properties': 'off',
   },
   overrides: [
     {

diff --git a/package.json b/package.json
@@ -143,14 +143,14 @@
     "@nuxt/babel-preset-app": "^2.16.3",
     "@nuxtjs/eslint-config-typescript": "6.0.1",
     "@types/copy-webpack-plugin": "^5.0.3",
-    "@types/dompurify": "^3.0.0",
+    "@types/dompurify": "3.0.0",
     "@types/jest": "27.4.1",
     "@types/lodash": "4.14.184",
     "@types/node": "16.4.3",
     "@types/vue-select": "3.16.0",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vue/cli-service": "4.5.15",
+    "@vue/cli-service": "4.5.18",
     "@vue/eslint-config-standard": "5.1.2",
     "@vue/test-utils": "1.2.1",
     "@vue/vue2-jest": "27.0.0",
@@ -174,7 +174,7 @@
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-vue": "7.14.0",
+    "eslint-plugin-vue": "9.10.0",
     "frontmatter-markdown-loader": "3.7.0",
     "jest": "27.5.1",
     "jest-serializer-vue": "2.0.2",
@@ -186,14 +186,17 @@
     "style-loader": "1.2.1",
     "ts-jest": "27.1.4",
     "typescript": "4.1.6",
-    "vue": "2.6.14",
-    "vue-template-compiler": "2.6.14",
+    "vue": "2.7.14",
+    "vue-template-compiler": "2.7.14",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-virtual-modules": "0.4.3",
     "worker-loader": "3.0.8",
     "yaml-lint": "1.7.0",
     "yarn": "1.22.18"
   },
+  "resolutions": {
+    "**/webpack": "4"
+  },
   "nyc": {
     "reporter": [
       "json"

diff --git a/pkg/epinio/package.json b/pkg/epinio/package.json
@@ -19,9 +19,9 @@
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.5",
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15",
-    "@vue/cli-service": "4.5.15"
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18",
+    "@vue/cli-service": "4.5.18"
   },
   "browserslist": [
     "> 1%",

diff --git a/pkg/harvester-manager/package.json b/pkg/harvester-manager/package.json
@@ -14,9 +14,9 @@
     "node": ">=12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/cli-plugin-typescript": "^4.5.15"
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-service": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18"
   },
   "browserslist": [
     "> 1%",

diff --git a/pkg/harvester/package.json b/pkg/harvester/package.json
@@ -16,9 +16,9 @@
     "node": ">=14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-service": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15"
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-service": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18"
   },
   "browserslist": [
     "> 1%",

diff --git a/pkg/rancher-components/package.json b/pkg/rancher-components/package.json
@@ -23,10 +23,10 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-plugin-eslint": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15",
-    "@vue/cli-service": "4.5.15",
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-plugin-eslint": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18",
+    "@vue/cli-service": "4.5.18",
     "@vue/eslint-config-standard": "5.1.2",
     "@vue/eslint-config-typescript": "7.0.0",
     "@vue/test-utils": "1.2.1",
@@ -39,16 +39,16 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.0",
-    "eslint-plugin-vue": "7.14.0",
+    "eslint-plugin-vue": "9.10.0",
     "jsonpath-plus": "6.0.1",
     "sass": "1.55.0",
     "sass-loader": "10.2.1",
     "typescript": "4.1.6",
-    "vue": "2.6.14",
-    "vue-template-compiler": "2.6.14"
+    "vue": "2.7.14",
+    "vue-template-compiler": "2.7.14"
   },
   "peerDependencies": {
     "core-js": "3.25.3",
-    "vue": "2.6.14"
+    "vue": "2.7.14"
   }
 }
diff --git a/shell/creators/pkg/pkg.package.json b/shell/creators/pkg/pkg.package.json
@@ -9,9 +9,9 @@
     "node": ">=12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/cli-plugin-typescript": "^4.5.15"
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-service": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18"
   },
   "browserslist": [
     "> 1%",

diff --git a/shell/mixins/labeled-form-element.ts b/shell/mixins/labeled-form-element.ts
@@ -122,7 +122,7 @@ export default Vue.extend({
     },
     validationMessage(): string | undefined {
       // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
-      const requiredRule = this.rules.find((rule: any) => rule?.name === 'required');
+      const requiredRule = this.rules.find((rule: any) => rule?.name === 'required') as Function;
       const ruleMessages = [];
       const value = this?.value;
 
@@ -134,7 +134,7 @@ export default Vue.extend({
         }
       }
 
-      for (const rule of this.rules) {
+      for (const rule of this.rules as Function[]) {
         const message = rule(value);
 
         if (!!message && rule.name !== 'required') { // we're catching 'required' above so we can ignore it here

diff --git a/shell/package.json b/shell/package.json
@@ -44,9 +44,9 @@
     "@types/node": "16.4.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15",
-    "@vue/cli-service": "4.5.15",
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18",
+    "@vue/cli-service": "4.5.18",
     "@vue/test-utils": "1.2.1",
     "@vue/vue2-jest": "27.0.0",
     "add": "2.0.6",
@@ -78,7 +78,7 @@
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-n": "15.2.0",
-    "eslint-plugin-vue": "7.14.0",
+    "eslint-plugin-vue": "9.10.0",
     "event-target-shim": "5.0.1",
     "express": "4.17.1",
     "file-saver": "2.0.2",
@@ -121,15 +121,15 @@
     "typescript": "4.1.6",
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
-    "vue": "2.6.14",
+    "vue": "2.7.14",
     "vue-clipboard2": "0.3.1",
     "vue-codemirror": "4.0.6",
     "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",
     "vue-select": "3.18.3",
-    "vue-server-renderer": "2.6.14",
+    "vue-server-renderer": "2.7.14",
     "vue-shortkey": "3.1.7",
-    "vue-template-compiler": "2.6.14",
+    "vue-template-compiler": "2.7.14",
     "vue-virtual-scroll-list": "^2.3.4",
     "vue2-transitions": "0.3.0",
     "vuedraggable": "2.24.3",