bcgov / bcgov/entity

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

Open
#16,162 0 comments 0 reactions 0 assignees View on GitHub
blocked ENTITY - DO NOT USE
Dominant language
JavaScript
Stars
23
Forks
62
Avg merge
24m
Merged PRs (30d)
1

Description

**In #16052, a lot of investigation and fixes were done (and merged) to determine what else needs to be done. But that ticket became blocked on its dependency on sbc-common-components and bcrs-shared-components. I decided to "complete" 16052 and carry over that work into THIS ticket, once those 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:**

https://github.com/bcgov/entity/issues/14879

**To do (list still in progress):**

- [x] update lint packages + presets
- [x] update lint rules
- [x] fix lint issues
- update dependencies:
- [ ] ~update bcrs-shared-components~ - see #16093 **\*\* LARGE EFFORT \*\****
- [ ] ~update sbc-common-components~ - see #14881 and #14883 **\*\* LARGE EFFORT \*\****
- [x] install `"@vue/runtime-dom": "^3.2.47"`
- [x] upgrade `"launchdarkly-js-client-sdk": "^2.22.1"` to `"launchdarkly-js-client-sdk": "^3.1.3"`
- [x] uninstall `"pinia-class": "^0.0.3"`
- [x] upgrade `"vue": "^2.7.10"` `"vue": "^3.2.47"`
- [x] upgrade vue-router from v3 to v4
- [x] upgrade `"vuetify": "^2.6.10"` to `"vuetify": "^3.1.15"`
- [x] uninstall `"vuex": "^3.6.2"` - needed by sbc-common-components
- update dev dependencies:
- [x] uninstall `"@volar-plugins/vetur": "latest"`
- [x] install `"@vue/compiler-sfc": "^3.2.47"`
- [x] upgrade `"@vue/test-utils": "^1.3.3"` to `"@vue/test-utils": "^2.3.2"`
- [x] upgrade `"@vue/vue2-jest": "^27.0.0"` to `"@vue/vue3-jest": "^27.0.0"`
- [x] upgrade `"eslint": "~7.32.0"` to `"eslint": "^8.0.0"`
- [x] upgrade eslint-config-standard from v4 to v8
- [x] upgrade eslint-config-typescript from v9 to v11
- [x] upgrade eslint-plugin-vue from v8 to v9
- [x] upgrade `"eslint-plugin-vuetify": "^1.1.0"` to `"eslint-plugin-vuetify": "^2.0.0-beta.4"`
- [x] uninstall `"vue-property-decorator": "^9.1.2"`
- [x] install `"vue-facing-decorator": "^2.1.20"`
- [x] uninstall `"vue-template-compiler": "2.7.10"`
- [x] add local file, "src/store/PiniaClass.ts" (copy from pinia-class package but use new component library) - see link in comment below
- [x] update `vue.config.js`
- [x] update `tsconfig.json`
- [x] add "shim-vuetify.d.ts"
- [x] update "shim-vue.d.ts"
- update code:
- [x] replace 'vue-property-decorator'
- option 1: [vue-facing-decorator](https://facing-dev.github.io/vue-facing-decorator/#/en/quick-start/quick-start)
- option 2: [vue-decorator](https://www.npmjs.com/package/vue-decorator)
- [x] replace 'pinia-class' with '@/utils/PiniaClass'
- [x] fix all $refs
- [x] update components to use vue-facing-decorator
- [x] replace `Vue.nextTick()` with `this.$nextTick()` (except unit tests)
- [x] fix mixin references
- [ ] fix mixin usage
- [x] fix redundant boolean declarations (eg, `const b: boolean = true`)
- [x] fix duplicate component props
- [ ] fix Vue setup, Vuetify setup and Vue Router ([ref](https://vuetifyjs.com/en/getting-started/upgrade-guide/#setup))
- [ ] migrate LaunchDarkly SDK ([ref](https://docs.launchdarkly.com/sdk/client-side/javascript/migration-2-to-3))
- 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](https://test-utils.vuejs.org/migration/)) **\*\* 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](https://github.com/Lucas98Fernando/vue3-vite-ts-pinia-boilerplate)
2. [Getting started with Vue 3 + Pinia Store + Typescript...](https://dev.to/carlomigueldy/getting-started-with-vue-3-pinia-store-typescript-by-building-a-grocery-list-app-19km)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the listed upgrade references and the remaining checklist, then inspect componentsCompanyInfo.ts, countries-provinces-mixin.ts, vuetify.ts, and the locally copied shared components. The work is complete only when the required Vue 3, Vuetify, dependency, styling, and unit-test changes have been identified and reported, but the issue does not define a bounded implementation scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.