Apply auto-save to all aspects of new release page
Summary
When users are filling out information about a release in the UI (Deployments -> Releases -> New Release), if they click off the page and navigate back, some of their changes (anything in the tag name field including creating a new tag and tag message, milestones, etc) are lost. As per: https://le-4456656.design-staging.gitlab.com/product-foundations/saving-and-feedback/#auto-save we should be autosaving forms that are long and have primary actions below the fold of the page.
We should apply the auto-save functionality to all aspects of the page (Tag name including creation of a new tag and tag message, milestone dropdown etc), not just the input fields.
Steps to reproduce
- Navigate to the new release page (Deployments -> Releases -> New Release)
- Fill out the form.
- Navigate away from the form and back.
- View how only certain aspects of the form have been saved.
Example Project
What is the current bug behavior?
- Only certain parts of the form are saved (Release Title, Release notes etc)
What is the expected correct behavior?
- All aspects of the form should be saved.
Relevant logs and/or screenshots
Screen_Recording_2022-12-16_at_2.42.36_PM
Output of checks
Results of GitLab environment info
Expand for output related to GitLab environment info
(For installations with omnibus-gitlab package run and paste the output of: `sudo gitlab-rake gitlab:env:info`) (For installations from source run and paste the output of: `sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)
Results of GitLab application Check
Expand for output related to the GitLab application check
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true
)(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true
)(we will only investigate if the tests are passing)
Technical proposal
The recommended way to save field values is using Autosave
class:
app/assets/javascripts/autosave.js
The example of usage of this class could be found here:
app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
We should use it to store values of all the fields we're interested in between the renders of the application. Important part: not to forget to reset the autosave once the form is submitted or cancelled.