Upgrade vue3 and all dependencies

Start the process of porting everything to Vue 3.  I have most things
working.  npm run-scripts build works, npm install works.  prettier
passes.  Styles load, login works, webui loads.

This was primarily done using the linked documents below.  It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
   work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
   working.
3. Minor changes are made to load the latest versions of vue-router,
   vuex, and vue-i18n.

I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time.  The things that need to
happen are:

1. Get remaining features working again.  This primiarily is vue-i18n
   for mixins, and non vue components.  This likely needs to be done by
   not pulling in i18n into the non vue components, then using the .Vue
   files to do the internationalization in the component context, NOT in
   the mixin context.  Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again.  Previously, we used some path
   hackery in vue.config.js to optionally pre-load styles.  This stops
   working now that we're required to @import our modules.  Likely we
   need some rearangement of the paths such that custom styles are a
   complete replacement (possibly importing the original) rather than
   additive with overrides.  That's a guess, but I don't really see
   anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
   dropped the jquery dependency.  We won't be able to pull in bootstrap
   5 all at once, so pull in bootstrap 5 under an alias, like
     "bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
   bootstrap 5.  This will be the bulk of the manual work and review.

The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.

Tested: Code builds.  Needs better testing.

[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports

Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981
Signed-off-by: Ed Tanous <[email protected]>

.eslintrc.js

@@ -3,18 +3,26 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/prettier'],
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/prettier',
+  ],
   rules: {
     'no-console': 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'prettier/prettier': [
       'error',
       {
         singleQuote: true,
+        trailingComma: 'all',
       },
     ],
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],
     'vue/multi-word-component-names': 'off',
