Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JASPER-157: Vue 3 Migration #92

Merged
merged 17 commits into from
Dec 9, 2024
Merged

JASPER-157: Vue 3 Migration #92

merged 17 commits into from
Dec 9, 2024

Conversation

ronaldo-macapobre
Copy link

@ronaldo-macapobre ronaldo-macapobre commented Dec 5, 2024 •
edited
Loading

Pull Request for JIRA Ticket: ----JASPER 157, 229 and 230----

Issue ticket number and link

https://jag.gov.bc.ca/jira/browse/JASPER-157
https://jag.gov.bc.ca/jira/browse/JASPER-229
https://jag.gov.bc.ca/jira/browse/JASPER-230

Description

High Level Updates

  • Changed Node version to v18
  • Replaced quay.io/centos7/nodejs-12-centos7:12 with registry.access.redhat.com/ubi9/nodejs-18
    • s2i build has been replaced by docker build to enable hot-reloading for Web that now uses vite.
  • Replaced vue-cli with vite
  • Updated all packages in package.json to the latest version (except Bootstrap and BootstrapVue).
  • Converted all existing Vue class components to either Options API or Composition API.
  • Upgraded FullCalendar to use the Vue 3 version and it looks like it is working correctly.

TODOs

  • vue-month-picker (https://www.npmjs.com/package/vue-month-picker)

    This library is designed for Vue 2 and started to notice an issue compiling the code after Vue 3 upgrade.
    Recommendation: create a separate ticket reimplement this feature. Vuetify's DatePicker component can be customize to display month view. This can be a starting point for the ticket.

  • BootstrapVue Toaster

    Existing code that displays the toast messages has been commented out because it would require additional effort to make it work.
    Recommendation: create a separate ticket to reimplent this feature. Vuetify's Snackbar component can be explored.

  • Splunk Logging

    Encountering an error ([commonjs--resolver] Failed to resolve entry for package "needle". The package may have incorrect main/module/exports specified in its package.json.) after the upgrade.
    Recommendation: create a separate ticket to reimplement this feature to use HTTP calls (axios) to call Splunk endpoints rather than relying on outdated library.

Notes

  • Runtime warnings. These are all related to styling used by Bootstrap and BootstrapVue due to deprecated code. This should get resolved once we switch to Vuetify.

  • Some stylings (and icons) are not working for existing components. I would say reimplementing the components to Vue 3 would resolve this.

Type of change

  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

  • Deploy branch to DEV environment
  • Local and peer testing that the app loads.

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings

    Some warnings (SonarCloud) has been ignored temporarily

Ronaldo Macapobre added 13 commits December 5, 2024 05:57
@WadeBarnes
Changes to make npm install working locally
37bf7d0
@WadeBarnes
- Migrate from vue-cli to vite
51b7209 
- Created a Dockerfile.local to be able to create the web-dev image for local development
- Fixes for codes that no longer works after vite migration
- Disable splunk as there is a newer way of calling it (via REST API)
@WadeBarnes
Change node version to 18
8243367
@WadeBarnes
Update publish-web GHA
0dc7cbd
@WadeBarnes
- Migrate vue-cli to vite
20a4629 
- Convert existing components to SFC in preparation to fully migrate to Vue 3 standards
- Refactor filters to follow Vue pattern
- Refactor service classes so that it can be injected and easier to write unit test in the future
- Replaced Vuex with Pinia for state management
@WadeBarnes
- Upgrade packages to the latest version except vue, bootstrap and bo…
19f00f1 
…otstrap-vue
@WadeBarnes
Fixed incorrect default value
392d27f
@WadeBarnes
- Integrate FullCalendar for Vue3
86cf6fe 
- Update vue version to 3.5.13
- Refactor Calendar component to follow SFC pattern
-Comment out Monthly Picker because it does not work with Vue 3
@WadeBarnes
add test file
2656088
@WadeBarnes
removed test file
bf82fde
@WadeBarnes
Revert to old folder name
9af891c
@WadeBarnes
Fixed old folder name
dcd7271
@WadeBarnes
Changed compat build to use vue 3
95fe43f
@ronaldo-macapobre ronaldo-macapobre changed the title Feature/vue3 (DRAFT) Feature/vue3 Dec 5, 2024
@WadeBarnes WadeBarnes force-pushed the feature/vue3 branch 2 times, most recently from 85e3541 to 95fe43f Compare December 5, 2024 17:25
@ronaldo-macapobre ronaldo-macapobre changed the title (DRAFT) Feature/vue3 JASPER-157: Vue 3 Migration Dec 5, 2024
@ronaldo-macapobre ronaldo-macapobre marked this pull request as ready for review December 5, 2024 20:52
@ronaldo-macapobre ronaldo-macapobre self-assigned this Dec 5, 2024
- Lazy load components in router
412c36c 
- Change https to http. This will be ignored in SonarCloud
@ronaldo-macapobre ronaldo-macapobre marked this pull request as draft December 6, 2024 19:22
- Removed duplicate code for some components
eca4cb9 
- Removed this usage in NavigationFooter

Separate CriminalFutureAppearanceTable on a different component

Separate CriminalPastAppearance table data into its own component

Refactore updating of commonStore methods and props

Refactore updating of commonStore methods and props for CriminalPastAppearance component

Put the similar logic to a util function for now to resolve duplication error

- Refactor Civil Past/Future Appearances to centralize info extraction
- Pass commonStore param instead of accessing it using directly from utils
@ronaldo-macapobre ronaldo-macapobre marked this pull request as ready for review December 9, 2024 16:45
@sonarqubecloud SonarQubeCloud
Copy link

sonarqubecloud bot commented Dec 9, 2024

Quality Gate Passed Quality Gate passed

Issues
10 New issues
110 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.7% Duplication on New Code

See analysis details on SonarQube Cloud

@WadeBarnes WadeBarnes merged commit 656d7b5 into master Dec 9, 2024
3 checks passed
@ronaldo-macapobre ronaldo-macapobre deleted the feature/vue3 branch December 10, 2024 00:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JTraill JTraill JTraill approved these changes

@WadeBarnes WadeBarnes WadeBarnes approved these changes

Assignees

@ronaldo-macapobre ronaldo-macapobre

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ronaldo-macapobre @WadeBarnes @JTraill