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>