Refresh shared runner state when credit card is validated

Once validated, this enables a user that disabled shared runners to
enable them again.

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

@@ -36,13 +36,17 @@ export default {
       isLoading: false,
       isSharedRunnerEnabled: false,
       errorMessage: null,
+      isCcValidationRequired: false,
     };
   },
   created() {
     this.isSharedRunnerEnabled = this.isEnabled;
-    this.ccValidationRequired = this.isCreditCardValidationRequired;
+    this.isCcValidationRequired = this.isCreditCardValidationRequired;
   },
   methods: {
+    creditCardValidated() {
+      this.isCcValidationRequired = false;
+    },
     toggleSharedRunners() {
       this.isLoading = true;
       this.errorMessage = null;
@@ -52,7 +56,7 @@ export default {
         .then(() => {
           this.isLoading = false;
           this.isSharedRunnerEnabled = !this.isSharedRunnerEnabled;
-          this.ccValidationRequired = this.isCreditCardValidationRequired;
+          this.isCcValidationRequired = this.isCreditCardValidationRequired;
         })
         .catch((error) => {
           this.isLoading = false;
@@ -70,8 +74,8 @@ export default {
         {{ errorMessage }}
       </gl-alert>
 
-      <div v-if="this.isCreditCardValidationRequired && !this.isSharedRunnerEnabled">
-        <cc-validation-required-alert class="gl-pb-5" />
+      <div v-if="isCcValidationRequired && !isSharedRunnerEnabled">
+        <cc-validation-required-alert class="gl-pb-5" @verifiedCreditCard="creditCardValidated" />
       </div>
       <div v-else ref="sharedRunnersToggle">
         <gl-toggle

app/assets/javascripts/projects/settings/mount_shared_runners_toggle.js

@@ -4,7 +4,12 @@ import SharedRunnersToggle from '~/projects/settings/components/shared_runners_t
 
 export default (containerId = 'toggle-shared-runners-form') => {
   const containerEl = document.getElementById(containerId);
-  const { isDisabledAndUnoverridable, isEnabled, updatePath, isCreditCardValidationRequired } = containerEl.dataset;
+  const {
+    isDisabledAndUnoverridable,
+    isEnabled,
+    updatePath,
+    isCreditCardValidationRequired,
+  } = containerEl.dataset;
 
   return new Vue({
     el: containerEl,

ee/app/assets/javascripts/billings/components/cc_validation_required_alert.vue

@@ -48,6 +48,7 @@ export default {
     handleSuccessfulVerification() {
       this.$refs.modal.hide();
       this.shouldRenderSuccess = true;
+      this.$emit('verifiedCreditCard');
     },
   },
   i18n,

ee/app/helpers/ee/ci/runners_helper.rb

@@ -9,7 +9,11 @@ module EE
 
       override :toggle_shared_runners_settings_data
       def toggle_shared_runners_settings_data(project)
-        super.merge(is_credit_card_validation_required: "#{!current_user&.has_required_credit_card_to_enable_shared_runners?(project)}")
+        super.merge(is_credit_card_validation_required: "#{validate_credit_card?(project)}")
+      end
+
+      def validate_credit_card?(project)
+        !current_user.has_required_credit_card_to_enable_shared_runners?(project)
       end
 
       def show_buy_pipeline_minutes?(project, namespace)

ee/spec/frontend/billings/components/cc_validation_required_alert_spec.js

 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import AccountVerificationModal from 'ee/billings/components/account_verification_modal.vue';
 import CreditCardValidationRequiredAlert from 'ee/billings/components/cc_validation_required_alert.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 
@@ -26,6 +27,7 @@ describe('CreditCardValidationRequiredAlert', () => {
     };
 
     wrapper = createComponent();
+    wrapper.vm.$refs.modal.hide = jest.fn();
   });
 
   afterEach(() => {
@@ -49,4 +51,11 @@ describe('CreditCardValidationRequiredAlert', () => {
 
     expect(findGlAlert().attributes('variant')).toBe('success');
   });
+
+  it('hides the modal and emits a verifiedCreditCard event upon success', () => {
+    wrapper.findComponent(AccountVerificationModal).vm.$emit('success');
+
+    expect(wrapper.vm.$refs.modal.hide).toHaveBeenCalled();
+    expect(wrapper.emitted('verifiedCreditCard')).toBeDefined();
+  });
 });

ee/spec/helpers/ee/ci/runners_helper_spec.rb

@@ -81,6 +81,30 @@ RSpec.describe EE::Ci::RunnersHelper do
     end
   end
 
+  describe '#toggle_shared_runners_settings_data' do
+    let(:valid_card) { true }
+
+    subject { helper.toggle_shared_runners_settings_data(project) }
+
+    before do
+      expect(user).to receive(:has_required_credit_card_to_enable_shared_runners?).with(project).and_return(valid_card)
+    end
+
+    context 'when user has a valid credit card' do
+      it 'return is_credit_card_validation_required as "false"' do
+        expect(subject[:is_credit_card_validation_required]).to eq('false')
+      end
+    end
+
+    context 'when user does not have a valid credit card' do
+      let(:valid_card) { false }
+
+      it 'return is_credit_card_validation_required as "true"' do
+        expect(subject[:is_credit_card_validation_required]).to eq('true')
+      end
+    end
+  end
+
   context 'with notifications' do
     let(:dev_env_or_com) { true }
 

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

 import { GlAlert, GlToggle, GlTooltip } 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';
@@ -20,6 +22,7 @@ describe('projects/settings/components/shared_runners', () => {
         isDisabledAndUnoverridable: false,
         isLoading: false,
         updatePath: TEST_UPDATE_PATH,
+        isCreditCardValidationRequired: false,
         ...props,
       },
     });
@@ -28,6 +31,7 @@ describe('projects/settings/components/shared_runners', () => {
   const findErrorAlert = () => wrapper.find(GlAlert);
   const findSharedRunnersToggle = () => wrapper.find(GlToggle);
   const findToggleTooltip = () => wrapper.find(GlTooltip);
+  const findCcValidationRequiredAlert = () => wrapper.find(CcValidationRequiredAlert);
   const getToggleValue = () => findSharedRunnersToggle().props('value');
   const isToggleLoading = () => findSharedRunnersToggle().props('isLoading');
   const isToggleDisabled = () => findSharedRunnersToggle().props('disabled');
@@ -154,4 +158,37 @@ describe('projects/settings/components/shared_runners', () => {
       });
     });
   });
+
+  describe('with credit card validation required and shared runners DISABLED', () => {
+    beforeEach(() => {
+      window.gon = {
+        subscriptions_url: TEST_HOST,
+        payment_form_url: TEST_HOST,
+      };
+
+      createComponent({
+        isCreditCardValidationRequired: true,
+        isEnabled: false,
+      });
+    });
+
+    it('toggle should not be visible', () => {
+      expect(findSharedRunnersToggle().exists()).toBe(false);
+    });
+
+    it('credit card validation component should exist', () => {
+      expect(findCcValidationRequiredAlert().exists()).toBe(true);
+    });
+
+    describe('when credit card is validated', () => {
+      it('should show the toggle button', async () => {
+        findCcValidationRequiredAlert().vm.$emit('verifiedCreditCard');
+        await waitForPromises();
+
+        expect(findSharedRunnersToggle().exists()).toBe(true);
+        expect(getToggleValue()).toBe(false);
+        expect(isToggleDisabled()).toBe(false);
+      });
+    });
+  });
 });

spec/helpers/ci/runners_helper_spec.rb

@@ -3,6 +3,12 @@
 require 'spec_helper'
 
 RSpec.describe Ci::RunnersHelper do
+  let_it_be(:user, refind: true) { create(:user) }
+
+  before do
+    allow(helper).to receive(:current_user).and_return(user)
+  end
+
   describe '#runner_status_icon', :clean_gitlab_redis_cache do
     it "returns - not contacted yet" do
       runner = create(:ci_runner)
@@ -90,28 +96,28 @@ RSpec.describe Ci::RunnersHelper do
 
     context 'when project has runners' do
       it 'returns the correct value for is_enabled' do
-        data = toggle_shared_runners_settings_data(project_with_runners)
+        data = helper.toggle_shared_runners_settings_data(project_with_runners)
         expect(data[:is_enabled]).to eq("true")
       end
     end
 
     context 'when project does not have runners' do
       it 'returns the correct value for is_enabled' do
-        data = toggle_shared_runners_settings_data(project_without_runners)
+        data = helper.toggle_shared_runners_settings_data(project_without_runners)
         expect(data[:is_enabled]).to eq("false")
       end
     end
 
     context 'for all projects' do
       it 'returns the update path for toggling the shared runners setting' do
-        data = toggle_shared_runners_settings_data(project_with_runners)
+        data = helper.toggle_shared_runners_settings_data(project_with_runners)
         expect(data[:update_path]).to eq(toggle_shared_runners_project_runners_path(project_with_runners))
       end
 
       it 'returns false for is_disabled_and_unoverridable when project has no group' do
         project = create(:project)
 
-        data = toggle_shared_runners_settings_data(project)
+        data = helper.toggle_shared_runners_settings_data(project)
         expect(data[:is_disabled_and_unoverridable]).to eq("false")
       end
 
@@ -129,7 +135,7 @@ RSpec.describe Ci::RunnersHelper do
           project = create(:project, group: group)
           allow(group).to receive(:shared_runners_setting).and_return(shared_runners_setting)
 
-          data = toggle_shared_runners_settings_data(project)
+          data = helper.toggle_shared_runners_settings_data(project)
           expect(data[:is_disabled_and_unoverridable]).to eq(is_disabled_and_unoverridable)
         end
       end