web/multinode: update dependencies

Change-Id: If575d8d9b481476203cc08c80d95d49273d45c29

web/multinode/.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
         '@typescript-eslint/no-empty-function': "off",
         '@typescript-eslint/no-var-requires': "off",
 
+        "vue/multi-word-component-names": ["off"],
         "vue/max-attributes-per-line": ["off"],
         "vue/singleline-html-element-content-newline": ["off"],
 

web/multinode/babel.config.js

@@ -1,6 +0,0 @@
-// Copyright (C) 2020 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-module.exports = {
-    presets: [['@vue/app', { useBuiltIns: 'entry' }]],
-};

web/multinode/jest.config.js

@@ -0,0 +1,11 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+module.exports = {
+    preset: '@vue/cli-plugin-unit-jest/presets/typescript',
+    setupFiles: ["./jest.setup.ts"],
+    testEnvironment: 'jsdom',
+    transform: {
+        "^.+\\.svg$": "<rootDir>/tests/unit/mock/svgTransform.js"
+    }
+}

web/multinode/jest.setup.ts

@@ -3,7 +3,8 @@
 
 import { GlobalWithFetchMock } from 'jest-fetch-mock';
 
-const customGlobal: GlobalWithFetchMock = global as unknown as GlobalWithFetchMock;
+const customGlobal = (global as unknown) as
+    (GlobalWithFetchMock & { console: Record<any,unknown> });
 
 customGlobal.fetch = require('jest-fetch-mock');
 customGlobal.fetchMock = customGlobal.fetch;

web/multinode/package.json

@@ -11,85 +11,45 @@
     "test": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "chart.js": "2.9.4",
+    "chart.js": "^2.9.4",
-    "vue": "2.6.11",
+    "core-js": "^3.21.1",
-    "vue-chartjs": "3.5.1",
+    "vue": "^2.6.14",
-    "vue-class-component": "7.2.6",
+    "vue-chartjs": "^3.5.1",
-    "vue-clipboard2": "0.3.1",
+    "vue-class-component": "^7.2.6",
-    "vue-property-decorator": "9.1.2",
+    "vue-clipboard2": "^0.3.3",
-    "vue-router": "3.4.9",
+    "vue-property-decorator": "^9.1.2",
-    "vuex": "3.6.0"
+    "vue-router": "^3.5.3",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "7.14.8",
+    "@types/jest": "^27.4.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.8.3",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/eslint-plugin": "4.28.5",
+    "@typescript-eslint/parser": "^5.17.0",
-    "@typescript-eslint/parser": "4.28.5",
+    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-babel": "4.1.1",
+    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-eslint": "4.5.13",
+    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-plugin-typescript": "4.5.13",
+    "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-plugin-unit-jest": "4.1.1",
+    "@vue/cli-service": "^5.0.4",
-    "@vue/cli-service": "4.5.13",
+    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/eslint-config-typescript": "7.0.0",
+    "@vue/test-utils": "^1.3.0",
-    "@vue/test-utils": "1.0.0-beta.30",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
-    "babel-core": "7.0.0-bridge.0",
+    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "10.1.0",
+    "babel-jest": "^27.5.1",
-    "compression-webpack-plugin": "6.0.0",
+    "compression-webpack-plugin": "^9.2.0",
-    "core-js": "3.6.5",
+    "eslint": "^8.12.0",
-    "eslint": "6.7.2",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-storj": "github:storj/eslint-storj",
-    "eslint-plugin-vue": "7.16.0",
+    "eslint-plugin-vue": "^8.5.0",
-    "jest-fetch-mock": "3.0.0",
+    "jest": "^27.5.1",
-    "sass": "1.37.0",
+    "jest-fetch-mock": "^3.0.3",
-    "sass-loader": "8.0.0",
+    "sass": "^1.49.10",
-    "sinon": "7.5.0",
+    "sass-loader": "^12.6.0",
-    "stylelint": "13.7.1",
+    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "19.0.0",
+    "stylelint-config-standard": "^19.0.0",
-    "stylelint-scss": "3.18.0",
+    "stylelint-scss": "^3.21.0",
-    "ts-jest": "25.5.0",
+    "ts-jest": "^27.1.4",
-    "typescript": "3.7.4",
+    "typescript": "^4.6.3",
-    "vue-jest": "3.0.5",
+    "vue-svg-loader": "^0.17.0-beta.2",
-    "vue-svg-loader": "0.16.0",
+    "vue-template-compiler": "^2.6.14"
-    "vue-template-compiler": "2.6.11"
-  },
-  "jest": {
-    "automock": false,
-    "setupFiles": [
-      "./jestSetup.ts"
-    ],
-    "globals": {
-      "ts-jest": {
-        "diagnostics": false
-      }
-    },
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json",
-      "vue",
-      "ts",
-      "tsx"
-    ],
-    "collectCoverage": true,
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.vue$": "vue-jest",
-      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-      "^.+\\.tsx?$": "ts-jest",
-      "^.+\\.svg$": "<rootDir>/tests/unit/mock/svgTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "snapshotSerializers": [
-      "jest-serializer-vue"
-    ],
-    "testMatch": [
-      "<rootDir>/tests/unit/**/*.spec.(js|jsx|ts|tsx)|<rootDir>/__tests__/*.(js|jsx|ts|tsx)"
-    ],
-    "testURL": "http://localhost/"
   }
 }

