Add Subscription Activate banner

Subscription Activation shows a success banner
The tests are updated

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

 <script>
+import { GlAlert } from '@gitlab/ui';
 import {
+  subscriptionActivationNotificationText,
   subscriptionActivationTitle,
   subscriptionHistoryQueries,
   subscriptionMainTitle,
@@ -13,12 +15,14 @@ import SubscriptionTrialCard from './subscription_trial_card.vue';
 export default {
   name: 'CloudLicenseApp',
   components: {
-    SubscriptionBreakdown,
+    GlAlert,
     CloudLicenseSubscriptionActivationForm,
-    SubscriptionTrialCard,
+    SubscriptionBreakdown,
     SubscriptionPurchaseCard,
+    SubscriptionTrialCard,
   },
   i18n: {
+    subscriptionActivationNotificationText,
     subscriptionActivationTitle,
     subscriptionMainTitle,
   },
@@ -48,13 +52,19 @@ export default {
   },
   data() {
     return {
+      canShowSubscriptionDetails: this.hasActiveLicense,
       currentSubscription: {},
+      shouldShowSubscriptionActivationNotification: false,
       subscriptionHistory: [],
-      canShowSubscriptionDetails: this.hasActiveLicense,
+      notification: null,
     };
   },
   methods: {
+    didDismissSuccessAlert() {
+      this.shouldShowSubscriptionActivationNotification = false;
+    },
     handleActivation(hasLicense) {
+      this.shouldShowSubscriptionActivationNotification = hasLicense;
       this.canShowSubscriptionDetails = hasLicense;
     },
   },
@@ -65,6 +75,14 @@ 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 />
+    <gl-alert
+      v-if="shouldShowSubscriptionActivationNotification"
+      variant="success"
+      :title="$options.i18n.subscriptionActivationNotificationText"
+      class="mb-4"
+      data-testid="subscription-activation-success-alert"
+      @dismiss="didDismissSuccessAlert"
+    />
     <subscription-breakdown
       v-if="canShowSubscriptionDetails"
       :subscription="currentSubscription"

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

@@ -84,7 +84,6 @@ export default {
     <template #header>
       <h5 class="gl-my-0 gl-font-weight-bold">{{ $options.i18n.title }}</h5>
     </template>
-
     <p>
       <gl-sprintf :message="$options.i18n.howToActivateSubscription">
         <template #link="{ content }">

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

@@ -4,6 +4,9 @@ import getCurrentLicense from './graphql/queries/get_current_license.query.graph
 import getLicenseHistory from './graphql/queries/get_license_history.query.graphql';
 
 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`,
 );

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

@@ -4,6 +4,7 @@ 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 SubscriptionBreakdown from 'ee/pages/admin/cloud_licenses/components/subscription_breakdown.vue';
 import {
+  subscriptionActivationNotificationText,
   subscriptionActivationTitle,
   subscriptionHistoryQueries,
   subscriptionMainTitle,
@@ -24,6 +25,8 @@ describe('CloudLicenseApp', () => {
   const findSubscriptionActivationTitle = () =>
     wrapper.findByTestId('subscription-activation-title');
   const findSubscriptionMainTitle = () => wrapper.findByTestId('subscription-main-title');
+  const findSubscriptionActivationSuccessAlert = () =>
+    wrapper.findByTestId('subscription-activation-success-alert');
 
   let currentSubscriptionResolver;
   let subscriptionHistoryResolver;
@@ -84,6 +87,33 @@ describe('CloudLicenseApp', () => {
       it('shows the subscription activation form', () => {
         expect(findActivateSubscriptionForm().exists()).toBe(true);
       });
+
+      it('does not the activation success notification', () => {
+        expect(findSubscriptionActivationSuccessAlert().exists()).toBe(false);
+      });
+    });
+
+    describe('activate the license', () => {
+      beforeEach(() => {
+        createComponent({ hasActiveLicense: false }, [
+          currentSubscriptionResolver,
+          subscriptionHistoryResolver,
+        ]);
+        findActivateSubscriptionForm().vm.$emit('subscription-activation', true);
+      });
+
+      it('passes the correct data to the subscription breakdown', () => {
+        expect(findSubscriptionBreakdown().props()).toMatchObject({
+          subscription: license.ULTIMATE,
+          subscriptionList: subscriptionHistory,
+        });
+      });
+
+      it('shows the activation success notification', () => {
+        expect(findSubscriptionActivationSuccessAlert().props('title')).toBe(
+          subscriptionActivationNotificationText,
+        );
+      });
     });
 
     describe('with active license', () => {
@@ -114,6 +144,10 @@ describe('CloudLicenseApp', () => {
           subscriptionList: subscriptionHistory,
         });
       });
+
+      it('does not the activation success notification', () => {
+        expect(findSubscriptionActivationSuccessAlert().exists()).toBe(false);
+      });
     });
   });
 });

locale/gitlab.pot

@@ -30974,6 +30974,9 @@ msgstr ""
 msgid "SuperSonics|Your subscription"
 msgstr ""
 
+msgid "SuperSonics|Your subscription was successfully activated. You can see the details below."
+msgstr ""
+
 msgid "Support"
 msgstr ""