1 files changed, 140 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_form_fields.vue b/app/assets/javascripts/ci/runner/components/runner_form_fields.vue
new file mode 100644
index 00000000000..e37ac5e6e26
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_form_fields.vue
@@ -0,0 +1,140 @@
+<script>
+import { GlFormGroup, GlFormCheckbox, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { ACCESS_LEVEL_NOT_PROTECTED, ACCESS_LEVEL_REF_PROTECTED } from '../constants';
+
+export default {
+  name: 'RunnerFormFields',
+  components: {
+    GlFormGroup,
+    GlFormCheckbox,
+    GlFormInput,
+    GlLink,
+    GlSprintf,
+    RunnerMaintenanceNoteField: () =>
+      import('ee_component/ci/runner/components/runner_maintenance_note_field.vue'),
+  },
+  props: {
+    value: {
+      type: Object,
+      default: null,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      model: {
+        ...this.value,
+      },
+    };
+  },
+  watch: {
+    model: {
+      handler() {
+        this.$emit('input', this.model);
+      },
+      deep: true,
+    },
+  },
+  HELP_LABELS_PAGE_PATH: helpPagePath('ci/runners/configure_runners', {
+    anchor: 'use-tags-to-control-which-jobs-a-runner-can-run',
+  }),
+  ACCESS_LEVEL_NOT_PROTECTED,
+  ACCESS_LEVEL_REF_PROTECTED,
+};
+</script>
+<template>
+  <div>
+    <h2 class="gl-font-weight-normal gl-font-lg gl-my-5">
+      {{ s__('Runners|Details') }}
+      {{ __('(optional)') }}
+    </h2>
+    <gl-form-group :label="s__('Runners|Runner description')" label-for="runner-description">
+      <gl-form-input id="runner-description" v-model="model.description" name="description" />
+    </gl-form-group>
+
+    <runner-maintenance-note-field v-model="model.maintenanceNote" class="gl-mt-5" />
+
+    <hr aria-hidden="true" />
+
+    <h2 class="gl-font-weight-normal gl-font-lg gl-my-5">
+      {{ s__('Runners|Configuration') }}
+      {{ __('(optional)') }}
+    </h2>
+
+    <div class="gl-mb-5">
+      <gl-form-checkbox v-model="model.paused" name="paused">
+        {{ __('Paused') }}
+        <template #help>
+          {{ s__('Runners|Stop the runner from accepting new jobs.') }}
+        </template>
+      </gl-form-checkbox>
+
+      <gl-form-checkbox
+        v-model="model.accessLevel"
+        name="protected"
+        :value="$options.ACCESS_LEVEL_REF_PROTECTED"
+        :unchecked-value="$options.ACCESS_LEVEL_NOT_PROTECTED"
+      >
+        {{ __('Protected') }}
+        <template #help>
+          {{ s__('Runners|Use the runner on pipelines for protected branches only.') }}
+        </template>
+      </gl-form-checkbox>
+
+      <gl-form-checkbox v-model="model.runUntagged" name="run-untagged">
+        {{ __('Run untagged jobs') }}
+        <template #help>
+          {{ s__('Runners|Use the runner for jobs without tags in addition to tagged jobs.') }}
+        </template>
+      </gl-form-checkbox>
+    </div>
+
+    <gl-form-group :label="__('Tags')" label-for="runner-tags">
+      <template #description>
+        <gl-sprintf
+          :message="
+            s__('Runners|Multiple tags must be separated by a comma. For example, %{example}.')
+          "
+        >
+          <template #example>
+            <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+            <code>macos, shared</code>
+          </template>
+        </gl-sprintf>
+      </template>
+      <template #label-description>
+        <gl-sprintf
+          :message="
+            s__(
+              'Runners|Add tags for the types of jobs the runner processes to ensure that the runner only runs jobs that you intend it to. %{helpLinkStart}Learn more.%{helpLinkEnd}',
+            )
+          "
+        >
+          <template #helpLink="{ content }">
+            <gl-link :href="$options.HELP_LABELS_PAGE_PATH" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </template>
+      <gl-form-input id="runner-tags" v-model="model.tagList" name="tags" />
+    </gl-form-group>
+
+    <gl-form-group
+      :label="__('Maximum job timeout')"
+      :label-description="
+        s__(
+          'Runners|Maximum amount of time the runner can run before it terminates. If a project has a shorter job timeout period, the job timeout period of the instance runner is used instead.',
+        )
+      "
+      label-for="runner-max-timeout"
+      :description="s__('Runners|Enter the number of seconds.')"
+    >
+      <gl-form-input
+        id="runner-max-timeout"
+        v-model.number="model.maximumTimeout"
+        name="max-timeout"
+        type="number"
+      />
+    </gl-form-group>
+  </div>
+</template>