Fix alert details sidebar assignee CSS

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue

@@ -27,25 +27,12 @@ export default {
   <gl-dropdown-item
     :key="user.username"
     data-testid="assigneeDropdownItem"
-    class="assignee-dropdown-item gl-vertical-align-middle"
     :active="active"
     active-class="is-active"
+    :avatar-url="user.avatar_url"
+    :secondary-text="`@${user.username}`"
     @click="$emit('update-alert-assignees', user.username)"
   >
-    <span class="gl-relative mr-2">
-      <img
-        :alt="user.username"
-        :src="user.avatar_url"
-        :width="32"
-        class="avatar avatar-inline gl-m-0 s32"
-        data-qa-selector="avatar_image"
-      />
-    </span>
-    <span class="d-flex gl-flex-direction-column gl-overflow-hidden">
-      <strong class="dropdown-menu-user-full-name">
-        {{ user.name }}
-      </strong>
-      <span class="dropdown-menu-user-username"> {{ user.username }}</span>
-    </span>
+    {{ user.name }}
   </gl-dropdown-item>
 </template>

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue

@@ -13,7 +13,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';
 
@@ -96,7 +96,10 @@ export default {
         .sort((a, b) => (a.active === b.active ? 0 : a.active ? -1 : 1)); // eslint-disable-line no-nested-ternary
     },
     dropdownClass() {
-      return this.isDropdownShowing ? 'show' : 'gl-display-none';
+      return this.isDropdownShowing ? 'dropdown-menu-selectable show' : 'gl-display-none';
+    },
+    dropDownTitle() {
+      return this.userName ?? __('Select assignee');
     },
     userListValid() {
       return !this.isDropdownSearching && this.users.length > 0;
@@ -217,81 +220,80 @@ export default {
         </a>
       </p>
 
-      <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-        <gl-dropdown
-          ref="dropdown"
-          :text="userName"
-          class="w-100"
-          toggle-class="dropdown-menu-toggle"
-          @keydown.esc.native="hideDropdown"
-          @hide="hideDropdown"
-        >
-          <p class="gl-new-dropdown-header-top">
-            {{ __('Assign To') }}
-          </p>
-          <gl-search-box-by-type v-model.trim="search" :placeholder="__('Search users')" />
-          <div class="dropdown-content dropdown-body">
-            <template v-if="userListValid">
-              <gl-dropdown-item
-                :active="!userName"
-                active-class="is-active"
-                @click="updateAlertAssignees('')"
-              >
-                {{ __('Unassigned') }}
-              </gl-dropdown-item>
-              <gl-dropdown-divider />
-
-              <gl-dropdown-section-header>
-                {{ __('Assignee') }}
-              </gl-dropdown-section-header>
-              <sidebar-assignee
-                v-for="user in sortedUsers"
-                :key="user.username"
-                :user="user"
-                :active="user.active"
-                @update-alert-assignees="updateAlertAssignees"
-              />
-            </template>
-            <p v-else-if="userListEmpty" class="mx-3 my-2">
-              {{ __('No Matching Results') }}
-            </p>
-            <gl-loading-icon v-else />
-          </div>
-        </gl-dropdown>
-      </div>
+      <gl-dropdown
+        ref="dropdown"
+        :text="dropDownTitle"
+        class="gl-w-full"
+        :class="dropdownClass"
+        toggle-class="dropdown-menu-toggle"
+        @keydown.esc.native="hideDropdown"
+        @hide="hideDropdown"
+      >
+        <p class="gl-new-dropdown-header-top">
+          {{ __('Assign To') }}
+        </p>
+        <gl-search-box-by-type v-model.trim="search" :placeholder="__('Search users')" />
+        <div class="dropdown-content dropdown-body">
+          <template v-if="userListValid">
+            <gl-dropdown-item
+              :active="!userName"
+              active-class="is-active"
+              @click="updateAlertAssignees('')"
+            >
+              {{ __('Unassigned') }}
+            </gl-dropdown-item>
+            <gl-dropdown-divider />
 
-      <gl-loading-icon v-if="isUpdating" :inline="true" />
-      <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"
+            <gl-dropdown-section-header>
+              {{ __('Assignee') }}
+            </gl-dropdown-section-header>
+            <sidebar-assignee
+              v-for="user in sortedUsers"
+              :key="user.username"
+              :user="user"
+              :active="user.active"
+              @update-alert-assignees="updateAlertAssignees"
             />
-          </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>
+          </template>
+          <p v-else-if="userListEmpty" class="gl-mx-5 gl-my-4">
+            {{ __('No Matching Results') }}
+          </p>
+          <gl-loading-icon v-else />
         </div>
-        <span v-else class="gl-display-flex gl-align-items-center gl-line-height-normal">
-          {{ __('None') }} -
-          <gl-button
-            class="gl-ml-2"
-            href="#"
-            variant="link"
-            data-testid="unassigned-users"
-            @click="updateAlertAssignees(currentUser)"
-          >
-            {{ __('assign yourself') }}
-          </gl-button>
+      </gl-dropdown>
+    </div>
+
+    <gl-loading-icon v-if="isUpdating" :inline="true" />
+    <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 gl-mr-4">
+          <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-ml-2"
+          href="#"
+          variant="link"
+          data-testid="unassigned-users"
+          @click="updateAlertAssignees(currentUser)"
+        >
+          {{ __('assign yourself') }}
+        </gl-button>
+      </span>
     </div>
   </div>
 </template>

app/assets/stylesheets/page_bundles/alert_management_details.scss

@@ -17,22 +17,19 @@
     }
   }
 
-  .assignee-dropdown-item {
-    .dropdown-item {
-      @include gl-display-flex;
-      @include gl-align-items-center;
-
+  .dropdown-item {
+    &:first-child {
       &::before {
-        top: 50% !important;
+        @include gl-pt-0;
       }
+    }
 
-      &.is-active {
-        &:last-child {
-          @include gl-border-b-gray-100;
-          @include gl-border-b-1;
-          @include gl-border-b-solid;
-        }
-      }
+    &::before {
+      @include gl-pt-8;
+    }
+
+    .gl-new-dropdown-item-text-wrapper {
+      @include gl-py-0;
     }
   }
 

changelogs/unreleased/255171-dropdown-alerts-replacement.yml

+---
+title: Update alert details sidebar assignee dropdown to use correct styling and formatting
+merge_request: 48285
+author:
+type: fixed

spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js

@@ -179,7 +179,7 @@ describe('Alert Details Sidebar Assignees', () => {
         findAssigned()
           .find('.dropdown-menu-user-username')
           .text(),
-      ).toBe('root');
+      ).toBe('@root');
     });
   });
 });