Cloud License - Adjust Subscription Activation Form

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

@@ -35,7 +35,13 @@ export default {
 
 <template>
   <div class="gl-display-flex gl-justify-content-center gl-flex-direction-column">
-    <h3 class="gl-mb-7 gl-mt-6 gl-text-center">{{ mainTitle }}</h3>
-    <cloud-license-subscription-activation-form v-if="!subscriptionData" />
+    <h4>{{ s__('CloudLicense|Your subscription') }}</h4>
+    <hr />
+    <div class="row">
+      <div class="col-12 col-lg-8 offset-lg-2">
+        <h3 class="gl-mb-7 gl-mt-6 gl-text-center">{{ mainTitle }}</h3>
+        <cloud-license-subscription-activation-form v-if="!subscriptionData" />
+      </div>
+    </div>
   </div>
 </template>

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

 <script>
-import { GlButton, GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import {
+  GlButton,
+  GlCard,
+  GlForm,
+  GlFormCheckbox,
+  GlFormGroup,
+  GlFormInput,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
 import activateSubscriptionMutation from 'ee/pages/admin/cloud_licenses/graphql/mutations/activate_subscription.mutation.graphql';
 
 export const SUBSCRIPTION_ACTIVATION_EVENT = 'subscription-activation';
@@ -8,16 +17,26 @@ export default {
   name: 'CloudLicenseSubscriptionActivationForm',
   components: {
     GlButton,
+    GlCard,
     GlForm,
     GlFormGroup,
     GlFormInput,
+    GlFormCheckbox,
+    GlSprintf,
+    GlLink,
   },
   data() {
     return {
       activationCode: null,
       isLoading: false,
+      termsAccepted: false,
     };
   },
+  computed: {
+    activateButtonDisabled() {
+      return this.isLoading || !this.termsAccepted;
+    },
+  },
   methods: {
     submit() {
       this.isLoading = true;
@@ -53,32 +72,65 @@ export default {
 };
 </script>
 <template>
-  <gl-form @submit.stop.prevent="submit">
-    <gl-form-group>
-      <div class="gl-display-flex gl-flex-wrap gl-justify-content-center">
-        <label class="gl-text-center gl-w-full" for="activation-code-group">
-          {{ s__('CloudLicense|Paste your activation code below') }}
-        </label>
-        <gl-form-input
-          id="activation-code-group"
-          v-model="activationCode"
-          :disabled="isLoading"
-          :placeholder="s__('CloudLicense|Paste your activation code')"
-          class="gl-mr-3"
-          required
-          size="xl"
-        />
-        <gl-button
-          :disabled="isLoading"
-          category="primary"
-          class="gl-align-self-end"
-          data-testid="activate-button"
-          type="submit"
-          variant="confirm"
-        >
-          {{ s__('CloudLicense|Activate') }}
-        </gl-button>
-      </div>
-    </gl-form-group>
-  </gl-form>
+  <gl-card>
+    <template #header>
+      <h5 class="gl-my-0 gl-font-weight-bold">{{ s__('CloudLicense|Activate subscription') }}</h5>
+    </template>
+
+    <p>
+      <gl-sprintf
+        :message="
+          s__('CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}.')
+        "
+      >
+        <template #link="{ content }">
+          <gl-link href="" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+    <gl-form @submit.stop.prevent="submit">
+      <gl-form-group class="gl-mb-0">
+        <div class="gl-display-flex gl-flex-wrap">
+          <label class="gl-w-full" for="activation-code-group">
+            {{ s__('CloudLicense|Activation code') }}
+          </label>
+          <gl-form-input
+            id="activation-code-group"
+            v-model="activationCode"
+            :disabled="isLoading"
+            :placeholder="s__('CloudLicense|Paste your activation code')"
+            class="gl-w-full gl-mb-4"
+            required
+          />
+
+          <gl-form-checkbox v-model="termsAccepted">
+            <gl-sprintf
+              :message="
+                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.',
+                )
+              "
+            >
+              <template #link="{ content }">
+                <gl-link href="https://about.gitlab.com/terms/" target="_blank">{{
+                  content
+                }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </gl-form-checkbox>
+
+          <gl-button
+            :disabled="activateButtonDisabled"
+            category="primary"
+            class="gl-mt-6"
+            data-testid="activate-button"
+            type="submit"
+            variant="confirm"
+          >
+            {{ s__('CloudLicense|Activate') }}
+          </gl-button>
+        </div>
+      </gl-form-group>
+    </gl-form>
+  </gl-card>
 </template>

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

-import { GlForm, GlFormInput } from '@gitlab/ui';
+import { GlForm, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import CloudLicenseSubscriptionActivationForm, {
@@ -25,8 +25,10 @@ describe('CloudLicenseApp', () => {
   };
 
   const findActivateButton = () => wrapper.findByTestId('activate-button');
+  const findAgreementCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findActivationCodeInput = () => wrapper.findComponent(GlFormInput);
   const findActivateSubscriptionForm = () => wrapper.findComponent(GlForm);
+  const enableAcceptAgreementCheckbox = () => findAgreementCheckbox().vm.$emit('input', true);
 
   const GlFormInputStub = stubComponent(GlFormInput, {
     template: `<input />`,
@@ -69,6 +71,21 @@ describe('CloudLicenseApp', () => {
 
     it('has an `Activate` button', () => {
       expect(findActivateButton().text()).toBe('Activate');
+    });
+
+    it('has a checkbox to accept subscription agreement', () => {
+      expect(findAgreementCheckbox().exists()).toBe(true);
+    });
+
+    it('disables the activate button if the agreement is unaccepted', () => {
+      expect(findActivateButton().props('disabled')).toBe(true);
+    });
+
+    it('enables the activate button if the agreement is accepted', async () => {
+      expect(findActivateButton().props('disabled')).toBe(true);
+      enableAcceptAgreementCheckbox();
+      await wrapper.vm.$nextTick();
+
       expect(findActivateButton().props('disabled')).toBe(false);
     });
   });

locale/gitlab.pot

@@ -6438,12 +6438,24 @@ msgstr ""
 msgid "CloudLicense|Activate"
 msgstr ""
 
+msgid "CloudLicense|Activate subscription"
+msgstr ""
+
+msgid "CloudLicense|Activation code"
+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|ID"
 msgstr ""
 
 msgid "CloudLicense|Last Sync"
 msgstr ""
 
+msgid "CloudLicense|Learn how to %{linkStart}activate your subscription%{linkEnd}."
+msgstr ""
+
 msgid "CloudLicense|Licensed to"
 msgstr ""
 
@@ -6453,9 +6465,6 @@ msgstr ""
 msgid "CloudLicense|Paste your activation code"
 msgstr ""
 
-msgid "CloudLicense|Paste your activation code below"
-msgstr ""
-
 msgid "CloudLicense|Plan"
 msgstr ""
 
@@ -6474,6 +6483,9 @@ msgstr ""
 msgid "CloudLicense|This instance is currently using the %{planName} plan."
 msgstr ""
 
+msgid "CloudLicense|Your subscription"
+msgstr ""
+
 msgid "Cluster"
 msgstr ""