Subscription Details: add Subscription Breakdown View

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

+<script>
+import { GlButton } from '@gitlab/ui';
+import {
+  licensedToHeaderText,
+  manageSubscriptionButtonText,
+  subscriptionDetailsHeaderText,
+  syncSubscriptionButtonText,
+} from '../constants';
+import SubscriptionDetailsCard from './subscription_details_card.vue';
+import SubscriptionDetailsHistory from './subscription_details_history.vue';
+import SubscriptionDetailsUserInfo from './subscription_details_user_info.vue';
+
+export const subscriptionDetailsFields = ['id', 'plan', 'lastSync', 'startsAt', 'renews'];
+export const licensedToFields = ['name', 'email', 'company'];
+
+export default {
+  i18n: {
+    licensedToHeaderText,
+    manageSubscriptionButtonText,
+    subscriptionDetailsHeaderText,
+    syncSubscriptionButtonText,
+  },
+  name: 'SubscriptionBreakdown',
+  components: {
+    SubscriptionDetailsHistory,
+    GlButton,
+    SubscriptionDetailsCard,
+    SubscriptionDetailsUserInfo,
+  },
+  props: {
+    subscription: {
+      type: Object,
+      required: true,
+    },
+    subscriptionList: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      subscriptionDetailsFields,
+      licensedToFields,
+    };
+  },
+  computed: {
+    hasSubscription() {
+      return Boolean(Object.keys(this.subscription).length);
+    },
+    hasSubscriptionHistory() {
+      return Boolean(this.subscriptionList.length);
+    },
+    canMangeSubscription() {
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <section class="row gl-mb-5">
+      <div class="col-md-6 gl-mb-5">
+        <subscription-details-card
+          :details-fields="subscriptionDetailsFields"
+          :header-text="$options.i18n.subscriptionDetailsHeaderText"
+          :subscription="subscription"
+        >
+          <template v-if="canMangeSubscription" #footer>
+            <gl-button category="primary" variant="confirm">
+              {{ $options.i18n.syncSubscriptionButtonText }}
+            </gl-button>
+            <gl-button>
+              {{ $options.i18n.manageSubscriptionButtonText }}
+            </gl-button>
+          </template>
+        </subscription-details-card>
+      </div>
+
+      <div class="col-md-6 gl-mb-5">
+        <subscription-details-card
+          :details-fields="licensedToFields"
+          :header-text="$options.i18n.licensedToHeaderText"
+          :subscription="subscription"
+        />
+      </div>
+    </section>
+    <subscription-details-user-info v-if="hasSubscription" :subscription="subscription" />
+    <subscription-details-history
+      v-if="hasSubscriptionHistory"
+      :current-subscription-id="subscription.id"
+      :subscription-list="subscriptionList"
+    />
+  </div>
+</template>

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

@@ -66,7 +66,9 @@ export default {
 <template>
   <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>
+      <p class="gl-font-weight-bold gl-text-gray-800" data-testid="details-label">
+        {{ item.label }}:
+      </p>
     </template>
 
     <template #cell(value)="{ item }">

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

+import { shallowMount } from '@vue/test-utils';
+import SubscriptionBreakdown, {
+  licensedToFields,
+  subscriptionDetailsFields,
+} from 'ee/pages/admin/cloud_licenses/components/subscription_breakdown.vue';
+import SubscriptionDetailsCard from 'ee/pages/admin/cloud_licenses/components/subscription_details_card.vue';
+import SubscriptionDetailsHistory from 'ee/pages/admin/cloud_licenses/components/subscription_details_history.vue';
+import SubscriptionDetailsUserInfo from 'ee/pages/admin/cloud_licenses/components/subscription_details_user_info.vue';
+import {
+  licensedToHeaderText,
+  subscriptionDetailsHeaderText,
+} from 'ee/pages/admin/cloud_licenses/constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { license, subscriptionHistory } from '../mock_data';
+
+describe('Subscription Breakdown', () => {
+  let wrapper;
+
+  const findDetailsCards = () => wrapper.findAllComponents(SubscriptionDetailsCard);
+  const findDetailsHistory = () => wrapper.findComponent(SubscriptionDetailsHistory);
+  const findDetailsUserInfo = () => wrapper.findComponent(SubscriptionDetailsUserInfo);
+
+  const createComponent = ({ props, stubs } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(SubscriptionBreakdown, {
+        propsData: {
+          subscription: license.ULTIMATE,
+          subscriptionList: subscriptionHistory,
+          ...props,
+        },
+        stubs,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with subscription data', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows 2 details card', () => {
+      expect(findDetailsCards()).toHaveLength(2);
+    });
+
+    it('provides the correct props to the cards', () => {
+      const props = findDetailsCards().wrappers.map((w) => w.props());
+
+      expect(props).toEqual([
+        {
+          detailsFields: subscriptionDetailsFields,
+          headerText: subscriptionDetailsHeaderText,
+          subscription: license.ULTIMATE,
+        },
+        {
+          detailsFields: licensedToFields,
+          headerText: licensedToHeaderText,
+          subscription: license.ULTIMATE,
+        },
+      ]);
+    });
+
+    it('shows the user info', () => {
+      expect(findDetailsUserInfo().exists()).toBe(true);
+    });
+
+    it('provides the correct props to the user info component', () => {
+      expect(findDetailsUserInfo().props('subscription')).toBe(license.ULTIMATE);
+    });
+
+    it.todo('shows a button to sync the subscription');
+
+    it.todo('shows a button to manage the subscription');
+  });
+
+  describe('with subscription history data', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows the subscription history', () => {
+      expect(findDetailsHistory().exists()).toBe(true);
+    });
+
+    it('provides the correct props to the subscription history component', () => {
+      expect(findDetailsHistory().props('currentSubscriptionId')).toBe(license.ULTIMATE.id);
+      expect(findDetailsHistory().props('subscriptionList')).toBe(subscriptionHistory);
+    });
+  });
+
+  describe('with empty data', () => {
+    it('does not show user info', () => {
+      createComponent({ props: { subscription: {} } });
+
+      expect(findDetailsUserInfo().exists()).toBe(false);
+    });
+
+    it('does not show subscription history', () => {
+      createComponent({ props: { subscriptionList: [] } });
+
+      expect(findDetailsHistory().exists()).toBe(false);
+    });
+  });
+});