1 files changed, 21 insertions, 46 deletions

diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue
index 0c1b83b6830..85d14547efd 100644
--- a/app/assets/javascripts/runner/components/runner_update_form.vue
+++ b/app/assets/javascripts/runner/components/runner_update_form.vue
@@ -7,42 +7,26 @@ import {
   GlFormInputGroup,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import {
+  modelToUpdateMutationVariables,
+  runnerToModel,
+} from 'ee_else_ce/runner/runner_details/runner_update_form_utils';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { __ } from '~/locale';
+import { captureException } from '~/runner/sentry_utils';
 import { ACCESS_LEVEL_NOT_PROTECTED, ACCESS_LEVEL_REF_PROTECTED, PROJECT_TYPE } from '../constants';
 import runnerUpdateMutation from '../graphql/runner_update.mutation.graphql';
 
-const runnerToModel = (runner) => {
-  const {
-    id,
-    description,
-    maximumTimeout,
-    accessLevel,
-    active,
-    locked,
-    runUntagged,
-    tagList = [],
-  } = runner || {};
-
-  return {
-    id,
-    description,
-    maximumTimeout,
-    accessLevel,
-    active,
-    locked,
-    runUntagged,
-    tagList: tagList.join(', '),
-  };
-};
-
 export default {
+  name: 'RunnerUpdateForm',
   components: {
     GlButton,
     GlForm,
     GlFormCheckbox,
     GlFormGroup,
     GlFormInputGroup,
+    RunnerUpdateCostFactorFields: () =>
+      import('ee_component/runner/components/runner_update_cost_factor_fields.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -67,18 +51,6 @@ export default {
     readonlyIpAddress() {
       return this.runner?.ipAddress;
     },
-    updateMutationInput() {
-      const { maximumTimeout, tagList } = this.model;
-
-      return {
-        ...this.model,
-        maximumTimeout: maximumTimeout !== '' ? maximumTimeout : null,
-        tagList: tagList
-          .split(',')
-          .map((tag) => tag.trim())
-          .filter((tag) => Boolean(tag)),
-      };
-    },
   },
   watch: {
     runner(newVal, oldVal) {
@@ -98,31 +70,32 @@ export default {
           },
         } = await this.$apollo.mutate({
           mutation: runnerUpdateMutation,
-          variables: {
-            input: this.updateMutationInput,
-          },
+          variables: modelToUpdateMutationVariables(this.model),
         });
 
         if (errors?.length) {
-          this.onError(new Error(errors[0]));
+          // Validation errors need not be thrown
+          createFlash({ message: errors[0] });
           return;
         }
 
         this.onSuccess();
-      } catch (e) {
-        this.onError(e);
+      } catch (error) {
+        const { message } = error;
+        createFlash({ message });
+
+        this.reportToSentry(error);
       } finally {
         this.saving = false;
       }
     },
-    onError(error) {
-      const { message } = error;
-      createFlash({ message });
-    },
     onSuccess() {
       createFlash({ message: __('Changes saved.'), type: FLASH_TYPES.SUCCESS });
       this.model = runnerToModel(this.runner);
     },
+    reportToSentry(error) {
+      captureException({ error, component: this.$options.name });
+    },
   },
   ACCESS_LEVEL_NOT_PROTECTED,
   ACCESS_LEVEL_REF_PROTECTED,
@@ -213,6 +186,8 @@ export default {
       <gl-form-input-group v-model="model.tagList" />
     </gl-form-group>
 
+    <runner-update-cost-factor-fields v-model="model" />
+
     <div class="form-actions">
       <gl-button
         type="submit"