diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-27 12:10:18 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-27 12:10:18 +0300 |
commit | 1e5ef4fb10af5ecf7eb7304077278b99dcba64dd (patch) | |
tree | bbfbec6456f904b82556ec999aba1bed5dc03043 /app/assets/javascripts/alert_management | |
parent | 2d075756cebf66d7dbf0a5fc7e709f87a8bbabc7 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/alert_management')
4 files changed, 77 insertions, 22 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_management_table.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue index 2dd6e9a13e4..0fd00fe90eb 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_table.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue @@ -4,6 +4,9 @@ import { GlLoadingIcon, GlTable, GlAlert, + GlAvatarsInline, + GlAvatarLink, + GlAvatar, GlIcon, GlLink, GlTabs, @@ -12,6 +15,7 @@ import { GlPagination, GlSearchBoxByType, GlSprintf, + GlTooltipDirective, } from '@gitlab/ui'; import { debounce, trim } from 'lodash'; import { __, s__ } from '~/locale'; @@ -57,6 +61,7 @@ export default { "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear.", ), searchPlaceholder: __('Search or filter results...'), + unassigned: __('Unassigned'), }, fields: [ { @@ -113,6 +118,9 @@ export default { GlLoadingIcon, GlTable, GlAlert, + GlAvatarsInline, + GlAvatarLink, + GlAvatar, TimeAgo, GlIcon, GlLink, @@ -124,6 +132,9 @@ export default { GlSprintf, AlertStatus, }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { projectPath: { type: String, @@ -267,11 +278,8 @@ export default { const { category, action, label } = trackAlertStatusUpdateOptions; Tracking.event(category, action, { label, property: status }); }, - getAssignees(assignees) { - // TODO: Update to show list of assignee(s) after https://gitlab.com/gitlab-org/gitlab/-/issues/218405 - return assignees.nodes?.length > 0 - ? assignees.nodes[0]?.username - : s__('AlertManagement|Unassigned'); + hasAssignees(assignees) { + return Boolean(assignees.nodes?.length); }, getIssueLink(item) { return joinPaths('/', this.projectPath, '-', 'issues', item.issueIid); @@ -418,8 +426,32 @@ export default { </template> <template #cell(assignees)="{ item }"> - <div class="gl-max-w-full text-truncate" data-testid="assigneesField"> - {{ getAssignees(item.assignees) }} + <div data-testid="assigneesField"> + <template v-if="hasAssignees(item.assignees)"> + <gl-avatars-inline + :avatars="item.assignees.nodes" + :collapsed="true" + :max-visible="4" + :avatar-size="24" + badge-tooltip-prop="name" + :badge-tooltip-max-chars="100" + > + <template #avatar="{ avatar }"> + <gl-avatar-link + :key="avatar.username" + v-gl-tooltip + target="_blank" + :href="avatar.webUrl" + :title="avatar.name" + > + <gl-avatar :src="avatar.avatarUrl" :label="avatar.name" :size="24" /> + </gl-avatar-link> + </template> + </gl-avatars-inline> + </template> + <template v-else> + {{ $options.i18n.unassigned }} + </template> </div> </template> 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..0c97d5b2754 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,7 +218,7 @@ 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" @@ -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> diff --git a/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql index c37f29c74fc..62119177887 100644 --- a/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql +++ b/app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql @@ -8,7 +8,10 @@ fragment AlertListItem on AlertManagementAlert { issueIid assignees { nodes { + name username + avatarUrl + webUrl } } } diff --git a/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql b/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql index 40b4b6ae854..5008bfa5e1b 100644 --- a/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql +++ b/app/assets/javascripts/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql @@ -10,6 +10,9 @@ mutation alertSetAssignees($projectPath: ID!, $assigneeUsernames: [String!]!, $i assignees { nodes { username + name + avatarUrl + webUrl } } notes { |