Commit 3c479a42 authored by Kushal Pandya's avatar Kushal Pandya

Fix missing autosave support in Epic create form

Fixes a bug where Epic create form didn't save title
and description in users' localStorage to prevent
accidental content loss if page is navigated
away/reloaded.

Changelog: fixed
EE: true
parent d344d378
......@@ -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"
......
......@@ -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();
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment