Show attention request button if user does not have permission

Instead of hiding the attention request button if the user does not
have permission we will not instead show the button
but making it read only.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/354727

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

@@ -5026,6 +5026,9 @@ msgstr ""
 msgid "Attention"
 msgstr ""
 
+msgid "Attention requested"
+msgstr ""
+
 msgid "Audit Events"
 msgstr ""
 
@@ -24633,6 +24636,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);
     },