Add button for mid-term upgrade

Adjust conditions for actions to show

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

@@ -2,6 +2,7 @@
 import { GlButton, GlModalDirective } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import {
+  activateCloudLicense,
   enterActivationCode,
   licensedToHeaderText,
   manageSubscriptionButtonText,
@@ -24,6 +25,7 @@ export const modalId = 'subscription-activation-modal';
 
 export default {
   i18n: {
+    activateCloudLicense,
     enterActivationCode,
     licensedToHeaderText,
     manageSubscriptionButtonText,
@@ -69,6 +71,12 @@ export default {
     };
   },
   computed: {
+    canActivateSubscription() {
+      return this.isLicenseFileType;
+    },
+    canEnterActivationCode() {
+      return this.isCloudType;
+    },
     canManageSubscription() {
       return this.customersPortalUrl && this.hasSubscription;
     },
@@ -95,6 +103,7 @@ export default {
     },
     shouldShowFooter() {
       return (
+        this.canActivateSubscription ||
         this.canRemoveLicense ||
         this.canManageSubscription ||
         this.canSyncSubscription ||
@@ -161,11 +170,20 @@ export default {
               {{ $options.i18n.syncSubscriptionButtonText }}
             </gl-button>
             <gl-button
-              v-if="hasSubscription"
+              v-if="canActivateSubscription"
+              v-gl-modal="$options.modal.id"
+              category="primary"
+              variant="confirm"
+              data-testid="subscription-activate-subscription-action"
+            >
+              {{ $options.i18n.activateCloudLicense }}
+            </gl-button>
+            <gl-button
+              v-if="canEnterActivationCode"
               v-gl-modal="$options.modal.id"
               category="primary"
               variant="confirm"
-              data-testid="subscription-activation-action"
+              data-testid="subscription-enter-code-action"
             >
               {{ $options.i18n.enterActivationCode }}
             </gl-button>

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

@@ -17,6 +17,7 @@ export const howToActivateSubscription = s__(
 export const activateLabel = s__('SuperSonics|Activate');
 export const activateSubscription = s__('SuperSonics|Activate subscription');
 export const enterActivationCode = s__('SuperSonics|Enter activation code');
+export const activateCloudLicense = s__('SuperSonics|Activate cloud license');
 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');

ee/spec/features/admin/subscriptions/admin_views_subscription_spec.rb

@@ -70,7 +70,7 @@ RSpec.describe 'Admin views Subscription', :js do
 
     context 'activate another subscription' do
       before do
-        click_button('Enter activation code')
+        click_button('Activate cloud license')
       end
 
       it 'shows the activation modal' do

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

@@ -43,8 +43,9 @@ describe('Subscription Breakdown', () => {
   const findDetailsUserInfo = () => wrapper.findComponent(SubscriptionDetailsUserInfo);
   const findLicenseUploadAction = () => wrapper.findByTestId('license-upload-action');
   const findLicenseRemoveAction = () => wrapper.findByTestId('license-remove-action');
-  const findSubscriptionActivationAction = () =>
-    wrapper.findByTestId('subscription-activation-action');
+  const findActivateSubscriptionAction = () =>
+    wrapper.findByTestId('subscription-activate-subscription-action');
+  const findEnterCodeAction = () => wrapper.findByTestId('subscription-enter-code-action');
   const findSubscriptionMangeAction = () => wrapper.findByTestId('subscription-manage-action');
   const findSubscriptionSyncAction = () => wrapper.findByTestId('subscription-sync-action');
   const findSubscriptionActivationModal = () => wrapper.findComponent(SubscriptionActivationModal);
@@ -137,12 +138,6 @@ describe('Subscription Breakdown', () => {
       expect(findDetailsCardFooter().exists()).toBe(true);
     });
 
-    it('shows a button to activate a new subscription', () => {
-      createComponent({ stubs: { GlCard, SubscriptionDetailsCard } });
-
-      expect(findSubscriptionActivationAction().exists()).toBe(true);
-    });
-
     it('presents a subscription activation modal', () => {
       expect(findSubscriptionActivationModal().exists()).toBe(true);
     });
@@ -248,6 +243,36 @@ describe('Subscription Breakdown', () => {
           expect(findLicenseRemoveAction().exists()).toBe(shouldShow);
         },
       );
+
+      it.each`
+        type                              | shouldShow
+        ${subscriptionTypes.LICENSE_FILE} | ${true}
+        ${subscriptionTypes.CLOUD}        | ${false}
+      `(
+        'with url is $url and type is $type the activate cloud license button is shown: $shouldShow',
+        ({ type, shouldShow }) => {
+          const props = { subscription: { ...license.ULTIMATE, type } };
+          const stubs = { GlCard, SubscriptionDetailsCard };
+          createComponent({ props, stubs });
+
+          expect(findActivateSubscriptionAction().exists()).toBe(shouldShow);
+        },
+      );
+
+      it.each`
+        type                              | shouldShow
+        ${subscriptionTypes.LICENSE_FILE} | ${false}
+        ${subscriptionTypes.CLOUD}        | ${true}
+      `(
+        'with url is $url and type is $type the enter activation code button is shown: $shouldShow',
+        ({ type, shouldShow }) => {
+          const props = { subscription: { ...license.ULTIMATE, type } };
+          const stubs = { GlCard, SubscriptionDetailsCard };
+          createComponent({ props, stubs });
+
+          expect(findEnterCodeAction().exists()).toBe(shouldShow);
+        },
+      );
     });
 
     describe('with a license file', () => {
@@ -269,6 +294,14 @@ describe('Subscription Breakdown', () => {
       it('does not show the sync subscription notifications', () => {
         expect(findSubscriptionSyncNotifications().exists()).toBe(false);
       });
+
+      it('shows a modal', () => {
+        const props = { subscription: { ...licenseFile } };
+        createComponent({ props, stubs: { GlCard, SubscriptionDetailsCard } });
+        findActivateSubscriptionAction().vm.$emit('click');
+
+        expect(glModalDirective).toHaveBeenCalledWith(modalId);
+      });
     });
 
     describe('sync a subscription success', () => {
@@ -372,7 +405,7 @@ describe('Subscription Breakdown', () => {
   describe('activating a new subscription', () => {
     it('shows a modal', () => {
       createComponent({ stubs: { GlCard, SubscriptionDetailsCard } });
-      findSubscriptionActivationAction().vm.$emit('click');
+      findEnterCodeAction().vm.$emit('click');
 
       expect(glModalDirective).toHaveBeenCalledWith(modalId);
     });

locale/gitlab.pot

@@ -31623,6 +31623,9 @@ msgstr ""
 msgid "SuperSonics|Activate"
 msgstr ""
 
+msgid "SuperSonics|Activate cloud license"
+msgstr ""
+
 msgid "SuperSonics|Activate subscription"
 msgstr ""