Merge branch '35072-refactor-to-use-apolloquery-and-apollomutation' into 'master'

Use ApolloMutation component in design_management/pages/design/index.vue

Closes #35072

See merge request gitlab-org/gitlab!20753

ee/app/assets/javascripts/design_management/pages/design/index.vue

 <script>
+import { ApolloMutation } from 'vue-apollo';
 import Mousetrap from 'mousetrap';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
@@ -14,10 +15,12 @@ import getDesignQuery from '../../graphql/queries/getDesign.query.graphql';
 import appDataQuery from '../../graphql/queries/appData.query.graphql';
 import createImageDiffNoteMutation from '../../graphql/mutations/createImageDiffNote.mutation.graphql';
 import { extractDiscussions, extractDesign } from '../../utils/design_management_utils';
+import { updateStoreAfterAddImageDiffNote } from '../../utils/cache_update';
 import { ADD_DISCUSSION_COMMENT_ERROR } from '../../utils/error_messages';
 
 export default {
   components: {
+    ApolloMutation,
     DesignImage,
     DesignOverlay,
     DesignDiscussion,
@@ -44,7 +47,6 @@ export default {
       },
       projectPath: '',
       issueId: '',
-      isNoteSaving: false,
     };
   },
   apollo: {
@@ -102,6 +104,25 @@ export default {
         atVersion: this.designsVersion,
       };
     },
+    mutationPayload() {
+      const { x, y, width, height } = this.annotationCoordinates;
+      return {
+        noteableId: this.design.id,
+        body: this.comment,
+        position: {
+          headSha: this.design.diffRefs.headSha,
+          baseSha: this.design.diffRefs.baseSha,
+          startSha: this.design.diffRefs.startSha,
+          x,
+          y,
+          width,
+          height,
+          paths: {
+            newPath: this.design.fullPath,
+          },
+        },
+      };
+    },
   },
   mounted() {
     Mousetrap.bind('esc', this.closeDesign);
@@ -110,80 +131,22 @@ export default {
     Mousetrap.unbind('esc', this.closeDesign);
   },
   methods: {
-    addImageDiffNote() {
-      const { x, y, width, height } = this.annotationCoordinates;
-      this.isNoteSaving = true;
-      return this.$apollo
-        .mutate({
-          mutation: createImageDiffNoteMutation,
-          variables: {
-            input: {
-              noteableId: this.design.id,
-              body: this.comment,
-              position: {
-                headSha: this.design.diffRefs.headSha,
-                baseSha: this.design.diffRefs.baseSha,
-                startSha: this.design.diffRefs.startSha,
-                x,
-                y,
-                width,
-                height,
-                paths: {
-                  newPath: this.design.fullPath,
-                },
-              },
-            },
-          },
-          update: (store, { data: { createImageDiffNote } }) => {
-            const data = store.readQuery({
-              query: getDesignQuery,
-              variables: this.designVariables,
-            });
-            const newDiscussion = {
-              __typename: 'DiscussionEdge',
-              node: {
-                // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
-                // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
-                __typename: 'Discussion',
-                id: createImageDiffNote.note.discussion.id,
-                replyId: createImageDiffNote.note.discussion.replyId,
-                notes: {
-                  __typename: 'NoteConnection',
-                  edges: [
-                    {
-                      __typename: 'NoteEdge',
-                      node: createImageDiffNote.note,
-                    },
-                  ],
-                },
-              },
-            };
-            const design = extractDesign(data);
-            design.discussions.edges = [...design.discussions.edges, newDiscussion];
-            design.notesCount += 1;
-            store.writeQuery({
-              query: getDesignQuery,
-              variables: this.designVariables,
-              data: {
-                ...data,
-                design: {
-                  ...design,
-                  notesCount: design.notesCount + 1,
-                },
-              },
-            });
-          },
-        })
-        .then(() => {
-          this.closeCommentForm();
-        })
-        .catch(e => {
-          createFlash(ADD_DISCUSSION_COMMENT_ERROR);
-          throw new Error(e);
-        })
-        .finally(() => {
-          this.isNoteSaving = false;
-        });
+    addImageDiffNoteToStore(
+      store,
+      {
+        data: { createImageDiffNote },
+      },
+    ) {
+      updateStoreAfterAddImageDiffNote(
+        store,
+        createImageDiffNote,
+        getDesignQuery,
+        this.designVariables,
+      );
+    },
+    onMutationError(e) {
+      createFlash(ADD_DISCUSSION_COMMENT_ERROR);
+      throw e;
     },
     openCommentForm(position) {
       const { x, y } = position;
@@ -215,6 +178,7 @@ export default {
     this.closeCommentForm();
     next();
   },
+  createImageDiffNoteMutation,
 };
 </script>
 
@@ -269,14 +233,25 @@ export default {
             :discussion-index="index + 1"
             :markdown-preview-path="markdownPreviewPath"
           />
-          <design-reply-form
+          <apollo-mutation
             v-if="annotationCoordinates"
-            v-model="comment"
-            :is-saving="isNoteSaving"
-            :markdown-preview-path="markdownPreviewPath"
-            @submitForm="addImageDiffNote"
-            @cancelForm="closeCommentForm"
-          />
+            v-slot="{ mutate, loading }"
+            :mutation="$options.createImageDiffNoteMutation"
+            :variables="{
+              input: mutationPayload,
+            }"
+            :update="addImageDiffNoteToStore"
+            @done="closeCommentForm"
+            @error="onMutationError"
+          >
+            <design-reply-form
+              v-model="comment"
+              :is-saving="loading"
+              :markdown-preview-path="markdownPreviewPath"
+              @submitForm="mutate()"
+              @cancelForm="closeCommentForm"
+            />
+          </apollo-mutation>
         </template>
         <h2 v-else class="new-discussion-disclaimer m-0">
           {{ __("Click the image where you'd like to start a new discussion") }}

ee/app/assets/javascripts/design_management/utils/cache_update.js

@@ -74,13 +74,10 @@ const addDiscussionCommentToStore = (store, createNote, query, queryVariables) =
   });
 };
 
