Frontend Vue 3 Upgrade #652
Merged
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
add server origin for static files in development
some breakage from bootstrap upgrade + better centering
TODO: - broken imports for multiselect etc. - clean up unused sass/styles - inferring text color on buttons etc based on background color incorrectly - any other inconsistencies and easy fixes (*-right -> *-end, etc)
- recreate jumbotron class - fix badge breaking changes
continuation of bootstrap 4 -> 5
continuation of bootstrap 4 -> 5
continuation of bootrap 4 -> 5
- split _custom into pages/components and rename remaining styles to global - remove unused styles and refactor for readability [no ci]
now in line with our current js code style rather than defaults - added workflow for checking code
TODO: run test suite in github CI, potentially lint/format/test all in one workflow [no ci]
now runs in the docker container
- `yarn test` for running unit tests - `yarn test:watch` for running unit tests with vite watching for file changes
notes on the setup, will go more in depth in the developer wiki [no ci]
for some reason this was no problem in dev mode but couldn't build [no ci]
we also want to rebuild docker-compose.yml when its used in the build target
caused django tests to fail due to sharing the same settings that were modified to accomodate a pseudo-production mode
fix for collectstatic failing when checking out the vite build branch because shared/vite/ was not being created
TODO: add custom styling
use a more unique id than just name for fields
essentially a complete re-write that intends to eliminate most of the confusion around the contributor form the main 2 elements are the list that got a facelift but remains similar, and the add/edit modal form which saves a new addition automatically TODO: - implement re-ordering, deleting, and editing existing items ref #367 ref comses/planning#109
editing modal got split up into a reusable form that contains just the editing portion so we can use it for adding and editing contributors currently, reordering requires saving and disables other actions until that has happened to avoid spamming save requests and complicated behavior when modifying the out-of-sync list resolves #367 resolves comses/planning#109
- create components/releaseEditor/ to house components used only in the release editor app, given that it is almost as large as the rest of the codebase
|
Of course this PR is massive, I'm open to finding a way to split it up |
replaced by (now) consistent use of extractDataParams function resolves #448
otherwise there is no feedback the changes were actually made without a browser refresh or another action to trigger a re-fetch
this initialization is required by the server and got removed from the TaggerField when accomodating cases when this wasn't desired
- ignore holder.js img src so that rollup doesn't try to resolve it as a dependency and break the module/holder.js script - fix bootstrap tooltip/modal types, previously we were importing a namespace and then mangling it into a type - turn off django_vite dev mode in staging/prod
|
fixed c33ddbc |
uses https://github.com/vbabiy/djangorestframework-camel-case to automatically parse/render camelCase <-> snake_case - renamed some query params for job/event filtering to use "After" instead of "__gte" - fixed bug where files would not reload after uploading in release editor - fixed issue where certain tag fields were not initialized properly resolves comses/planning#118
|
camelCase refactor added, should be the last change barring any feedback or additional bugs being uncovered |
- remove renderer class overrides on some API views, instead relying on the new default CamelCaseJSONRenderer - fix permissions for peer review list_review_event_log - correct multi-word values for sort/filtering which mistakenly got camelCased
- finished reverting accidentally camelCased values - request state errors should be cleared on success resolves comses/planning#127
fix issue where the SelectField component would not allow selecting any option after a failed validation by updating the field value manually and adding a default option possibly related: vuejs/vue#4524
- move Edit Metadata button above sidebar - remove peer reviewed badge from releases that aren't specifically peer reviewed and add text about one of the versions being peer reviewed - add recommendation to peer review reminders modal text to only request peer review for unpublished models - update peer review guidance resolves comses/planning#33 resolves comses/planning#76 resolves comses/planning#129
This was referenced Jul 14, 2023
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.
Adds a new frontend codebase written with Vue 3 using the composition API and served/bundled with Vite. Additionally, django-webpack-loader is replaced with django-vite for the integration of bundled vue components into Django/jinja templates.
Components and APIs are either ported or rewritten and based off of the previous Vue 2 codebase. Unfortunately an incremental migration was not feasible so here we are with this massive merge request.
More detailed information can be found in the (currently expanding) documentation for the codebase.
Implementation Differences/Replacements
Hot reloading/bundling
Vite(which uses rollup for bundling) is used instead ofvue-cliandwebpack. This fixes/provides much faster hot-reloading in development mode and functions largely the same when bundling for production.django-webpack-loaderis replaced bydjango-vitefor integrating into the django backend, which functions similarly.Composition
The Vue composition API replaces the class-based options API style of the previous codebase. This extends to replacing class-based APIs with composable functions.
Form Management
Form management/validation is partially handled with vorms which provides a very lightweight API that is very similar to React Hook Form. Yup is still used for validation. The idea is to provide a lightweight/reusable API for building forms that replaces the class/inheritance-based system in the previous codebase (which is no longer an option with Vue 3).
UX Upgrades
Porting everything provided a great opportunity for design upgrades/refreshes where needed. Most notable changes include:
Maintainability
Starting from scratch allowed some significant re-organization and reduction of the amount of code/dependencies. The hope is that the architecture and individual components should be easier to understand/work on.
Remaining Related Work