1 files changed, 33 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue
index cafebdfe5f4..8a234889e6f 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue
@@ -2,6 +2,7 @@
 import {
   GlButton,
   GlSprintf,
+  GlIcon,
   GlLink,
   GlFormRadioGroup,
   GlFormRadio,
@@ -11,6 +12,7 @@ import {
 import Tracking from '~/tracking';
 import { getBaseURL, objectToQuery, visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import {
   AWS_README_URL,
   AWS_CF_BASE_URL,
@@ -22,13 +24,22 @@ export default {
   components: {
     GlButton,
     GlSprintf,
+    GlIcon,
     GlLink,
     GlFormRadioGroup,
     GlFormRadio,
     GlAccordion,
     GlAccordionItem,
+    ModalCopyButton,
   },
   mixins: [Tracking.mixin()],
+  props: {
+    registrationToken: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
   data() {
     return {
       selectedIndex: 0,
@@ -65,16 +76,20 @@ export default {
     },
   },
   i18n: {
-    title: s__('Runners|Deploy GitLab Runner in AWS'),
     instructions: s__(
-      'Runners|Select your preferred option here. In the next step, you can choose the capacity for your runner in the AWS CloudFormation console.',
+      'Runners|Select your preferred runner, then choose the capacity for the runner in the AWS CloudFormation console.',
     ),
     chooseRunner: s__('Runners|Choose your preferred GitLab Runner'),
     dontSeeWhatYouAreLookingFor: s__(
       "Runners|Don't see what you are looking for? See the full list of options, including a fully customizable option %{linkStart}here%{linkEnd}.",
     ),
+    runnerRegistrationToken: s__('Runners|Runner Registration token'),
+    copyInstructions: s__('Runners|Copy registration token'),
     moreDetails: __('More Details'),
     lessDetails: __('Less Details'),
+    close: __('Close'),
+    deployRunnerInAws: s__('Runners|Deploy GitLab Runner in AWS'),
+    externalLink: __('(external link)'),
   },
   readmeUrl: AWS_README_URL,
   easyButtons: AWS_EASY_BUTTONS,
@@ -83,6 +98,7 @@ export default {
 <template>
   <div>
     <p>{{ $options.i18n.instructions }}</p>
+
     <gl-form-radio-group v-model="selectedIndex" :label="$options.i18n.chooseRunner" label-sr-only>
       <gl-form-radio
         v-for="(easyButton, idx) in $options.easyButtons"
@@ -113,10 +129,23 @@ export default {
         </template>
       </gl-sprintf>
     </p>
+    <template v-if="registrationToken">
+      <h5 class="gl-mb-3">{{ $options.i18n.runnerRegistrationToken }}</h5>
+      <div class="gl-display-flex">
+        <pre class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line">{{ registrationToken }}</pre>
+        <modal-copy-button
+          :title="$options.i18n.copyInstructions"
+          :text="registrationToken"
+          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-gap-3">
-      <gl-button @click="onClose()">{{ __('Close') }}</gl-button>
+      <gl-button @click="onClose()">{{ $options.i18n.close }}</gl-button>
       <gl-button variant="confirm" @click="onOk()">
-        {{ s__('Runners|Deploy GitLab Runner in AWS') }}
+        {{ $options.i18n.deployRunnerInAws }}
+        <gl-icon name="external-link" :aria-label="$options.i18n.externalLink" />
       </gl-button>
     </footer>
   </div>