Fix toggling of shared runners when credit card is needed

This fixes a minor UI bug where when after validating an account,
toggling the shared runners on and off again will cause the validation
error to display again. Users can workaround this by reloading the page.

To avoid this problem, once we've successfully validated, we store that
state and use it to determine to show the warning. This also simplifies
the code.

Relates to https://gitlab.com/gitlab-org/gitlab/-/issues/334322

app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue

@@ -40,18 +40,23 @@ export default {
   data() {
     return {
       isLoading: false,
-      isSharedRunnerEnabled: false,
+      isSharedRunnerEnabled: this.isEnabled,
       errorMessage: null,
-      isCcValidationRequired: false,
+      successfulValidation: false,
     };
   },
-  created() {
-    this.isSharedRunnerEnabled = this.isEnabled;
-    this.isCcValidationRequired = this.isCreditCardValidationRequired;
+  computed: {
+    showCreditCardValidation() {
+      return (
+        this.isCreditCardValidationRequired &&
+        !this.isSharedRunnerEnabled &&
+        !this.successfulValidation
+      );
+    },
   },
   methods: {
     creditCardValidated() {
-      this.isCcValidationRequired = false;
+      this.successfulValidation = true;
     },
     toggleSharedRunners() {
       this.isLoading = true;
@@ -62,7 +67,6 @@ export default {
         .then(() => {
           this.isLoading = false;
           this.isSharedRunnerEnabled = !this.isSharedRunnerEnabled;
-          this.isCcValidationRequired = this.isCreditCardValidationRequired;
         })
         .catch((error) => {
           this.isLoading = false;
@@ -81,7 +85,7 @@ export default {
       </gl-alert>
 
       <cc-validation-required-alert
-        v-if="isCcValidationRequired && !isSharedRunnerEnabled"
+        v-if="showCreditCardValidation"
         class="gl-pb-5"
         :custom-message="$options.i18n.REQUIRES_VALIDATION_TEXT"
         @verifiedCreditCard="creditCardValidated"

ee/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js

 import { GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import MockAxiosAdapter from 'axios-mock-adapter';
 import CcValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
+import axios from '~/lib/utils/axios_utils';
 import SharedRunnersToggleComponent from '~/projects/settings/components/shared_runners_toggle.vue';
 
 const TEST_UPDATE_PATH = '/test/update_shared_runners';
 
 describe('projects/settings/components/shared_runners', () => {
   let wrapper;
+  let mockAxios;
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(SharedRunnersToggleComponent, {
@@ -28,6 +31,11 @@ describe('projects/settings/components/shared_runners', () => {
   const getToggleValue = () => findSharedRunnersToggle().props('value');
   const isToggleDisabled = () => findSharedRunnersToggle().props('disabled');
 
+  beforeEach(() => {
+    mockAxios = new MockAxiosAdapter(axios);
+    mockAxios.onPost(TEST_UPDATE_PATH).reply(200);
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -57,14 +65,31 @@ describe('projects/settings/components/shared_runners', () => {
     });
 
     describe('when credit card is validated', () => {
-      it('should show the toggle button', async () => {
+      beforeEach(() => {
         findCcValidationRequiredAlert().vm.$emit('verifiedCreditCard');
-        await waitForPromises();
+      });
 
+      it('should show the toggle button', () => {
         expect(findSharedRunnersToggle().exists()).toBe(true);
         expect(getToggleValue()).toBe(false);
         expect(isToggleDisabled()).toBe(false);
       });
+
+      it('should not show credit card alert after toggling on and off', async () => {
+        findSharedRunnersToggle().vm.$emit('change', true);
+        await waitForPromises();
+
+        expect(mockAxios.history.post[0].data).toBeUndefined();
+        expect(mockAxios.history.post).toHaveLength(1);
+        expect(findCcValidationRequiredAlert().exists()).toBe(false);
+
+        findSharedRunnersToggle().vm.$emit('change', false);
+        await waitForPromises();
+
+        expect(mockAxios.history.post[1].data).toBeUndefined();
+        expect(mockAxios.history.post).toHaveLength(2);
+        expect(findCcValidationRequiredAlert().exists()).toBe(false);
+      });
     });
   });
 });