Change the mutation and permissions for image note reposition

app/assets/javascripts/design_management/components/design_overlay.vue

@@ -112,9 +112,9 @@ export default {
     },
     canMoveNote(note) {
       const { userPermissions } = note;
-      const { adminNote } = userPermissions || {};
+      const { repositionNote } = userPermissions || {};
 
-      return Boolean(adminNote);
+      return Boolean(repositionNote);
     },
     isPositionInOverlay(position) {
       const { top, left } = this.getNoteRelativePosition(position);

app/assets/javascripts/design_management/graphql/fragments/note_permissions.fragment.graphql

 fragment DesignNotePermissions on NotePermissions {
   adminNote
+  repositionNote
 }

app/assets/javascripts/design_management/graphql/mutations/update_image_diff_note.mutation.graphql → app/assets/javascripts/design_management/graphql/mutations/reposition_image_diff_note.mutation.graphql

 #import "../fragments/design_note.fragment.graphql"
 
-mutation updateImageDiffNote($input: UpdateImageDiffNoteInput!) {
-  updateImageDiffNote(input: $input) {
+mutation repositionImageDiffNote($input: RepositionImageDiffNoteInput!) {
+  repositionImageDiffNote(input: $input) {
     errors
     note {
       ...DesignNote

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

@@ -13,19 +13,19 @@ import DesignReplyForm from '../../components/design_notes/design_reply_form.vue
 import DesignSidebar from '../../components/design_sidebar.vue';
 import getDesignQuery from '../../graphql/queries/get_design.query.graphql';
 import createImageDiffNoteMutation from '../../graphql/mutations/create_image_diff_note.mutation.graphql';
-import updateImageDiffNoteMutation from '../../graphql/mutations/update_image_diff_note.mutation.graphql';
+import repositionImageDiffNoteMutation from '../../graphql/mutations/reposition_image_diff_note.mutation.graphql';
 import updateActiveDiscussionMutation from '../../graphql/mutations/update_active_discussion.mutation.graphql';
 import {
   extractDiscussions,
   extractDesign,
-  updateImageDiffNoteOptimisticResponse,
+  repositionImageDiffNoteOptimisticResponse,
   toDiffNoteGid,
   extractDesignNoteId,
   getPageLayoutElement,
 } from '../../utils/design_management_utils';
 import {
   updateStoreAfterAddImageDiffNote,
-  updateStoreAfterUpdateImageDiffNote,
+  updateStoreAfterRepositionImageDiffNote,
 } from '../../utils/cache_update';
 import {
   ADD_DISCUSSION_COMMENT_ERROR,
@@ -182,12 +182,12 @@ export default {
     updateImageDiffNoteInStore(
       store,
       {
-        data: { updateImageDiffNote },
+        data: { repositionImageDiffNote },
       },
     ) {
-      return updateStoreAfterUpdateImageDiffNote(
+      return updateStoreAfterRepositionImageDiffNote(
         store,
-        updateImageDiffNote,
+        repositionImageDiffNote,
         getDesignQuery,
         this.designVariables,
       );
@@ -199,7 +199,7 @@ export default {
       );
 
       const mutationPayload = {
-        optimisticResponse: updateImageDiffNoteOptimisticResponse(note, {
+        optimisticResponse: repositionImageDiffNoteOptimisticResponse(note, {
           position,
         }),
         variables: {
@@ -208,7 +208,7 @@ export default {
             position,
           },
         },
-        mutation: updateImageDiffNoteMutation,
+        mutation: repositionImageDiffNoteMutation,
         update: this.updateImageDiffNoteInStore,
       };
 

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

@@ -101,7 +101,7 @@ const addImageDiffNoteToStore = (store, createImageDiffNote, query, variables) =
   });
 };
 
-const updateImageDiffNoteInStore = (store, updateImageDiffNote, query, variables) => {
+const updateImageDiffNoteInStore = (store, repositionImageDiffNote, query, variables) => {
   const sourceData = store.readQuery({
     query,
     variables,
@@ -111,12 +111,12 @@ const updateImageDiffNoteInStore = (store, updateImageDiffNote, query, variables
     const design = extractDesign(draftData);
     const discussion = extractCurrentDiscussion(
       design.discussions,
-      updateImageDiffNote.note.discussion.id,
+      repositionImageDiffNote.note.discussion.id,
     );
 
     discussion.notes = {
       ...discussion.notes,
-      nodes: [updateImageDiffNote.note, ...discussion.notes.nodes.slice(1)],
+      nodes: [repositionImageDiffNote.note, ...discussion.notes.nodes.slice(1)],
     };
   });
 
@@ -268,7 +268,7 @@ export const updateStoreAfterAddImageDiffNote = (store, data, query, queryVariab
   }
 };
 
-export const updateStoreAfterUpdateImageDiffNote = (store, data, query, queryVariables) => {
+export const updateStoreAfterRepositionImageDiffNote = (store, data, query, queryVariables) => {
   if (hasErrors(data)) {
     onError(data, UPDATE_IMAGE_DIFF_NOTE_ERROR);
   } else {

app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -107,12 +107,12 @@ export const designUploadOptimisticResponse = files => {
  *  @param {Object} note
  *  @param {Object} position
  */
-export const updateImageDiffNoteOptimisticResponse = (note, { position }) => ({
+export const repositionImageDiffNoteOptimisticResponse = (note, { position }) => ({
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
   // eslint-disable-next-line @gitlab/require-i18n-strings
   __typename: 'Mutation',
-  updateImageDiffNote: {
-    __typename: 'UpdateImageDiffNotePayload',
+  repositionImageDiffNote: {
+    __typename: 'RepositionImageDiffNotePayload',
     note: {
       ...note,
       position: {

changelogs/unreleased/207334-design-view-relax-permissions-for-updateimagediffnote-mutation.yml

+---
+title: Change the mutation and permissions for image note reposition
+merge_request: 47161
+author:
+type: changed

spec/frontend/design_management/components/design_overlay_spec.js

@@ -243,11 +243,11 @@ describe('Design overlay component', () => {
         });
     });
 
-    describe('without [adminNote] permission', () => {
+    describe('without [repositionNote] permission', () => {
       const mockNoteNotAuthorised = {
         ...notes[0],
         userPermissions: {
-          adminNote: false,
+          repositionNote: false,
         },
       };
 
@@ -412,18 +412,18 @@ describe('Design overlay component', () => {
 
   describe('canMoveNote', () => {
     it.each`
-      adminNotePermission | canMoveNoteResult
-      ${true}             | ${true}
-      ${false}            | ${false}
-      ${undefined}        | ${false}
+      repositionNotePermission | canMoveNoteResult
+      ${true}                  | ${true}
+      ${false}                 | ${false}
+      ${undefined}             | ${false}
     `(
-      'returns [$canMoveNoteResult] when [adminNote permission] is [$adminNotePermission]',
-      ({ adminNotePermission, canMoveNoteResult }) => {
+      'returns [$canMoveNoteResult] when [repositionNote permission] is [$repositionNotePermission]',
+      ({ repositionNotePermission, canMoveNoteResult }) => {
         createComponent();
 
         const note = {
           userPermissions: {
-            adminNote: adminNotePermission,
+            repositionNote: repositionNotePermission,
           },
         };
         expect(wrapper.vm.canMoveNote(note)).toBe(canMoveNoteResult);

spec/frontend/design_management/mock_data/discussion.js

@@ -18,7 +18,7 @@ export default {
       },
       createdAt: '2020-05-08T07:10:45Z',
       userPermissions: {
-        adminNote: true,
+        repositionNote: true,
       },
       resolved: false,
     },

spec/frontend/design_management/utils/cache_update_spec.js

@@ -3,7 +3,7 @@ import {
   updateStoreAfterDesignsDelete,
   updateStoreAfterAddImageDiffNote,
   updateStoreAfterUploadDesign,
-  updateStoreAfterUpdateImageDiffNote,
+  updateStoreAfterRepositionImageDiffNote,
 } from '~/design_management/utils/cache_update';
 import {
   designDeletionError,
@@ -26,11 +26,11 @@ describe('Design Management cache update', () => {
 
   describe('error handling', () => {
     it.each`
-      fnName                                   | subject                                | errorMessage                               | extraArgs
-      ${'updateStoreAfterDesignsDelete'}       | ${updateStoreAfterDesignsDelete}       | ${designDeletionError({ singular: true })} | ${[[design]]}
-      ${'updateStoreAfterAddImageDiffNote'}    | ${updateStoreAfterAddImageDiffNote}    | ${ADD_IMAGE_DIFF_NOTE_ERROR}               | ${[]}
-      ${'updateStoreAfterUploadDesign'}        | ${updateStoreAfterUploadDesign}        | ${mockErrors[0]}                           | ${[]}
-      ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterUpdateImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR}            | ${[]}
+      fnName                                   | subject                                    | errorMessage                               | extraArgs
+      ${'updateStoreAfterDesignsDelete'}       | ${updateStoreAfterDesignsDelete}           | ${designDeletionError({ singular: true })} | ${[[design]]}
+      ${'updateStoreAfterAddImageDiffNote'}    | ${updateStoreAfterAddImageDiffNote}        | ${ADD_IMAGE_DIFF_NOTE_ERROR}               | ${[]}
+      ${'updateStoreAfterUploadDesign'}        | ${updateStoreAfterUploadDesign}            | ${mockErrors[0]}                           | ${[]}
+      ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterRepositionImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR}            | ${[]}
     `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => {
       expect(createFlash).not.toHaveBeenCalled();
       expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow();

spec/frontend/design_management/utils/design_management_utils_spec.js

@@ -3,7 +3,7 @@ import {
   extractDiscussions,
   findVersionId,
   designUploadOptimisticResponse,
-  updateImageDiffNoteOptimisticResponse,
+  repositionImageDiffNoteOptimisticResponse,
   isValidDesignFile,
   extractDesign,
   extractDesignNoteId,
@@ -112,7 +112,7 @@ describe('optimistic responses', () => {
     expect(designUploadOptimisticResponse([{ name: 'test' }])).toEqual(expectedResponse);
   });
 
-  it('correctly generated for updateImageDiffNoteOptimisticResponse', () => {
+  it('correctly generated for repositionImageDiffNoteOptimisticResponse', () => {
     const mockNote = {
       id: 'test-note-id',
     };
@@ -126,8 +126,8 @@ describe('optimistic responses', () => {
 
     const expectedResponse = {
       __typename: 'Mutation',
-      updateImageDiffNote: {
-        __typename: 'UpdateImageDiffNotePayload',
+      repositionImageDiffNote: {
+        __typename: 'RepositionImageDiffNotePayload',
         note: {
           ...mockNote,
           position: mockPosition,
@@ -135,7 +135,7 @@ describe('optimistic responses', () => {
         errors: [],
       },
     };
-    expect(updateImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual(
+    expect(repositionImageDiffNoteOptimisticResponse(mockNote, { position: mockPosition })).toEqual(
       expectedResponse,
     );
   });