Use the validation directive for the checkbox

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

@@ -23,7 +23,7 @@ export const SUBSCRIPTION_ACTIVATION_FAILURE_EVENT = 'subscription-activation-fa
 export const SUBSCRIPTION_ACTIVATION_SUCCESS_EVENT = 'subscription-activation-success';
 
 export default {
-  name: 'CloudLicenseSubscriptionActivationForm',
+  name: 'SubscriptionActivationForm',
   components: {
     GlButton,
     GlForm,
@@ -64,6 +64,7 @@ export default {
         terms: {
           required: true,
           state: null,
+          value: null,
         },
       },
     };
@@ -73,12 +74,6 @@ export default {
     };
   },
   computed: {
-    isCheckboxValid() {
-      if (this.form.showValidation) {
-        return this.form.fields.terms.state ? null : false;
-      }
-      return null;
-    },
     isRequestingActivation() {
       return this.isLoading;
     },
@@ -149,22 +144,26 @@ export default {
 
       <gl-form-group
         class="gl-mb-0"
-        :state="isCheckboxValid"
         :invalid-feedback="$options.i18n.fieldRequiredMessage"
         data-testid="form-group-terms"
       >
         <gl-form-checkbox
           id="subscription-form-terms-check"
-          v-model="form.fields.terms.state"
-          :state="isCheckboxValid"
+          v-model="form.fields.terms.value"
+          v-validation:[form.showValidation]
+          :state="form.fields.terms.state"
+          name="terms"
+          required
         >
-          <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>
+          <span class="gl-text-gray-900!">
+            <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>
+          </span>
         </gl-form-checkbox>
       </gl-form-group>
 

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

 import { GlForm, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import SubscriptionActivationForm, {
   SUBSCRIPTION_ACTIVATION_FAILURE_EVENT,
@@ -33,6 +33,7 @@ describe('CloudLicenseApp', () => {
 
   const findActivateButton = () => wrapper.findByTestId('activate-button');
   const findAgreementCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findAgreementCheckboxInput = () => findAgreementCheckbox().find('input');
   const findAgreementCheckboxFormGroup = () => wrapper.findByTestId('form-group-terms');
   const findActivationCodeFormGroup = () => wrapper.findByTestId('form-group-activation-code');
   const findActivationCodeInput = () => wrapper.findComponent(GlFormInput);
@@ -43,9 +44,13 @@ describe('CloudLicenseApp', () => {
   });
 
   const createFakeEvent = () => ({ preventDefault, stopPropagation });
-  const createComponentWithApollo = ({ props = {}, mutationMock } = {}) => {
+  const createComponentWithApollo = ({
+    props = {},
+    mutationMock,
+    mountMethod = shallowMount,
+  } = {}) => {
     wrapper = extendedWrapper(
-      shallowMount(SubscriptionActivationForm, {
+      mountMethod(SubscriptionActivationForm, {
         localVue,
         apolloProvider: createMockApolloProvider(mutationMock),
         propsData: {
@@ -117,10 +122,10 @@ describe('CloudLicenseApp', () => {
     describe('when submitting the mutation is successful', () => {
       const mutationMock = jest.fn().mockResolvedValue(activateLicenseMutationResponse.SUCCESS);
       beforeEach(async () => {
-        createComponentWithApollo({ mutationMock });
+        createComponentWithApollo({ mutationMock, mountMethod: mount });
         jest.spyOn(wrapper.vm, 'updateSubscriptionAppCache').mockImplementation();
         await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
-        await findAgreementCheckbox().vm.$emit('input', true);
+        await findAgreementCheckboxInput().trigger('click');
         findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
       });
 
@@ -164,9 +169,9 @@ describe('CloudLicenseApp', () => {
         .fn()
         .mockResolvedValue(activateLicenseMutationResponse.CONNECTIVITY_ERROR);
       beforeEach(async () => {
-        createComponentWithApollo({ mutationMock });
+        createComponentWithApollo({ mutationMock, mountMethod: mount });
         await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
-        await findAgreementCheckbox().vm.$emit('input', true);
+        await findAgreementCheckboxInput().trigger('click');
         findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
       });
 
@@ -182,9 +187,9 @@ describe('CloudLicenseApp', () => {
         .fn()
         .mockResolvedValue(activateLicenseMutationResponse.INVALID_CODE_ERROR);
       beforeEach(async () => {
-        createComponentWithApollo({ mutationMock });
+        createComponentWithApollo({ mutationMock, mountMethod: mount });
         await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
-        await findAgreementCheckbox().vm.$emit('input', true);
+        await findAgreementCheckboxInput().trigger('click');
         findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
       });