Merge branch '14673-refactor-all-design-management-mutations-to-have-errors-field' into 'master'

Handle errors in GraphQL mutations within Design Management

See merge request gitlab-org/gitlab!23491

ee/app/assets/javascripts/design_management/graphql/mutations/createImageDiffNote.mutation.graphql

@@ -16,5 +16,6 @@ mutation createImageDiffNote($input: CreateImageDiffNoteInput!) {
         }
       }
     }
+    errors
   }
 }

ee/app/assets/javascripts/design_management/graphql/mutations/createNote.mutation.graphql

@@ -5,5 +5,6 @@ mutation createNote($input: CreateNoteInput!) {
     note {
       ...DesignNote
     }
+    errors
   }
 }

ee/app/assets/javascripts/design_management/graphql/mutations/destroyDesign.mutation.graphql

@@ -5,5 +5,6 @@ mutation destroyDesign($filenames: [String!]!, $projectPath: ID!, $iid: ID!) {
     version {
       ...VersionListItem
     }
+    errors
   }
 }

ee/app/assets/javascripts/design_management/graphql/mutations/uploadDesign.mutation.graphql

@@ -16,5 +16,6 @@ mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
     skippedDesigns {
       filename
     }
+    errors
   }
 }

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

@@ -203,6 +203,8 @@ const onError = (data, message) => {
   throw new Error(data.errors);
 };
 
+const hasErrors = ({ errors = [] }) => errors?.length;
+
 /**
  * Updates a store after design deletion
  *
@@ -212,7 +214,7 @@ const onError = (data, message) => {
  * @param {Array} designs
  */
 export const updateStoreAfterDesignsDelete = (store, data, query, designs) => {
-  if (data.errors) {
+  if (hasErrors(data)) {
     onError(data, designDeletionError({ singular: designs.length === 1 }));
   } else {
     deleteDesignsFromStore(store, query, designs);
@@ -227,7 +229,7 @@ export const updateStoreAfterAddDiscussionComment = (
   queryVariables,
   discussionId,
 ) => {
-  if (data.errors) {
+  if (hasErrors(data)) {
     onError(data, ADD_DISCUSSION_COMMENT_ERROR);
   } else {
     addDiscussionCommentToStore(store, data, query, queryVariables, discussionId);
@@ -235,7 +237,7 @@ export const updateStoreAfterAddDiscussionComment = (
 };
 
 export const updateStoreAfterAddImageDiffNote = (store, data, query, queryVariables) => {
-  if (data.errors) {
+  if (hasErrors(data)) {
     onError(data, ADD_IMAGE_DIFF_NOTE_ERROR);
   } else {
     addImageDiffNoteToStore(store, data, query, queryVariables);
@@ -243,7 +245,7 @@ export const updateStoreAfterAddImageDiffNote = (store, data, query, queryVariab
 };
 
 export const updateStoreAfterUploadDesign = (store, data, query) => {
-  if (data.errors) {
+  if (hasErrors(data)) {
     onError(data, UPLOAD_DESIGN_ERROR);
   } else {
     addNewDesignToStore(store, data, query);

ee/spec/frontend/design_management/utils/cache_update_spec.js

+import { InMemoryCache } from 'apollo-cache-inmemory';
+import {
+  updateStoreAfterDesignsDelete,
+  updateStoreAfterAddDiscussionComment,
+  updateStoreAfterAddImageDiffNote,
+  updateStoreAfterUploadDesign,
+} from 'ee/design_management/utils/cache_update';
+import {
+  designDeletionError,
+  ADD_DISCUSSION_COMMENT_ERROR,
+  ADD_IMAGE_DIFF_NOTE_ERROR,
+  UPLOAD_DESIGN_ERROR,
+} from 'ee/design_management/utils/error_messages';
+import design from '../mock_data/design';
+import createFlash from '~/flash';
+
+jest.mock('~/flash.js');
+
+describe('Design Management cache update', () => {
+  const mockErrors = ['code red!'];
+
+  let mockStore;
+
+  beforeEach(() => {
+    mockStore = new InMemoryCache();
+  });
+
+  describe('error handling', () => {
+    it.each`
+      fnName                                    | subject                                 | errorMessage                               | extraArgs
+      ${'updateStoreAfterDesignsDelete'}        | ${updateStoreAfterDesignsDelete}        | ${designDeletionError({ singular: true })} | ${[[design]]}
+      ${'updateStoreAfterAddDiscussionComment'} | ${updateStoreAfterAddDiscussionComment} | ${ADD_DISCUSSION_COMMENT_ERROR}            | ${[]}
+      ${'updateStoreAfterAddImageDiffNote'}     | ${updateStoreAfterAddImageDiffNote}     | ${ADD_IMAGE_DIFF_NOTE_ERROR}               | ${[]}
+      ${'updateStoreAfterUploadDesign'}         | ${updateStoreAfterUploadDesign}         | ${UPLOAD_DESIGN_ERROR}                     | ${[]}
+    `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => {
+      expect(createFlash).not.toHaveBeenCalled();
+      expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow();
+      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createFlash).toHaveBeenCalledWith(errorMessage);
+    });
+  });
+});