diff options
Diffstat (limited to 'app/assets/javascripts/group_settings/components/shared_runners_form.vue')
-rw-r--r-- | app/assets/javascripts/group_settings/components/shared_runners_form.vue | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/app/assets/javascripts/group_settings/components/shared_runners_form.vue b/app/assets/javascripts/group_settings/components/shared_runners_form.vue new file mode 100644 index 00000000000..e396521ce7c --- /dev/null +++ b/app/assets/javascripts/group_settings/components/shared_runners_form.vue @@ -0,0 +1,139 @@ +<script> +import { GlToggle, GlLoadingIcon, GlTooltip, GlAlert } from '@gitlab/ui'; +import { debounce } from 'lodash'; +import { __ } from '~/locale'; +import axios from '~/lib/utils/axios_utils'; +import { + DEBOUNCE_TOGGLE_DELAY, + ERROR_MESSAGE, + ENABLED, + DISABLED, + ALLOW_OVERRIDE, +} from '../constants'; + +export default { + components: { + GlToggle, + GlLoadingIcon, + GlTooltip, + GlAlert, + }, + props: { + updatePath: { + type: String, + required: true, + }, + sharedRunnersAvailability: { + type: String, + required: true, + }, + parentSharedRunnersAvailability: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + isLoading: false, + enabled: true, + allowOverride: false, + error: null, + }; + }, + computed: { + toggleDisabled() { + return this.parentSharedRunnersAvailability === DISABLED || this.isLoading; + }, + enabledOrDisabledSetting() { + return this.enabled ? ENABLED : DISABLED; + }, + disabledWithOverrideSetting() { + return this.allowOverride ? ALLOW_OVERRIDE : DISABLED; + }, + }, + created() { + if (this.sharedRunnersAvailability !== ENABLED) { + this.enabled = false; + } + + if (this.sharedRunnersAvailability === ALLOW_OVERRIDE) { + this.allowOverride = true; + } + }, + methods: { + generatePayload(data) { + return { shared_runners_setting: data }; + }, + enableOrDisable() { + this.updateRunnerSettings(this.generatePayload(this.enabledOrDisabledSetting)); + + // reset override toggle to false if shared runners are enabled + this.allowOverride = false; + }, + override() { + this.updateRunnerSettings(this.generatePayload(this.disabledWithOverrideSetting)); + }, + updateRunnerSettings: debounce(function debouncedUpdateRunnerSettings(setting) { + this.isLoading = true; + + axios + .put(this.updatePath, setting) + .then(() => { + this.isLoading = false; + }) + .catch(error => { + const message = [ + error.response?.data?.error || __('An error occurred while updating configuration.'), + ERROR_MESSAGE, + ].join(' '); + + this.error = message; + }); + }, DEBOUNCE_TOGGLE_DELAY), + }, +}; +</script> + +<template> + <div ref="sharedRunnersForm"> + <gl-alert v-if="error" variant="danger" :dismissible="false">{{ error }}</gl-alert> + + <h4 class="gl-display-flex gl-align-items-center"> + {{ __('Set up shared runner availability') }} + <gl-loading-icon v-if="isLoading" class="gl-ml-3" inline /> + </h4> + + <section class="gl-mt-5"> + <gl-toggle + v-model="enabled" + :disabled="toggleDisabled" + :label="__('Enable shared runners for this group')" + data-testid="enable-runners-toggle" + @change="enableOrDisable" + /> + + <span class="gl-text-gray-600"> + {{ __('Enable shared runners for all projects and subgroups in this group.') }} + </span> + </section> + + <section v-if="!enabled" class="gl-mt-5"> + <gl-toggle + v-model="allowOverride" + :disabled="toggleDisabled" + :label="__('Allow projects and subgroups to override the group setting')" + data-testid="override-runners-toggle" + @change="override" + /> + + <span class="gl-text-gray-600"> + {{ __('Allows projects or subgroups in this group to override the global setting.') }} + </span> + </section> + + <gl-tooltip v-if="toggleDisabled" :target="() => $refs.sharedRunnersForm"> + {{ __('Shared runners are disabled for the parent group') }} + </gl-tooltip> + </div> +</template> |