Use Form as proper component

Move GlCard related to its own component
Adjust components communication

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

 <script>
 import { GlAlert } from '@gitlab/ui';
 import {
+  activateSubscription,
+  noActiveSubscription,
   subscriptionActivationNotificationText,
-  subscriptionActivationTitle,
   subscriptionHistoryQueries,
   subscriptionMainTitle,
   subscriptionQueries,
 } from '../constants';
-import CloudLicenseSubscriptionActivationForm from './subscription_activation_form.vue';
+import SubscriptionActivationCard from './subscription_activation_card.vue';
 import SubscriptionBreakdown from './subscription_breakdown.vue';
 import SubscriptionPurchaseCard from './subscription_purchase_card.vue';
 import SubscriptionTrialCard from './subscription_trial_card.vue';
@@ -16,14 +17,15 @@ export default {
   name: 'CloudLicenseApp',
   components: {
     GlAlert,
-    CloudLicenseSubscriptionActivationForm,
+    SubscriptionActivationCard,
     SubscriptionBreakdown,
     SubscriptionPurchaseCard,
     SubscriptionTrialCard,
   },
   i18n: {
+    activateSubscription,
+    noActiveSubscription,
     subscriptionActivationNotificationText,
-    subscriptionActivationTitle,
     subscriptionMainTitle,
   },
   props: {
@@ -98,9 +100,9 @@ export default {
     <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 }}
+          {{ $options.i18n.noActiveSubscription }}
         </h3>
-        <cloud-license-subscription-activation-form />
+        <subscription-activation-card />
         <div class="row gl-mt-7">
           <div class="col-lg-6">
             <subscription-trial-card />

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

+<script>
+import { GlAlert, GlCard, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import {
+  activateSubscription,
+  CONNECTIVITY_ERROR,
+  connectivityErrorAlert,
+  connectivityIssue,
+  howToActivateSubscription,
+} from '../constants';
+import SubscriptionActivationForm from './subscription_activation_form.vue';
+
+export const adminLicenseUrl = helpPagePath('/user/admin_area/license');
+export const troubleshootingHelpLink = helpPagePath('user/admin_area/license.html#troubleshooting');
+export const subscriptionActivationHelpLink = helpPagePath('user/admin_area/license.html');
+
+export default {
+  name: 'SubscriptionActivationCard',
+  i18n: {
+    activateSubscription,
+    connectivityIssueTitle: connectivityIssue,
+    connectivityIssueSubtitle: connectivityErrorAlert.subtitle,
+    connectivityIssueHelpText: connectivityErrorAlert.helpText,
+    howToActivateSubscription,
+  },
+  links: {
+    adminLicenseUrl,
+    subscriptionActivationHelpLink,
+    troubleshootingHelpLink,
+  },
+  components: {
+    GlAlert,
+    GlCard,
+    GlLink,
+    GlSprintf,
+    SubscriptionActivationForm,
+  },
+  data() {
+    return {
+      error: null,
+    };
+  },
+  computed: {
+    hasConnectivityIssue() {
+      return this.error === CONNECTIVITY_ERROR;
+    },
+  },
+  methods: {
+    handleFormActivationFailure(error) {
+      this.error = error;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-card body-class="gl-p-0">
+    <template #header>
+      <h5 class="gl-my-0 gl-font-weight-bold">
+        {{ $options.i18n.activateSubscription }}
+      </h5>
+    </template>
+    <div
+      v-if="hasConnectivityIssue"
+      class="gl-p-5 gl-border-b-1 gl-border-gray-100 gl-border-b-solid"
+    >
+      <gl-alert variant="danger" :title="$options.i18n.connectivityIssueTitle" :dismissible="false">
+        <gl-sprintf :message="$options.i18n.connectivityIssueSubtitle">
+          <template #link="{ content }">
+            <gl-link
+              :href="$options.links.subscriptionActivationHelpLink"
+              target="_blank"
+              class="gl-text-decoration-none!"
+              >{{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+        <gl-sprintf :message="$options.i18n.connectivityIssueHelpText">
+          <template #link="{ content }">
+            <gl-link
+              :href="$options.links.troubleshootingHelpLink"
+              target="_blank"
+              class="gl-text-decoration-none!"
+              >{{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+    </div>
+    <p class="gl-mb-0 gl-px-5 gl-pt-5">
+      <gl-sprintf :message="$options.i18n.howToActivateSubscription">
+        <template #link="{ content }">
+          <gl-link :href="$options.links.adminLicenseUrl" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <subscription-activation-form
+      class="gl-p-5"
+      @subscription-activation-failure="handleFormActivationFailure"
+    />
+  </gl-card>
+</template>

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

 <script>
 import {
-  GlAlert,
   GlButton,
-  GlCard,
   GlForm,
   GlFormCheckbox,
   GlFormGroup,
@@ -11,11 +9,9 @@ import {
   GlSprintf,
 } from '@gitlab/ui';
 import produce from 'immer';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import validation from '~/vue_shared/directives/validation';
 import {
-  CONNECTIVITY_ERROR,
-  connectivityErrorAlert,
+  activateLabel,
   fieldRequiredMessage,
   subscriptionActivationForm,
   subscriptionQueries,
@@ -34,16 +30,11 @@ const getErrorsAsData = ({
 }) => errors;
 
 export const SUBSCRIPTION_ACTIVATION_FAILURE_EVENT = 'subscription-activation-failure';
-export const adminLicenseUrl = helpPagePath('/user/admin_area/license');
-export const troubleshootingHelpLink = helpPagePath('user/admin_area/license.html#troubleshooting');
-export const subscriptionActivationHelpLink = helpPagePath('user/admin_area/license.html');
 
 export default {
   name: 'CloudLicenseSubscriptionActivationForm',
   components: {
-    GlAlert,
     GlButton,
-    GlCard,
     GlForm,
     GlFormGroup,
     GlFormInput,
@@ -52,23 +43,11 @@ export default {
     GlLink,
   },
   i18n: {
-    title: subscriptionActivationForm.title,
-    howToActivateSubscription: subscriptionActivationForm.howToActivateSubscription,
-    activationCode: subscriptionActivationForm.activationCode,
-    pasteActivationCode: subscriptionActivationForm.pasteActivationCode,
     acceptTerms: subscriptionActivationForm.acceptTerms,
-    activateLabel: subscriptionActivationForm.activateLabel,
+    activateLabel,
+    activationCode: subscriptionActivationForm.activationCode,
     fieldRequiredMessage,
-    alert: {
-      title: connectivityErrorAlert.title,
-      subtitle: connectivityErrorAlert.subtitle,
-      helpText: connectivityErrorAlert.helpText,
-    },
-  },
-  links: {
-    adminLicenseUrl,
-    troubleshootingHelpLink,
-    subscriptionActivationHelpLink,
+    pasteActivationCode: subscriptionActivationForm.pasteActivationCode,
   },
   directives: {
     validation: validation(),
@@ -93,7 +72,6 @@ export default {
     return {
       form,
       isLoading: false,
-      hasConnectivityIssue: false,
     };
   },
   computed: {
@@ -115,7 +93,6 @@ export default {
       }
       this.form.showValidation = false;
       this.isLoading = true;
-      this.hasConnectivityIssue = false;
       this.$apollo
         .mutate({
           mutation: subscriptionQueries.mutation,
@@ -139,14 +116,12 @@ export default {
         .then((res) => {
           const errors = getErrorsAsData(res);
           if (errors.length) {
-            if (errors.find((error) => error === CONNECTIVITY_ERROR)) {
-              this.hasConnectivityIssue = true;
-            }
-            throw new Error();
+            const [error] = errors;
+            throw new Error(error);
           }
         })
-        .catch(() => {
-          this.$emit(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT, null);
+        .catch((error) => {
+          this.$emit(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT, error.message);
         })
         .finally(() => {
           this.isLoading = false;
@@ -156,99 +131,56 @@ export default {
 };
 </script>
 <template>
-  <gl-card body-class="gl-p-0">
-    <template #header>
-      <h5 class="gl-my-0 gl-font-weight-bold">{{ $options.i18n.title }}</h5>
-    </template>
-
-    <div
-      v-if="hasConnectivityIssue"
-      class="gl-p-5 gl-border-b-1 gl-border-gray-100 gl-border-b-solid"
-    >
-      <gl-alert variant="danger" :title="$options.i18n.alert.title" :dismissible="false">
-        <gl-sprintf :message="$options.i18n.alert.subtitle">
-          <template #link="{ content }">
-            <gl-link
-              :href="$options.links.subscriptionActivationHelpLink"
-              target="_blank"
-              class="gl-text-decoration-none!"
-              >{{ content }}</gl-link
-            >
-          </template>
-        </gl-sprintf>
-        <gl-sprintf :message="$options.i18n.alert.helpText">
-          <template #link="{ content }">
-            <gl-link
-              :href="$options.links.troubleshootingHelpLink"
-              target="_blank"
-              class="gl-text-decoration-none!"
-            >
-              {{ content }}
-            </gl-link>
-          </template>
-        </gl-sprintf>
-      </gl-alert>
-    </div>
-    <div class="gl-p-5">
-      <p>
-        <gl-sprintf :message="$options.i18n.howToActivateSubscription">
-          <template #link="{ content }">
-            <gl-link href="$options.links.adminLicenseUrl" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-      <gl-form novalidate @submit.prevent="submit">
-        <div class="gl-display-flex gl-flex-wrap">
-          <gl-form-group
-            class="gl-flex-grow-1"
-            :invalid-feedback="form.fields.activationCode.feedback"
-            data-testid="form-group-activation-code"
-          >
-            <label class="gl-w-full" for="activation-code-group">
-              {{ $options.i18n.activationCode }}
-            </label>
-            <gl-form-input
-              id="activation-code-group"
-              v-model="form.fields.activationCode.value"
-              v-validation:[form.showValidation]
-              :disabled="isLoading"
-              :placeholder="$options.i18n.pasteActivationCode"
-              :state="form.fields.activationCode.state"
-              name="activationCode"
-              class="gl-mb-4"
-              required
-            />
-          </gl-form-group>
+  <gl-form novalidate @submit.prevent="submit">
+    <div class="gl-display-flex gl-flex-wrap">
+      <gl-form-group
+        class="gl-flex-grow-1"
+        :invalid-feedback="form.fields.activationCode.feedback"
+        data-testid="form-group-activation-code"
+      >
+        <label class="gl-w-full" for="activation-code-group">
+          {{ $options.i18n.activationCode }}
+        </label>
+        <gl-form-input
+          id="activation-code-group"
+          v-model="form.fields.activationCode.value"
+          v-validation:[form.showValidation]
+          :disabled="isLoading"
+          :placeholder="$options.i18n.pasteActivationCode"
+          :state="form.fields.activationCode.state"
+          name="activationCode"
+          class="gl-mb-4"
+          required
+        />
+      </gl-form-group>
 
-          <gl-form-group
-            class="gl-mb-0"
-            :state="isCheckboxValid"
-            :invalid-feedback="$options.i18n.fieldRequiredMessage"
-            data-testid="form-group-terms"
-          >
-            <gl-form-checkbox v-model="form.fields.terms.state" :state="isCheckboxValid">
-              <gl-sprintf :message="$options.i18n.acceptTerms">
-                <template #link="{ content }">
-                  <gl-link href="https://about.gitlab.com/terms/" target="_blank"
-                    >{{ content }}
-                  </gl-link>
-                </template>
-              </gl-sprintf>
-            </gl-form-checkbox>
-          </gl-form-group>
+      <gl-form-group
+        class="gl-mb-0"
+        :state="isCheckboxValid"
+        :invalid-feedback="$options.i18n.fieldRequiredMessage"
+        data-testid="form-group-terms"
+      >
+        <gl-form-checkbox v-model="form.fields.terms.state" :state="isCheckboxValid">
+          <gl-sprintf :message="$options.i18n.acceptTerms">
+            <template #link="{ content }">
+              <gl-link href="https://about.gitlab.com/terms/" target="_blank"
+                >{{ content }}
+              </gl-link>
+            </template>
+          </gl-sprintf>
+        </gl-form-checkbox>
+      </gl-form-group>
 
-          <gl-button
-            :loading="isRequestingActivation"
-            category="primary"
-            class="gl-mt-6 js-no-auto-disable"
-            data-testid="activate-button"
-            type="submit"
-            variant="confirm"
-          >
-            {{ $options.i18n.activateLabel }}
-          </gl-button>
-        </div>
-      </gl-form>
+      <gl-button
+        :loading="isRequestingActivation"
+        category="primary"
+        class="gl-mt-6 js-no-auto-disable"
+        data-testid="activate-button"
+        type="submit"
+        variant="confirm"
+      >
+        {{ $options.i18n.activateLabel }}
+      </gl-button>
     </div>
-  </gl-card>
+  </gl-form>
 </template>

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

@@ -2,7 +2,7 @@
 import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import {
   manualSyncFailureText,
-  manualSyncFailureTitle,
+  connectivityIssue,
   manualSyncSuccessfulTitle,
   notificationType,
 } from '../constants';
@@ -17,7 +17,7 @@ export default {
   i18n: {
     manualSyncSuccessfulTitle,
     manualSyncFailureText,
-    manualSyncFailureTitle,
+    connectivityIssue,
   },
   components: {
     GlAlert,
@@ -62,7 +62,7 @@ export default {
       v-else-if="syncDidFail"
       variant="danger"
       :dismissible="false"
-      :title="$options.i18n.manualSyncFailureTitle"
+      :title="$options.i18n.connectivityIssue"
       data-testid="sync-failure-alert"
     >
       <gl-sprintf :message="$options.i18n.manualSyncFailureText">

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

@@ -8,9 +8,16 @@ export const subscriptionMainTitle = s__('SuperSonics|Your subscription');
 export const subscriptionActivationNotificationText = s__(
   `SuperSonics|Your subscription was successfully activated. You can see the details below.`,
 );
-export const subscriptionActivationTitle = s__(
-  `SuperSonics|You do not have an active subscription`,
+export const subscriptionActivationInsertCode = __(
+  "If you've purchased or renewed your subscription and have an activation code, please enter it below to start the activation process.",
 );
+export const howToActivateSubscription = s__(
+  'SuperSonics|Learn how to %{linkStart}activate your subscription%{linkEnd}.',
+);
+export const activateLabel = s__('CloudLicense|Activate');
+export const activateSubscription = s__('CloudLicense|Activate subscription');
+export const enterActivationCode = s__('CloudLicense|Enter activation code');
+export const noActiveSubscription = s__(`SuperSonics|You do not have an active subscription`);
 export const subscriptionDetailsHeaderText = s__('SuperSonics|Subscription details');
 export const licensedToHeaderText = s__('SuperSonics|Licensed to');
 export const manageSubscriptionButtonText = s__('SuperSonics|Manage');
@@ -54,34 +61,22 @@ export const subscriptionTable = {
   title: __('Subscription History'),
   type: s__('SuperSonics|Type'),
 };
+export const connectivityIssue = s__('SuperSonics|There is a connectivity issue.');
 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 subscriptionActivationForm = {
-  title: s__('CloudLicense|Activate subscription'),
-  howToActivateSubscription: s__(
-    'CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}.',
-  ),
   activationCode: s__('CloudLicense|Activation code'),
   pasteActivationCode: s__('CloudLicense|Paste your activation code'),
   acceptTerms: s__(
     'CloudLicense|I agree that my use of the GitLab Software is subject to the Subscription Agreement located at the %{linkStart}Terms of Service%{linkEnd}, unless otherwise agreed to in writing with GitLab.',
   ),
-  activateLabel: s__('CloudLicense|Activate'),
 };
 
-export const userNotifications = {
-  manualSyncSuccessfulTitle: s__('SuperSonics|The subscription details synced successfully.'),
-  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}.',
-  ),
-  manualSyncFailureTitle: s__('SuperSonics|There is a connectivity issue.'),
-};
 export const notificationType = {
   SYNC_FAILURE: 'SYNC_FAILURE',
   SYNC_SUCCESS: 'SYNC_SUCCESS',
@@ -118,7 +113,6 @@ export const buySubscriptionCard = {
 
 export const CONNECTIVITY_ERROR = 'CONNECTIVITY_ERROR';
 export const connectivityErrorAlert = {
-  title: s__('There is a connectivity issue'),
   subtitle: s__(
     'CloudLicense|To activate your subscription, connect to GitLab servers through the %{linkStart}Cloud Sync service%{linkEnd}, a hassle-free way to manage your subscription.',
   ),

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

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import CloudLicenseApp from 'ee/pages/admin/cloud_licenses/components/app.vue';
-import SubscriptionActivationForm from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
+import SubscriptionManagementApp from 'ee/pages/admin/cloud_licenses/components/app.vue';
+import SubscriptionActivationCard from 'ee/pages/admin/cloud_licenses/components/subscription_activation_card.vue';
 import SubscriptionBreakdown from 'ee/pages/admin/cloud_licenses/components/subscription_breakdown.vue';
 import {
+  noActiveSubscription,
   subscriptionActivationNotificationText,
-  subscriptionActivationTitle,
   subscriptionHistoryQueries,
   subscriptionMainTitle,
   subscriptionQueries,
@@ -17,10 +17,10 @@ import { license, subscriptionHistory } from '../mock_data';
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-describe('CloudLicenseApp', () => {
+describe('SubscriptionManagementApp', () => {
   let wrapper;
 
-  const findActivateSubscriptionForm = () => wrapper.findComponent(SubscriptionActivationForm);
+  const findActivateSubscriptionCard = () => wrapper.findComponent(SubscriptionActivationCard);
   const findSubscriptionBreakdown = () => wrapper.findComponent(SubscriptionBreakdown);
   const findSubscriptionActivationTitle = () =>
     wrapper.findByTestId('subscription-activation-title');
@@ -40,7 +40,7 @@ describe('CloudLicenseApp', () => {
 
   const createComponent = (props = {}, resolverMock) => {
     wrapper = extendedWrapper(
-      shallowMount(CloudLicenseApp, {
+      shallowMount(SubscriptionManagementApp, {
         localVue,
         apolloProvider: createMockApolloProvider(resolverMock),
         propsData: {
@@ -77,7 +77,7 @@ describe('CloudLicenseApp', () => {
         createComponent({}, [currentSubscriptionResolver, subscriptionHistoryResolver]);
       });
       it('shows a title saying there is no active subscription', () => {
-        expect(findSubscriptionActivationTitle().text()).toBe(subscriptionActivationTitle);
+        expect(findSubscriptionActivationTitle().text()).toBe(noActiveSubscription);
       });
 
       it('queries for the current history', () => {
@@ -85,7 +85,7 @@ describe('CloudLicenseApp', () => {
       });
 
       it('shows the subscription activation form', () => {
-        expect(findActivateSubscriptionForm().exists()).toBe(true);
+        expect(findActivateSubscriptionCard().exists()).toBe(true);
       });
 
       it('does not show the activation success notification', () => {

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

+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import SubscriptionActivationCard, {
+  subscriptionActivationHelpLink,
+  troubleshootingHelpLink,
+} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_card.vue';
+import SubscriptionActivationForm, {
+  SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
+} from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
+import { CONNECTIVITY_ERROR } from 'ee/pages/admin/cloud_licenses/constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+describe('CloudLicenseApp', () => {
+  let wrapper;
+
+  const findConnectivityErrorAlert = () => wrapper.findComponent(GlAlert);
+  const findSubscriptionActivationForm = () => wrapper.findComponent(SubscriptionActivationForm);
+
+  const createComponent = ({ props = {}, stubs = {} } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(SubscriptionActivationCard, {
+        propsData: {
+          ...props,
+        },
+        stubs,
+      }),
+    );
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows a form', () => {
+    expect(findSubscriptionActivationForm().exists()).toBe(true);
+  });
+
+  it('does not show any alert', () => {
+    expect(findConnectivityErrorAlert().exists()).toBe(false);
+  });
+
+  describe('when the forms emits a connectivity error', () => {
+    beforeEach(() => {
+      createComponent({ stubs: { GlSprintf } });
+      findSubscriptionActivationForm().vm.$emit(
+        SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
+        CONNECTIVITY_ERROR,
+      );
+    });
+
+    it('shows an alert component', () => {
+      expect(findConnectivityErrorAlert().exists()).toBe(true);
+    });
+
+    it('shows some help links', () => {
+      const alert = findConnectivityErrorAlert();
+
+      expect(alert.findAll(GlLink).at(0).attributes('href')).toBe(subscriptionActivationHelpLink);
+      expect(alert.findAll(GlLink).at(1).attributes('href')).toBe(troubleshootingHelpLink);
+    });
+  });
+});

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

-import { GlAlert, GlForm, GlFormInput, GlFormCheckbox, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlForm, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import CloudLicenseSubscriptionActivationForm, {
+import SubscriptionActivationForm, {
   SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
-  troubleshootingHelpLink,
-  subscriptionActivationHelpLink,
 } from 'ee/pages/admin/cloud_licenses/components/subscription_activation_form.vue';
-import { fieldRequiredMessage, subscriptionQueries } from 'ee/pages/admin/cloud_licenses/constants';
+import {
+  CONNECTIVITY_ERROR,
+  fieldRequiredMessage,
+  subscriptionQueries,
+} from 'ee/pages/admin/cloud_licenses/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -32,7 +34,6 @@ describe('CloudLicenseApp', () => {
   const findActivationCodeFormGroup = () => wrapper.findByTestId('form-group-activation-code');
   const findActivationCodeInput = () => wrapper.findComponent(GlFormInput);
   const findActivateSubscriptionForm = () => wrapper.findComponent(GlForm);
-  const findConnectivityErrorAlert = () => wrapper.findComponent(GlAlert);
 
   const GlFormInputStub = stubComponent(GlFormInput, {
     template: `<input />`,
@@ -43,9 +44,9 @@ describe('CloudLicenseApp', () => {
     stopPropagation,
   });
 
-  const createComponentWithApollo = ({ props = {}, mutationMock, stubs = {} } = {}) => {
+  const createComponentWithApollo = ({ props = {}, mutationMock } = {}) => {
     wrapper = extendedWrapper(
-      shallowMount(CloudLicenseSubscriptionActivationForm, {
+      shallowMount(SubscriptionActivationForm, {
         localVue,
         apolloProvider: createMockApolloProvider(mutationMock),
         propsData: {
@@ -53,7 +54,6 @@ describe('CloudLicenseApp', () => {
         },
         stubs: {
           GlFormInput: GlFormInputStub,
-          ...stubs,
         },
       }),
     );
@@ -137,7 +137,7 @@ describe('CloudLicenseApp', () => {
       });
     });
 
-    describe('when the mutation is not successful but looks like it is', () => {
+    describe('when the mutation is not successful', () => {
       const mutationMock = jest
         .fn()
         .mockResolvedValue(activateLicenseMutationResponse.ERRORS_AS_DATA);
@@ -146,7 +146,9 @@ describe('CloudLicenseApp', () => {
         findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
       });
 
-      it.todo('deals with failures in a meaningful way');
+      it('emits a unsuccessful event', () => {
+        expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toBeUndefined();
+      });
     });
 
     describe('when the mutation is not successful with connectivity error', () => {
@@ -154,21 +156,20 @@ describe('CloudLicenseApp', () => {
         .fn()
         .mockResolvedValue(activateLicenseMutationResponse.CONNECTIVITY_ERROR);
       beforeEach(async () => {
-        createComponentWithApollo({ mutationMock, stubs: { GlSprintf } });
+        createComponentWithApollo({ mutationMock });
         await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
         await findAgreementCheckbox().vm.$emit('input', true);
         findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
       });
 
-      it('shows alert component guiding the user to resolve the connectivity problem', () => {
-        const alert = findConnectivityErrorAlert();
-        expect(alert.exists()).toBe(true);
-        expect(alert.findAll(GlLink).at(0).attributes('href')).toBe(subscriptionActivationHelpLink);
-        expect(alert.findAll(GlLink).at(1).attributes('href')).toBe(troubleshootingHelpLink);
+      it('emits an failure event with a connectivity error payload', () => {
+        expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toEqual([
+          [CONNECTIVITY_ERROR],
+        ]);
       });
     });
 
-    describe('when the mutation is not successful', () => {
+    describe('when the mutation request fails', () => {
       const mutationMock = jest.fn().mockRejectedValue(activateLicenseMutationResponse.FAILURE);
       beforeEach(() => {
         createComponentWithApollo({ mutationMock });
@@ -178,8 +179,6 @@ describe('CloudLicenseApp', () => {
       it('emits a unsuccessful event', () => {
         expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_FAILURE_EVENT)).toBeUndefined();
       });
-
-      it.todo('deals with failures in a meaningful way');
     });
   });
 });

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

@@ -4,7 +4,7 @@ import SubscriptionSyncNotifications, {
   SUCCESS_ALERT_DISMISSED_EVENT,
 } from 'ee/pages/admin/cloud_licenses/components/subscription_sync_notifications.vue';
 import {
-  manualSyncFailureTitle,
+  connectivityIssue,
   manualSyncSuccessfulTitle,
   notificationType,
 } from 'ee/pages/admin/cloud_licenses/constants';
@@ -69,7 +69,7 @@ describe('Subscription Sync Notifications', () => {
     });
 
     it('displays an alert with a failure title', () => {
-      expect(findFailureAlert().props('title')).toBe(manualSyncFailureTitle);
+      expect(findFailureAlert().props('title')).toBe(connectivityIssue);
     });
 
     it('displays an alert with a failure message', () => {

locale/gitlab.pot

@@ -6689,6 +6689,9 @@ msgstr ""
 msgid "CloudLicense|Buy subscription"
 msgstr ""
 
+msgid "CloudLicense|Enter activation code"
+msgstr ""
+
 msgid "CloudLicense|Free trial"
 msgstr ""
 
@@ -6698,9 +6701,6 @@ msgstr ""
 msgid "CloudLicense|I agree that my use of the GitLab Software is subject to the Subscription Agreement located at the %{linkStart}Terms of Service%{linkEnd}, unless otherwise agreed to in writing with GitLab."
 msgstr ""
 
-msgid "CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}."
-msgstr ""
-
 msgid "CloudLicense|Maximum users"
 msgstr ""
 
@@ -16474,6 +16474,9 @@ msgstr ""
 msgid "If you want to re-enable two-factor authentication, visit the %{settings_link_to} page."
 msgstr ""
 
+msgid "If you've purchased or renewed your subscription and have an activation code, please enter it below to start the activation process."
+msgstr ""
+
 msgid "If your HTTP repository is not publicly accessible, add your credentials."
 msgstr ""
 
@@ -31055,6 +31058,9 @@ msgstr ""
 msgid "SuperSonics|Last Sync"
 msgstr ""
 
+msgid "SuperSonics|Learn how to %{linkStart}activate your subscription%{linkEnd}."
+msgstr ""
+
 msgid "SuperSonics|Licensed to"
 msgstr ""
 
@@ -32246,9 +32252,6 @@ msgstr ""
 msgid "There are running deployments on the environment. Please retry later."
 msgstr ""
 
-msgid "There is a connectivity issue"
-msgstr ""
-
 msgid "There is a halted Elasticsearch migration"
 msgstr ""