-const addImageDiffNoteToStore = (store, createImageDiffNote, query) => {
+const addImageDiffNoteToStore = (store, createImageDiffNote, query, variables) => {
   const data = store.readQuery({
     query,
-    variables: {
-      id: this.id,
-      version: this.designsVersion,
-    },
+    variables,
   });
   const newDiscussion = {
     __typename: 'DiscussionEdge',
@@ -101,9 +98,20 @@ const addImageDiffNoteToStore = (store, createImageDiffNote, query) => {
       },
     },
   };
-  data.design.discussions.edges.push(newDiscussion);
-  data.design.notesCount += 1;
-  store.writeQuery({ query, data });
+  const design = extractDesign(data);
+  const notesCount = design.notesCount + 1;
+  design.discussions.edges = [...design.discussions.edges, newDiscussion];
+  store.writeQuery({
+    query,
+    variables,
+    data: {
+      ...data,
+      design: {
+        ...design,
+        notesCount,
+      },
+    },
+  });
 };
 
 const addNewDesignToStore = (store, designManagementUpload, query) => {
@@ -186,11 +194,11 @@ export const updateStoreAfterAddDiscussionComment = (store, data, query, queryVa
   }
 };
 
-export const updateStoreAfterAddImageDiffNote = (store, data, query) => {
+export const updateStoreAfterAddImageDiffNote = (store, data, query, queryVariables) => {
   if (data.errors) {
     onError(data, ADD_IMAGE_DIFF_NOTE_ERROR);
   } else {
-    addImageDiffNoteToStore(store, data, query);
+    addImageDiffNoteToStore(store, data, query, queryVariables);
   }
 };
 

ee/spec/frontend/design_management/pages/design/index_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { ApolloMutation } from 'vue-apollo';
 import DesignIndex from 'ee/design_management/pages/design/index.vue';
 import DesignDiscussion from 'ee/design_management/components/design_notes/design_discussion.vue';
 import DesignReplyForm from 'ee/design_management/components/design_notes/design_reply_form.vue';
@@ -57,6 +58,9 @@ describe('Design management design index page', () => {
       sync: false,
       propsData: { id: '1' },
       mocks: { $apollo },
+      stubs: {
+        ApolloMutation,
+      },
     });
 
     wrapper.setData({
@@ -122,7 +126,7 @@ describe('Design management design index page', () => {
     });
 
     it('renders correct amount of discussions', () => {
-      expect(wrapper.findAll(DesignDiscussion).length).toBe(1);
+      expect(findDiscussions().length).toBe(1);
     });
   });
 
@@ -165,7 +169,7 @@ describe('Design management design index page', () => {
         findDiscussionForm().vm.$emit('submitForm');
 
         expect(mutate).toHaveBeenCalledWith(mutationVariables);
-        return wrapper.vm.addImageDiffNote();
+        return mutate({ variables: mutationVariables });
       })
       .then(() => {
         expect(findDiscussionForm().exists()).toBe(false);