Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
908dc8d9
Commit
908dc8d9
authored
Nov 24, 2020
by
David O'Regan
Committed by
Olena Horal-Koretska
Nov 24, 2020
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Fix alert details sidebar assignee CSS
parent
ac4588fe
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
93 additions
and
102 deletions
+93
-102
app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
.../alert_management/components/sidebar/sidebar_assignee.vue
+3
-16
app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
...alert_management/components/sidebar/sidebar_assignees.vue
+74
-72
app/assets/stylesheets/page_bundles/alert_management_details.scss
...ts/stylesheets/page_bundles/alert_management_details.scss
+10
-13
changelogs/unreleased/255171-dropdown-alerts-replacement.yml
changelogs/unreleased/255171-dropdown-alerts-replacement.yml
+5
-0
spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
...ponents/sidebar/alert_managment_sidebar_assignees_spec.js
+1
-1
No files found.
app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
View file @
908dc8d9
...
...
@@ -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 @
908dc8d9
...
...
@@ -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 @
908dc8d9
...
...
@@ -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 @
908dc8d9
---
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 @
908dc8d9
...
...
@@ -179,7 +179,7 @@ describe('Alert Details Sidebar Assignees', () => {
findAssigned
()
.
find
(
'
.dropdown-menu-user-username
'
)
.
text
(),
).
toBe
(
'
root
'
);
).
toBe
(
'
@
root
'
);
});
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment