Commit c62a5ad2 authored by Andrew Fontaine's avatar Andrew Fontaine Committed by David O'Regan

Add button to toggle deployment details

This button will toggle the display of additional details, such as the
user who triggered the deployment, the job, and the git ref.
parent fdbca440
<script>
import { GlBadge, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
import { GlBadge, GlButton, GlCollapse, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
import { __, s__ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
......@@ -10,6 +11,8 @@ export default {
ClipboardButton,
DeploymentStatusBadge,
GlBadge,
GlButton,
GlCollapse,
GlIcon,
TimeAgoTooltip,
},
......@@ -27,6 +30,9 @@ export default {
required: false,
},
},
data() {
return { visible: false };
},
computed: {
status() {
return this.deployment?.status;
......@@ -40,19 +46,66 @@ export default {
createdAt() {
return this.deployment?.createdAt;
},
isMobile() {
return !GlBreakpointInstance.isDesktop();
},
detailsButton() {
return this.visible
? { text: this.$options.i18n.hideDetails, icon: 'expand-up' }
: { text: this.$options.i18n.showDetails, icon: 'expand-down' };
},
detailsButtonClasses() {
return this.isMobile ? 'gl-sr-only' : '';
},
},
methods: {
toggleCollapse() {
this.visible = !this.visible;
},
},
i18n: {
latestBadge: s__('Deployment|Latest Deployed'),
deploymentId: s__('Deployment|Deployment ID'),
copyButton: __('Copy commit SHA'),
commitSha: __('Commit SHA'),
showDetails: __('Show details'),
hideDetails: __('Hide details'),
},
headerClasses: [
'gl-display-flex',
'gl-align-items-flex-start',
'gl-md-align-items-center',
'gl-justify-content-space-between',
'gl-pr-6',
],
headerDetailsClasses: [
'gl-display-flex',
'gl-flex-direction-column',
'gl-md-flex-direction-row',
'gl-align-items-flex-start',
'gl-md-align-items-center',
'gl-font-sm',
'gl-text-gray-700',
],
deploymentStatusClasses: [
'gl-display-flex',
'gl-gap-x-3',
'gl-mr-0',
'gl-md-mr-5',
'gl-mb-3',
'gl-md-mb-0',
],
};
</script>
<template>
<div class="gl-display-flex gl-align-items-center gl-gap-x-3 gl-font-sm gl-text-gray-700">
<div>
<div :class="$options.headerClasses">
<div :class="$options.headerDetailsClasses">
<div :class="$options.deploymentStatusClasses">
<deployment-status-badge v-if="status" :status="status" />
<gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
</div>
<div class="gl-display-flex gl-align-items-center gl-gap-x-5">
<div
v-if="iid"
v-gl-tooltip
......@@ -74,9 +127,22 @@ export default {
:title="$options.i18n.copyButton"
size="small"
/>
<time-ago-tooltip v-if="createdAt" :time="createdAt" class="gl-ml-5!">
</div>
<time-ago-tooltip v-if="createdAt" :time="createdAt">
<template #default="{ timeAgo }"> <gl-icon name="calendar" /> {{ timeAgo }} </template>
</time-ago-tooltip>
</div>
</div>
<gl-button
ref="details-toggle"
category="tertiary"
:icon="detailsButton.icon"
:button-text-classes="detailsButtonClasses"
@click="toggleCollapse"
>
{{ detailsButton.text }}
</gl-button>
</div>
<gl-collapse :visible="visible" />
</div>
</template>
import { GlCollapse } from '@gitlab/ui';
import { mountExtended } from 'helpers/vue_test_utils_helper';
import { __, s__ } from '~/locale';
import { formatDate } from '~/lib/utils/datetime_utility';
import { useFakeDate } from 'helpers/fake_date';
import { stubTransition } from 'helpers/stub_transition';
import { formatDate } from '~/lib/utils/datetime_utility';
import { __, s__ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Deployment from '~/environments/components/deployment.vue';
import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
......@@ -19,6 +21,7 @@ describe('~/environments/components/deployment.vue', () => {
deployment,
...propsData,
},
stubs: { transition: stubTransition() },
});
afterEach(() => {
......@@ -148,4 +151,29 @@ describe('~/environments/components/deployment.vue', () => {
});
});
});
describe('collapse', () => {
let collapse;
let button;
beforeEach(() => {
wrapper = createWrapper();
collapse = wrapper.findComponent(GlCollapse);
button = wrapper.findComponent({ ref: 'details-toggle' });
});
it('is collapsed by default', () => {
expect(collapse.attributes('visible')).toBeUndefined();
expect(button.props('icon')).toBe('expand-down');
expect(button.text()).toBe(__('Show details'));
});
it('opens on click', async () => {
await button.trigger('click');
expect(button.text()).toBe(__('Hide details'));
expect(button.props('icon')).toBe('expand-up');
expect(collapse.attributes('visible')).toBe('visible');
});
});
});
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