Skip to content

G
gitlab-ce
Commit 6ff76f6a authored by Olena Horal-Koretska's avatar Olena Horal-Koretska
Browse files
Options

Merge branch '255171-dropdown-alerts-replacement' into 'master' 

Fix alert details sidebar assignee CSS

See merge request gitlab-org/gitlab!48285
parents a67ac807 908dc8d9
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 102 deletions
app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
View file @ 6ff76f6a
......@@ -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
View file @ 6ff76f6a
......@@ -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
View file @ 6ff76f6a
......@@ -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 0 → 100644
View file @ 6ff76f6a
---
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
View file @ 6ff76f6a
......@@ -179,7 +179,7 @@ describe('Alert Details Sidebar Assignees', () => {
findAssigned()
.find('.dropdown-menu-user-username')
.text(),
).toBe('root');
).toBe('@root');
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7