Skip to content

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

  1. Navigate to the new release page (Deployments -> Releases -> New Release)
  2. Fill out the form.
  3. Navigate away from the form and back.
  4. 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.

Edited by Andrei Zubov