Skip to content

G
gitlab-ce
Commit fea3a2df authored by Alexander Turinske's avatar Alexander Turinske Committed by David O'Regan
Browse files
Options

Refactor alert details sidebar CSS 

- Remove/Override .right-sidebar influence
  - on alert sidebar assignees
  - on alert sidebar status
  - on alert sidebar todo
- update tests

Changelog: added
parent da05f79b
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 69 deletions
app/assets/javascripts/vue_shared/alert_details/components/alert_sidebar.vue
View file @ fea3a2df
......@@ -64,6 +64,7 @@ export default {
<sidebar-status
:project-path="projectPath"
:alert="alert"
:sidebar-collapsed="sidebarStatus"
@toggle-sidebar="$emit('toggle-sidebar')"
@alert-error="$emit('alert-error', $event)"
/>
......
app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
View file @ fea3a2df
......@@ -192,21 +192,38 @@ export default {
</script>
<template>
<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.assignees" boundary="viewport" placement="left">
<gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
<template #assignees>
{{ userName }}
</template>
</gl-sprintf>
</gl-tooltip>
<div
class="alert-assignees gl-py-5"
:class="{
'gl-border-b-1': !sidebarCollapsed,
'gl-border-b-solid': !sidebarCollapsed,
'gl-border-b-gray-100': !sidebarCollapsed,
}"
style="width: 70%"
>
<template v-if="sidebarCollapsed">
<div
ref="assignees"
class="gl-mb-6 gl-ml-6"
data-testid="assignees-icon"
@click="$emit('toggle-sidebar')"
>
<gl-icon name="user" />
<gl-loading-icon v-if="isUpdating" />
</div>
<gl-tooltip :target="() => $refs.assignees" boundary="viewport" placement="left">
<gl-sprintf :message="$options.i18n.ASSIGNEES_BLOCK">
<template #assignees>
{{ userName }}
</template>
</gl-sprintf>
</gl-tooltip>
</template>
<div class="hide-collapsed">
<p class="title gl-display-flex gl-justify-content-space-between">
<div v-else>
<p
class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
>
{{ __('Assignee') }}
<a
v-if="isEditable"
......
app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_header.vue
View file @ fea3a2df
......@@ -25,7 +25,7 @@ export default {
</script>
<template>
<div class="block gl-display-flex gl-justify-content-space-between">
<div class="block gl-display-flex gl-justify-content-space-between gl-border-b-gray-100!">
<span class="issuable-header-text hide-collapsed">
{{ __('To Do') }}
</span>
......
app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
View file @ fea3a2df
......@@ -30,6 +30,10 @@ export default {
required: false,
default: true,
},
sidebarCollapsed: {
type: Boolean,
required: false,
},
},
data() {
return {
......@@ -61,21 +65,33 @@ export default {
</script>
<template>
<div class="block alert-status">
<div ref="status" class="sidebar-collapsed-icon" @click="$emit('toggle-sidebar')">
<gl-icon name="status" :size="14" />
<gl-loading-icon v-if="isUpdating" />
</div>
<gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
<gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')">
<template #status>
{{ alert.status.toLowerCase() }}
</template>
</gl-sprintf>
</gl-tooltip>
<div
class="alert-status gl-py-5"
:class="{
'gl-border-b-1': !sidebarCollapsed,
'gl-border-b-solid': !sidebarCollapsed,
'gl-border-b-gray-100': !sidebarCollapsed,
}"
style="width: 70%"
>
<template v-if="sidebarCollapsed">
<div ref="status" class="gl-ml-6" data-testid="status-icon" @click="$emit('toggle-sidebar')">
<gl-icon name="status" />
<gl-loading-icon v-if="isUpdating" />
</div>
<gl-tooltip :target="() => $refs.status" boundary="viewport" placement="left">
<gl-sprintf :message="s__('AlertManagement|Alert status: %{status}')">
<template #status>
{{ alert.status.toLowerCase() }}
</template>
</gl-sprintf>
</gl-tooltip>
</template>
<div class="hide-collapsed">
<p class="title gl-display-flex justify-content-between">
<div v-else>
<p
class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
>
{{ s__('AlertManagement|Status') }}
<a
v-if="isEditable"
......
app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue
View file @ fea3a2df
......@@ -134,7 +134,12 @@ export default {
</script>
<template>
<div :class="{ 'block todo': sidebarCollapsed, 'gl-ml-auto': !sidebarCollapsed }">
<div
:class="{
'block todo': sidebarCollapsed,
'gl-ml-auto': !sidebarCollapsed,
}"
>
<todo
data-testid="alert-todo-button"
:collapsed="sidebarCollapsed"
......
ee/changelogs/unreleased/287755-make-alert-details-sidebar-components-reuseable.yml 0 → 100644
View file @ fea3a2df
---
title: Refactor alert details sidebar CSS
merge_request: 60960
author:
type: other
spec/frontend/vue_shared/alert_details/sidebar/alert_managment_sidebar_assignees_spec.js → spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_assignees_spec.js
View file @ fea3a2df
import { GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import SidebarAssignee from '~/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue';
import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
import AlertSetAssignees from '~/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql';
......@@ -13,6 +13,27 @@ describe('Alert Details Sidebar Assignees', () => {
let wrapper;
let mock;
const mockPath = '/-/autocomplete/users.json';
const mockUsers = [
{
avatar_url:
'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
id: 1,
name: 'User 1',
username: 'root',
},
{
avatar_url:
'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
id: 2,
name: 'User 2',
username: 'not-root',
},
];
const findDropdown = () => wrapper.findComponent(GlDropdownItem);
const findSidebarIcon = () => wrapper.findByTestId('assignees-icon');
function mountComponent({
data,
users = [],
......@@ -21,7 +42,7 @@ describe('Alert Details Sidebar Assignees', () => {
loading = false,
stubs = {},
} = {}) {
wrapper = shallowMount(SidebarAssignees, {
wrapper = shallowMountExtended(SidebarAssignees, {
data() {
return {
users,
......@@ -59,7 +80,7 @@ describe('Alert Details Sidebar Assignees', () => {
const findAssigned = () => wrapper.find('[data-testid="assigned-users"]');
const findUnassigned = () => wrapper.find('[data-testid="unassigned-users"]');
describe('updating the alert status', () => {
describe('sidebar expanded', () => {
const mockUpdatedMutationResult = {
data: {
alertSetAssignees: {
......@@ -73,30 +94,13 @@ describe('Alert Details Sidebar Assignees', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
const path = '/-/autocomplete/users.json';
const users = [
{
avatar_url:
'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
id: 1,
name: 'User 1',
username: 'root',
},
{
avatar_url:
'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
id: 2,
name: 'User 2',
username: 'not-root',
},
];
mock.onGet(path).replyOnce(200, users);
mock.onGet(mockPath).replyOnce(200, mockUsers);
mountComponent({
data: { alert: mockAlert },
sidebarCollapsed: false,
loading: false,
users,
users: mockUsers,
stubs: {
SidebarAssignee,
},
......@@ -106,7 +110,11 @@ describe('Alert Details Sidebar Assignees', () => {
it('renders a unassigned option', async () => {
wrapper.setData({ isDropdownSearching: false });
await wrapper.vm.$nextTick();
expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned');
expect(findDropdown().text()).toBe('Unassigned');
});
it('does not display the collapsed sidebar icon', () => {
expect(findSidebarIcon().exists()).toBe(false);
});
it('calls `$apollo.mutate` with `AlertSetAssignees` mutation and variables containing `iid`, `assigneeUsernames`, & `projectPath`', async () => {
......@@ -170,4 +178,28 @@ describe('Alert Details Sidebar Assignees', () => {
expect(findAssigned().find('.dropdown-menu-user-username').text()).toBe('@root');
});
});
describe('sidebar collapsed', () => {
beforeEach(() => {
mock = new MockAdapter(axios);
mock.onGet(mockPath).replyOnce(200, mockUsers);
mountComponent({
data: { alert: mockAlert },
loading: false,
users: mockUsers,
stubs: {
SidebarAssignee,
},
});
});
it('does not display the status dropdown', () => {
expect(findDropdown().exists()).toBe(false);
});
it('does display the collapsed sidebar icon', () => {
expect(findSidebarIcon().exists()).toBe(true);
});
});
});
spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js
View file @ fea3a2df
import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
......@@ -13,9 +13,10 @@ describe('Alert Details Sidebar Status', () => {
const findStatusDropdown = () => wrapper.find(GlDropdown);
const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findStatusDropdownHeader = () => wrapper.find('[data-testid="dropdown-header"]');
const findStatusDropdownHeader = () => wrapper.findByTestId('dropdown-header');
const findAlertStatus = () => wrapper.findComponent(AlertStatus);
const findStatus = () => wrapper.find('[data-testid="status"]');
const findStatus = () => wrapper.findByTestId('status');
const findSidebarIcon = () => wrapper.findByTestId('status-icon');
function mountComponent({
data,
......@@ -24,7 +25,7 @@ describe('Alert Details Sidebar Status', () => {
stubs = {},
provide = {},
} = {}) {
wrapper = mount(AlertSidebarStatus, {
wrapper = mountExtended(AlertSidebarStatus, {
propsData: {
alert: { ...mockAlert },
...data,
......@@ -52,7 +53,7 @@ describe('Alert Details Sidebar Status', () => {
}
});
describe('Alert Sidebar Dropdown Status', () => {
describe('sidebar expanded', () => {
beforeEach(() => {
mountComponent({
data: { alert: mockAlert },
......@@ -69,6 +70,10 @@ describe('Alert Details Sidebar Status', () => {
expect(findStatusDropdownHeader().exists()).toBe(true);
});
it('does not display the collapsed sidebar icon', () => {
expect(findSidebarIcon().exists()).toBe(false);
});
describe('updating the alert status', () => {
const mockUpdatedMutationResult = {
data: {
......@@ -109,22 +114,40 @@ describe('Alert Details Sidebar Status', () => {
expect(findStatusLoadingIcon().exists()).toBe(false);
expect(findStatus().text()).toBe('Triggered');
});
it('renders default translated statuses', () => {
mountComponent({ sidebarCollapsed: false });
expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
expect(findStatus().text()).toBe('Triggered');
});
it('renders translated statuses', () => {
const status = 'TEST';
const statuses = { [status]: 'Test' };
mountComponent({
data: { alert: { ...mockAlert, status } },
provide: { statuses },
sidebarCollapsed: false,
});
expect(findAlertStatus().props('statuses')).toBe(statuses);
expect(findStatus().text()).toBe(statuses.TEST);
});
});
});
describe('Statuses', () => {
it('renders default translated statuses', () => {
mountComponent({});
expect(findAlertStatus().props('statuses')).toBe(PAGE_CONFIG.OPERATIONS.STATUSES);
expect(findStatus().text()).toBe('Triggered');
describe('sidebar collapsed', () => {
beforeEach(() => {
mountComponent({
data: { alert: mockAlert },
loading: false,
});
});
it('does not display the status dropdown', () => {
expect(findStatusDropdown().exists()).toBe(false);
});
it('renders translated statuses', () => {
const status = 'TEST';
const statuses = { [status]: 'Test' };
mountComponent({ data: { alert: { ...mockAlert, status } }, provide: { statuses } });
expect(findAlertStatus().props('statuses')).toBe(statuses);
expect(findStatus().text()).toBe(statuses.TEST);
it('does display the collapsed sidebar icon', () => {
expect(findSidebarIcon().exists()).toBe(true);
});
});
});
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