Commit d335be8a authored by Angelo Gulina's avatar Angelo Gulina Committed by Savas Vedova

Subscription Details: fix table styles and skeleton

parent 512a4bfc
......@@ -26,10 +26,6 @@ export default {
},
computed: {
details() {
if (!Object.keys(this.subscription).length) {
return [];
}
return this.detailsFields.map((detail) => ({
canCopy: detail === 'id',
label: detailsLabels[detail],
......
<script>
import { GlSkeletonLoader } from '@gitlab/ui';
import { GlSkeletonLoader, GlTable } from '@gitlab/ui';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import { copySubscriptionIdButtonText } from '../constants';
const placeholderHeightFactor = 32;
const placeholderWidth = 180;
const DEFAULT_TH_CLASSES = 'gl-display-none';
const DEFAULT_TD_CLASSES = 'gl-border-none! gl-h-7 gl-line-height-normal! gl-p-0!';
export default {
i18n: {
copySubscriptionIdButtonText,
},
fields: [
{
key: 'label',
label: '',
thClass: DEFAULT_TH_CLASSES,
tdClass: `${DEFAULT_TD_CLASSES} gl-w-13`,
},
{
key: 'value',
label: '',
thClass: DEFAULT_TH_CLASSES,
tdClass: DEFAULT_TD_CLASSES,
},
],
name: 'SubscriptionDetailsTable',
components: {
ClipboardButton,
GlSkeletonLoader,
GlTable,
},
props: {
details: {
......@@ -18,36 +38,65 @@ export default {
required: true,
},
},
computed: {
hasContent() {
return this.details.some(({ value }) => Boolean(value));
},
placeholderContainerHeight() {
return this.details.length * placeholderHeightFactor;
},
placeholderContainerWidth() {
return placeholderWidth;
},
placeHolderHeight() {
return placeholderHeightFactor / 2;
},
},
methods: {
isNotLast(index) {
return index < this.details.length - 1;
isLastRow(index) {
return index === this.details.length - 1;
},
placeHolderPosition(index) {
return (index - 1) * placeholderHeightFactor;
},
},
};
</script>
<template>
<div v-if="!details.length">
<gl-skeleton-loader :lines="1" />
<gl-skeleton-loader :lines="1" />
</div>
<ul v-else class="gl-list-style-none gl-m-0 gl-p-0">
<li
v-for="(detail, index) in details"
:key="detail.label"
:class="{ 'gl-mb-3': isNotLast(index) }"
class="gl-display-flex"
>
<p class="gl-font-weight-bold gl-m-0" data-testid="details-label">{{ detail.label }}:</p>
<p class="gl-m-0 gl-ml-4" data-testid="details-content">{{ detail.value }}</p>
<clipboard-button
v-if="detail.canCopy"
:text="detail.value"
:title="$options.i18n.copySubscriptionIdButtonText"
category="tertiary"
class="gl-ml-2"
size="small"
<gl-table v-if="hasContent" :fields="$options.fields" :items="details" class="gl-m-0!">
<template #cell(label)="{ item }">
<p class="gl-font-weight-bold" data-testid="details-label">{{ item.label }}:</p>
</template>
<template #cell(value)="{ item }">
<p class="gl-relative" data-testid="details-content">
{{ item.value }}
<clipboard-button
v-if="item.canCopy"
:text="item.value"
:title="$options.i18n.copySubscriptionIdButtonText"
category="tertiary"
class="gl-absolute gl-mt-n2 gl-ml-2"
size="small"
/>
</p>
</template>
</gl-table>
<div
v-else
:style="{ height: `${placeholderContainerHeight}px`, width: `${placeholderContainerWidth}px` }"
class="gl-pt-2"
>
<gl-skeleton-loader :height="placeholderContainerHeight" :width="placeholderContainerWidth">
<rect
v-for="index in details.length"
:key="index"
:height="placeHolderHeight"
:width="placeholderContainerWidth"
:y="placeHolderPosition(index)"
rx="8"
/>
</li>
</ul>
</gl-skeleton-loader>
</div>
</template>
......@@ -67,14 +67,6 @@ describe('Subscription Details Card', () => {
});
});
describe('with empty subscription', () => {
it('passes an empty array to the table component', () => {
createComponent({ subscription: {} });
expect(findSubscriptionDetailsTable().props('details')).toEqual([]);
});
});
describe('with no title', () => {
it('does not display a title', () => {
createComponent();
......
import { GlSkeletonLoader } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { mount } from '@vue/test-utils';
import SubscriptionDetailsTable from 'ee/pages/admin/cloud_licenses/components/subscription_details_table.vue';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
......@@ -22,11 +22,10 @@ describe('Subscription Details Table', () => {
const findContentCells = () => wrapper.findAllByTestId('details-content');
const findLabelCells = () => wrapper.findAllByTestId('details-label');
const findLastRow = () => wrapper.findAll('li').wrappers.slice(-1).pop();
const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
const createComponent = (details = licenseDetails) => {
wrapper = extendedWrapper(shallowMount(SubscriptionDetailsTable, { propsData: { details } }));
wrapper = extendedWrapper(mount(SubscriptionDetailsTable, { propsData: { details } }));
};
afterEach(() => {
......@@ -52,10 +51,6 @@ describe('Subscription Details Table', () => {
expect(findLabelCells().wrappers.every(hasFontWeightBold)).toBe(true);
});
it('does not add space to the last row', () => {
expect(findLastRow().classes('gl-mb-3')).toBe(false);
});
it('does not show a clipboard button', () => {
expect(findClipboardButton().exists()).toBe(false);
});
......
......@@ -5,6 +5,9 @@ export const license = {
lastSync: 'just now - actual date',
startsAt: '22 February',
renews: 'in 11 months',
name: 'Jane Doe',
email: 'user@acmecorp.com',
company: 'ACME Corp',
},
};
......
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