SuperSonics: unlimited users

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

@@ -8,6 +8,7 @@ import {
   maximumUsersTitle,
   usersInSubscriptionText,
   usersInSubscriptionTitle,
+  usersInSubscriptionUnlimited,
   usersOverSubscriptionText,
   usersOverSubscriptionTitle,
 } from '../constants';
@@ -44,7 +45,7 @@ export default {
   },
   computed: {
     usersInSubscription() {
-      return this.subscription.usersInLicenseCount;
+      return this.subscription.usersInLicenseCount ?? usersInSubscriptionUnlimited;
     },
     billableUsers() {
       return this.subscription.billableUsersCount;
@@ -62,7 +63,7 @@ export default {
 <template>
   <section class="row">
     <div class="col-md-6 gl-mb-5">
-      <gl-card data-testid="users-in-license">
+      <gl-card data-testid="users-in-subscription">
         <header>
           <h2>{{ usersInSubscription }}</h2>
           <h5 class="gl-font-weight-normal text-uppercase">

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

@@ -13,6 +13,7 @@ export const manageSubscriptionButtonText = s__('SuperSonics|Manage');
 export const syncSubscriptionButtonText = s__('SuperSonics|Sync subscription details');
 export const copySubscriptionIdButtonText = __('Copy');
 export const subscriptionTypeText = __('%{type} License');
+export const usersInSubscriptionUnlimited = __('Unlimited');
 export const detailsLabels = {
   address: __('Address'),
   company: __('Company'),

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

@@ -21,6 +21,8 @@ describe('Subscription Details User Info', () => {
   let wrapper;
 
   const itif = (condition) => (condition ? it : it.skip);
+  const findSubscriptionText = () =>
+    wrapper.findByTestId('users-in-subscription').find('h2').text();
 
   const createComponent = (props = {}, stubGlSprintf = false) => {
     wrapper = extendedWrapper(
@@ -42,11 +44,11 @@ describe('Subscription Details User Info', () => {
   });
 
   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-license'} | ${'0'}  | ${usersOverSubscriptionTitle} | ${usersOverSubscriptionText} | ${trueUpURL}
+    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}
   `('with data for $card', ({ testId, info, title, text, link }) => {
     beforeEach(() => {
       createComponent();
@@ -80,4 +82,20 @@ describe('Subscription Details User Info', () => {
       expect(findUseCard().findComponent(GlLink).exists()).toBe(link);
     });
   });
+
+  describe('Users is subscription', () => {
+    it('should display the value when present', () => {
+      const subscription = { ...license.ULTIMATE, usersInLicenseCount: 0 };
+      createComponent({ subscription });
+
+      expect(findSubscriptionText()).toBe('0');
+    });
+
+    it('should display Unlimited when users in license is null', () => {
+      const subscription = { ...license.ULTIMATE, usersInLicenseCount: null };
+      createComponent({ subscription });
+
+      expect(findSubscriptionText()).toBe('Unlimited');
+    });
+  });
 });