Renders assignee list as a vertical list in merge requests

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

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

 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { IssuableType } from '~/issue_show/constants';
 import { __, sprintf } from '~/locale';
 import AssigneeAvatarLink from './assignee_avatar_link.vue';
@@ -11,6 +12,7 @@ export default {
     AssigneeAvatarLink,
     UserNameWithStatus,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     users: {
       type: Array,
@@ -32,6 +34,10 @@ export default {
       return this.users[0];
     },
     hasOneUser() {
+      if (this.showVerticalList) {
+        return false;
+      }
+
       return this.users.length === 1;
     },
     hiddenAssigneesLabel() {
@@ -45,6 +51,10 @@ export default {
       return this.users.length - DEFAULT_RENDER_COUNT;
     },
     uncollapsedUsers() {
+      if (this.showVerticalList) {
+        return this.users;
+      }
+
       const uncollapsedLength = this.showLess
         ? Math.min(this.users.length, DEFAULT_RENDER_COUNT)
         : this.users.length;
@@ -53,6 +63,12 @@ export default {
     username() {
       return `@${this.firstUser.username}`;
     },
+    showVerticalList() {
+      return this.glFeatures.mrAttentionRequests && this.isMergeRequest;
+    },
+    isMergeRequest() {
+      return this.issuableType === IssuableType.MergeRequest;
+    },
   },
   methods: {
     toggleShowLess() {
@@ -84,11 +100,28 @@ export default {
   <div v-else>
     <div class="gl-display-flex gl-flex-wrap">
       <div
-        v-for="user in uncollapsedUsers"
+        v-for="(user, index) in uncollapsedUsers"
         :key="user.id"
-        class="user-item gl-display-inline-block"
+        :class="{
+          'user-item': !showVerticalList,
+          'gl-mb-3': index !== users.length - 1 && showVerticalList,
+        }"
+        class="gl-display-inline-block"
       >
-        <assignee-avatar-link :user="user" :issuable-type="issuableType" />
+        <assignee-avatar-link
+          :user="user"
+          :issuable-type="issuableType"
+          :tooltip-has-name="!showVerticalList"
+        >
+          <div
+            v-if="showVerticalList"
+            class="gl-ml-3 gl-line-height-normal gl-display-grid"
+            data-testid="username"
+          >
+            <user-name-with-status :name="user.name" :availability="userAvailability(user)" />
+            <span>@{{ user.username }}</span>
+          </div>
+        </assignee-avatar-link>
       </div>
     </div>
     <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800">

app/controllers/projects/merge_requests_controller.rb

@@ -41,6 +41,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:diffs_virtual_scrolling, project, default_enabled: :yaml)
     push_frontend_feature_flag(:restructured_mr_widget, project, default_enabled: :yaml)
     push_frontend_feature_flag(:mr_changes_fluid_layout, project, default_enabled: :yaml)
+    push_frontend_feature_flag(:mr_attention_requests, project, default_enabled: :yaml)
 
     # Usage data feature flags
     push_frontend_feature_flag(:users_expanding_widgets_usage_data, @project, default_enabled: :yaml)

config/feature_flags/development/mr_attention_requests.yml

+---
+name: mr_attention_requests
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/72773
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/343528
+milestone: '14.4'
+type: development
+group: group::code review
+default_enabled: false

spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js

@@ -10,7 +10,7 @@ const DEFAULT_RENDER_COUNT = 5;
 describe('UncollapsedAssigneeList component', () => {
   let wrapper;
 
-  function createComponent(props = {}) {
+  function createComponent(props = {}, glFeatures = {}) {
     const propsData = {
       users: [],
       rootPath: TEST_HOST,
@@ -19,6 +19,7 @@ describe('UncollapsedAssigneeList component', () => {
 
     wrapper = mount(UncollapsedAssigneeList, {
       propsData,
+      provide: { glFeatures },
     });
   }
 
@@ -99,4 +100,22 @@ describe('UncollapsedAssigneeList component', () => {
       });
     });
   });
+
+  describe('merge requests', () => {
+    it.each`
+      numberOfUsers
+      ${1}
+      ${5}
+    `('displays as a vertical list for $numberOfUsers of users', ({ numberOfUsers }) => {
+      createComponent(
+        {
+          users: UsersMockHelper.createNumberRandomUsers(numberOfUsers),
+          issuableType: 'merge_request',
+        },
+        { mrAttentionRequests: true },
+      );
+
+      expect(wrapper.findAll('[data-testid="username"]').length).toBe(numberOfUsers);
+    });
+  });
 });