1 files changed, 47 insertions, 3 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index c2ca87af9ce..8d5c3b2def3 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -1,6 +1,8 @@
 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { IssuableType } from '~/issue_show/constants';
 import { __, sprintf } from '~/locale';
+import AttentionRequestedToggle from '../attention_requested_toggle.vue';
 import AssigneeAvatarLink from './assignee_avatar_link.vue';
 import UserNameWithStatus from './user_name_with_status.vue';
 
@@ -8,9 +10,11 @@ const DEFAULT_RENDER_COUNT = 5;
 
 export default {
   components: {
+    AttentionRequestedToggle,
     AssigneeAvatarLink,
     UserNameWithStatus,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     users: {
       type: Array,
@@ -32,6 +36,10 @@ export default {
       return this.users[0];
     },
     hasOneUser() {
+      if (this.showVerticalList) {
+        return false;
+      }
+
       return this.users.length === 1;
     },
     hiddenAssigneesLabel() {
@@ -45,6 +53,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 +65,12 @@ export default {
     username() {
       return `@${this.firstUser.username}`;
     },
+    showVerticalList() {
+      return this.glFeatures.mrAttentionRequests && this.isMergeRequest;
+    },
+    isMergeRequest() {
+      return this.issuableType === IssuableType.MergeRequest;
+    },
   },
   methods: {
     toggleShowLess() {
@@ -64,6 +82,9 @@ export default {
       }
       return u?.status?.availability || '';
     },
+    toggleAttentionRequested(data) {
+      this.$emit('toggle-attention-requested', data);
+    },
   },
 };
 </script>
@@ -84,11 +105,34 @@ 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" />
+        <attention-requested-toggle
+          v-if="showVerticalList && user.can_update_merge_request"
+          :user="user"
+          type="assignee"
+          @toggle-attention-requested="toggleAttentionRequested"
+        />
+        <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">