Subscription Details: User info

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

+<script>
+import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import {
+  billableUsersText,
+  billableUsersTitle,
+  maximumUsersText,
+  maximumUsersTitle,
+  usersInSubscriptionText,
+  usersInSubscriptionTitle,
+  usersOverSubscriptionText,
+  usersOverSubscriptionTitle,
+} from '../constants';
+
+export const billableUsersURL = helpPagePath('subscriptions/self_managed/index');
+export const trueUpURL = 'https://about.gitlab.com/license-faq/';
+
+export default {
+  i18n: {
+    billableUsersTitle,
+    maximumUsersTitle,
+    usersInSubscriptionTitle,
+    usersOverSubscriptionTitle,
+    billableUsersText,
+    maximumUsersText,
+    usersInSubscriptionText,
+    usersOverSubscriptionText,
+  },
+  links: {
+    billableUsersURL,
+    trueUpURL,
+  },
+  name: 'SubscriptionDetailsUserInfo',
+  components: {
+    GlCard,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    subscription: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    usersInSubscription() {
+      return this.subscription.usersInLicense;
+    },
+    billableUsers() {
+      return this.subscription.billableUsers;
+    },
+    maximumUsers() {
+      return this.subscription.maximumUsers;
+    },
+    usersOverSubscription() {
+      return this.subscription.usersOverSubscription;
+    },
+  },
+};
+</script>
+
+<template>
+  <section class="row">
+    <div class="col-md-6 gl-mb-5">
+      <gl-card data-testid="users-in-license">
+        <header>
+          <h2>{{ usersInSubscription }}</h2>
+          <h5 class="gl-font-weight-normal text-uppercase">
+            {{ $options.i18n.usersInSubscriptionTitle }}
+          </h5>
+        </header>
+        <p>
+          {{ $options.i18n.usersInSubscriptionText }}
+        </p>
+      </gl-card>
+    </div>
+
+    <div class="col-md-6 gl-mb-5">
+      <gl-card data-testid="billable-users">
+        <header>
+          <h2>{{ billableUsers }}</h2>
+          <h5 class="gl-font-weight-normal text-uppercase">
+            {{ $options.i18n.billableUsersTitle }}
+          </h5>
+        </header>
+        <p>
+          <gl-sprintf :message="$options.i18n.billableUsersText">
+            <template #billableUsersLink="{ content }">
+              <gl-link :href="$options.links.billableUsersURL" target="_blank"
+                >{{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </gl-card>
+    </div>
+
+    <div class="col-md-6 gl-mb-5">
+      <gl-card data-testid="maximum-users">
+        <header>
+          <h2>{{ maximumUsers }}</h2>
+          <h5 class="gl-font-weight-normal text-uppercase">
+            {{ $options.i18n.maximumUsersTitle }}
+          </h5>
+        </header>
+        <p>
+          {{ $options.i18n.maximumUsersText }}
+        </p>
+      </gl-card>
+    </div>
+
+    <div class="col-md-6 gl-mb-5">
+      <gl-card data-testid="users-over-subscription">
+        <header>
+          <h2>{{ usersOverSubscription }}</h2>
+          <h5 class="gl-font-weight-normal text-uppercase">
+            {{ $options.i18n.usersOverSubscriptionTitle }}
+          </h5>
+        </header>
+        <p>
+          <gl-sprintf :message="$options.i18n.usersOverSubscriptionText">
+            <template #trueUpLink="{ content }">
+              <gl-link :href="$options.links.trueUpURL">{{ content }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </gl-card>
+    </div>
+  </section>
+</template>

ee/app/assets/javascripts/pages/admin/cloud_licenses/constants.js

@@ -16,3 +16,20 @@ export const detailsLabels = {
   startsAt: s__('CloudLicense|Started'),
   renews: s__('CloudLicense|Renews'),
 };
+
+export const billableUsersTitle = s__('CloudLicense|Billable users');
+export const maximumUsersTitle = s__('CloudLicense|Maximum users');
+export const usersInSubscriptionTitle = s__('CloudLicense|Users in subscription');
+export const usersOverSubscriptionTitle = s__('CloudLicense|Users over subscription');
+export const billableUsersText = s__(
+  'CloudLicense|This is the number of %{billableUsersLinkStart}billable users%{billableUsersLinkEnd} on your installation, and this is the minimum number you need to purchase when you renew your license.',
+);
+export const maximumUsersText = s__(
+  'CloudLicense|This is the highest peak of users on your installation since the license started.',
+);
+export const usersInSubscriptionText = s__(
+  `CloudLicense|Users with a Guest role or those who don't belong to a Project or Group will not use a seat from your license.`,
+);
+export const usersOverSubscriptionText = s__(
+  `CloudLicense|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement.`,
+);

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

+import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SubscriptionDetailsUserInfo, {
+  billableUsersURL,
+  trueUpURL,
+} from 'ee/pages/admin/cloud_licenses/components/subscription_details_user_info.vue';
+import {
+  billableUsersText,
+  billableUsersTitle,
+  maximumUsersText,
+  maximumUsersTitle,
+  usersInSubscriptionText,
+  usersInSubscriptionTitle,
+  usersOverSubscriptionText,
+  usersOverSubscriptionTitle,
+} from 'ee/pages/admin/cloud_licenses/constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { license } from '../mock_data';
+
+describe('Subscription Details Card', () => {
+  let wrapper;
+
+  const itif = (condition) => (condition ? it : it.skip);
+
+  const createComponent = (props = {}, stubGlSprintf = false) => {
+    wrapper = extendedWrapper(
+      shallowMount(SubscriptionDetailsUserInfo, {
+        propsData: {
+          subscription: license.ULTIMATE,
+          ...props,
+        },
+        stubs: {
+          GlCard,
+          GlSprintf: stubGlSprintf ? GlSprintf : true,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each`
+    testId                       | info    | title                         | text                         | link
+    ${'users-in-license'}        | ${'10'} | ${usersInSubscriptionTitle}   | ${usersInSubscriptionText}   | ${false}
+    ${'billable-users'}          | ${'8'}  | ${billableUsersTitle}         | ${billableUsersText}         | ${billableUsersURL}
+    ${'maximum-users'}           | ${'8'}  | ${maximumUsersTitle}          | ${maximumUsersText}          | ${false}
+    ${'users-over-subscription'} | ${'0'}  | ${usersOverSubscriptionTitle} | ${usersOverSubscriptionText} | ${trueUpURL}
+  `('with data for $card', ({ testId, info, title, text, link }) => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    const findUseCard = () => wrapper.findByTestId(testId);
+
+    it(`displays the info`, () => {
+      expect(findUseCard().find('h2').text()).toBe(info);
+    });
+
+    it(`displays the title`, () => {
+      expect(findUseCard().find('h5').text()).toBe(title);
+    });
+
+    itif(link)(`displays the content with a link`, () => {
+      expect(findUseCard().findComponent(GlSprintf).attributes('message')).toBe(text);
+    });
+
+    itif(!link)('displays a simple content', () => {
+      expect(findUseCard().find('p').text()).toBe(text);
+    });
+
+    itif(link)(`has a link`, () => {
+      createComponent({}, true);
+      expect(findUseCard().findComponent(GlLink).attributes('href')).toBe(link);
+    });
+
+    itif(!link)(`has not a link`, () => {
+      createComponent({}, true);
+      expect(findUseCard().findComponent(GlLink).exists()).toBe(link);
+    });
+  });
+});

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

 export const license = {
   ULTIMATE: {
+    billableUsers: '8',
+    company: 'ACME Corp',
+    email: 'user@acmecorp.com',
     id: '1309188',
-    plan: 'Ultimate',
     lastSync: 'just now - actual date',
+    maximumUsers: '8',
+    name: 'Jane Doe',
+    plan: 'Ultimate',
     startsAt: '22 February',
     renews: 'in 11 months',
-    name: 'Jane Doe',
-    email: 'user@acmecorp.com',
-    company: 'ACME Corp',
+    usersInLicense: '10',
+    usersOverSubscription: '0',
   },
 };
 

locale/gitlab.pot

@@ -6450,6 +6450,9 @@ msgstr ""
 msgid "CloudLicense|Activation code"
 msgstr ""
 
+msgid "CloudLicense|Billable users"
+msgstr ""
+
 msgid "CloudLicense|I agree that my use of the GitLab Software is subject to the Subscription Agreement located at the %{linkStart}Terms of Service%{linkEnd}, unless otherwise agreed to in writing with GitLab."
 msgstr ""
 
@@ -6468,6 +6471,9 @@ msgstr ""
 msgid "CloudLicense|Manage"
 msgstr ""
 
+msgid "CloudLicense|Maximum users"
+msgstr ""
+
 msgid "CloudLicense|Paste your activation code"
 msgstr ""
 
@@ -6489,6 +6495,24 @@ msgstr ""
 msgid "CloudLicense|This instance is currently using the %{planName} plan."
 msgstr ""
 
+msgid "CloudLicense|This is the highest peak of users on your installation since the license started."
+msgstr ""
+
+msgid "CloudLicense|This is the number of %{billableUsersLinkStart}billable users%{billableUsersLinkEnd} on your installation, and this is the minimum number you need to purchase when you renew your license."
+msgstr ""
+
+msgid "CloudLicense|Users in subscription"
+msgstr ""
+
+msgid "CloudLicense|Users over subscription"
+msgstr ""
+
+msgid "CloudLicense|Users with a Guest role or those who don't belong to a Project or Group will not use a seat from your license."
+msgstr ""
+
+msgid "CloudLicense|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement."
+msgstr ""
+
 msgid "CloudLicense|Your subscription"
 msgstr ""