Merge branch 'ph/354727/attentionRequestPermissions' into 'master'

Show attention request button if user does not have permission

See merge request gitlab-org/gitlab!82301

app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue

@@ -114,7 +114,7 @@ export default {
         class="gl-display-inline-block"
       >
         <attention-requested-toggle
-          v-if="showVerticalList && user.can_update_merge_request"
+          v-if="showVerticalList"
           :user="user"
           type="assignee"
           @toggle-attention-requested="toggleAttentionRequested"

app/assets/javascripts/sidebar/components/attention_requested_toggle.vue

@@ -8,6 +8,8 @@ export default {
     attentionRequestedReviewer: __('Request attention to review'),
     attentionRequestedAssignee: __('Request attention'),
     removeAttentionRequested: __('Remove attention request'),
+    attentionRequestedNoPermission: __('Attention requested'),
+    noAttentionRequestedNoPermission: __('No attention request'),
   },
   components: {
     GlButton,
@@ -33,17 +35,25 @@ export default {
   computed: {
     tooltipTitle() {
       if (this.user.attention_requested) {
+        if (this.user.can_update_merge_request) {
           return this.$options.i18n.removeAttentionRequested;
         }
 
+        return this.$options.i18n.attentionRequestedNoPermission;
+      }
+
+      if (this.user.can_update_merge_request) {
         return this.type === 'reviewer'
           ? this.$options.i18n.attentionRequestedReviewer
           : this.$options.i18n.attentionRequestedAssignee;
+      }
+
+      return this.$options.i18n.noAttentionRequestedNoPermission;
     },
   },
   methods: {
     toggleAttentionRequired() {
-      if (this.loading) return;
+      if (this.loading || !this.user.can_update_merge_request) return;
 
       this.$root.$emit(BV_HIDE_TOOLTIP);
       this.loading = true;
@@ -60,12 +70,13 @@ export default {
 </script>
 
 <template>
-  <span v-gl-tooltip.left.viewport="tooltipTitle">
+  <span v-gl-tooltip.left.viewport="tooltipTitle" class="gl-display-inline-block">
     <gl-button
       :loading="loading"
       :variant="user.attention_requested ? 'warning' : 'default'"
       :icon="user.attention_requested ? 'attention-solid' : 'attention'"
       :aria-label="tooltipTitle"
+      :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }"
       size="small"
       category="tertiary"
       @click="toggleAttentionRequired"

app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue

@@ -98,7 +98,7 @@ export default {
       data-testid="reviewer"
     >
       <attention-requested-toggle
-        v-if="glFeatures.mrAttentionRequests && user.can_update_merge_request"
+        v-if="glFeatures.mrAttentionRequests"
         :user="user"
         type="reviewer"
         @toggle-attention-requested="toggleAttentionRequested"

locale/gitlab.pot

@@ -5032,6 +5032,9 @@ msgstr ""
 msgid "Attention"
 msgstr ""
 
+msgid "Attention requested"
+msgstr ""
+
 msgid "Audit Events"
 msgstr ""
 
@@ -24672,6 +24675,9 @@ msgstr ""
 msgid "No assignee"
 msgstr ""
 
+msgid "No attention request"
+msgstr ""
+
 msgid "No authentication methods configured."
 msgstr ""
 

spec/frontend/sidebar/components/attention_requested_toggle_spec.js

@@ -16,7 +16,10 @@ describe('Attention require toggle', () => {
   });
 
   it('renders button', () => {
-    factory({ type: 'reviewer', user: { attention_requested: false } });
+    factory({
+      type: 'reviewer',
+      user: { attention_requested: false, can_update_merge_request: true },
+    });
 
     expect(findToggle().exists()).toBe(true);
   });
@@ -28,7 +31,10 @@ describe('Attention require toggle', () => {
   `(
     'renders $icon icon when attention_requested is $attentionRequested',
     ({ attentionRequested, icon }) => {
-      factory({ type: 'reviewer', user: { attention_requested: attentionRequested } });
+      factory({
+        type: 'reviewer',
+        user: { attention_requested: attentionRequested, can_update_merge_request: true },
+      });
 
       expect(findToggle().props('icon')).toBe(icon);
     },
@@ -41,27 +47,47 @@ describe('Attention require toggle', () => {
   `(
     'renders button with variant $variant when attention_requested is $attentionRequested',
     ({ attentionRequested, variant }) => {
-      factory({ type: 'reviewer', user: { attention_requested: attentionRequested } });
+      factory({
+        type: 'reviewer',
+        user: { attention_requested: attentionRequested, can_update_merge_request: true },
+      });
 
       expect(findToggle().props('variant')).toBe(variant);
     },
   );
 
   it('emits toggle-attention-requested on click', async () => {
-    factory({ type: 'reviewer', user: { attention_requested: true } });
+    factory({
+      type: 'reviewer',
+      user: { attention_requested: true, can_update_merge_request: true },
+    });
 
     await findToggle().trigger('click');
 
     expect(wrapper.emitted('toggle-attention-requested')[0]).toEqual([
       {
-        user: { attention_requested: true },
+        user: { attention_requested: true, can_update_merge_request: true },
         callback: expect.anything(),
       },
     ]);
   });
 
+  it('does not emit toggle-attention-requested on click if can_update_merge_request is false', async () => {
+    factory({
+      type: 'reviewer',
+      user: { attention_requested: true, can_update_merge_request: false },
+    });
+
+    await findToggle().trigger('click');
+
+    expect(wrapper.emitted('toggle-attention-requested')).toBe(undefined);
+  });
+
   it('sets loading on click', async () => {
-    factory({ type: 'reviewer', user: { attention_requested: true } });
+    factory({
+      type: 'reviewer',
+      user: { attention_requested: true, can_update_merge_request: true },
+    });
 
     await findToggle().trigger('click');
 
@@ -69,14 +95,24 @@ describe('Attention require toggle', () => {
   });
 
   it.each`
-    type          | attentionRequested | tooltip
-    ${'reviewer'} | ${true}            | ${AttentionRequestedToggle.i18n.removeAttentionRequested}
-    ${'reviewer'} | ${false}           | ${AttentionRequestedToggle.i18n.attentionRequestedReviewer}
-    ${'assignee'} | ${false}           | ${AttentionRequestedToggle.i18n.attentionRequestedAssignee}
+    type          | attentionRequested | tooltip                                                           | canUpdateMergeRequest
+    ${'reviewer'} | ${true}            | ${AttentionRequestedToggle.i18n.removeAttentionRequested}         | ${true}
+    ${'reviewer'} | ${false}           | ${AttentionRequestedToggle.i18n.attentionRequestedReviewer}       | ${true}
+    ${'assignee'} | ${false}           | ${AttentionRequestedToggle.i18n.attentionRequestedAssignee}       | ${true}
+    ${'reviewer'} | ${true}            | ${AttentionRequestedToggle.i18n.attentionRequestedNoPermission}   | ${false}
+    ${'reviewer'} | ${false}           | ${AttentionRequestedToggle.i18n.noAttentionRequestedNoPermission} | ${false}
+    ${'assignee'} | ${true}            | ${AttentionRequestedToggle.i18n.attentionRequestedNoPermission}   | ${false}
+    ${'assignee'} | ${false}           | ${AttentionRequestedToggle.i18n.noAttentionRequestedNoPermission} | ${false}
   `(
-    'sets tooltip as $tooltip when attention_requested is $attentionRequested and type is $type',
-    ({ type, attentionRequested, tooltip }) => {
-      factory({ type, user: { attention_requested: attentionRequested } });
+    'sets tooltip as $tooltip when attention_requested is $attentionRequested, type is $type and, can_update_merge_request is $canUpdateMergeRequest',
+    ({ type, attentionRequested, tooltip, canUpdateMergeRequest }) => {
+      factory({
+        type,
+        user: {
+          attention_requested: attentionRequested,
+          can_update_merge_request: canUpdateMergeRequest,
+        },
+      });
 
       expect(findToggle().attributes('aria-label')).toBe(tooltip);
     },