Add latest changes from gitlab-org/gitlab@master

17 files changed, 155 insertions, 245 deletions

diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js
index 220064e6673..1d36661ee63 100644
--- a/app/assets/javascripts/behaviors/index.js
+++ b/app/assets/javascripts/behaviors/index.js
@@ -7,7 +7,6 @@ import { loadStartupCSS } from './load_startup_css';
 import initCopyAsGFM from './markdown/copy_as_gfm';
 import './quick_submit';
 import './requires_input';
-import initSelect2Dropdowns from './select2';
 import initPageShortcuts from './shortcuts';
 import './toggler_behavior';
 import './preview_markdown';
@@ -21,7 +20,6 @@ initCopyToClipboard();
 
 initPageShortcuts();
 initCollapseSidebarOnWindowResize();
-initSelect2Dropdowns();
 
 window.requestIdleCallback(
   () => {
diff --git a/app/assets/javascripts/behaviors/select2.js b/app/assets/javascripts/behaviors/select2.js
deleted file mode 100644
index 1f222d8c1f6..00000000000
--- a/app/assets/javascripts/behaviors/select2.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import $ from 'jquery';
-import { loadCSSFile } from '../lib/utils/css_utils';
-
-export default () => {
-  const $select2Elements = $('select.select2');
-  if ($select2Elements.length) {
-    import(/* webpackChunkName: 'select2' */ 'select2/select2')
-      .then(() => {
-        // eslint-disable-next-line promise/no-nesting
-        loadCSSFile(gon.select2_css_path)
-          .then(() => {
-            $select2Elements.select2({
-              width: 'resolve',
-              minimumResultsForSearch: 10,
-              dropdownAutoWidth: true,
-            });
-
-            // Close select2 on escape
-            $('.js-select2').on('select2-close', () => {
-              requestAnimationFrame(() => {
-                $('.select2-container-active').removeClass('select2-container-active');
-                $(':focus').blur();
-              });
-            });
-          })
-          .catch(() => {});
-      })
-      .catch(() => {});
-  }
-};
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
index 2f595342a31..967125c7b0a 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_modal.vue
@@ -17,7 +17,6 @@ import {
 import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import {
   allEnvironments,
@@ -65,7 +64,7 @@ export default {
     GlModal,
     GlSprintf,
   },
-  mixins: [glFeatureFlagsMixin(), trackingMixin],
+  mixins: [trackingMixin],
   inject: [
     'awsLogoSvgPath',
     'awsTipCommandsLink',
@@ -75,7 +74,6 @@ export default {
     'environmentScopeLink',
     'isProtectedByDefault',
     'maskedEnvironmentVariablesLink',
-    'maskableRawRegex',
     'maskableRegex',
     'protectedEnvironmentVariablesLink',
   ],
@@ -123,7 +121,7 @@ export default {
   },
   computed: {
     canMask() {
-      const regex = RegExp(this.useRawMaskableRegexp ? this.maskableRawRegex : this.maskableRegex);
+      const regex = RegExp(this.maskableRegex);
       return regex.test(this.variable.value);
     },
     canSubmit() {
@@ -136,17 +134,11 @@ export default {
     displayMaskedError() {
       return !this.canMask && this.variable.masked;
     },
-    isUsingRawRegexFlag() {
-      return this.glFeatures.ciRemoveCharacterLimitationRawMaskedVar;
-    },
     isEditing() {
       return this.mode === EDIT_VARIABLE_ACTION;
     },
     isExpanded() {
-      return !this.isRaw;
-    },
-    isRaw() {
-      return this.variable.raw;
+      return !this.variable.raw;
     },
     isTipVisible() {
       return !this.isTipDismissed && AWS_TOKEN_CONSTANTS.includes(this.variable.key);
@@ -182,9 +174,6 @@ export default {
 
       return true;
     },
-    useRawMaskableRegexp() {
-      return this.isRaw && this.isUsingRawRegexFlag;
-    },
     variableValidationFeedback() {
       return `${this.tokenValidationFeedback} ${this.maskedFeedback}`;
     },
@@ -326,7 +315,11 @@ export default {
           class="gl-font-monospace!"
           spellcheck="false"
         />
-        <p v-if="isRaw" class="gl-mt-2 gl-mb-0 text-secondary" data-testid="raw-variable-tip">
+        <p
+          v-if="variable.raw"
+          class="gl-mt-2 gl-mb-0 text-secondary"
+          data-testid="raw-variable-tip"
+        >
           {{ __('Variable value will be evaluated as raw string.') }}
         </p>
       </gl-form-group>
diff --git a/app/assets/javascripts/ci/ci_variable_list/index.js b/app/assets/javascripts/ci/ci_variable_list/index.js
index 33ffbee432f..174a59aba42 100644
--- a/app/assets/javascripts/ci/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci/ci_variable_list/index.js
@@ -21,7 +21,6 @@ const mountCiVariableListApp = (containerEl) => {
     isGroup,
     isProject,
     maskedEnvironmentVariablesLink,
-    maskableRawRegex,
     maskableRegex,
     projectFullPath,
     projectId,
@@ -64,7 +63,6 @@ const mountCiVariableListApp = (containerEl) => {
       isProject: parsedIsProject,
       isProtectedByDefault,
       maskedEnvironmentVariablesLink,
-      maskableRawRegex,
       maskableRegex,
       projectFullPath,
       projectId,
diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
index 895c7d0a18e..964c6ca9792 100644
--- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
+++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js
@@ -4,7 +4,6 @@ import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers';
 import initVariableList from '~/ci/ci_variable_list';
 import initDeployFreeze from '~/deploy_freeze';
 import registrySettingsApp from '~/packages_and_registries/settings/project/registry_settings_bundle';
-import { initRunnerAwsDeployments } from '~/pages/shared/mount_runner_aws_deployments';
 import { initInstallRunner } from '~/pages/shared/mount_runner_instructions';
 import initSharedRunnersToggle from '~/projects/settings/mount_shared_runners_toggle';
 import initSettingsPanels from '~/settings_panels';
@@ -44,7 +43,5 @@ initArtifactsSettings();
 initProjectRunners();
 initSharedRunnersToggle();
 initInstallRunner();
-initRunnerAwsDeployments();
-
 initTokenAccess();
 initCiSecureFiles();
diff --git a/app/assets/javascripts/pages/shared/mount_runner_aws_deployments.js b/app/assets/javascripts/pages/shared/mount_runner_aws_deployments.js
deleted file mode 100644
index f3807a33a2b..00000000000
--- a/app/assets/javascripts/pages/shared/mount_runner_aws_deployments.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import RunnerAwsDeployments from '~/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue';
-
-export function initRunnerAwsDeployments(componentId = 'js-runner-aws-deployments') {
-  const el = document.getElementById(componentId);
-
-  if (!el) {
-    return null;
-  }
-
-  return new Vue({
-    el,
-    render(createElement) {
-      return createElement(RunnerAwsDeployments);
-    },
-  });
-}
diff --git a/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue b/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue
index 02323e5a0c6..9f64ddc8721 100644
--- a/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue
+++ b/app/assets/javascripts/sidebar/components/move/issuable_move_dropdown.vue
@@ -206,7 +206,7 @@ export default {
             category="primary"
             variant="confirm"
             :disabled="!Boolean(selectedProject)"
-            class="gl-text-center! issuable-move-button"
+            class="gl-w-full issuable-move-button"
             @click="handleMoveClick"
             >{{ __('Move') }}</gl-button
           >
diff --git a/app/assets/javascripts/sidebar/components/move/move_issue_button.vue b/app/assets/javascripts/sidebar/components/move/move_issue_button.vue
new file mode 100644
index 00000000000..e1259fad6a7
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/move/move_issue_button.vue
@@ -0,0 +1,71 @@
+<script>
+import ProjectSelect from '~/sidebar/components/move/issuable_move_dropdown.vue';
+import { __ } from '~/locale';
+import { createAlert } from '~/flash';
+import { visitUrl } from '~/lib/utils/url_utility';
+import moveIssueMutation from '../../queries/move_issue.mutation.graphql';
+
+export default {
+  name: 'MoveIssueButton',
+  components: { ProjectSelect },
+  inject: ['projectsAutocompleteEndpoint', 'projectFullPath', 'issueIid'],
+
+  i18n: {
+    title: __('Move issue'),
+    titleInProgress: __('Moving issue'),
+    moveErrorMessage: __('An error occurred while moving the issue.'),
+  },
+  data() {
+    return {
+      moveInProgress: false,
+    };
+  },
+  computed: {
+    dropdownButtonTitle() {
+      return this.moveInProgress ? this.$options.i18n.titleInProgress : this.$options.i18n.title;
+    },
+  },
+  methods: {
+    moveIssue(targetProject) {
+      this.moveInProgress = true;
+      return this.$apollo
+        .mutate({
+          mutation: moveIssueMutation,
+          variables: {
+            moveIssueInput: {
+              projectPath: this.projectFullPath,
+              iid: this.issueIid,
+              targetProjectPath: targetProject.full_path,
+            },
+          },
+        })
+        .then(({ data = {} }) => {
+          if (!data.issueMove) return;
+
+          const { errors } = data.issueMove;
+          if (errors?.length > 0) {
+            throw new Error(`Error moving the issue. Error message: ${errors[0].message}`);
+          }
+          visitUrl(data.issueMove?.issue.webUrl);
+        })
+        .catch((error) => {
+          this.moveInProgress = false;
+          createAlert({
+            message: this.$options.i18n.moveErrorMessage,
+            captureError: true,
+            error,
+          });
+        });
+    },
+  },
+};
+</script>
+<template>
+  <project-select
+    :projects-fetch-path="projectsAutocompleteEndpoint"
+    :dropdown-button-title="dropdownButtonTitle"
+    :dropdown-header-title="$options.i18n.title"
+    :move-in-progress="moveInProgress"
+    @move-issuable="moveIssue"
+  />
+</template>
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
deleted file mode 100644
index 2cce27df598..00000000000
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import $ from 'jquery';
-import { escape } from 'lodash';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { createAlert } from '~/flash';
-import { __ } from '~/locale';
-
-function isValidProjectId(id) {
-  return id > 0;
-}
-
-class SidebarMoveIssue {
-  constructor(mediator, dropdownToggle, confirmButton) {
-    this.mediator = mediator;
-
-    this.$dropdownToggle = $(dropdownToggle);
-    this.$confirmButton = $(confirmButton);
-
-    this.onConfirmClickedWrapper = this.onConfirmClicked.bind(this);
-  }
-
-  init() {
-    this.initDropdown();
-    this.addEventListeners();
-  }
-
-  destroy() {
-    this.removeEventListeners();
-  }
-
-  initDropdown() {
-    initDeprecatedJQueryDropdown(this.$dropdownToggle, {
-      search: {
-        fields: ['name_with_namespace'],
-      },
-      showMenuAbove: true,
-      selectable: true,
-      filterable: true,
-      filterRemote: true,
-      multiSelect: false,
-      // Keep the dropdown open after selecting an option
-      shouldPropagate: false,
-      data: (searchTerm, callback) => {
-        this.mediator
-          .fetchAutocompleteProjects(searchTerm)
-          .then(callback)
-          .catch(() =>
-            createAlert({
-              message: __('An error occurred while fetching projects autocomplete.'),
-            }),
-          );
-      },
-      renderRow: (project) => `
-        <li>
-          <a href="#" class="js-move-issue-dropdown-item">
-            ${escape(project.name_with_namespace)}
-          </a>
-        </li>
-      `,
-      clicked: (options) => {
-        const project = options.selectedObj;
-        const selectedProjectId = options.isMarking ? project.id : 0;
-        this.mediator.setMoveToProjectId(selectedProjectId);
-
-        this.$confirmButton.prop('disabled', !isValidProjectId(selectedProjectId));
-      },
-    });
-  }
-
-  addEventListeners() {
-    this.$confirmButton.on('click', this.onConfirmClickedWrapper);
-  }
-
-  removeEventListeners() {
-    this.$confirmButton.off('click', this.onConfirmClickedWrapper);
-  }
-
-  onConfirmClicked() {
-    if (isValidProjectId(this.mediator.store.moveToProjectId)) {
-      this.$confirmButton.disable().addClass('is-loading');
-
-      this.mediator.moveIssue().catch(() => {
-        createAlert({ message: __('An error occurred while moving the issue.') });
-        this.$confirmButton.enable().removeClass('is-loading');
-      });
-    }
-  }
-}
-
-export default SidebarMoveIssue;
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index fc12b0b04eb..facc07e8ce5 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants';
@@ -43,8 +42,8 @@ import SidebarTimeTracking from './components/time_tracking/sidebar_time_trackin
 import SidebarTodoWidget from './components/todo_toggle/sidebar_todo_widget.vue';
 import { IssuableAttributeType } from './constants';
 import CrmContacts from './components/crm_contacts/crm_contacts.vue';
-import SidebarMoveIssue from './lib/sidebar_move_issue';
 import trackShowInviteMemberLink from './track_invite_members';
+import MoveIssueButton from './components/move/move_issue_button.vue';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -701,6 +700,31 @@ export function mountSubscriptionsDropdown() {
   });
 }
 
+export function mountMoveIssueButton() {
+  const el = document.querySelector('.js-sidebar-move-issue-block');
+
+  if (!el) {
+    return null;
+  }
+
+  const { projectsAutocompleteEndpoint } = getSidebarOptions();
+  const { projectFullPath, issueIid } = el.dataset;
+
+  Vue.use(VueApollo);
+
+  return new Vue({
+    el,
+    name: 'MoveIssueDropdownRoot',
+    apolloProvider,
+    provide: {
+      projectsAutocompleteEndpoint,
+      projectFullPath,
+      issueIid,
+    },
+    render: (createElement) => createElement(MoveIssueButton),
+  });
+}
+
 const isAssigneesWidgetShown =
   (isInIssuePage() || isInDesignPage() || isInMRPage()) && gon.features.issueAssigneesWidget;
 
@@ -727,12 +751,7 @@ export function mountSidebar(mediator, store) {
   mountSidebarTimeTracking();
   mountSidebarSeverityWidget();
   mountSidebarEscalationStatus();
-
-  new SidebarMoveIssue(
-    mediator,
-    $('.js-move-issue'),
-    $('.js-move-issue-confirmation-button'),
-  ).init();
+  mountMoveIssueButton();
 }
 
 export { getSidebarOptions };
diff --git a/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql b/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql
index d350072425b..e3ed3c5089b 100644
--- a/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql
+++ b/app/assets/javascripts/sidebar/queries/move_issue.mutation.graphql
@@ -1,5 +1,9 @@
 mutation moveIssue($moveIssueInput: IssueMoveInput!) {
   issueMove(input: $moveIssueInput) {
+    issue {
+      id
+      webUrl
+    }
     errors
   }
 }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 6ce4e1b4706..77151ab4307 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -524,6 +524,7 @@ export default {
                   v-model="removeSourceBranch"
                   :disabled="isRemoveSourceBranchButtonDisabled"
                   class="js-remove-source-branch-checkbox gl-display-flex gl-align-items-center gl-mr-5 gl-mb-3 gl-md-mb-0"
+                  data-testid="delete-source-branch-checkbox"
                 >
                   {{ __('Delete source branch') }}
                 </gl-form-checkbox>
@@ -699,7 +700,11 @@ export default {
                     :merge-commit-path="mr.mergeCommitPath"
                   />
                 </li>
-                <li v-if="mr.state !== 'closed'" class="gl-line-height-normal">
+                <li
+                  v-if="mr.state !== 'closed'"
+                  class="gl-line-height-normal"
+                  data-testid="source-branch-deleted-text"
+                >
                   {{ sourceBranchDeletedText }}
                 </li>
                 <li v-if="mr.relatedLinks" class="gl-line-height-normal">
diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue
deleted file mode 100644
index e3e3b9abc3c..00000000000
--- a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-import { GlButton, GlModalDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import RunnerAwsDeploymentsModal from './runner_aws_deployments_modal.vue';
-
-export default {
-  components: {
-    GlButton,
-    RunnerAwsDeploymentsModal,
-  },
-  directives: {
-    GlModalDirective,
-  },
-  modalId: 'runner-aws-deployments-modal',
-  i18n: {
-    buttonText: s__('Runners|Deploy GitLab Runner in AWS'),
-  },
-  data() {
-    return {
-      opened: false,
-    };
-  },
-  methods: {
-    onClick() {
-      this.opened = true;
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <gl-button
-      v-gl-modal-directive="$options.modalId"
-      class="gl-mt-4"
-      data-testid="show-modal-button"
-      variant="confirm"
-      @click="onClick"
-    >
-      {{ $options.i18n.buttonText }}
-    </gl-button>
-    <runner-aws-deployments-modal v-if="opened" :modal-id="$options.modalId" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue b/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
deleted file mode 100644
index 08acde1aefc..00000000000
--- a/app/assets/javascripts/vue_shared/components/runner_aws_deployments/runner_aws_deployments_modal.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-import { GlModal } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import RunnerAwsInstructions from '~/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue';
-
-export default {
-  components: {
-    GlModal,
-    RunnerAwsInstructions,
-  },
-  props: {
-    modalId: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    onClose() {
-      this.$refs.modal.close();
-    },
-  },
-  i18n_title: s__('Runners|Deploy GitLab Runner in AWS'),
-};
-</script>
-<template>
-  <gl-modal ref="modal" :modal-id="modalId" :title="$options.i18n_title" hide-footer size="sm">
-    <runner-aws-instructions @close="onClose" />
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js
index 3dbc5246c3d..b66c89d1372 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/constants.js
@@ -4,6 +4,7 @@ export const REGISTRATION_TOKEN_PLACEHOLDER = '$REGISTRATION_TOKEN';
 
 export const PLATFORM_DOCKER = 'docker';
 export const PLATFORM_KUBERNETES = 'kubernetes';
+export const PLATFORM_AWS = 'aws';
 
 export const AWS_README_URL =
   'https://gitlab.com/guided-explorations/aws/gitlab-runner-autoscaling-aws-asg/-/blob/main/easybuttons.md';
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>
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
index 729fe9c462c..22d9b88fa41 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue
@@ -14,11 +14,12 @@ import {
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { __, s__ } from '~/locale';
 import getRunnerPlatformsQuery from './graphql/get_runner_platforms.query.graphql';
-import { PLATFORM_DOCKER, PLATFORM_KUBERNETES } from './constants';
+import { PLATFORM_DOCKER, PLATFORM_KUBERNETES, PLATFORM_AWS } from './constants';
 
 import RunnerCliInstructions from './instructions/runner_cli_instructions.vue';
 import RunnerDockerInstructions from './instructions/runner_docker_instructions.vue';
 import RunnerKubernetesInstructions from './instructions/runner_kubernetes_instructions.vue';
+import RunnerAwsInstructions from './instructions/runner_aws_instructions.vue';
 
 export default {
   components: {
@@ -104,6 +105,8 @@ export default {
           return RunnerDockerInstructions;
         case PLATFORM_KUBERNETES:
           return RunnerKubernetesInstructions;
+        case PLATFORM_AWS:
+          return RunnerAwsInstructions;
         default:
           return null;
       }