1 files changed, 35 insertions, 18 deletions

diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
index 4af5c83b30c..0f354e85e96 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
@@ -12,7 +12,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
-import { s__, __ } from '~/locale';
+import { s__ } from '~/locale';
 import alertSetAssignees from '../../graphql/mutations/alert_set_assignees.mutation.graphql';
 import SidebarAssignee from './sidebar_assignee.vue';
 
@@ -82,8 +82,11 @@ export default {
     userName() {
       return this.alert?.assignees?.nodes[0]?.username;
     },
-    assignedUser() {
-      return this.userName || __('None');
+    userFullName() {
+      return this.alert?.assignees?.nodes[0]?.name;
+    },
+    userImg() {
+      return this.alert?.assignees?.nodes[0]?.avatarUrl;
     },
     sortedUsers() {
       return this.users
@@ -184,15 +187,15 @@ export default {
 </script>
 
 <template>
-  <div class="block alert-status">
-    <div ref="status" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')">
+  <div class="block alert-assignees ">
+    <div ref="assignees" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')">
       <gl-icon name="user" :size="14" />
       <gl-loading-icon v-if="isUpdating" />
     </div>
-    <gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
+    <gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left">
       <gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
         <template #assignees>
-          {{ assignedUser }}
+          {{ userName }}
         </template>
       </gl-sprintf>
     </gl-tooltip>
@@ -215,19 +218,19 @@ export default {
       <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
         <gl-deprecated-dropdown
           ref="dropdown"
-          :text="assignedUser"
+          :text="userName"
           class="w-100"
           toggle-class="dropdown-menu-toggle"
           variant="outline-default"
           @keydown.esc.native="hideDropdown"
           @hide="hideDropdown"
         >
-          <div class="dropdown-title">
-            <span class="alert-title">{{ __('Assign To') }}</span>
+          <div class="dropdown-title gl-display-flex">
+            <span class="alert-title gl-ml-auto">{{ __('Assign To') }}</span>
             <gl-button
               :aria-label="__('Close')"
               variant="link"
-              class="dropdown-title-button dropdown-menu-close"
+              class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-black-normal!"
               icon="close"
               @click="hideDropdown"
             />
@@ -272,14 +275,28 @@ export default {
       </div>
 
       <gl-loading-icon v-if="isUpdating" :inline="true" />
-      <p v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !userName }">
-        <span v-if="userName" class="gl-text-gray-500" data-testid="assigned-users">{{
-          assignedUser
-        }}</span>
-        <span v-else class="gl-display-flex gl-align-items-center">
+      <div v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !userName }">
+        <div v-if="userName" class="gl-display-inline-flex gl-mt-2" data-testid="assigned-users">
+          <span class="gl-relative mr-2">
+            <img
+              :alt="userName"
+              :src="userImg"
+              :width="32"
+              class="avatar avatar-inline gl-m-0 s32"
+              data-qa-selector="avatar_image"
+            />
+          </span>
+          <span class="gl-display-flex gl-flex-direction-column gl-overflow-hidden">
+            <strong class="dropdown-menu-user-full-name">
+              {{ userFullName }}
+            </strong>
+            <span class="dropdown-menu-user-username">{{ userName }}</span>
+          </span>
+        </div>
+        <span v-else class="gl-display-flex gl-align-items-center gl-line-height-normal">
           {{ __('None') }} -
           <gl-button
-            class="gl-pl-2"
+            class="gl-ml-2"
             href="#"
             variant="link"
             data-testid="unassigned-users"
@@ -288,7 +305,7 @@ export default {
             {{ __('assign yourself') }}
           </gl-button>
         </span>
-      </p>
+      </div>
     </div>
   </div>
 </template>