Merge branch 'ag-273028-subs-details-ui-fix' into 'master'

Subscription Details: fix table styles and skeleton

See merge request gitlab-org/gitlab!58375

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_details_card.vue

@@ -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],

ee/app/assets/javascripts/pages/admin/cloud_licenses/components/subscription_details_table.vue

 <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>
+  <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="detail.canCopy"
-        :text="detail.value"
+          v-if="item.canCopy"
+          :text="item.value"
           :title="$options.i18n.copySubscriptionIdButtonText"
           category="tertiary"
-        class="gl-ml-2"
+          class="gl-absolute gl-mt-n2 gl-ml-2"
           size="small"
         />
-    </li>
-  </ul>
+      </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"
+      />
+    </gl-skeleton-loader>
+  </div>
 </template>

ee/spec/frontend/admin/cloud_licenses/components/subscription_details_card_spec.js

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

ee/spec/frontend/admin/cloud_licenses/components/subscription_details_table_spec.js

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

ee/spec/frontend/admin/cloud_licenses/mock_data.js

@@ -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',
   },
 };