Hide "Users in Subscription" card for Ultimate plans

Changelog: changed
EE: true

ee/app/assets/javascripts/admin/subscriptions/show/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,
-  usersInSubscriptionUnlimited,
-  usersOverSubscriptionText,
-  usersOverSubscriptionTitle,
-} from '../constants';
+import { s__, n__, __ } from '~/locale';
 
 export const billableUsersURL = helpPagePath('subscriptions/self_managed/index', {
   anchor: 'billable-users',
@@ -19,17 +9,27 @@ export const billableUsersURL = helpPagePath('subscriptions/self_managed/index',
 export const trueUpURL =
   'https://about.gitlab.com/pricing/licensing-faq/#what-does-users-over-license-mean';
 
+export const usersInSubscriptionUnlimited = __('Unlimited');
+
+export const i18n = Object.freeze({
+  billableUsersTitle: s__('SuperSonics|Billable users'),
+  maximumUsersTitle: s__('SuperSonics|Maximum users'),
+  usersOverSubscriptionTitle: s__('SuperSonics|Users over subscription'),
+  billableUsersText: s__(
+    'SuperSonics|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.',
+  ),
+  maximumUsersText: s__(
+    'SuperSonics|This is the highest peak of users on your installation since the license started.',
+  ),
+  usersInSubscriptionText: s__(
+    `SuperSonics|Users with a Guest role or those who don't belong to a Project or Group will not use a seat from your license.`,
+  ),
+  usersOverSubscriptionText: s__(
+    `SuperSonics|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement.`,
+  ),
+});
+
 export default {
-  i18n: {
-    billableUsersTitle,
-    maximumUsersTitle,
-    usersInSubscriptionTitle,
-    usersOverSubscriptionTitle,
-    billableUsersText,
-    maximumUsersText,
-    usersInSubscriptionText,
-    usersOverSubscriptionText,
-  },
   links: {
     billableUsersURL,
     trueUpURL,
@@ -59,7 +59,22 @@ export default {
     usersOverSubscription() {
       return this.subscription.usersOverLicenseCount;
     },
+    isUsersInSubscripionVisible() {
+      return this.subscription.plan === 'ultimate';
+    },
+    usersInSubscriptionTitle() {
+      if (this.subscription.usersInLicenseCount) {
+        return n__(
+          'SuperSonics|User in subscription',
+          'SuperSonics|Users in subscription',
+          this.subscription.usersInLicenseCount,
+        );
+      }
+
+      return s__('SuperSonics|Users in subscription');
+    },
   },
+  i18n,
 };
 </script>
 
@@ -69,11 +84,9 @@ export default {
       <gl-card class="gl-h-full" data-testid="users-in-subscription">
         <header>
           <h2 data-qa-selector="users_in_subscription">{{ usersInSubscription }}</h2>
-          <h5 class="gl-font-weight-normal text-uppercase">
-            {{ $options.i18n.usersInSubscriptionTitle }}
-          </h5>
+          <h5 class="gl-font-weight-normal text-uppercase">{{ usersInSubscriptionTitle }}</h5>
         </header>
-        <p>
+        <p v-if="isUsersInSubscripionVisible" data-testid="users-in-subscription-desc">
           {{ $options.i18n.usersInSubscriptionText }}
         </p>
       </gl-card>
@@ -90,8 +103,8 @@ export default {
         <p>
           <gl-sprintf :message="$options.i18n.billableUsersText">
             <template #billableUsersLink="{ content }">
-              <gl-link :href="$options.links.billableUsersURL" target="_blank"
-                >{{ content }}
+              <gl-link :href="$options.links.billableUsersURL" target="_blank">
+                {{ content }}
               </gl-link>
             </template>
           </gl-sprintf>
@@ -107,9 +120,7 @@ export default {
             {{ $options.i18n.maximumUsersTitle }}
           </h5>
         </header>
-        <p>
-          {{ $options.i18n.maximumUsersText }}
-        </p>
+        <p>{{ $options.i18n.maximumUsersText }}</p>
       </gl-card>
     </div>
 

ee/app/assets/javascripts/admin/subscriptions/show/constants.js

@@ -38,7 +38,6 @@ export const copySubscriptionIdButtonText = __('Copy');
 export const licenseFileText = __('License file');
 export const onlineCloudLicenseText = s__('SuperSonics|Cloud license');
 export const offlineCloudLicenseText = s__('SuperSonics|Offline cloud');
-export const usersInSubscriptionUnlimited = __('Unlimited');
 export const detailsLabels = {
   address: __('Address'),
   company: __('Company'),
@@ -55,22 +54,7 @@ export const detailsLabels = {
 export const removeLicense = __('Remove license');
 export const removeLicenseConfirm = __('Are you sure you want to remove the license?');
 export const removeLicenseButtonLabel = __('Remove license');
-export const billableUsersTitle = s__('SuperSonics|Billable users');
-export const maximumUsersTitle = s__('SuperSonics|Maximum users');
-export const usersInSubscriptionTitle = s__('SuperSonics|Users in subscription');
-export const usersOverSubscriptionTitle = s__('SuperSonics|Users over subscription');
-export const billableUsersText = s__(
-  'SuperSonics|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__(
-  'SuperSonics|This is the highest peak of users on your installation since the license started.',
-);
-export const usersInSubscriptionText = s__(
-  `SuperSonics|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__(
-  `SuperSonics|You'll be charged for %{trueUpLinkStart}users over license%{trueUpLinkEnd} on a quarterly or annual basis, depending on the terms of your agreement.`,
-);
+
 export const subscriptionTable = {
   activatedAt: __('Activated on'),
   expiresOn: __('Expires on'),

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

@@ -3,17 +3,8 @@ import { shallowMount } from '@vue/test-utils';
 import SubscriptionDetailsUserInfo, {
   billableUsersURL,
   trueUpURL,
+  i18n,
 } from 'ee/admin/subscriptions/show/components/subscription_details_user_info.vue';
-import {
-  billableUsersText,
-  billableUsersTitle,
-  maximumUsersText,
-  maximumUsersTitle,
-  usersInSubscriptionText,
-  usersInSubscriptionTitle,
-  usersOverSubscriptionText,
-  usersOverSubscriptionTitle,
-} from 'ee/admin/subscriptions/show/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { license } from '../mock_data';
 
@@ -28,7 +19,7 @@ describe('Subscription Details User Info', () => {
     wrapper = extendedWrapper(
       shallowMount(SubscriptionDetailsUserInfo, {
         propsData: {
-          subscription: license.ULTIMATE,
+          subscription: { ...license.ULTIMATE, plan: 'premium' },
           ...props,
         },
         stubs: {
@@ -39,16 +30,21 @@ describe('Subscription Details User Info', () => {
     );
   };
 
+  const findUsersInSubscriptionCard = () =>
+    wrapper.findComponent('[data-testid="users-in-subscription"]');
+
+  const findUsersInSubscriptionDesc = () =>
+    findUsersInSubscriptionCard().findComponent('[data-testid="users-in-subscription-desc"]');
+
   afterEach(() => {
     wrapper.destroy();
   });
 
   describe.each`
-    testId                     | info    | title                         | text                         | link
-    ${'users-in-subscription'} | ${'10'} | ${usersInSubscriptionTitle}   | ${usersInSubscriptionText}   | ${false}
-    ${'billable-users'}        | ${'8'}  | ${billableUsersTitle}         | ${billableUsersText}         | ${billableUsersURL}
-    ${'maximum-users'}         | ${'8'}  | ${maximumUsersTitle}          | ${maximumUsersText}          | ${false}
-    ${'users-over-license'}    | ${'0'}  | ${usersOverSubscriptionTitle} | ${usersOverSubscriptionText} | ${trueUpURL}
+    testId                  | info   | title                              | text                              | link
+    ${'billable-users'}     | ${'8'} | ${i18n.billableUsersTitle}         | ${i18n.billableUsersText}         | ${billableUsersURL}
+    ${'maximum-users'}      | ${'8'} | ${i18n.maximumUsersTitle}          | ${i18n.maximumUsersText}          | ${false}
+    ${'users-over-license'} | ${'0'} | ${i18n.usersOverSubscriptionTitle} | ${i18n.usersOverSubscriptionText} | ${trueUpURL}
   `('with data for $card', ({ testId, info, title, text, link }) => {
     beforeEach(() => {
       createComponent();
@@ -56,11 +52,11 @@ describe('Subscription Details User Info', () => {
 
     const findUseCard = () => wrapper.findByTestId(testId);
 
-    it(`displays the info`, () => {
+    it('displays the info', () => {
       expect(findUseCard().find('h2').text()).toBe(info);
     });
 
-    it(`displays the title`, () => {
+    it('displays the title', () => {
       expect(findUseCard().find('h5').text()).toBe(title);
     });
 
@@ -68,10 +64,6 @@ describe('Subscription Details User Info', () => {
       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);
@@ -85,17 +77,33 @@ describe('Subscription Details User Info', () => {
 
   describe('Users is subscription', () => {
     it('should display the value when present', () => {
-      const subscription = { ...license.ULTIMATE, usersInLicenseCount: 0 };
+      const subscription = { ...license.ULTIMATE, usersInLicenseCount: 0, plan: 'premium' };
       createComponent({ subscription });
 
       expect(findSubscriptionText()).toBe('0');
     });
 
     it('should display Unlimited when users in license is null', () => {
-      const subscription = { ...license.ULTIMATE, usersInLicenseCount: null };
+      const subscription = { ...license.ULTIMATE, usersInLicenseCount: null, plan: 'premium' };
       createComponent({ subscription });
 
       expect(findSubscriptionText()).toBe('Unlimited');
     });
+
+    it('does not render card description', () => {
+      const subscription = { ...license.ULTIMATE, usersInLicenseCount: 0, plan: 'premium' };
+      createComponent({ subscription });
+
+      expect(findUsersInSubscriptionDesc().exists()).toBe(false);
+    });
+
+    describe('when subscription is ultimate', () => {
+      it('renders text in the card "Users in Subscription"', () => {
+        const subscription = { ...license.ULTIMATE };
+        createComponent({ subscription });
+
+        expect(findUsersInSubscriptionDesc().exists()).toBe(true);
+      });
+    });
   });
 });

locale/gitlab.pot

@@ -36358,6 +36358,11 @@ msgstr ""
 msgid "SuperSonics|To activate your subscription, connect to GitLab servers through the %{linkStart}Cloud Licensing%{linkEnd} service, a hassle-free way to manage your subscription."
 msgstr ""
 
+msgid "SuperSonics|User in subscription"
+msgid_plural "SuperSonics|Users in subscription"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "SuperSonics|Users in subscription"
 msgstr ""