Refactor addDiscussionComment for immutability

- As per best practice, prefer immutability over destructive updates
when writing updates to Apollo store
-  Additionally, use computed value for mutation payload

ee/app/assets/javascripts/design_management/components/design_destroyer.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 
 <template>
-  <ApolloMutation
+  <apollo-mutation
     v-slot="{ mutate, loading, error }"
     :mutation="$options.destroyDesignMutation"
     :variables="{
@@ -69,5 +69,5 @@ export default {
     v-on="$listeners"
   >
     <slot v-bind="{ mutate, loading, error }"></slot>
-  </ApolloMutation>
+  </apollo-mutation>
 </template>

ee/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

 <script>
+import { ApolloMutation } from 'vue-apollo';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
@@ -11,6 +12,7 @@ import { extractCurrentDiscussion } from '../../utils/design_management_utils';
 
 export default {
   components: {
+    ApolloMutation,
     DesignNote,
     ReplyPlaceholder,
     DesignReplyForm,
@@ -43,28 +45,24 @@ export default {
     return {
       discussionComment: '',
       isFormRendered: false,
-      isNoteSaving: false,
     };
   },
   computed: {
-    isSubmitButtonDisabled() {
-      return this.discussionComment.trim().length === 0;
-    },
-  },
-  methods: {
-    addDiscussionComment() {
-      this.isNoteSaving = true;
-      return this.$apollo
-        .mutate({
-          mutation: createNoteMutation,
-          variables: {
-            input: {
+    mutationPayload() {
+      return {
         noteableId: this.noteableId,
         body: this.discussionComment,
         discussionId: this.discussion.id,
+      };
+    },
   },
+  methods: {
+    addDiscussionComment(
+      store,
+      {
+        data: { createNote },
       },
-          update: (store, { data: { createNote } }) => {
+    ) {
       const data = store.readQuery({
         query: getDesignQuery,
         variables: {
@@ -76,25 +74,32 @@ export default {
         data.design.discussions,
         this.discussion.id,
       );
-            currentDiscussion.node.notes.edges.push({
+      currentDiscussion.node.notes.edges = [
+        ...currentDiscussion.node.notes.edges,
+        {
           __typename: 'NoteEdge',
           node: createNote.note,
+        },
+      ];
+
+      store.writeQuery({
+        query: getDesignQuery,
+        data: {
+          ...data,
+          design: {
+            ...data.design,
+            notesCount: data.design.notesCount + 1,
+          },
+        },
       });
-            data.design.notesCount += 1;
-            store.writeQuery({ query: getDesignQuery, data });
     },
-        })
-        .then(() => {
+    onDone() {
       this.discussionComment = '';
       this.hideForm();
-        })
-        .catch(e => {
+    },
+    onError(e) {
       createFlash(s__('DesignManagement|Could not add a new comment. Please try again'));
       throw e;
-        })
-        .finally(() => {
-          this.isNoteSaving = false;
-        });
     },
     hideForm() {
       this.isFormRendered = false;
@@ -103,6 +108,7 @@ export default {
       this.isFormRendered = true;
     },
   },
+  createNoteMutation,
 };
 </script>
 
@@ -121,14 +127,25 @@ export default {
           :button-text="__('Reply...')"
           @onClick="showForm"
         />
-        <design-reply-form
+        <apollo-mutation
           v-else
+          v-slot="{ mutate, loading, error }"
+          :mutation="$options.createNoteMutation"
+          :variables="{
+            input: mutationPayload,
+          }"
+          :update="addDiscussionComment"
+          @done="onDone"
+          @error="onError"
+        >
+          <design-reply-form
             v-model="discussionComment"
-          :is-saving="isNoteSaving"
+            :is-saving="loading"
             :markdown-preview-path="markdownPreviewPath"
-          @submitForm="addDiscussionComment"
+            @submitForm="mutate"
             @cancelForm="hideForm"
           />
+        </apollo-mutation>
       </div>
     </div>
   </div>

ee/spec/frontend/design_management/components/design_notes/design_discussion_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { ApolloMutation } from 'vue-apollo';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import DesignDiscussion from 'ee/design_management/components/design_notes/design_discussion.vue';
 import DesignNote from 'ee/design_management/components/design_notes/design_note.vue';
@@ -49,6 +50,7 @@ describe('Design discussions component', () => {
       },
       stubs: {
         ReplyPlaceholder,
+        ApolloMutation,
       },
       mocks: { $apollo },
     });
@@ -92,7 +94,7 @@ describe('Design discussions component', () => {
 
         expect(mutate).toHaveBeenCalledWith(mutationVariables);
 
-        return wrapper.vm.addDiscussionComment();
+        return mutate({ variables: mutationVariables });
       })
       .then(() => {
         expect(findReplyForm().exists()).toBe(false);