Merge branch 'sh-cc-validation-toggle-fix' into 'master'

Fix toggling of shared runners when credit card is needed

See merge request gitlab-org/gitlab!65100

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);
+      });
     });
   });
 });