Merge branch...

Merge branch '341171-mlunoe-subscription-history-table-move-email-and-company-to-tooltip' into 'master'

Feat(SM Subscription History): trim table size

See merge request gitlab-org/gitlab!78183

ee/app/assets/javascripts/admin/subscriptions/show/components/subscription_details_history.vue

 <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>

ee/spec/frontend/admin/subscriptions/show/components/subscription_details_history_spec.js

-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);