Cloud License Details: some polishing

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

@@ -32,7 +32,7 @@ export default {
         return currentLicense;
       },
       skip() {
-        return !this.hasCurrentLicense;
+        return !this.canShowSubscriptionDetails;
       },
     },
     subscriptionHistory: {
@@ -46,12 +46,12 @@ export default {
     return {
       currentSubscription: {},
       subscriptionHistory: [],
-      hasCurrentLicense: this.hasActiveLicense,
+      canShowSubscriptionDetails: this.hasActiveLicense,
     };
   },
   methods: {
-    handleActivation(result) {
-      this.hasCurrentLicense = result;
+    handleActivation(hasLicense) {
+      this.canShowSubscriptionDetails = hasLicense;
     },
   },
 };
@@ -61,7 +61,12 @@ export default {
   <div class="gl-display-flex gl-justify-content-center gl-flex-direction-column">
     <h4 data-testid="subscription-main-title">{{ $options.i18n.subscriptionMainTitle }}</h4>
     <hr />
-    <div v-if="!hasCurrentLicense" class="row">
+    <subscription-breakdown
+      v-if="canShowSubscriptionDetails"
+      :subscription="currentSubscription"
+      :subscription-list="subscriptionHistory"
+    />
+    <div v-else class="row">
       <div class="col-12 col-lg-8 offset-lg-2">
         <h3 class="gl-mb-7 gl-mt-6 gl-text-center" data-testid="subscription-activation-title">
           {{ $options.i18n.subscriptionActivationTitle }}
@@ -69,10 +74,5 @@ export default {
         <cloud-license-subscription-activation-form @subscription-activation="handleActivation" />
       </div>
     </div>
-    <subscription-breakdown
-      v-else
-      :subscription="currentSubscription"
-      :subscription-list="subscriptionHistory"
-    />
   </div>
 </template>

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

 <script>
 import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
-import { userNotifications } from '../constants';
+import {
+  manualSyncFailureText,
+  manualSyncFailureTitle,
+  manualSyncSuccessfulTitle,
+} from '../constants';
 
 export const notificationType = {
   SYNC_FAILURE: 'SYNC_FAILURE',
@@ -15,7 +19,9 @@ const notificationTypeValidator = (value) =>
 export default {
   name: 'SubscriptionSyncNotifications',
   i18n: {
-    userNotifications,
+    manualSyncSuccessfulTitle,
+    manualSyncFailureText,
+    manualSyncFailureTitle,
   },
   components: {
     GlAlert,
@@ -52,18 +58,18 @@ export default {
     <gl-alert
       v-if="syncDidSuccess"
       variant="success"
+      :title="$options.i18n.manualSyncSuccessfulTitle"
       data-testid="sync-success-alert"
       @dismiss="didDismissSuccessAlert"
-    >
-      {{ $options.i18n.userNotifications.manualSyncSuccessfulText }}
-    </gl-alert>
+    />
     <gl-alert
       v-else-if="syncDidFail"
       variant="danger"
       :dismissible="false"
+      :title="$options.i18n.manualSyncFailureTitle"
       data-testid="sync-failure-alert"
     >
-      <gl-sprintf :message="$options.i18n.userNotifications.manualSyncFailureText">
+      <gl-sprintf :message="$options.i18n.manualSyncFailureText">
         <template #connectivityHelpLink="{ content }">
           <gl-link :href="connectivityHelpURL" target="_blank">{{ content }}</gl-link>
         </template>

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

@@ -10,7 +10,7 @@ export const subscriptionActivationTitle = s__(
 export const subscriptionDetailsHeaderText = s__('SuperSonics|Subscription details');
 export const licensedToHeaderText = s__('SuperSonics|Licensed to');
 export const manageSubscriptionButtonText = s__('SuperSonics|Manage');
-export const syncSubscriptionButtonText = s__('SuperSonics|Sync Subscription details');
+export const syncSubscriptionButtonText = s__('SuperSonics|Sync subscription details');
 export const copySubscriptionIdButtonText = __('Copy');
 export const subscriptionTypeText = __('%{type} License');
 export const detailsLabels = {
@@ -49,12 +49,13 @@ export const subscriptionTable = {
   title: __('Subscription History'),
   type: s__('SuperSonics|Type'),
 };
-export const userNotifications = {
-  manualSyncSuccessfulText: s__('SuperSonics|The subscription details synced successfully.'),
-  manualSyncFailureText: s__(
-    'SuperSonics|There is a connectivity issue. You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}.',
-  ),
-};
+export const manualSyncSuccessfulTitle = s__(
+  'SuperSonics|The subscription details synced successfully.',
+);
+export const manualSyncFailureText = s__(
+  'SuperSonics|You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}.',
+);
+export const manualSyncFailureTitle = s__('SuperSonics|There is a connectivity issue.');
 
 export const subscriptionType = {
   CLOUD: 'cloud',

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

@@ -4,7 +4,10 @@ import SubscriptionSyncNotifications, {
   notificationType,
   SUCCESS_ALERT_DISMISSED_EVENT,
 } from 'ee/pages/admin/cloud_licenses/components/subscription_sync_notifications.vue';
-import { userNotifications } from 'ee/pages/admin/cloud_licenses/constants';
+import {
+  manualSyncFailureTitle,
+  manualSyncSuccessfulTitle,
+} from 'ee/pages/admin/cloud_licenses/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('Subscription Sync Notifications', () => {
@@ -47,7 +50,7 @@ describe('Subscription Sync Notifications', () => {
     });
 
     it('displays an alert with success message', () => {
-      expect(findSuccessAlert().text()).toBe(userNotifications.manualSyncSuccessfulText);
+      expect(findSuccessAlert().props('title')).toBe(manualSyncSuccessfulTitle);
     });
 
     it('emits an event when dismissed', () => {
@@ -65,8 +68,14 @@ describe('Subscription Sync Notifications', () => {
       });
     });
 
+    it('displays an alert with a failure title', () => {
+      expect(findFailureAlert().props('title')).toBe(manualSyncFailureTitle);
+    });
+
     it('displays an alert with a failure message', () => {
-      expect(findFailureAlert().text()).toContain('There is a connectivity issue');
+      expect(findFailureAlert().text()).toBe(
+        'You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by troubleshooting the activation code.',
+      );
     });
 
     it('displays a link', () => {

locale/gitlab.pot

@@ -30540,13 +30540,13 @@ msgstr ""
 msgid "SuperSonics|Subscription details"
 msgstr ""
 
-msgid "SuperSonics|Sync Subscription details"
+msgid "SuperSonics|Sync subscription details"
 msgstr ""
 
 msgid "SuperSonics|The subscription details synced successfully."
 msgstr ""
 
-msgid "SuperSonics|There is a connectivity issue. You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}."
+msgid "SuperSonics|There is a connectivity issue."
 msgstr ""
 
 msgid "SuperSonics|Type"
@@ -30555,6 +30555,9 @@ msgstr ""
 msgid "SuperSonics|Valid From"
 msgstr ""
 
+msgid "SuperSonics|You can no longer sync your subscription details with GitLab. Get help for the most common connectivity issues by %{connectivityHelpLinkStart}troubleshooting the activation code%{connectivityHelpLinkEnd}."
+msgstr ""
+
 msgid "SuperSonics|You do not have an active subscription"
 msgstr ""