1 files changed, 169 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue
new file mode 100644
index 00000000000..36e608a068b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue
@@ -0,0 +1,169 @@
+<script>
+import { GlButton, GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+import { REGISTRATION_TOKEN_PLACEHOLDER } from '../constants';
+import getRunnerSetupInstructionsQuery from '../graphql/get_runner_setup.query.graphql';
+
+export default {
+  components: {
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlLoadingIcon,
+    ModalCopyButton,
+  },
+  props: {
+    platform: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    registrationToken: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectedArchitecture: this.platform?.architectures[0] || null,
+      instructions: null,
+    };
+  },
+  apollo: {
+    instructions: {
+      query: getRunnerSetupInstructionsQuery,
+      skip() {
+        return !this.platform || !this.selectedArchitecture;
+      },
+      variables() {
+        return {
+          platform: this.platform.name,
+          architecture: this.selectedArchitecture.name,
+        };
+      },
+      update(data) {
+        return data?.runnerSetup;
+      },
+      error() {
+        this.$emit('error');
+      },
+    },
+  },
+  computed: {
+    architectures() {
+      return this.platform?.architectures || [];
+    },
+    binaryUrl() {
+      return this.selectedArchitecture?.downloadLocation;
+    },
+    registerInstructionsWithToken() {
+      const { registerInstructions } = this.instructions || {};
+
+      if (this.registrationToken) {
+        return registerInstructions?.replace(
+          REGISTRATION_TOKEN_PLACEHOLDER,
+          this.registrationToken,
+        );
+      }
+      return registerInstructions;
+    },
+  },
+  watch: {
+    platform() {
+      // reset selection if architecture is not in this list
+      const arch = this.architectures.find(({ name }) => name === this.selectedArchitecture.name);
+      if (!arch) {
+        this.selectArchitecture(this.architectures[0]);
+      }
+    },
+  },
+  methods: {
+    selectArchitecture(architecture) {
+      this.selectedArchitecture = architecture;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+  i18n: {
+    architecture: s__('Runners|Architecture'),
+    downloadInstallBinary: s__('Runners|Download and install binary'),
+    downloadLatestBinary: s__('Runners|Download latest binary'),
+    registerRunnerCommand: s__('Runners|Command to register runner'),
+    copyInstructions: s__('Runners|Copy instructions'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h5>
+      {{ $options.i18n.architecture }}
+      <gl-loading-icon v-if="$apollo.loading" size="sm" inline />
+    </h5>
+
+    <gl-dropdown class="gl-mb-3" :text="selectedArchitecture.name">
+      <gl-dropdown-item
+        v-for="architecture in architectures"
+        :key="architecture.name"
+        is-check-item
+        :is-checked="selectedArchitecture.name === architecture.name"
+        data-testid="architecture-dropdown-item"
+        @click="selectArchitecture(architecture)"
+      >
+        {{ architecture.name }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+    <div class="gl-sm-display-flex gl-align-items-center gl-mb-3">
+      <h5>{{ $options.i18n.downloadInstallBinary }}</h5>
+      <gl-button
+        v-if="binaryUrl"
+        class="gl-ml-auto"
+        :href="binaryUrl"
+        download
+        icon="download"
+        data-testid="binary-download-button"
+      >
+        {{ $options.i18n.downloadLatestBinary }}
+      </gl-button>
+    </div>
+
+    <template v-if="instructions">
+      <div class="gl-display-flex">
+        <pre
+          class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
+          data-testid="binary-instructions"
+          >{{ instructions.installInstructions }}</pre
+        >
+        <modal-copy-button
+          :title="$options.i18n.copyInstructions"
+          :text="instructions.installInstructions"
+          :modal-id="$options.modalId"
+          css-classes="gl-align-self-start gl-ml-2 gl-mt-2"
+          category="tertiary"
+        />
+      </div>
+      <h5 class="gl-mb-3">{{ $options.i18n.registerRunnerCommand }}</h5>
+      <div class="gl-display-flex">
+        <pre
+          class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
+          data-testid="register-command"
+          >{{ registerInstructionsWithToken }}</pre
+        >
+        <modal-copy-button
+          :title="$options.i18n.copyInstructions"
+          :text="registerInstructionsWithToken"
+          :modal-id="$options.modalId"
+          css-classes="gl-align-self-start gl-ml-2 gl-mt-2"
+          category="tertiary"
+        />
+      </div>
+    </template>
+
+    <footer class="gl-display-flex gl-justify-content-end gl-pt-3">
+      <gl-button @click="onClose()">{{ __('Close') }}</gl-button>
+    </footer>
+  </div>
+</template>