Merge branch '344481-autosave-epic-title-description-in-create' into 'master'

Fix missing autosave support in Epic create form

See merge request gitlab-org/gitlab!77859

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -7,7 +7,9 @@ import {
   GlFormGroup,
   GlFormInput,
 } from '@gitlab/ui';
+import $ from 'jquery';
 import createFlash from '~/flash';
+import Autosave from '~/autosave';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -53,7 +55,31 @@ export default {
     `),
     epicDatesHint: s__('Epics|Leave empty to inherit from milestone dates'),
   },
+  mounted() {
+    this.initAutosave();
+  },
   methods: {
+    initAutosave() {
+      const { titleInput, descriptionInput } = this.$refs;
+      const { pathname, search } = document.location;
+
+      if (!titleInput || !descriptionInput) return;
+
+      /**
+       * We'd need to update Autosave to work with plain HTML elements instead of
+       * jQuery instance, but until then, we'd have to rely on jQuery.
+       */
+      this.autosaveTitle = new Autosave($(titleInput.$el), [pathname, search, 'title']);
+      this.autosaveDescription = new Autosave($(descriptionInput), [
+        pathname,
+        search,
+        'description',
+      ]);
+    },
+    resetAutosave() {
+      this.autosaveTitle.reset();
+      this.autosaveDescription.reset();
+    },
     save() {
       this.loading = true;
 
@@ -86,6 +112,7 @@ export default {
             return;
           }
 
+          this.resetAutosave();
           visitUrl(epic.webUrl);
         })
         .catch(() => {
@@ -117,6 +144,7 @@ export default {
       <gl-form-group :label="__('Title')" label-for="epic-title">
         <gl-form-input
           id="epic-title"
+          ref="titleInput"
           v-model="title"
           data-testid="epic-title"
           data-qa-selector="epic_title_field"
@@ -141,6 +169,7 @@ export default {
           <template #textarea>
             <textarea
               id="epic-description"
+              ref="descriptionInput"
               v-model="description"
               data-testid="epic-description"
               class="note-textarea js-gfm-input js-autosize markdown-area"

ee/spec/frontend/epic/components/epic_form_spec.js

@@ -5,6 +5,7 @@ import { ApolloMutation } from 'vue-apollo';
 import EpicForm from 'ee/epic/components/epic_form.vue';
 import createEpic from 'ee/epic/queries/createEpic.mutation.graphql';
 import { TEST_HOST } from 'helpers/test_constants';
+import Autosave from '~/autosave';
 import { visitUrl } from '~/lib/utils/url_utility';
 import LabelsSelectWidget from '~/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue';
 
@@ -67,6 +68,15 @@ describe('ee/epic/components/epic_form.vue', () => {
       expect(findForm().exists()).toBe(true);
     });
 
+    it('initializes autosave support on title and description fields', () => {
+      // We discourage testing `wrapper.vm` properties but
+      // since `autosave` library instantiates on component
+      // there's no other way to test whether instantiation
+      // happened correctly or not.
+      expect(wrapper.vm.autosaveTitle).toBeInstanceOf(Autosave);
+      expect(wrapper.vm.autosaveDescription).toBeInstanceOf(Autosave);
+    });
+
     it('can be canceled', () => {
       expect(findCancelButton().attributes('href')).toBe(TEST_HOST);
     });
@@ -161,5 +171,25 @@ describe('ee/epic/components/epic_form.vue', () => {
         expect(findSaveButton().props('loading')).toBe(loading);
       });
     });
+
+    it('resets automatically saved title and description when request succeeds', async () => {
+      createWrapper();
+
+      // We discourage testing/spying on `wrapper.vm` properties but
+      // since `autosave` library instantiates on component there's no
+      // other way to test whether autosave class method was called
+      // correctly or not.
+      const autosaveTitleResetSpy = jest.spyOn(wrapper.vm.autosaveTitle, 'reset');
+      const autosaveDescriptionResetSpy = jest.spyOn(wrapper.vm.autosaveDescription, 'reset');
+      findTitle().vm.$emit('input', title);
+      findDescription().setValue(description);
+
+      findForm().vm.$emit('submit', { preventDefault: () => {} });
+
+      await nextTick();
+
+      expect(autosaveTitleResetSpy).toHaveBeenCalled();
+      expect(autosaveDescriptionResetSpy).toHaveBeenCalled();
+    });
   });
 });