Cancelling reply reverts comment to initial state

When converting a comment to a discussion
if the "Cancel" button is used to exit the new discussion note,
the comment would revert back to its initial state

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -253,6 +253,7 @@ export default {
       'removePlaceholderNotes',
       'toggleResolveNote',
       'expandDiscussion',
+      'removeConvertedDiscussion',
     ]),
     truncateSha,
     componentName(note) {
@@ -292,6 +293,10 @@ export default {
         }
       }
 
+      if (this.convertedDisscussionIds.includes(this.discussion.id)) {
+        this.removeConvertedDiscussion(this.discussion.id);
+      }
+
       this.isReplying = false;
       this.resetAutoSave();
     },

app/assets/javascripts/notes/stores/actions.js

@@ -443,5 +443,8 @@ export const submitSuggestion = (
 export const convertToDiscussion = ({ commit }, noteId) =>
   commit(types.CONVERT_TO_DISCUSSION, noteId);
 
+export const removeConvertedDiscussion = ({ commit }, noteId) =>
+  commit(types.REMOVE_CONVERTED_DISCUSSION, noteId);
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

app/assets/javascripts/notes/stores/mutation_types.js

@@ -18,6 +18,7 @@ export const SET_NOTES_LOADING_STATE = 'SET_NOTES_LOADING_STATE';
 export const DISABLE_COMMENTS = 'DISABLE_COMMENTS';
 export const APPLY_SUGGESTION = 'APPLY_SUGGESTION';
 export const CONVERT_TO_DISCUSSION = 'CONVERT_TO_DISCUSSION';
+export const REMOVE_CONVERTED_DISCUSSION = 'REMOVE_CONVERTED_DISCUSSION';
 
 // DISCUSSION
 export const COLLAPSE_DISCUSSION = 'COLLAPSE_DISCUSSION';

app/assets/javascripts/notes/stores/mutations.js

@@ -269,4 +269,11 @@ export default {
     const convertedDisscussionIds = [...state.convertedDisscussionIds, discussionId];
     Object.assign(state, { convertedDisscussionIds });
   },
+
+  [types.REMOVE_CONVERTED_DISCUSSION](state, discussionId) {
+    const convertedDisscussionIds = [...state.convertedDisscussionIds];
+
+    convertedDisscussionIds.splice(convertedDisscussionIds.indexOf(discussionId), 1);
+    Object.assign(state, { convertedDisscussionIds });
+  },
 };

spec/javascripts/notes/stores/actions_spec.js

@@ -737,4 +737,18 @@ describe('Actions Notes Store', () => {
       );
     });
   });
+
+  describe('removeConvertedDiscussion', () => {
+    it('commits CONVERT_TO_DISCUSSION with noteId', done => {
+      const noteId = 'dummy-id';
+      testAction(
+        actions.removeConvertedDiscussion,
+        noteId,
+        {},
+        [{ type: 'REMOVE_CONVERTED_DISCUSSION', payload: noteId }],
+        [],
+        done,
+      );
+    });
+  });
 });

spec/javascripts/notes/stores/mutation_spec.js

@@ -536,4 +536,23 @@ describe('Notes Store mutations', () => {
       expect(state.convertedDisscussionIds).toContain(discussion.id);
     });
   });
+
+  describe('REMOVE_CONVERTED_DISCUSSION', () => {
+    let discussion;
+    let state;
+
+    beforeEach(() => {
+      discussion = {
+        id: 42,
+        individual_note: true,
+      };
+      state = { convertedDisscussionIds: [41, 42] };
+    });
+
+    it('removes a disucssion from convertedDisscussionIds', () => {
+      mutations.REMOVE_CONVERTED_DISCUSSION(state, discussion.id);
+
+      expect(state.convertedDisscussionIds).not.toContain(discussion.id);
+    });
+  });
 });