From e36cd9295a831713a77abc1de5f42137da0caf49 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 15 Aug 2023 19:20:32 -0600
Subject: [PATCH] Remove autosaved drafts when the note entry form is cancelled

Changelog: fixed
---
 .../diffs/components/diff_line_note_form.vue        |  5 +++++
 .../diffs/components/diff_line_note_form_spec.js    | 13 +++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index e22abc9c0300d0..287b2fc1973d85 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -1,9 +1,11 @@
 <script>
+import { nextTick } from 'vue';
 // eslint-disable-next-line no-restricted-imports
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { s__, __, sprintf } from '~/locale';
 import { createAlert } from '~/alert';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
+import { clearDraft } from '~/lib/utils/autosave';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -209,6 +211,9 @@ export default {
         lineCode: this.line.line_code,
         fileHash: this.diffFileHash,
       });
+      nextTick(() => {
+        clearDraft(this.autosaveKey);
+      });
     }),
     handleSaveNote(note, parentElement, errorCallback) {
       return this.saveDiffDiscussion({ note, formData: this.formData })
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index 0ca48db2497578..dfbf45e1d71aec 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -7,11 +7,13 @@ import DiffLineNoteForm from '~/diffs/components/diff_line_note_form.vue';
 import store from '~/mr_notes/stores';
 import NoteForm from '~/notes/components/note_form.vue';
 import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
+import { clearDraft } from '~/lib/utils/autosave';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { noteableDataMock } from 'jest/notes/mock_data';
 import { SOMETHING_WENT_WRONG, SAVING_THE_COMMENT_FAILED } from '~/diffs/i18n';
 import { getDiffFileMock } from '../mock_data/diff_file';
 
+jest.mock('~/lib/utils/autosave');
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 jest.mock('~/mr_notes/stores', () => jest.requireActual('helpers/mocks/mr_notes/stores'));
 jest.mock('~/alert');
@@ -116,6 +118,17 @@ describe('DiffLineNoteForm', () => {
           fileHash: diffFile.file_hash,
         });
       });
+
+      it('should clear the autosaved draft', async () => {
+        findNoteForm().vm.$emit('cancelForm', true, true);
+        await nextTick();
+        expect(confirmAction).toHaveBeenCalled();
+        await nextTick();
+
+        expect(clearDraft).toHaveBeenCalledWith(
+          `Note/Issue/${noteableDataMock.id}//DiffNote//${diffLines[1].line_code}`,
+        );
+      });
     });
 
     describe('without confirmation', () => {
-- 
GitLab