+    'vue/no-deprecated-filter': 'off',
+    'vue/no-useless-template-attributes': 'off',
+    'vue/no-deprecated-props-default-this': 'off',
   },
   parser: 'vue-eslint-parser',
   overrides: [

babel.config.js

@@ -1,5 +1,13 @@
 module.exports = {
-  presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]],
+  presets: [
+    [
+      '@vue/app',
+      {
+        targets: { esmodules: false },
+        polyfills: false,
+      },
+    ],
+  ],
   env: {
     test: {
       plugins: ['transform-require-context'],

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "description": "OpenBMC Web UI using the Vue.js front-end framework",
     "scripts": {
-        "serve": "check-node-version --package && vue-cli-service serve",
+        "serve": "check-node-version --package && vue-cli-service serve --mode development",
         "build": "check-node-version --package && vue-cli-service build",
         "test:unit": "vue-cli-service test:unit",
         "test:unit:debugger": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand",
@@ -15,52 +15,60 @@
         "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
     },
     "dependencies": {
-        "@carbon/icons-vue": "10.28.0",
-        "@novnc/novnc": "1.2.0",
+        "@carbon/icons-vue": "10.49.1",
+        "@novnc/novnc": "1.3.0",
+        "@vue/compat": "3.4.25",
+        "@vue/vue3-jest": "27.0.0",
+        "@vuelidate/core": "2.0.3",
+        "@vuelidate/validators": "2.0.4",
         "axios": "1.6.0",
         "axios-cache-interceptor": "1.5.1",
-        "bootstrap": "4.6.0",
-        "bootstrap-vue": "2.21.2",
-        "core-js": "3.9.1",
-        "date-fns": "2.19.0",
-        "date-fns-tz": "1.1.3",
-        "js-cookie": "2.2.1",
+        "bootstrap": "4.6.2",
+        "bootstrap-vue": "2.23.1",
+        "core-js": "3.23.4",
+        "date-fns": "2.28.0",
+        "date-fns-tz": "1.3.6",
+        "js-cookie": "3.0.1",
         "lodash": "4.17.21",
-        "vue": "2.6.12",
-        "vue-i18n": "8.24.2",
+        "vue": "3.2.37",
+        "vue-i18n": "9.13.1",
+        "vue-loader": "17.4.2",
         "vue-router": "3.5.1",
-        "vuelidate": "0.7.6",
         "vuex": "3.6.2",
-        "xterm": "4.11.0",
+        "webpack-cli": "5.1.4",
+        "xterm": "4.19.0",
         "xterm-addon-attach": "0.6.0",
         "xterm-addon-fit": "0.5.0"
     },
     "devDependencies": {
-        "@intlify/vue-i18n-loader": "1.1.0",
-        "@vue/cli-plugin-babel": "4.5.19",
+        "@intlify/vue-i18n-loader": "4.2.0",
+        "@vue/cli-plugin-babel": "5.0.8",
         "@vue/cli-plugin-eslint": "5.0.8",
-        "@vue/cli-plugin-router": "4.5.19",
-        "@vue/cli-plugin-unit-jest": "4.5.19",
-        "@vue/cli-plugin-vuex": "4.5.19",
-        "@vue/cli-service": "4.5.19",
+        "@vue/cli-plugin-router": "5.0.8",
+        "@vue/cli-plugin-unit-jest": "5.0.8",
+        "@vue/cli-plugin-vuex": "5.0.8",
+        "@vue/cli-service": "5.0.8",
+        "@vue/compiler-sfc": "3.4.21",
         "@vue/eslint-config-prettier": "9.0.0",
-        "@vue/test-utils": "1.3.0",
+        "@vue/test-utils": "2.4.5",
+        "autoprefixer": "9.8.6",
         "babel-plugin-transform-require-context": "0.1.1",
-        "check-node-version": "4.1.0",
-        "compression-webpack-plugin": "6.0.3",
-        "eslint": "8.57.0",
+        "check-node-version": "4.2.1",
+        "compression-webpack-plugin": "10.0.0",
+        "css-loader": "7.1.1",
+        "eslint": "8.19.0",
         "eslint-plugin-prettier": "5.1.3",
-        "eslint-plugin-vue": "9.22.0",
-        "lint-staged": "10.5.4",
+        "eslint-plugin-vue": "9.2.0",
+        "eslint-scope": "7.1.1",
+        "lint-staged": "13.0.3",
+        "postcss-loader": "8.1.1",
         "prettier": "3.2.5",
-        "sass": "1.32.8",
-        "sass-loader": "8.0.0",
-        "vue-cli-plugin-i18n": "0.6.1",
-        "vue-server-renderer": "2.7.16",
+        "sass": "1.75.0",
+        "sass-loader": "14.2.1",
+        "vue-cli-plugin-i18n": "2.3.1",
+        "vue-style-loader": "4.1.3",
         "vue-svg-inline-loader": "2.1.5",
-        "vue-template-compiler": "2.6.12",
-        "vuepress": "1.8.2",
-        "yorkie": "2.0.0"
+        "vuepress": "1.9.7"
     },
     "engines": {
         "node": ">=12.14.1"

postcss.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  'postcss-modules': {},
   plugins: {
     autoprefixer: {},
   },

src/App.vue

@@ -9,7 +9,8 @@ export default {
   name: 'App',
   computed: {
     assetTag() {
-      return this.$store.getters['global/assetTag'];
+      return '';
+      //return this.$store.getters['global/assetTag'];
     },
   },
   watch: {
@@ -25,12 +26,15 @@ export default {
       }
     },
   },
+  getters: {},
   created() {
-    document.title = this.$route.meta.title || 'Page is missing title';
+    document.title = '';
+    //document.title = this.$route.meta.title || 'Page is missing title';
   },
 };
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/_obmc-custom';
+//@import '@/assets/styles/_obmc-custom';
+//@import './assets/styles/bootstrap/_helpers.scss';
 </style>

src/assets/styles/bmc/custom/_buttons.scss

@@ -1,3 +1,5 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
 .btn {
   padding-top: $spacer / 2;
   padding-right: $spacer;
@@ -71,7 +73,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
 }
 
 // Contain input buttons within input

src/assets/styles/bmc/custom/_dropdown.scss

@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
 // Make calendar visible over the table
 .dropdown-menu {
-  z-index: $zindex-dropdown + 1;
+  //z-index: $zindex-dropdown + 1;
   padding: 0;
 }
 .dropdown-item {

src/assets/styles/bmc/custom/_tables.scss

@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css'
+
 .table {
   position: relative;
-  z-index: $zindex-dropdown;
+  //z-index: $zindex-dropdown;
 
   td {
     border-top: 1px solid gray("300");

src/components/AppHeader/AppHeader.vue

@@ -246,6 +246,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 @mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
   box-shadow:
     inset 0 0 0 3px $padding-color,
@@ -256,11 +259,11 @@ export default {
     position: absolute;
     top: -60px;
     left: 0.5rem;
-    z-index: $zindex-popover;
-    transition: $duration--moderate-01 $exit-easing--expressive;
+    //z-index: $zindex-popover;
+    //transition: $duration--moderate-01 $exit-easing--expressive;
     &:focus {
       top: 0.5rem;
-      transition-timing-function: $entrance-easing--expressive;
+      //transition-timing-function: $entrance-easing--expressive;
     }
   }
   .navbar-text,
@@ -289,6 +292,7 @@ export default {
   .navbar {
     padding: 0;
     background-color: $navbar-color;
+
     @include media-breakpoint-up($responsive-layout-bp) {
       height: $header-height;
     }

src/components/AppNavigation/AppNavigation.vue

@@ -3,11 +3,11 @@
     <div class="nav-container" :class="{ open: isNavigationOpen }">
       <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
         <b-nav vertical class="mb-4">
-          <template v-for="(navItem, index) in navigationItems">
+          <template v-for="navItem in navigationItems">
             <!-- Navigation items with no children -->
             <b-nav-item
               v-if="!navItem.children"
-              :key="index"
+              :key="navItem.index"
               :to="navItem.route"
               :data-test-id="`nav-item-${navItem.id}`"
             >
@@ -16,7 +16,7 @@
             </b-nav-item>
 
             <!-- Navigation items with children -->
-            <li v-else :key="index" class="nav-item">
+            <li v-else :key="navItem.index" class="nav-item">
               <b-button
                 v-b-toggle="`${navItem.id}`"
                 variant="link"
@@ -101,7 +101,10 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 svg {
   fill: currentColor;
   height: 1.2rem;

src/components/Global/ButtonBackToTop.vue

@@ -45,6 +45,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn-top {
   position: fixed;
   bottom: 24px;

src/components/Global/FormFile.vue

@@ -82,6 +82,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .form-control-file {
   opacity: 0;
   height: 0;

src/components/Global/InfoTooltip.vue

@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .btn-tooltip {
   padding: 0;
   line-height: 1em;

src/components/Global/InputPasswordToggle.vue

@@ -48,6 +48,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .input-password-toggle-container {
   position: relative;
 }

src/components/Global/LoadingBar.vue

@@ -72,6 +72,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .progress {
   position: absolute;
   left: 0;

src/components/Global/PageContainer.vue

@@ -17,6 +17,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
 main {
   width: 100%;
   height: 100%;

src/components/Global/PageSection.vue

@@ -18,6 +18,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-section {
   margin-bottom: $spacer * 4;
 }

src/components/Global/PageTitle.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
 export default {
   name: 'PageTitle',
   props: {
@@ -32,14 +32,17 @@ export default {
         );
         i++;
       }
-      this.title = i18n.t('appPageTitle.' + title);
-      document.title = this.title;
+      //this.title = i18n.t('appPageTitle.' + title);
+      //document.title = this.title;
     }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .page-title {
   margin-bottom: $spacer * 2;
 }

src/components/Global/Search.vue

@@ -70,6 +70,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
 .search-input {
   padding-left: ($spacer * 2);
 }