Merge branch 'ag/332941-sync-sub-details-follow' into 'master'

Update Subscription Sync enums and specs

See merge request gitlab-org/gitlab!65431

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

@@ -124,7 +124,7 @@ export default {
     },
   },
   methods: {
-    didDismissSuccessAlert() {
+    didDismissAlert() {
       this.shouldShowNotifications = false;
     },
     showActivationModal() {
@@ -136,7 +136,7 @@ export default {
       axios
         .post(this.subscriptionSyncPath)
         .then(() => {
-          this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_SUCCESS;
+          this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_PENDING;
         })
         .catch(() => {
           this.subscriptionSyncStatus = subscriptionSyncStatus.SYNC_FAILURE;
@@ -174,7 +174,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

@@ -15,7 +15,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,
@@ -370,7 +370,7 @@ describe('Subscription Breakdown', () => {
 
       it('shows a success notification', () => {
         expect(findSubscriptionSyncNotifications().props('syncStatus')).toBe(
-          subscriptionSyncStatus.SYNC_SUCCESS,
+          subscriptionSyncStatus.SYNC_PENDING,
         );
       });
 
@@ -379,7 +379,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);
     });
   });