Use shared runners constants from the backend for the frontend

app/assets/javascripts/group_settings/components/shared_runners_form.vue

@@ -3,13 +3,7 @@ import { GlToggle, GlLoadingIcon, GlTooltip, GlAlert } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import {
-  DEBOUNCE_TOGGLE_DELAY,
-  ERROR_MESSAGE,
-  ENABLED,
-  DISABLED,
-  ALLOW_OVERRIDE,
-} from '../constants';
+import { DEBOUNCE_TOGGLE_DELAY, ERROR_MESSAGE } from '../constants';
 
 export default {
   components: {
@@ -18,21 +12,14 @@ export default {
     GlTooltip,
     GlAlert,
   },
-  props: {
-    updatePath: {
-      type: String,
-      required: true,
-    },
-    sharedRunnersAvailability: {
-      type: String,
-      required: true,
-    },
-    parentSharedRunnersAvailability: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
+  inject: [
+    'updatePath',
+    'sharedRunnersAvailability',
+    'parentSharedRunnersAvailability',
+    'runnerEnabled',
+    'runnerDisabled',
+    'runnerAllowOverride',
+  ],
   data() {
     return {
       isLoading: false,
@@ -43,21 +30,21 @@ export default {
   },
   computed: {
     toggleDisabled() {
-      return this.parentSharedRunnersAvailability === DISABLED || this.isLoading;
+      return this.parentSharedRunnersAvailability === this.runnerDisabled || this.isLoading;
     },
     enabledOrDisabledSetting() {
-      return this.enabled ? ENABLED : DISABLED;
+      return this.enabled ? this.runnerEnabled : this.runnerDisabled;
     },
     disabledWithOverrideSetting() {
-      return this.allowOverride ? ALLOW_OVERRIDE : DISABLED;
+      return this.allowOverride ? this.runnerAllowOverride : this.runnerDisabled;
     },
   },
   created() {
-    if (this.sharedRunnersAvailability !== ENABLED) {
+    if (this.sharedRunnersAvailability !== this.runnerEnabled) {
       this.enabled = false;
     }
 
-    if (this.sharedRunnersAvailability === ALLOW_OVERRIDE) {
+    if (this.sharedRunnersAvailability === this.runnerAllowOverride) {
       this.allowOverride = true;
     }
   },

app/assets/javascripts/group_settings/constants.js

@@ -4,8 +4,3 @@ import { __ } from '~/locale';
 export const DEBOUNCE_TOGGLE_DELAY = 1000;
 
 export const ERROR_MESSAGE = __('Refresh the page and try again.');
-
-// runner setting options
-export const ENABLED = 'enabled';
-export const DISABLED = 'disabled_and_unoverridable';
-export const ALLOW_OVERRIDE = 'disabled_with_override';

app/assets/javascripts/group_settings/mount_shared_runners.js

@@ -4,11 +4,27 @@ import UpdateSharedRunnersForm from './components/shared_runners_form.vue';
 export default (containerId = 'update-shared-runners-form') => {
   const containerEl = document.getElementById(containerId);
 
+  const {
+    updatePath,
+    sharedRunnersAvailability,
+    parentSharedRunnersAvailability,
+    runnerEnabled,
+    runnerDisabled,
+    runnerAllowOverride,
+  } = containerEl.dataset;
+
   return new Vue({
     el: containerEl,
     render(createElement) {
       return createElement(UpdateSharedRunnersForm, {
-        props: containerEl.dataset,
+        provide: {
+          updatePath,
+          sharedRunnersAvailability,
+          parentSharedRunnersAvailability,
+          runnerEnabled,
+          runnerDisabled,
+          runnerAllowOverride,
+        },
       });
     },
   });

app/helpers/ci/runners_helper.rb

@@ -61,7 +61,10 @@ module Ci
       {
         update_path: api_v4_groups_path(id: group.id),
         shared_runners_availability: group.shared_runners_setting,
-        parent_shared_runners_availability: group.parent&.shared_runners_setting
+        parent_shared_runners_availability: group.parent&.shared_runners_setting,
+        runner_enabled: Namespace::SR_ENABLED,
+        runner_disabled: Namespace::SR_DISABLED_AND_UNOVERRIDABLE,
+        runner_allow_override: Namespace::SR_DISABLED_WITH_OVERRIDE
       }
     end
 

spec/frontend/group_settings/components/shared_runners_form_spec.js

@@ -3,13 +3,16 @@ import { shallowMount } from '@vue/test-utils';
 import MockAxiosAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import SharedRunnersForm from '~/group_settings/components/shared_runners_form.vue';
-import { ENABLED, DISABLED, ALLOW_OVERRIDE } from '~/group_settings/constants';
 import axios from '~/lib/utils/axios_utils';
 
-const TEST_UPDATE_PATH = '/test/update';
-const DISABLED_PAYLOAD = { shared_runners_setting: DISABLED };
-const ENABLED_PAYLOAD = { shared_runners_setting: ENABLED };
-const OVERRIDE_PAYLOAD = { shared_runners_setting: ALLOW_OVERRIDE };
+const provide = {
+  updatePath: '/test/update',
+  sharedRunnersAvailability: 'enabled',
+  parentSharedRunnersAvailability: null,
+  runnerDisabled: 'disabled',
+  runnerEnabled: 'enabled',
+  runnerAllowOverride: 'allow_override',
+};
 
 jest.mock('~/flash');
 
@@ -17,13 +20,11 @@ describe('group_settings/components/shared_runners_form', () => {
   let wrapper;
   let mock;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (provides = {}) => {
     wrapper = shallowMount(SharedRunnersForm, {
-      propsData: {
-        updatePath: TEST_UPDATE_PATH,
-        sharedRunnersAvailability: ENABLED,
-        parentSharedRunnersAvailability: null,
-        ...props,
+      provide: {
+        ...provide,
+        ...provides,
       },
     });
   };
@@ -33,13 +34,13 @@ describe('group_settings/components/shared_runners_form', () => {
   const findEnabledToggle = () => wrapper.find('[data-testid="enable-runners-toggle"]');
   const findOverrideToggle = () => wrapper.find('[data-testid="override-runners-toggle"]');
   const changeToggle = (toggle) => toggle.vm.$emit('change', !toggle.props('value'));
-  const getRequestPayload = () => JSON.parse(mock.history.put[0].data);
+  const getSharedRunnersSetting = () => JSON.parse(mock.history.put[0].data).shared_runners_setting;
   const isLoadingIconVisible = () => findLoadingIcon().exists();
 
   beforeEach(() => {
     mock = new MockAxiosAdapter(axios);
 
-    mock.onPut(TEST_UPDATE_PATH).reply(200);
+    mock.onPut(provide.updatePath).reply(200);
   });
 
   afterEach(() => {
@@ -95,7 +96,7 @@ describe('group_settings/components/shared_runners_form', () => {
 
       await waitForPromises();
 
-      expect(getRequestPayload()).toEqual(ENABLED_PAYLOAD);
+      expect(getSharedRunnersSetting()).toEqual(provide.runnerEnabled);
       expect(findOverrideToggle().exists()).toBe(false);
     });
 
@@ -104,14 +105,14 @@ describe('group_settings/components/shared_runners_form', () => {
 
       await waitForPromises();
 
-      expect(getRequestPayload()).toEqual(DISABLED_PAYLOAD);
+      expect(getSharedRunnersSetting()).toEqual(provide.runnerDisabled);
       expect(findOverrideToggle().exists()).toBe(true);
     });
   });
 
   describe('override toggle', () => {
     beforeEach(() => {
-      createComponent({ sharedRunnersAvailability: ALLOW_OVERRIDE });
+      createComponent({ sharedRunnersAvailability: provide.runnerAllowOverride });
     });
 
     it('enabling the override toggle sends correct payload', async () => {
@@ -119,7 +120,7 @@ describe('group_settings/components/shared_runners_form', () => {
 
       await waitForPromises();
 
-      expect(getRequestPayload()).toEqual(OVERRIDE_PAYLOAD);
+      expect(getSharedRunnersSetting()).toEqual(provide.runnerAllowOverride);
     });
 
     it('disabling the override toggle sends correct payload', async () => {
@@ -127,21 +128,21 @@ describe('group_settings/components/shared_runners_form', () => {
 
       await waitForPromises();
 
-      expect(getRequestPayload()).toEqual(DISABLED_PAYLOAD);
+      expect(getSharedRunnersSetting()).toEqual(provide.runnerDisabled);
     });
   });
 
   describe('toggle disabled state', () => {
-    it(`toggles are not disabled with setting ${DISABLED}`, () => {
-      createComponent({ sharedRunnersAvailability: DISABLED });
+    it(`toggles are not disabled with setting ${provide.runnerDisabled}`, () => {
+      createComponent({ sharedRunnersAvailability: provide.runnerDisabled });
       expect(findEnabledToggle().props('disabled')).toBe(false);
       expect(findOverrideToggle().props('disabled')).toBe(false);
     });
 
     it('toggles are disabled', () => {
       createComponent({
-        sharedRunnersAvailability: DISABLED,
-        parentSharedRunnersAvailability: DISABLED,
+        sharedRunnersAvailability: provide.runnerDisabled,
+        parentSharedRunnersAvailability: provide.runnerDisabled,
       });
       expect(findEnabledToggle().props('disabled')).toBe(true);
       expect(findOverrideToggle().props('disabled')).toBe(true);
@@ -154,7 +155,7 @@ describe('group_settings/components/shared_runners_form', () => {
     ${{ error: 'Undefined error' }} | ${'Undefined error Refresh the page and try again.'}
   `(`with error $errorObj`, ({ errorObj, message }) => {
     beforeEach(async () => {
-      mock.onPut(TEST_UPDATE_PATH).reply(500, errorObj);
+      mock.onPut(provide.updatePath).reply(500, errorObj);
 
       createComponent();
       changeToggle(findEnabledToggle());

spec/helpers/ci/runners_helper_spec.rb

@@ -68,23 +68,35 @@ RSpec.describe Ci::RunnersHelper do
   end
 
   describe '#group_shared_runners_settings_data' do
-    let(:group) { create(:group, parent: parent, shared_runners_enabled: false) }
-    let(:parent) { create(:group) }
+    let_it_be(:parent) { create(:group) }
+    let_it_be(:group) { create(:group, parent: parent, shared_runners_enabled: false) }
+
+    let(:runner_constants) do
+      {
+        runner_enabled: Namespace::SR_ENABLED,
+        runner_disabled: Namespace::SR_DISABLED_AND_UNOVERRIDABLE,
+        runner_allow_override: Namespace::SR_DISABLED_WITH_OVERRIDE
+      }
+    end
 
     it 'returns group data for top level group' do
-      data = group_shared_runners_settings_data(parent)
+      result = {
+        update_path: "/api/v4/groups/#{parent.id}",
+        shared_runners_availability: Namespace::SR_ENABLED,
+        parent_shared_runners_availability: nil
+      }.merge(runner_constants)
 
-      expect(data[:update_path]).to eq("/api/v4/groups/#{parent.id}")
-      expect(data[:shared_runners_availability]).to eq('enabled')
-      expect(data[:parent_shared_runners_availability]).to eq(nil)
+      expect(group_shared_runners_settings_data(parent)).to eq result
     end
 
     it 'returns group data for child group' do
-      data = group_shared_runners_settings_data(group)
+      result = {
+        update_path: "/api/v4/groups/#{group.id}",
+        shared_runners_availability: Namespace::SR_DISABLED_AND_UNOVERRIDABLE,
+        parent_shared_runners_availability: Namespace::SR_ENABLED
+      }.merge(runner_constants)
 
-      expect(data[:update_path]).to eq("/api/v4/groups/#{group.id}")
-      expect(data[:shared_runners_availability]).to eq(Namespace::SR_DISABLED_AND_UNOVERRIDABLE)
-      expect(data[:parent_shared_runners_availability]).to eq('enabled')
+      expect(group_shared_runners_settings_data(group)).to eq result
     end
   end