feat: Vue 3 upgrade

[causand22]

Upgrade to Vue 3

Contributors: @jacdavi @causand22

Description

Updating the front end to use Vue 3 and newer versions of all tools. Quick overview:

• Node version updated to latest (22 at time of PR)
• Removing yarn for build process, using npm
• Vue 2 updated to Vue 3
  • store: Vuex -> Pinia
  • requests: vue resources -> axios
  • build tool: vue-cli -> vite
• buefy updated to v1.0 (vue 3 support)
• Code organization, moved page base components to views/, separated some views into multiple components
• Separate CSS files
• code formatted using prettier
• pages now load dynamically (making initial page loading quicker)
  • Config page has components load dynamically (editor dependencies) to make list load faster.

Related Issue

• Upgrade Node.js from 14 #160
• [UI] Signin/Login Page Not Displayed #122

Type of Change

• New feature
• Documentation update

Checklist

• This PR conforms to the process detailed in the Contributing Guide.
• I have included no proprietary/sensitive information in my code.
• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have tested my code.

Additional Notes

KEY DEVELOPMENT CHANGE
env arguments are different for vite. Instead of VUE_APP_AUTH, it's now VITE_AUTH. .env included with this PR.

Smaller changes:

• modifications to CSS
• Certain dependencies changed for lower page size
• added auto time out functionality (part of settings page)
  • changes made to go backend as well (added settings, one api route)
• various bugfixes

Marking this PR as a draft as some features still need testing (scorch).

[GhostofGoes]

Is this still in progress? If so, it should be marked as Draft 😃

[causand22]

Sorry, we had a few extra hours and got a couple last minute fixes in! It is ready, we are not planning on having any more commits.

Also, sorry for the incredibly large +/- git diff. I'd assume a large majority of that is from running the formatter -- the actual amount of meaningful changes is smaller (but still sizeable).

[GhostofGoes]

Excellent! This is probably best reviewed by someone familiar with the Vue code, such as @activeshadow

[glattercj]

@causand22 I might be doing something dumb, but I pulled

docker pull ghcr.io/causand22/sceptre-phenix/phenix-jit-ui:feat-vue3

and am getting this on startup of the UI:

[jacdavi]

@causand22 I might be doing something dumb, but I pulled

docker pull ghcr.io/causand22/sceptre-phenix/phenix-jit-ui:feat-vue3

and am getting this on startup of the UI:

That's very likely on our end. We've never used the JIT image, so I hadn't looked at that more than making sure the image builds

[jacdavi]

@causand22 I might be doing something dumb, but I pulled
docker pull ghcr.io/causand22/sceptre-phenix/phenix-jit-ui:feat-vue3
and am getting this on startup of the UI:

That's very likely on our end. We've never used the JIT image, so I hadn't looked at that more than making sure the image builds

@glattercj should be good now!

[activeshadow]

I have not reviewed yet, so I'm not approving or requesting changes at this point. What I will request is that we squash this down to a (much) smaller number of commits before merging. 😂

I think I worry about the commit history a little too much...

[jacdavi]

I have not reviewed yet, so I'm not approving or requesting changes at this point. What I will request is that we squash this down to a (much) smaller number of commits before merging. 😂

I think I worry about the commit history a little too much...

I think we had wanted to keep it unsquashed in case there were any questions/debugging needed during the PR. Our time is limited to support this further, but I can squash it once it's been tested (also completely fine if someone else takes over the PR).