ui/ops: upgrade to Vue3, Vuetify3, vue-router4 and other required updates #261
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…te-plugin-vuetify Remove unplugin-vue-components
We couldn't do this before because vuetify was using discontinued features
This is definitely not working or styled how we want it
…t a time This will be removed after we have no more eslint errors
Manual changes required:
- anywhere that looked like `v-bind={...props1, ...props2}`
- special cases for when $attrs is used to add defineOptions
- whitespace left over from the auto tool
- some bug fixes where we were using `attr` instead of `attrs`
- adjustment of v-snackbar #action->#actions
Disable (for now) prop shadowing for these cases
The lint still fails for a lot of cases, but these are the automatic changes. Manual fixes include whitespace changes only.
Where it was a simple wrapper around title and subtitle, etc. we delete the wrapper. Where it is used to layout child components (via flex usually) we replace with a div. This likely has broken some layout. When everything builds again we'll revisit to fix things.
In the future we can likely replace most with use of the prepend-icon prop. There was one case in groups where the icon wasn't actually in a v-list-item so this has been fixed.
This required restructuring the tabs by hand.
Mostly it's just deleted, sometimes it's replaced with v-list-group
Manual steps include: - fix whitespace issues - where multiple variant attrs were used, pick one
We can add them back in when we get to ui fixes
This caused all pull methods on collection resources to fail to be reactive, including services, automations, etc.
deanredfern26
requested changes
Aug 29, 2024
OK, that should be fixed now. I also noticed some issues with the UDMI card which I've fixed.
|
deanredfern26
approved these changes
Aug 29, 2024
This is caused by yarn not respecting the ,npmrc file when in workspace mode.
hexaglow
requested changes
Aug 30, 2024
There was a problem hiding this comment.
Visually looks good, I wouldn't notice any differences if you didn't point them out.
One issue - when running yarn install with Node 18 I encountered the following:
yarn install v1.22.22
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
warning chart.js@4.4.2: The engine "pnpm" appears to be invalid.
error glob@11.0.0: The engine "node" is incompatible with this module. Expected version "20 || >=22". Got "18.20.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
But the build-sc-bos action still specifies Node 18. If Node 20 is required then this needs to be updated.
I'll update to the current release ( |
hexaglow
approved these changes
Sep 3, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR includes all the changes needed to convert the SC BOS Ops UI from vue2 to vue3. Each commit in this PR takes one small step towards that goal - there are a lot of steps.
My development process followed these phases:
The new styles do not match 100% with the old ones, they are not pixel perfect. Where decisions around layout appeared to be arbitrary I've erred on the side of fewer changes. Some examples: icon sizes are slightly smaller in some places. Font size too. Some icons have changed where the default vuetify ones were used. Table pagination has some more buttons. Select boxes and inputs have a different background colour. And so on.
I'm not expecting anyone to actually do a code review of the components/js, however the setup code should be looked at:
Instead I'd like reviewers to check out this branch and run the app against sites and local setups they know how to test with. This is a huge change that has likely broken something that I haven't spotted yet. I haven't been able to test the new version with all of the environments and sites out there, this is where I need help.