Update Subscription Sync enums and specs

The frontend can't really tell whether the subscription sync
has been successfull or not, given the async nature of the
process. Therefore we will consider it pending if not failed

ee/app/assets/javascripts/admin/subscriptions/show/components/subscription_breakdown.vue

@@ -114,7 +114,7 @@ export default {
     },
   },
   methods: {
-    didDismissSuccessAlert() {
+    didDismissAlert() {
       this.shouldShowNotifications = false;
     },
     syncSubscription() {
@@ -123,7 +123,7 @@ export default {
       axios
         .post(this.subscriptionSyncPath)
         .then(() => {
-          this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_SUCCESS;
+          this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_PENDING;
         })
         .catch(() => {
           this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_FAILURE;
@@ -148,7 +148,7 @@ export default {
       v-if="shouldShowNotifications"
       class="mb-4"
       :sync-status="subscriptionSyncStatus"
-      @success-alert-dismissed="didDismissSuccessAlert"
+      @info-alert-dismissed="didDismissAlert"
     />
     <section class="row gl-mb-5">
       <div class="col-md-6 gl-mb-5">

ee/app/assets/javascripts/admin/subscriptions/show/components/subscription_sync_notifications.vue

@@ -3,12 +3,12 @@ import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import {
   manualSyncFailureText,
   connectivityIssue,
-  manualSyncSuccessfulTitle,
+  manualSyncPendingTitle,
   subscriptionSyncStatus,
-  manualSyncSuccessfulText,
+  manualSyncPendingText,
 } from '../constants';
 
-export const SUCCESS_ALERT_DISMISSED_EVENT = 'success-alert-dismissed';
+export const INFO_ALERT_DISMISSED_EVENT = 'info-alert-dismissed';
 
 const subscriptionSyncStatusValidator = (value) =>
   !value || Object.values(subscriptionSyncStatus).includes(value);
@@ -16,8 +16,8 @@ const subscriptionSyncStatusValidator = (value) =>
 export default {
   name: 'SubscriptionSyncNotifications',
   i18n: {
-    manualSyncSuccessfulText,
-    manualSyncSuccessfulTitle,
+    manualSyncPendingText,
+    manualSyncPendingTitle,
     manualSyncFailureText,
     connectivityIssue,
   },
@@ -35,16 +35,16 @@ export default {
     },
   },
   computed: {
-    syncDidSuccess() {
-      return this.syncStatus === subscriptionSyncStatus.SYNC_SUCCESS;
+    isSyncPending() {
+      return this.syncStatus === subscriptionSyncStatus.SYNC_PENDING;
     },
     syncDidFail() {
       return this.syncStatus === subscriptionSyncStatus.SYNC_FAILURE;
     },
   },
   methods: {
-    didDismissSuccessAlert() {
-      this.$emit(SUCCESS_ALERT_DISMISSED_EVENT);
+    didDismissInfoAlert() {
+      this.$emit(INFO_ALERT_DISMISSED_EVENT);
     },
   },
 };
@@ -53,12 +53,12 @@ export default {
 <template>
   <div>
     <gl-alert
-      v-if="syncDidSuccess"
+      v-if="isSyncPending"
       variant="info"
-      :title="$options.i18n.manualSyncSuccessfulTitle"
-      data-testid="sync-success-alert"
-      @dismiss="didDismissSuccessAlert"
-      >{{ $options.i18n.manualSyncSuccessfulText }}</gl-alert
+      :title="$options.i18n.manualSyncPendingTitle"
+      data-testid="sync-info-alert"
+      @dismiss="didDismissInfoAlert"
+      >{{ $options.i18n.manualSyncPendingText }}</gl-alert
     >
     <gl-alert
       v-else-if="syncDidFail"

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

@@ -66,10 +66,10 @@ export const subscriptionTable = {
   type: s__('SuperSonics|Type'),
 };
 export const connectivityIssue = s__('SuperSonics|There is a connectivity issue.');
-export const manualSyncSuccessfulText = s__(
+export const manualSyncPendingText = s__(
   'SuperSonics|Your subscription details will sync shortly.',
 );
-export const manualSyncSuccessfulTitle = s__('SuperSonics|Sync subscription request.');
+export const manualSyncPendingTitle = s__('SuperSonics|Sync subscription request.');
 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}.',
 );
@@ -84,8 +84,9 @@ export const subscriptionActivationForm = {
 
 export const subscriptionSyncStatus = {
   SYNC_FAILURE: 'SYNC_FAILURE',
-  SYNC_SUCCESS: 'SYNC_SUCCESS',
+  SYNC_PENDING: 'SYNC_PENDING',
 };
+
 export const subscriptionTypes = {
   CLOUD: 'cloud',
   LICENSE_FILE: 'license_file',

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

@@ -12,7 +12,7 @@ import SubscriptionDetailsCard from 'ee/admin/subscriptions/show/components/subs
 import SubscriptionDetailsHistory from 'ee/admin/subscriptions/show/components/subscription_details_history.vue';
 import SubscriptionDetailsUserInfo from 'ee/admin/subscriptions/show/components/subscription_details_user_info.vue';
 import SubscriptionSyncNotifications, {
-  SUCCESS_ALERT_DISMISSED_EVENT,
+  INFO_ALERT_DISMISSED_EVENT,
 } from 'ee/admin/subscriptions/show/components/subscription_sync_notifications.vue';
 import {
   licensedToHeaderText,
@@ -303,7 +303,7 @@ describe('Subscription Breakdown', () => {
 
       it('shows a success notification', () => {
         expect(findSubscriptionSyncNotifications().props('syncStatus')).toBe(
-          subscriptionSyncStatus.SYNC_SUCCESS,
+          subscriptionSyncStatus.SYNC_PENDING,
         );
       });
 
@@ -312,7 +312,7 @@ describe('Subscription Breakdown', () => {
       });
 
       it('dismisses the success notification', async () => {
-        findSubscriptionSyncNotifications().vm.$emit(SUCCESS_ALERT_DISMISSED_EVENT);
+        findSubscriptionSyncNotifications().vm.$emit(INFO_ALERT_DISMISSED_EVENT);
         await nextTick();
 
         expect(findSubscriptionSyncNotifications().exists()).toBe(false);

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

 import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import SubscriptionSyncNotifications, {
-  SUCCESS_ALERT_DISMISSED_EVENT,
+  INFO_ALERT_DISMISSED_EVENT,
 } from 'ee/admin/subscriptions/show/components/subscription_sync_notifications.vue';
 import {
   connectivityIssue,
-  manualSyncSuccessfulTitle,
+  manualSyncPendingText,
+  manualSyncPendingTitle,
   subscriptionSyncStatus,
 } from 'ee/admin/subscriptions/show/constants';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -17,7 +18,7 @@ describe('Subscription Sync Notifications', () => {
 
   const finAllAlerts = () => wrapper.findAllComponents(GlAlert);
   const findFailureAlert = () => wrapper.findByTestId('sync-failure-alert');
-  const findSuccessAlert = () => wrapper.findByTestId('sync-success-alert');
+  const findInfoAlert = () => wrapper.findByTestId('sync-info-alert');
   const findLink = () => wrapper.findComponent(GlLink);
 
   const createComponent = ({ props, stubs } = {}) => {
@@ -45,21 +46,29 @@ describe('Subscription Sync Notifications', () => {
     });
   });
 
-  describe('sync success notification', () => {
+  describe('sync info notification', () => {
     beforeEach(() => {
       createComponent({
-        props: { syncStatus: subscriptionSyncStatus.SYNC_SUCCESS },
+        props: { syncStatus: subscriptionSyncStatus.SYNC_PENDING },
       });
     });
 
-    it('displays an alert with success message', () => {
-      expect(findSuccessAlert().props('title')).toBe(manualSyncSuccessfulTitle);
+    it('displays an info alert', () => {
+      expect(findInfoAlert().props('variant')).toBe('info');
+    });
+
+    it('displays an alert with a title', () => {
+      expect(findInfoAlert().props('title')).toBe(manualSyncPendingTitle);
+    });
+
+    it('displays an alert with a message', () => {
+      expect(findInfoAlert().text()).toBe(manualSyncPendingText);
     });
 
     it('emits an event when dismissed', () => {
-      findSuccessAlert().vm.$emit('dismiss');
+      findInfoAlert().vm.$emit('dismiss');
 
-      expect(wrapper.emitted(SUCCESS_ALERT_DISMISSED_EVENT)).toEqual([[]]);
+      expect(wrapper.emitted(INFO_ALERT_DISMISSED_EVENT)).toHaveLength(1);
     });
   });