diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue')
-rw-r--r-- | app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue | 53 |
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> |