Entity UI's: Investigate components that need updates/rewriting

[severinbeauvais]

In this ticket, a lot of investigation and fixes were done (and merged) to determined what else needs to be done. But this ticket has become blocked on its dependency on sbc-common-components and bcrs-shared-components. I decided to "complete" THIS ticket and carry over the work into #16162, once the dependencies are resolved.

---

The upgrade to Vue3 will require work, including:

• updated package dependencies
• upgrade to Vuetify (with some components incompatible or missing)
• missing some packages (like vue-property-decorator)

This ticket is to research / try / identify / report what changes are needed for 1 or all 3 Entity UIs.

Refs:

https://vuetifyjs.com/en/getting-started/upgrade-guide/
https://chat.developer.gov.bc.ca/group/8ALvrm32WQWfW5C4x?msg=oiouJFPmfe5CYdq2R
https://chat.developer.gov.bc.ca/channel/registries-developers?msg=NCfeXBkF3FNFBWf58
https://chat.developer.gov.bc.ca/channel/registries-developers?msg=nd7Gi78Eh98uFEZ9q

Cameron's Vue/Vuetify Upgrade Document:

https://docs.google.com/document/d/1Hxh4D1yw15qTTZCgFeDnvFk_gtbLEGtQmUW65MmNBeY/edit

Auth Web Vue3 conversion:

#14879

To do (list still in progress):

• update lint packages + presets
• update lint rules
• fix lint issues
• update dependencies:
  • update bcrs-shared-components - see bcrs-shared-components: upgrade to Vue3 / Vuetify3 #16093 ** LARGE EFFORT ***
  • update sbc-common-components - see sbc-common-components: convert to composition-api #14881 and sbc-common-components: upgrade to vue 3 #14883 ** LARGE EFFORT ***
  • install "@vue/runtime-dom": "^3.2.47"
  • upgrade "launchdarkly-js-client-sdk": "^2.22.1" to "launchdarkly-js-client-sdk": "^3.1.3"
  • uninstall "pinia-class": "^0.0.3"
  • upgrade "vue": "^2.7.10" "vue": "^3.2.47"
  • upgrade vue-router from v3 to v4
  • upgrade "vuetify": "^2.6.10" to "vuetify": "^3.1.15"
  • uninstall "vuex": "^3.6.2" - needed by sbc-common-components
• update dev dependencies:
  • uninstall "@volar-plugins/vetur": "latest"
  • install "@vue/compiler-sfc": "^3.2.47"
  • upgrade "@vue/test-utils": "^1.3.3" to "@vue/test-utils": "^2.3.2"
  • upgrade "@vue/vue2-jest": "^27.0.0" to "@vue/vue3-jest": "^27.0.0"
  • upgrade "eslint": "~7.32.0" to "eslint": "^8.0.0"
  • upgrade eslint-config-standard from v4 to v8
  • upgrade eslint-config-typescript from v9 to v11
  • upgrade eslint-plugin-vue from v8 to v9
  • upgrade "eslint-plugin-vuetify": "^1.1.0" to "eslint-plugin-vuetify": "^2.0.0-beta.4"
  • uninstall "vue-property-decorator": "^9.1.2"
  • install "vue-facing-decorator": "^2.1.20"
  • uninstall "vue-template-compiler": "2.7.10"
• add local file, "src/store/PiniaClass.ts" (copy from pinia-class package but use new component library) - see link in comment below
• update vue.config.js
• update tsconfig.json
• add "shim-vuetify.d.ts"
• update "shim-vue.d.ts"
• update code:
  • replace 'vue-property-decorator'
    • option 1: vue-facing-decorator
    • option 2: vue-decorator
  • replace 'pinia-class' with '@/utils/PiniaClass'
  • fix all $refs
  • update components to use vue-facing-decorator
  • replace Vue.nextTick() with this.$nextTick() (except unit tests)
  • fix mixin references
  • fix mixin usage
  • fix redundant boolean declarations (eg, const b: boolean = true)
  • fix duplicate component props
  • fix Vue setup, Vuetify setup and Vue Router (ref)
  • migrate LaunchDarkly SDK (ref)
• fix errors:
  • componentsCompanyInfo.ts
  • countries-provinces-mixin.ts
  • vuetify.ts
  • misc shared components (copied locally)
• fix all Vuetify styling issues ** LARGE EFFORT ***
• migrate unit tests (ref) ** LARGE EFFORT ***

Future (list still in progress):

• remove eslint rule overrides and fix deprecated items:
  • vue/no-deprecated-filter
  • vue/no-deprecated-slot-attribute
  • vue/no-deprecated-slot-scope-attribute
  • vue/no-deprecated-v-bind-sync
  • vue/no-deprecated-v-on-native-modifier
  • vue/no-v-for-template-key-on-child
  • vuetify/no-deprecated-classes
  • vuetify/no-deprecated-colors
  • vuetify/no-deprecated-components
  • vuetify/no-deprecated-events
  • vuetify/no-deprecated-props
• use new Date Picker component

Possible alternative:

Instead of upgrading/converting the existing code to Vue3, we could start from a template project (aka boilerplate/scaffold) and move our code over. This is very likely more work, but may result in a cleaner configuration.

1. Boilerplace Vue 3 + TS + Vite + Pinia
2. Getting started with Vue 3 + Pinia Store + Typescript...

[severinbeauvais]

This is a work in progress. Refresh periodically to see changes. Please do not edit.

1. update app version to next major release

2. verify existing packages:

    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "~7.32.0",
    "eslint-plugin-vue": "^8.0.3",

3. add eslint vuetify plugin:

npm install eslint-plugin-vuetify@1.1.0 --save-dev

4. update eslint config:

  // .eslintrc.js
  extends: [
    '@vue/standard',
    '@vue/typescript',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/base',
    'plugin:vue/essential'
  ],

5. run linter, verify auto-fixed files and manually fix others

npm run lint

Note that, for example, <v-col cols="2" xs="3"> is converted to <v-col class="xs" cols="2">. This is incomplete. It should be <v-col cols="3" sm="2">. You'll need to review all auto-fixes and update accordingly.

6. add the following packages:

  // .eslintrc.js
  extends: [
    '@vue/standard',
    '@vue/typescript',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/base',
    'plugin:vue/essential'

    // 'plugin:vue/recommended',
    // 'plugin:vue/strongly-recommended',
    // 'plugin:vue/vue3-recommended',
    // 'plugin:vue/vue3-strongly-recommended',
    // 'plugin:vuetify/base',
    // 'plugin:vuetify/recommended'
  ],

7. repeat step 5

8. upgrade to Vue3 + Vuetify3

   • fix layouts
   • fix theme
   • fix SCSS
   • fix components

[severinbeauvais]

Here is PiniaClass.ts, which provides decorators to declare store getters, actions, etc. I've added it to the ~src/store/ folder.

This was copied from https://www.npmjs.com/package/pinia-class and updated to use vue-facing-decorator instead of the Vue2 package. (It was confirmed that createDecorator() is the same in both imported packages.)

Ideally and hopefully, this is a straight replacement for the previous pinia-class import and no code changes are needed (except for a different import).

PiniaClass.ts.txt (remove txt extension before use)