Manual sync: add alert notifications

Introduce a component responsible to handle the user
notifications for successful or failing (manual) sync.

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';
+
+export const notificationType = {
+  SYNC_FAILURE: 'SYNC_FAILURE',
+  SYNC_SUCCESS: 'SYNC_SUCCESS',
+};
+
+export const SUCCESS_ALERT_DISMISSED_EVENT = 'success-alert-dismissed';
+
+const notificationTypeValidator = (value) =>
+  !value || Object.values(notificationType).includes(value);
+
+export default {
+  name: 'SubscriptionSyncNotifications',
+  i18n: {
+    userNotifications,
+  },
+  components: {
+    GlAlert,
+    GlLink,
+    GlSprintf,
+  },
+  inject: ['connectivityHelpURL'],
+  props: {
+    notification: {
+      type: String,
+      required: false,
+      default: '',
+      validator: notificationTypeValidator,
+    },
+  },
+  computed: {
+    syncDidSuccess() {
+      return this.notification === notificationType.SYNC_SUCCESS;
+    },
+    syncDidFail() {
+      return this.notification === notificationType.SYNC_FAILURE;
+    },
+  },
+  methods: {
+    didDismissSuccessAlert() {
+      this.$emit(SUCCESS_ALERT_DISMISSED_EVENT);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-alert
+      v-if="syncDidSuccess"
+      variant="success"
+      data-testid="sync-success-alert"
+      @dismiss="didDismissSuccessAlert"
+    >
+      {{ $options.i18n.userNotifications.manualSyncSuccessfulText }}
+    </gl-alert>
+    <gl-alert
+      v-else-if="syncDidFail"
+      variant="danger"
+      :dismissible="false"
+      data-testid="sync-failure-alert"
+    >
+      <gl-sprintf :message="$options.i18n.userNotifications.manualSyncFailureText">
+        <template #connectivityHelpLink="{ content }">
+          <gl-link :href="connectivityHelpURL" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-alert>
+  </div>
+</template>

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

@@ -49,6 +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 subscriptionType = {
   CLOUD: 'cloud',
   LEGACY: 'legacy',

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

+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+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 { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+describe('Subscription Sync Notifications', () => {
+  let wrapper;
+
+  const connectivityHelpURL = 'connectivity/help/url';
+
+  const finAllAlerts = () => wrapper.findAllComponents(GlAlert);
+  const findFailureAlert = () => wrapper.findByTestId('sync-failure-alert');
+  const findSuccessAlert = () => wrapper.findByTestId('sync-success-alert');
+  const findLink = () => wrapper.findComponent(GlLink);
+
+  const createComponent = ({ props, stubs } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(SubscriptionSyncNotifications, {
+        propsData: props,
+        provide: { connectivityHelpURL },
+        stubs,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('idle state', () => {
+    it('displays no alert', () => {
+      createComponent();
+
+      expect(finAllAlerts()).toHaveLength(0);
+    });
+  });
+
+  describe('sync success notification', () => {
+    beforeEach(() => {
+      createComponent({
+        props: { notification: notificationType.SYNC_SUCCESS },
+      });
+    });
+
+    it('displays an alert with success message', () => {
+      expect(findSuccessAlert().text()).toBe(userNotifications.manualSyncSuccessfulText);
+    });
+
+    it('emits an event when dismissed', () => {
+      findSuccessAlert().vm.$emit('dismiss');
+
+      expect(wrapper.emitted(SUCCESS_ALERT_DISMISSED_EVENT)).toEqual([[]]);
+    });
+  });
+
+  describe('sync failure notification', () => {
+    beforeEach(() => {
+      createComponent({
+        props: { notification: notificationType.SYNC_FAILURE },
+        stubs: { GlSprintf },
+      });
+    });
+
+    it('displays an alert with a failure message', () => {
+      expect(findFailureAlert().text()).toContain('There is a connectivity issue');
+    });
+
+    it('displays a link', () => {
+      expect(findLink().attributes('href')).toBe(connectivityHelpURL);
+    });
+  });
+});

locale/gitlab.pot

@@ -30480,6 +30480,12 @@ msgstr ""
 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}."
+msgstr ""
+
 msgid "SuperSonics|Type"
 msgstr ""