web/multinode/src/app/components/common/BaseChart.vue

@@ -20,8 +20,8 @@ export default class BaseChart extends Vue {
     @Prop({ default: false })
     public isDarkMode: boolean;
 
-    public chartWidth: number = this.width;
+    public chartWidth = 0;
-    public chartHeight: number = this.height;
+    public chartHeight = 0;
     /**
      * Used for chart re rendering.
      */

web/multinode/src/app/components/common/NodeOptions.vue

@@ -51,7 +51,7 @@ export default class NodeOptions extends Vue {
         try {
             await this.$copyText(this.id);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
         }
 
         this.closeOptions();

web/multinode/src/app/components/modals/AddNewNode.vue

@@ -115,7 +115,7 @@ export default class AddNewNode extends Vue {
         try {
             await this.$store.dispatch('nodes/add', this.nodeToAdd);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
         }
 

web/multinode/src/app/components/modals/DeleteNode.vue

@@ -59,7 +59,7 @@ export default class AddNewNode extends Vue {
             await this.$store.dispatch('nodes/delete', this.nodeId);
             this.closeModal();
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
         }
     }

web/multinode/src/app/components/modals/UpdateName.vue

@@ -86,7 +86,7 @@ export default class AddNewNode extends Vue {
             await this.$store.dispatch('nodes/updateName', new UpdateNodeModel(this.nodeId, this.nodeName));
             this.closeModal();
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
         }
     }

web/multinode/src/app/views/AddFirstNode.vue

@@ -103,7 +103,7 @@ export default class AddFirstNode extends Vue {
         try {
             await this.$store.dispatch('nodes/add', this.nodeToAdd);
         } catch (error) {
-            console.error(error.message);
+            console.error(error);
             this.isLoading = false;
         }
 

web/multinode/src/app/views/payouts/PayoutsByNode.vue

@@ -65,8 +65,9 @@
                             <h3 class="payouts-by-node__content-area__main-info__totals-area__information__title">Minimal threshold & distributed payout system</h3>
                             <p class="payouts-by-node__content-area__main-info__totals-area__information__description">Short description how minimal threshold system works.</p>
                             <!--                            TODO: consider moving link to config-->
-                            <a href="https://forum.storj.io/t/minimum-threshold-for-storage-node-operator-payouts/11064"
+                            <a
-                               class="payouts-by-node__content-area__main-info__totals-area__information__link"
+                                href="https://forum.storj.io/t/minimum-threshold-for-storage-node-operator-payouts/11064"
+                                class="payouts-by-node__content-area__main-info__totals-area__information__link"
                             >
                                 Learn more
                             </a>

web/multinode/src/main.ts

@@ -31,7 +31,7 @@ Vue.directive('click-outside', {
                 return;
             }
 
-            if (vnode.context) {
+            if (vnode.context && binding.expression) {
                 vnode.context[binding.expression](event);
             }
         };

web/multinode/tests/unit/mock/svgTransform.js

@@ -1,17 +1,8 @@
 // Copyright (C) 2021 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-const vueJest = require('vue-jest/lib/template-compiler');
-
 module.exports = {
-    process(content) {
+    process () {
-        const { render } = vueJest({
+        return `module.exports = { render: function(){ return this._c("svg") } }`
-            content,
+    }
-            attrs: {
+}
-                functional: false,
-            },
-        });
-
-        return `module.exports = { render: ${render} }`;
-    },
-};

web/multinode/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es5",
     "module": "esnext",
     "strict": true,
     "noImplicitAny": false,
@@ -15,8 +15,7 @@
     "strictPropertyInitialization": false,
     "types": [
       "webpack-env",
-      "jest",
+      "jest"
-      "@types/jest"
     ],
     "paths": {
       "@/*": [

web/multinode/vue.config.js

@@ -6,7 +6,7 @@ const path = require('path');
 module.exports = {
     productionSourceMap: false,
     parallel: true,
-    lintOnSave: false, // disables eslint for builds
+    lintOnSave: process.env.NODE_ENV !== 'production', // disables eslint for builds
     assetsDir: "static",
     configureWebpack: {
         plugins: [],
@@ -15,6 +15,11 @@ module.exports = {
         config.resolve.alias
             .set('@', path.resolve('src'));
 
+        // Disable node_modules/.cache directory usage due to permissions.
+        // This is enabled by default in https://cli.vuejs.org/core-plugins/babel.html#caching.
+        config.module.rule('js').use('babel-loader')
+            .tap(options => Object.assign(options, {cacheDirectory: false}));
+
         config
             .plugin('html')
             .tap(args => {
@@ -23,12 +28,11 @@ module.exports = {
             });
 
         const svgRule = config.module.rule('svg');
-
         svgRule.uses.clear();
-
+        svgRule.type(); // Disable webpack 5 asset management.
         svgRule
-            .use('babel-loader')
+            .use('vue-loader')
-            .loader('babel-loader')
+            .loader('vue-loader')
             .end()
             .use('vue-svg-loader')
             .loader('vue-svg-loader');