Add validate account button on CI/CD shared runners page

Previously once a user disabled shared runners, the only way to get this
modal to display would be to create a new project with a
`.gitlab-ci.yml`, let the pipeline fail, visit the pipeline, and then
find this same modal.

If credit card validation is required to enable shared runners for a
given project, this change will now display the `Validate account`
button and direct the user to the validation.

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

Changelog: added
EE: true

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

@@ -10,6 +10,8 @@ export default {
     GlAlert,
     GlToggle,
     GlTooltip,
+    CcValidationRequiredAlert: () =>
+      import('ee_component/billings/components/cc_validation_required_alert.vue'),
   },
   props: {
     isDisabledAndUnoverridable: {
@@ -20,6 +22,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    isCreditCardValidationRequired: {
+      type: Boolean,
+      required: false,
+    },
     updatePath: {
       type: String,
       required: true,
@@ -34,6 +40,7 @@ export default {
   },
   created() {
     this.isSharedRunnerEnabled = this.isEnabled;
+    this.ccValidationRequired = this.isCreditCardValidationRequired;
   },
   methods: {
     toggleSharedRunners() {
@@ -45,6 +52,7 @@ export default {
         .then(() => {
           this.isLoading = false;
           this.isSharedRunnerEnabled = !this.isSharedRunnerEnabled;
+          this.ccValidationRequired = this.isCreditCardValidationRequired;
         })
         .catch((error) => {
           this.isLoading = false;
@@ -61,7 +69,11 @@ export default {
       <gl-alert v-if="errorMessage" class="gl-mb-3" variant="danger" :dismissible="false">
         {{ errorMessage }}
       </gl-alert>
-      <div ref="sharedRunnersToggle">
+
+      <div v-if="this.isCreditCardValidationRequired && !this.isSharedRunnerEnabled">
+        <cc-validation-required-alert class="gl-pb-5" />
+      </div>
+      <div v-else ref="sharedRunnersToggle">
         <gl-toggle
           :disabled="isDisabledAndUnoverridable"
           :is-loading="isLoading"
@@ -71,6 +83,7 @@ export default {
           @change="toggleSharedRunners"
         />
       </div>
+
       <gl-tooltip v-if="isDisabledAndUnoverridable" :target="() => $refs.sharedRunnersToggle">
         {{ __('Shared runners are disabled on group level') }}
       </gl-tooltip>

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

@@ -4,7 +4,7 @@ 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 } = containerEl.dataset;
+  const { isDisabledAndUnoverridable, isEnabled, updatePath, isCreditCardValidationRequired } = containerEl.dataset;
 
   return new Vue({
     el: containerEl,
@@ -13,6 +13,7 @@ export default (containerId = 'toggle-shared-runners-form') => {
         props: {
           isDisabledAndUnoverridable: parseBoolean(isDisabledAndUnoverridable),
           isEnabled: parseBoolean(isEnabled),
+          isCreditCardValidationRequired: parseBoolean(isCreditCardValidationRequired),
           updatePath,
         },
       });

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

@@ -3,9 +3,15 @@ module EE
   module Ci
     module RunnersHelper
       include ::Gitlab::Utils::StrongMemoize
+      extend ::Gitlab::Utils::Override
 
       BUY_PIPELINE_MINUTES_NOTIFICATION_DOT = 'buy_pipeline_minutes_notification_dot'
 
+      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)}")
+      end
+
       def show_buy_pipeline_minutes?(project, namespace)
         return false unless ::Gitlab.dev_env_or_com?