1 files changed, 108 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
new file mode 100644
index 00000000000..273226141d2
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
@@ -0,0 +1,108 @@
+<script>
+import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg?url';
+import DOCKER_LOGO_URL from '@gitlab/svgs/dist/illustrations/third-party-logos/ci_cd-template-logos/docker.png';
+import KUBERNETES_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/kubernetes.svg?url';
+import { GlFormRadioGroup, GlIcon, GlLink } from '@gitlab/ui';
+
+import {
+  LINUX_PLATFORM,
+  MACOS_PLATFORM,
+  WINDOWS_PLATFORM,
+  AWS_PLATFORM,
+  DOCKER_HELP_URL,
+  KUBERNETES_HELP_URL,
+} from '../constants';
+
+import RunnerPlatformsRadio from './runner_platforms_radio.vue';
+
+export default {
+  components: {
+    GlFormRadioGroup,
+    GlLink,
+    GlIcon,
+    RunnerPlatformsRadio,
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      model: this.value,
+    };
+  },
+  watch: {
+    model() {
+      this.$emit('input', this.model);
+    },
+  },
+  LINUX_PLATFORM,
+  MACOS_PLATFORM,
+  WINDOWS_PLATFORM,
+
+  AWS_PLATFORM,
+  AWS_LOGO_URL,
+  DOCKER_HELP_URL,
+  DOCKER_LOGO_URL,
+  KUBERNETES_HELP_URL,
+  KUBERNETES_LOGO_URL,
+};
+</script>
+
+<template>
+  <gl-form-radio-group v-model="model">
+    <div class="gl-mt-3 gl-mb-6">
+      <label>{{ s__('Runners|Operating systems') }}</label>
+
+      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+        <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+        <runner-platforms-radio v-model="model" :value="$options.LINUX_PLATFORM">
+          Linux
+        </runner-platforms-radio>
+        <runner-platforms-radio v-model="model" :value="$options.MACOS_PLATFORM">
+          macOS
+        </runner-platforms-radio>
+        <runner-platforms-radio v-model="model" :value="$options.WINDOWS_PLATFORM">
+          Windows
+        </runner-platforms-radio>
+      </div>
+    </div>
+
+    <div class="gl-mt-3 gl-mb-6">
+      <label>{{ s__('Runners|Cloud templates') }}</label>
+      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+        <runner-platforms-radio
+          v-model="model"
+          :image="$options.AWS_LOGO_URL"
+          :value="$options.AWS_PLATFORM"
+        >
+          AWS
+        </runner-platforms-radio>
+      </div>
+    </div>
+
+    <div class="gl-mt-3 gl-mb-6">
+      <label>{{ s__('Runners|Containers') }}</label>
+
+      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
+        <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+        <runner-platforms-radio :image="$options.DOCKER_LOGO_URL">
+          <gl-link :href="$options.DOCKER_HELP_URL" target="_blank">
+            Docker
+            <gl-icon name="external-link" />
+          </gl-link>
+        </runner-platforms-radio>
+        <runner-platforms-radio :image="$options.KUBERNETES_LOGO_URL">
+          <gl-link :href="$options.KUBERNETES_HELP_URL" target="_blank">
+            Kubernetes
+            <gl-icon name="external-link" />
+          </gl-link>
+        </runner-platforms-radio>
+      </div>
+    </div>
+  </gl-form-radio-group>
+</template>