Merge branch 'ntepluhina-edit-note-fix' into 'master'

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

See merge request gitlab-org/gitlab!32035

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/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,11 +96,25 @@ 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,
     });
 
+    expect(findEditButton().exists()).toBe(false);
+  });
+
+  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,
+          },
+        },
+      });
+
       findEditButton().trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
@@ -110,7 +127,12 @@ describe('Design note component', () => {
       beforeEach(() => {
         createComponent(
           {
-          note,
+            note: {
+              ...note,
+              userPermissions: {
+                adminNote: true,
+              },
+            },
           },
           { isEditing: true },
         );
@@ -144,4 +166,5 @@ describe('Design note component', () => {
           });
       });
     });
+  });
 });