Show invalid checkbox state in Activation Modal

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

@@ -11,7 +11,6 @@ import {
 import validation from '~/vue_shared/directives/validation';
 import {
   activateLabel,
-  fieldRequiredMessage,
   INVALID_CODE_ERROR,
   INVALID_CODE_ERROR_MESSAGE,
   subscriptionActivationForm,
@@ -37,7 +36,6 @@ export default {
     acceptTerms: subscriptionActivationForm.acceptTerms,
     activateLabel,
     activationCode: subscriptionActivationForm.activationCode,
-    fieldRequiredMessage,
     pasteActivationCode: subscriptionActivationForm.pasteActivationCode,
   },
   directives: {
@@ -74,6 +72,10 @@ export default {
     };
   },
   computed: {
+    checkboxLabelClass() {
+      // by default, if the value is not false the text will look green, therefore we force it to gray-900
+      return this.form.fields.terms.state === false ? '' : 'gl-text-gray-900!';
+    },
     isRequestingActivation() {
       return this.isLoading;
     },
@@ -142,11 +144,7 @@ export default {
         />
       </gl-form-group>
 
-      <gl-form-group
-        class="gl-mb-0"
-        :invalid-feedback="$options.i18n.fieldRequiredMessage"
-        data-testid="form-group-terms"
-      >
+      <gl-form-group class="gl-mb-0" data-testid="form-group-terms">
         <gl-form-checkbox
           id="subscription-form-terms-check"
           v-model="form.fields.terms.value"
@@ -155,7 +153,7 @@ export default {
           name="terms"
           required
         >
-          <span class="gl-text-gray-900!">
+          <span :class="checkboxLabelClass">
             <gl-sprintf :message="$options.i18n.acceptTerms">
               <template #link="{ content }">
                 <gl-link href="https://about.gitlab.com/terms/" target="_blank">{{

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

@@ -3,7 +3,6 @@ import activateSubscriptionMutation from './graphql/mutations/activate_subscript
 import getCurrentLicense from './graphql/queries/get_current_license.query.graphql';
 import getLicenseHistory from './graphql/queries/get_license_history.query.graphql';
 
-export const fieldRequiredMessage = s__('SuperSonics|This field is required.');
 export const subscriptionMainTitle = s__('SuperSonics|Your subscription');
 export const subscriptionActivationNotificationText = s__(
   `SuperSonics|Your subscription was successfully activated. You can see the details below.`,

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

@@ -7,7 +7,6 @@ import SubscriptionActivationForm, {
 } from 'ee/admin/subscriptions/show/components/subscription_activation_form.vue';
 import {
   CONNECTIVITY_ERROR,
-  fieldRequiredMessage,
   INVALID_CODE_ERROR,
   subscriptionQueries,
 } from 'ee/admin/subscriptions/show/constants';
@@ -20,11 +19,11 @@ import { activateLicenseMutationResponse } from '../mock_data';
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-describe('CloudLicenseApp', () => {
+describe('SubscriptionActivationForm', () => {
   let wrapper;
 
-  const fakeActivationCode = 'gEg959hDCkvM2d4Der5RyktT ';
-  const fakeActivationCodeTrimmed = 'gEg959hDCkvM2d4Der5RyktT';
+  const fakeActivationCodeTrimmed = 'aaasddfffdddas';
+  const fakeActivationCode = `${fakeActivationCodeTrimmed}   `;
 
   const createMockApolloProvider = (resolverMock) => {
     localVue.use(VueApollo);
@@ -34,7 +33,8 @@ 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 findAgreementCheckboxFormGroupSpan = () =>
+    wrapper.findByTestId('form-group-terms').find('span');
   const findActivationCodeFormGroup = () => wrapper.findByTestId('form-group-activation-code');
   const findActivationCodeInput = () => wrapper.findComponent(GlFormInput);
   const findActivateSubscriptionForm = () => wrapper.findComponent(GlForm);
@@ -67,7 +67,7 @@ describe('CloudLicenseApp', () => {
     wrapper.destroy();
   });
 
-  describe('Subscription Activation Form', () => {
+  describe('component setup', () => {
     beforeEach(() => createComponentWithApollo());
 
     it('presents a form', () => {
@@ -78,6 +78,10 @@ describe('CloudLicenseApp', () => {
       expect(findActivationCodeInput().exists()).toBe(true);
     });
 
+    it('applies a class to the checkbox', () => {
+      expect(findAgreementCheckboxFormGroupSpan().attributes('class')).toBe('gl-text-gray-900!');
+    });
+
     it('has an `Activate` button', () => {
       expect(findActivateButton().text()).toBe('Activate');
     });
@@ -91,26 +95,20 @@ describe('CloudLicenseApp', () => {
     });
   });
 
-  describe('form errors', () => {
+  describe('form validation', () => {
     const mutationMock = jest.fn();
-    beforeEach(() => {
-      createComponentWithApollo({ mutationMock });
+    beforeEach(async () => {
+      createComponentWithApollo({ mutationMock, mountMethod: mount });
+      await findAgreementCheckbox().vm.$emit('input', false);
+      findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
     });
 
-    it('shows an error for the text field', async () => {
-      await findActivateSubscriptionForm().vm.$emit('submit', createFakeEvent());
-
-      expect(findActivationCodeFormGroup().attributes('invalid-feedback')).toBe(
-        'Please fill out this field.',
-      );
+    it('shows an error for the text field', () => {
+      expect(findActivationCodeFormGroup().text()).toContain('Please fill out this field.');
     });
 
-    it('shows an error for the checkbox field', async () => {
-      await findActivationCodeInput().vm.$emit('input', fakeActivationCode);
-
-      expect(findAgreementCheckboxFormGroup().attributes('invalid-feedback')).toBe(
-        fieldRequiredMessage,
-      );
+    it('applies the correct class', () => {
+      expect(findAgreementCheckboxFormGroupSpan().attributes('class')).toBe('');
     });
 
     it('does not perform any mutation', () => {

locale/gitlab.pot

@@ -31521,9 +31521,6 @@ msgstr ""
 msgid "SuperSonics|There is a connectivity issue."
 msgstr ""
 
-msgid "SuperSonics|This field is required."
-msgstr ""
-
 msgid "SuperSonics|This is the highest peak of users on your installation since the license started."
 msgstr ""