Commit 8c4cfca3 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch '276095-ui-updates' into 'master'

Oncall schedule collapse UI

See merge request gitlab-org/gitlab!62966
parents e7a3e0f0 622fca45
......@@ -4,6 +4,7 @@ import {
GlButtonGroup,
GlCard,
GlCollapse,
GlIcon,
GlModalDirective,
GlTooltipDirective,
} from '@gitlab/ui';
......@@ -63,6 +64,7 @@ export default {
GlButtonGroup,
GlCard,
GlCollapse,
GlIcon,
AddEditRotationModal,
DeleteRotationModal,
DeleteScheduleModal,
......@@ -177,7 +179,7 @@ export default {
: this.$options.i18n.scheduleClose;
},
scheduleVisibleAngleIcon() {
return this.scheduleVisible ? 'angle-up' : 'angle-down';
return this.scheduleVisible ? 'angle-down' : 'angle-right';
},
selectedTimezone() {
return this.timezones.find((tz) => tz.identifier === this.schedule.timezone);
......@@ -231,13 +233,28 @@ export default {
<template>
<div>
<gl-card class="gl-mt-5" header-class="gl-py-3">
<gl-card
class="gl-mt-5"
:class="{ 'gl-border-bottom-0': !scheduleVisible }"
:body-class="{ 'gl-p-0': !scheduleVisible }"
header-class="gl-py-3"
>
<template #header>
<div
class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-m-0"
data-testid="scheduleHeader"
>
<span class="gl-font-weight-bold gl-font-lg">{{ schedule.name }}</span>
<div class="gl-font-weight-bold gl-font-lg">
<gl-icon
v-gl-tooltip
class="gl-hover-cursor-pointer"
:aria-label="scheduleVisibleAriaLabel"
:size="12"
:name="scheduleVisibleAngleIcon"
@click="scheduleVisible = !scheduleVisible"
/>
<span class="gl-pl-2">{{ schedule.name }}</span>
</div>
<gl-button-group>
<gl-button
v-gl-modal="editScheduleModalId"
......@@ -253,12 +270,6 @@ export default {
icon="remove"
:aria-label="$options.i18n.deleteScheduleLabel"
/>
<gl-button
v-gl-tooltip
:icon="scheduleVisibleAngleIcon"
:aria-label="scheduleVisibleAriaLabel"
@click="scheduleVisible = !scheduleVisible"
/>
</gl-button-group>
</div>
</template>
......
import { GlButton, GlCard, GlCollapse } from '@gitlab/ui';
import { GlButton, GlCard, GlIcon, GlCollapse } from '@gitlab/ui';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
......@@ -104,6 +104,7 @@ describe('On-call schedule', () => {
const findLoadPreviousTimeframeBtn = () => wrapper.findByTestId('previous-timeframe-btn');
const findLoadNextTimeframeBtn = () => wrapper.findByTestId('next-timeframe-btn');
const findCollapsible = () => wrapper.findComponent(GlCollapse);
const findCollapsibleIcon = () => wrapper.findComponent(GlIcon);
it('shows schedule title', () => {
expect(findScheduleHeader().text()).toBe(mockSchedule.name);
......@@ -160,11 +161,13 @@ describe('On-call schedule', () => {
it('renders a open card for the first in the list by default', () => {
expect(findCollapsible().attributes('visible')).toBe('true');
expect(findCollapsibleIcon().props('name')).toBe('angle-down');
});
it('renders a collapsed card if not the first in the list by default', () => {
createComponent({ scheduleIndex: 1 });
expect(findCollapsible().attributes('visible')).toBeUndefined();
expect(findCollapsibleIcon().props('name')).toBe('angle-right');
});
describe('Timeframe shift preset type', () => {
......
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