Add latest changes from gitlab-org/gitlab@master

3 files changed, 70 insertions, 81 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
index dcac337c6ef..3365f4aa76c 100644
--- a/app/assets/javascripts/group_settings/components/shared_runners_form.vue
+++ b/app/assets/javascripts/group_settings/components/shared_runners_form.vue
@@ -1,73 +1,64 @@
 <script>
-import { GlToggle, GlLoadingIcon, GlTooltip, GlAlert } from '@gitlab/ui';
-import { debounce } from 'lodash';
+import { GlToggle, GlAlert } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import { DEBOUNCE_TOGGLE_DELAY, ERROR_MESSAGE } from '../constants';
+import { ERROR_MESSAGE } from '../constants';
 
 export default {
   components: {
     GlToggle,
-    GlLoadingIcon,
-    GlTooltip,
     GlAlert,
   },
   inject: [
     'updatePath',
-    'sharedRunnersAvailability',
-    'parentSharedRunnersAvailability',
-    'runnerEnabled',
-    'runnerDisabled',
-    'runnerAllowOverride',
+    'sharedRunnersSetting',
+    'parentSharedRunnersSetting',
+    'runnerEnabledValue',
+    'runnerDisabledValue',
+    'runnerAllowOverrideValue',
   ],
   data() {
     return {
       isLoading: false,
-      enabled: true,
-      allowOverride: false,
+      value: this.sharedRunnersSetting,
       error: null,
     };
   },
   computed: {
-    toggleDisabled() {
-      return this.parentSharedRunnersAvailability === this.runnerDisabled || this.isLoading;
+    isSharedRunnersToggleDisabled() {
+      return this.parentSharedRunnersSetting === this.runnerDisabledValue;
     },
-    enabledOrDisabledSetting() {
-      return this.enabled ? this.runnerEnabled : this.runnerDisabled;
+    sharedRunnersToggleValue() {
+      return this.value === this.runnerEnabledValue;
     },
-    disabledWithOverrideSetting() {
-      return this.allowOverride ? this.runnerAllowOverride : this.runnerDisabled;
+    isOverrideToggleDisabled() {
+      // cannot override when sharing is enabled
+      return this.isSharedRunnersToggleDisabled || this.value === this.runnerEnabledValue;
+    },
+    overrideToggleValue() {
+      return this.value === this.runnerAllowOverrideValue;
     },
-  },
-  created() {
-    if (this.sharedRunnersAvailability !== this.runnerEnabled) {
-      this.enabled = false;
-    }
-
-    if (this.sharedRunnersAvailability === this.runnerAllowOverride) {
-      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;
+    onSharedRunnersToggle(value) {
+      const newSetting = value ? this.runnerEnabledValue : this.runnerDisabledValue;
+      this.updateSetting(newSetting);
     },
-    override() {
-      this.updateRunnerSettings(this.generatePayload(this.disabledWithOverrideSetting));
+    onOverrideToggle(value) {
+      const newSetting = value ? this.runnerAllowOverrideValue : this.runnerDisabledValue;
+      this.updateSetting(newSetting);
     },
-    updateRunnerSettings: debounce(function debouncedUpdateRunnerSettings(setting) {
+    updateSetting(setting) {
+      if (this.isLoading) {
+        return;
+      }
+
       this.isLoading = true;
 
       axios
-        .put(this.updatePath, setting)
+        .put(this.updatePath, { shared_runners_setting: setting })
         .then(() => {
-          this.isLoading = false;
+          this.value = setting;
         })
         .catch((error) => {
           const message = [
@@ -76,51 +67,52 @@ export default {
           ].join(' ');
 
           this.error = message;
+        })
+        .finally(() => {
+          this.isLoading = false;
         });
-    }, DEBOUNCE_TOGGLE_DELAY),
+    },
   },
 };
 </script>
 
 <template>
-  <div ref="sharedRunnersForm">
-    <gl-alert v-if="error" variant="danger" :dismissible="false">{{ error }}</gl-alert>
+  <div>
+    <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-5">
+      {{ 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" size="sm" inline />
-    </h4>
+    <gl-alert
+      v-if="isSharedRunnersToggleDisabled"
+      variant="warning"
+      :dismissible="false"
+      class="gl-mb-5"
+    >
+      {{ __('Shared runners are disabled for the parent group') }}
+    </gl-alert>
 
-    <section class="gl-mt-5">
+    <section class="gl-mb-5">
       <gl-toggle
-        v-model="enabled"
-        :disabled="toggleDisabled"
+        :value="sharedRunnersToggleValue"
+        :is-loading="isLoading"
+        :disabled="isSharedRunnersToggleDisabled"
         :label="__('Enable shared runners for this group')"
-        data-testid="enable-runners-toggle"
-        @change="enableOrDisable"
+        :help="__('Enable shared runners for all projects and subgroups in this group.')"
+        data-testid="shared-runners-toggle"
+        @change="onSharedRunnersToggle"
       />
-
-      <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">
+    <section class="gl-mb-5">
       <gl-toggle
-        v-model="allowOverride"
-        :disabled="toggleDisabled"
+        :value="overrideToggleValue"
+        :is-loading="isLoading"
+        :disabled="isOverrideToggleDisabled"
         :label="__('Allow projects and subgroups to override the group setting')"
+        :help="__('Allows projects or subgroups in this group to override the global setting.')"
         data-testid="override-runners-toggle"
-        @change="override"
+        @change="onOverrideToggle"
       />
-
-      <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>
diff --git a/app/assets/javascripts/group_settings/constants.js b/app/assets/javascripts/group_settings/constants.js
index 4067b6b52a3..ab5c0db45ba 100644
--- a/app/assets/javascripts/group_settings/constants.js
+++ b/app/assets/javascripts/group_settings/constants.js
@@ -1,6 +1,3 @@
 import { __ } from '~/locale';
 
-// Debounce delay in milliseconds
-export const DEBOUNCE_TOGGLE_DELAY = 1000;
-
 export const ERROR_MESSAGE = __('Refresh the page and try again.');
diff --git a/app/assets/javascripts/group_settings/mount_shared_runners.js b/app/assets/javascripts/group_settings/mount_shared_runners.js
index 21a2373e2b1..aeb6d57a11a 100644
--- a/app/assets/javascripts/group_settings/mount_shared_runners.js
+++ b/app/assets/javascripts/group_settings/mount_shared_runners.js
@@ -6,22 +6,22 @@ export default (containerId = 'update-shared-runners-form') => {
 
   const {
     updatePath,
-    sharedRunnersAvailability,
-    parentSharedRunnersAvailability,
-    runnerEnabled,
-    runnerDisabled,
-    runnerAllowOverride,
+    sharedRunnersSetting,
+    parentSharedRunnersSetting,
+    runnerEnabledValue,
+    runnerDisabledValue,
+    runnerAllowOverrideValue,
   } = containerEl.dataset;
 
   return new Vue({
     el: containerEl,
     provide: {
       updatePath,
-      sharedRunnersAvailability,
-      parentSharedRunnersAvailability,
-      runnerEnabled,
-      runnerDisabled,
-      runnerAllowOverride,
+      sharedRunnersSetting,
+      parentSharedRunnersSetting,
+      runnerEnabledValue,
+      runnerDisabledValue,
+      runnerAllowOverrideValue,
     },
     render(createElement) {
       return createElement(UpdateSharedRunnersForm);