Commit 1f43ddd6 authored by Michael Lunøe's avatar Michael Lunøe Committed by Enrique Alcántara

Feat(SM Subscription History): trim table size

Move email + company to tooltip on info icon in
the name field to make more space in the table
for easier overview

Changelog: added
EE: true
parent dbf2aac0
<script>
import { GlBadge, GlTableLite } from '@gitlab/ui';
import { GlTooltip, GlTooltipDirective, GlIcon, GlBadge, GlTableLite } from '@gitlab/ui';
import { kebabCase } from 'lodash';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import {
......@@ -21,12 +21,18 @@ const thClass = [DEFAULT_BORDER_CLASSES, DEFAULT_TH_CLASSES];
export default {
i18n: {
subscriptionHistoryTitle: subscriptionTable.title,
detailsLabels,
},
name: 'SubscriptionDetailsHistory',
components: {
GlBadge,
GlIcon,
GlTooltip,
GlTableLite,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
currentSubscriptionId: {
type: String,
......@@ -48,20 +54,6 @@ export default {
tdClass: this.cellClass,
thClass,
},
{
key: 'email',
label: detailsLabels.email,
tdAttr,
tdClass: this.cellClass,
thClass,
},
{
key: 'company',
label: detailsLabels.company,
tdAttr,
tdClass: this.cellClass,
thClass,
},
{
key: 'plan',
formatter: (v, k, item) => capitalizeFirstCharacter(item.plan),
......@@ -146,6 +138,20 @@ export default {
stacked="sm"
data-qa-selector="subscription_history"
>
<template #cell(name)="{ item }">
<span>
<gl-icon :id="`tooltip-name-${item.id}`" v-gl-tooltip name="information-o" tabindex="0" />
<gl-tooltip :target="`tooltip-name-${item.id}`">
{{ item.email }}<br />({{ item.company }})
</gl-tooltip>
{{ item.name }}
<span class="sr-only" data-testid="subscription-history-sr-only">
{{ $options.i18n.detailsLabels.email }}: {{ item.email }}<br />({{
$options.i18n.detailsLabels.company
}}: {{ item.company }})
</span>
</span>
</template>
<template #cell(type)="{ value }">
<gl-badge size="md" variant="info">{{ value }}</gl-badge>
</template>
......
import { GlBadge } from '@gitlab/ui';
import { GlBadge, GlIcon, GlTooltip } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import SubscriptionDetailsHistory from 'ee/admin/subscriptions/show/components/subscription_details_history.vue';
import { cloudLicenseText } from 'ee/admin/subscriptions/show/constants';
import { detailsLabels, cloudLicenseText } from 'ee/admin/subscriptions/show/constants';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { license, subscriptionHistory } from '../mock_data';
......@@ -12,6 +12,8 @@ describe('Subscription Details History', () => {
const findTableRows = () => wrapper.findAllByTestId('subscription-history-row');
const cellFinder = (row) => (testId) => extendedWrapper(row).findByTestId(testId);
const containsABadge = (row) => row.findComponent(GlBadge).exists();
const containsATooltip = (row) => row.findComponent(GlTooltip).exists();
const findIcon = (row) => row.findComponent(GlIcon);
const createComponent = (props) => {
wrapper = extendedWrapper(
......@@ -51,6 +53,18 @@ describe('Subscription Details History', () => {
expect(findTableRows().wrappers.every(containsABadge)).toBe(true);
});
it('has a tooltip to display company and email fields', () => {
expect(findTableRows().wrappers.every(containsATooltip)).toBe(true);
});
it('has an information icon with tabindex', () => {
findTableRows().wrappers.forEach((row) => {
const icon = findIcon(row);
expect(icon.props('name')).toBe('information-o');
expect(icon.attributes('tabindex')).toBe('0');
});
});
it('highlights the current subscription row', () => {
expect(findCurrentRow().classes('gl-text-blue-500')).toBe(true);
});
......@@ -69,9 +83,6 @@ describe('Subscription Details History', () => {
it.each`
testId | key
${'name'} | ${'name'}
${'email'} | ${'email'}
${'company'} | ${'company'}
${'starts-at'} | ${'startsAt'}
${'starts-at'} | ${'startsAt'}
${'expires-at'} | ${'expiresAt'}
......@@ -81,6 +92,22 @@ describe('Subscription Details History', () => {
expect(findCellByTestid(cellTestId).text()).toBe(subscriptionHistory[0][key]);
});
it('displays the name field with tooltip', () => {
const cellTestId = 'subscription-cell-name';
const text = findCellByTestid(cellTestId).text();
expect(text).toContain(subscriptionHistory[0].name);
expect(text).toContain(`(${subscriptionHistory[0].company})`);
expect(text).toContain(subscriptionHistory[0].email);
});
it('displays sr-only element for screen readers', () => {
const testId = 'subscription-history-sr-only';
const text = findCellByTestid(testId).text();
expect(text).not.toContain(subscriptionHistory[0].name);
expect(text).toContain(`(${detailsLabels.company}: ${subscriptionHistory[0].company})`);
expect(text).toContain(`${detailsLabels.email}: ${subscriptionHistory[0].email}`);
});
it('displays the correct value for the type cell', () => {
const cellTestId = `subscription-cell-type`;
expect(findCellByTestid(cellTestId).text()).toBe(cloudLicenseText);
......
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