diff options
Diffstat (limited to 'app/assets/javascripts/projects/settings')
-rw-r--r-- | app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue | 59 | ||||
-rw-r--r-- | app/assets/javascripts/projects/settings/mount_shared_runners_toggle.js | 8 |
2 files changed, 52 insertions, 15 deletions
diff --git a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue index 0786a74f6b1..e4edb950a1e 100644 --- a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue +++ b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue @@ -1,15 +1,23 @@ <script> import { GlAlert, GlToggle, GlTooltip } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; const DEFAULT_ERROR_MESSAGE = __('An error occurred while updating the configuration.'); +const REQUIRES_VALIDATION_TEXT = s__( + `Billings|Shared runners cannot be enabled until a valid credit card is on file.`, +); export default { + i18n: { + REQUIRES_VALIDATION_TEXT, + }, components: { GlAlert, GlToggle, GlTooltip, + CcValidationRequiredAlert: () => + import('ee_component/billings/components/cc_validation_required_alert.vue'), }, props: { isDisabledAndUnoverridable: { @@ -20,6 +28,10 @@ export default { type: Boolean, required: true, }, + isCreditCardValidationRequired: { + type: Boolean, + required: false, + }, updatePath: { type: String, required: true, @@ -28,14 +40,24 @@ export default { data() { return { isLoading: false, - isSharedRunnerEnabled: false, + isSharedRunnerEnabled: this.isEnabled, errorMessage: null, + successfulValidation: false, }; }, - created() { - this.isSharedRunnerEnabled = this.isEnabled; + computed: { + showCreditCardValidation() { + return ( + this.isCreditCardValidationRequired && + !this.isSharedRunnerEnabled && + !this.successfulValidation + ); + }, }, methods: { + creditCardValidated() { + this.successfulValidation = true; + }, toggleSharedRunners() { this.isLoading = true; this.errorMessage = null; @@ -61,16 +83,25 @@ export default { <gl-alert v-if="errorMessage" class="gl-mb-3" variant="danger" :dismissible="false"> {{ errorMessage }} </gl-alert> - <div ref="sharedRunnersToggle"> - <gl-toggle - :disabled="isDisabledAndUnoverridable" - :is-loading="isLoading" - :label="__('Enable shared runners for this project')" - :value="isSharedRunnerEnabled" - data-testid="toggle-shared-runners" - @change="toggleSharedRunners" - /> - </div> + + <cc-validation-required-alert + v-if="showCreditCardValidation" + class="gl-pb-5" + :custom-message="$options.i18n.REQUIRES_VALIDATION_TEXT" + @verifiedCreditCard="creditCardValidated" + /> + + <gl-toggle + v-else + ref="sharedRunnersToggle" + :disabled="isDisabledAndUnoverridable" + :is-loading="isLoading" + :label="__('Enable shared runners for this project')" + :value="isSharedRunnerEnabled" + data-testid="toggle-shared-runners" + @change="toggleSharedRunners" + /> + <gl-tooltip v-if="isDisabledAndUnoverridable" :target="() => $refs.sharedRunnersToggle"> {{ __('Shared runners are disabled on group level') }} </gl-tooltip> diff --git a/app/assets/javascripts/projects/settings/mount_shared_runners_toggle.js b/app/assets/javascripts/projects/settings/mount_shared_runners_toggle.js index eaeb5848b68..5ca864a412b 100644 --- a/app/assets/javascripts/projects/settings/mount_shared_runners_toggle.js +++ b/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 } = containerEl.dataset; + const { + isDisabledAndUnoverridable, + isEnabled, + updatePath, + isCreditCardValidationRequired, + } = containerEl.dataset; return new Vue({ el: containerEl, @@ -13,6 +18,7 @@ export default (containerId = 'toggle-shared-runners-form') => { props: { isDisabledAndUnoverridable: parseBoolean(isDisabledAndUnoverridable), isEnabled: parseBoolean(isEnabled), + isCreditCardValidationRequired: parseBoolean(isCreditCardValidationRequired), updatePath, }, }); |