Allow only users with `adminNote` permission to edit the design note

app/assets/javascripts/design_management/components/design_notes/design_note.vue

@@ -108,7 +108,7 @@ export default {
         </span>
       </div>
       <button
-        v-if="!isEditing"
+        v-if="!isEditing && note.userPermissions.adminNote"
         v-gl-tooltip
         type="button"
         title="Edit comment"

app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -5,7 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
-import permissionsQuery from '../../graphql/queries/permissions.query.graphql';
+import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
 import appDataQuery from '../../graphql/queries/appData.query.graphql';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 

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

 #import "./diffRefs.fragment.graphql"
 #import "~/graphql_shared/fragments/author.fragment.graphql"
-#import "./notePermissions.fragment.graphql"
+#import "./note_permissions.fragment.graphql"
 
 fragment DesignNote on Note {
   id

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

 fragment DesignNotePermissions on NotePermissions {
   adminNote
-}
+}
\ No newline at end of file

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

@@ -9,7 +9,7 @@ import DesignDestroyer from '../components/design_destroyer.vue';
 import DesignVersionDropdown from '../components/upload/design_version_dropdown.vue';
 import DesignDropzone from '../components/upload/design_dropzone.vue';
 import uploadDesignMutation from '../graphql/mutations/uploadDesign.mutation.graphql';
-import permissionsQuery from '../graphql/queries/permissions.query.graphql';
+import permissionsQuery from '../graphql/queries/design_permissions.query.graphql';
 import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
 import allDesignsMixin from '../mixins/all_designs';
 import {

changelogs/unreleased/ntepluhina-edit-note-fix.yml

+---
+title: Allow only users with `adminNote` permission to edit the design note
+merge_request: 32035
+author:
+type: fixed

spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap

@@ -50,17 +50,7 @@ exports[`Design note component should match the snapshot 1`] = `
       </span>
     </div>
      
-    <button
-      class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
-      title="Edit comment"
-      type="button"
-    >
-      <gl-icon-stub
-        class="link-highlight"
-        name="pencil"
-        size="16"
-      />
-    </button>
+    <!---->
   </div>
    
   <div

spec/frontend/design_management/components/design_notes/design_note_spec.js

@@ -12,6 +12,9 @@ const note = {
     id: 'author-id',
   },
   body: 'test',
+  userPermissions: {
+    adminNote: false,
+  },
 };
 HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
@@ -93,55 +96,75 @@ describe('Design note component', () => {
     expect(scrollIntoViewMock).toHaveBeenCalled();
   });
 
-  it('should open an edit form on edit button click', () => {
+  it('should not render edit icon when user does not have a permission', () => {
     createComponent({
       note,
     });
 
-    findEditButton().trigger('click');
-
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findReplyForm().exists()).toBe(true);
-      expect(findNoteContent().exists()).toBe(false);
-    });
+    expect(findEditButton().exists()).toBe(false);
   });
 
-  describe('when edit form is rendered', () => {
-    beforeEach(() => {
-      createComponent(
-        {
-          note,
+  describe('when user has a permission to edit note', () => {
+    it('should open an edit form on edit button click', () => {
+      createComponent({
+        note: {
+          ...note,
+          userPermissions: {
+            adminNote: true,
+          },
         },
-        { isEditing: true },
-      );
-    });
-
-    it('should not render note content and should render reply form', () => {
-      expect(findNoteContent().exists()).toBe(false);
-      expect(findReplyForm().exists()).toBe(true);
-    });
+      });
 
-    it('hides the form on hideForm event', () => {
-      findReplyForm().vm.$emit('cancelForm');
+      findEditButton().trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(findReplyForm().exists()).toBe(false);
-        expect(findNoteContent().exists()).toBe(true);
+        expect(findReplyForm().exists()).toBe(true);
+        expect(findNoteContent().exists()).toBe(false);
       });
     });
 
-    it('calls a mutation on submitForm event and hides a form', () => {
-      findReplyForm().vm.$emit('submitForm');
-      expect(mutate).toHaveBeenCalled();
+    describe('when edit form is rendered', () => {
+      beforeEach(() => {
+        createComponent(
+          {
+            note: {
+              ...note,
+              userPermissions: {
+                adminNote: true,
+              },
+            },
+          },
+          { isEditing: true },
+        );
+      });
+
+      it('should not render note content and should render reply form', () => {
+        expect(findNoteContent().exists()).toBe(false);
+        expect(findReplyForm().exists()).toBe(true);
+      });
+
+      it('hides the form on hideForm event', () => {
+        findReplyForm().vm.$emit('cancelForm');
 
-      return mutate()
-        .then(() => {
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+        return wrapper.vm.$nextTick().then(() => {
           expect(findReplyForm().exists()).toBe(false);
           expect(findNoteContent().exists()).toBe(true);
         });
+      });
+
+      it('calls a mutation on submitForm event and hides a form', () => {
+        findReplyForm().vm.$emit('submitForm');
+        expect(mutate).toHaveBeenCalled();
+
+        return mutate()
+          .then(() => {
+            return wrapper.vm.$nextTick();
+          })
+          .then(() => {
+            expect(findReplyForm().exists()).toBe(false);
+            expect(findNoteContent().exists()).toBe(true);
+          });
+      });
     });
   });
 });