Autosave description in epics

When editing an epic, the progress was previously lost due to
lack of localstorage syncing code. This commit adds support for
localstorage sync.

4 files changed, 65 insertions, 4 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index bd757a76ee7..ab0b4231255 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -159,9 +159,23 @@ export default {
       return !!this.state.updatedAt;
     },
     issueChanged() {
-      const descriptionChanged = this.initialDescriptionText !== this.store.formState.description;
-      const titleChanged = this.initialTitleText !== this.store.formState.title;
-      return descriptionChanged || titleChanged;
+      const {
+        store: {
+          formState: { description, title },
+        },
+        initialDescriptionText,
+        initialTitleText,
+      } = this;
+
+      if (initialDescriptionText || description) {
+        return initialDescriptionText !== description;
+      }
+
+      if (initialTitleText || title) {
+        return initialTitleText !== title;
+      }
+
+      return false;
     },
     defaultErrorMessage() {
       return sprintf(s__('Error updating %{issuableType}'), { issuableType: this.issuableType });
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 732184dc782..385e9543973 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -145,6 +145,7 @@ export default {
     ></div>
     <textarea
       v-if="descriptionText"
+      ref="textarea"
       v-model="descriptionText"
       :data-update-url="updateUrl"
       class="hidden js-task-list-field"
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index c3d7ba4907f..a3371cb9614 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -17,6 +17,7 @@ export default {
     <label class="sr-only" for="issuable-title"> Title </label>
     <input
       id="issuable-title"
+      ref="input"
       v-model="formState.title"
       class="form-control qa-title-input"
       type="text"
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index eade31f1d14..528ccb77efc 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -1,9 +1,12 @@
 <script>
+import $ from 'jquery';
 import lockedWarning from './locked_warning.vue';
 import titleField from './fields/title.vue';
 import descriptionField from './fields/description.vue';
 import editActions from './edit_actions.vue';
 import descriptionTemplate from './fields/description_template.vue';
+import Autosave from '~/autosave';
+import eventHub from '../event_hub';
 
 export default {
   components: {
@@ -68,6 +71,47 @@ export default {
       return this.issuableTemplates.length;
     },
   },
+  created() {
+    eventHub.$on('delete.issuable', this.resetAutosave);
+    eventHub.$on('update.issuable', this.resetAutosave);
+    eventHub.$on('close.form', this.resetAutosave);
+  },
+  mounted() {
+    this.initAutosave();
+  },
+  beforeDestroy() {
+    eventHub.$off('delete.issuable', this.resetAutosave);
+    eventHub.$off('update.issuable', this.resetAutosave);
+    eventHub.$off('close.form', this.resetAutosave);
+  },
+  methods: {
+    initAutosave() {
+      const {
+        description: {
+          $refs: { textarea },
+        },
+        title: {
+          $refs: { input },
+        },
+      } = this.$refs;
+
+      this.autosaveDescription = new Autosave($(textarea), [
+        document.location.pathname,
+        document.location.search,
+        'description',
+      ]);
+
+      this.autosaveTitle = new Autosave($(input), [
+        document.location.pathname,
+        document.location.search,
+        'title',
+      ]);
+    },
+    resetAutosave() {
+      this.autosaveDescription.reset();
+      this.autosaveTitle.reset();
+    },
+  },
 };
 </script>
 
@@ -89,10 +133,11 @@ export default {
           'col-12': !hasIssuableTemplates,
         }"
       >
-        <title-field :form-state="formState" :issuable-templates="issuableTemplates" />
+        <title-field ref="title" :form-state="formState" :issuable-templates="issuableTemplates" />
       </div>
     </div>
     <description-field
+      ref="description"
       :form-state="formState"
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"