Replace registration token in registration modal

This change replaces the registration token in the commands provided
in the modal, so users can easily copy-paste the contents of the
instruction and use them directly.

Changelog: changed

app/assets/javascripts/runner/components/registration/registration_dropdown.vue

@@ -88,6 +88,7 @@ export default {
       <runner-instructions-modal
         v-if="instructionsModalOpened"
         ref="runnerInstructionsModal"
+        :registration-token="registrationToken"
         data-testid="runner-instructions-modal"
       />
     </gl-dropdown-item>

app/assets/javascripts/runner/group_runners/index.js

+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import GroupRunnersApp from './group_runners_app.vue';
 
+Vue.use(GlToast);
 Vue.use(VueApollo);
 
 export const initGroupRunners = (selector = '#js-group-runners') => {

app/assets/javascripts/vue_shared/components/runner_instructions/constants.js

@@ -2,6 +2,8 @@ import { s__ } from '~/locale';
 
 export const PLATFORMS_WITHOUT_ARCHITECTURES = ['docker', 'kubernetes'];
 
+export const REGISTRATION_TOKEN_PLACEHOLDER = '$REGISTRATION_TOKEN';
+
 export const INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES = {
   docker: {
     instructions: s__(

app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue

@@ -16,8 +16,9 @@ import { isEmpty } from 'lodash';
 import { __, s__ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import {
-  PLATFORMS_WITHOUT_ARCHITECTURES,
   INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES,
+  PLATFORMS_WITHOUT_ARCHITECTURES,
+  REGISTRATION_TOKEN_PLACEHOLDER,
 } from './constants';
 import getRunnerPlatformsQuery from './graphql/queries/get_runner_platforms.query.graphql';
 import getRunnerSetupInstructionsQuery from './graphql/queries/get_runner_setup.query.graphql';
@@ -44,6 +45,11 @@ export default {
       required: false,
       default: 'runner-instructions-modal',
     },
+    registrationToken: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   apollo: {
     platforms: {
@@ -118,6 +124,15 @@ export default {
     runnerInstallationLink() {
       return INSTRUCTIONS_PLATFORMS_WITHOUT_ARCHITECTURES[this.selectedPlatformName]?.link;
     },
+    registerInstructionsWithToken() {
+      const { registerInstructions } = this.instructions || {};
+
+      if (this.registrationToken) {
+        return registerInstructions.replace(REGISTRATION_TOKEN_PLACEHOLDER, this.registrationToken);
+      }
+
+      return registerInstructions;
+    },
   },
   methods: {
     show() {
@@ -249,11 +264,11 @@ export default {
           <pre
             class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
             data-testid="register-command"
-            >{{ instructions.registerInstructions }}</pre
+            >{{ registerInstructionsWithToken }}</pre
           >
           <modal-copy-button
             :title="$options.i18n.copyInstructions"
-            :text="instructions.registerInstructions"
+            :text="registerInstructionsWithToken"
             :modal-id="$options.modalId"
             css-classes="gl-align-self-start gl-ml-2 gl-mt-2"
             category="tertiary"

app/graphql/types/ci/runner_setup_type.rb

@@ -9,7 +9,7 @@ module Types
       field :install_instructions, GraphQL::Types::String, null: false,
         description: 'Instructions for installing the runner on the specified architecture.'
       field :register_instructions, GraphQL::Types::String, null: true,
-        description: 'Instructions for registering the runner.'
+        description: 'Instructions for registering the runner. The actual registration tokens are not included in the commands. Instead, a placeholder `$REGISTRATION_TOKEN` is shown.'
     end
   end
 end

doc/api/graphql/reference/index.md

@@ -13935,7 +13935,7 @@ Counts of requirements by their state.
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | <a id="runnersetupinstallinstructions"></a>`installInstructions` | [`String!`](#string) | Instructions for installing the runner on the specified architecture. |
-| <a id="runnersetupregisterinstructions"></a>`registerInstructions` | [`String`](#string) | Instructions for registering the runner. |
+| <a id="runnersetupregisterinstructions"></a>`registerInstructions` | [`String`](#string) | Instructions for registering the runner. The actual registration tokens are not included in the commands. Instead, a placeholder `$REGISTRATION_TOKEN` is shown. |
 
 ### `SastCiConfiguration`
 

spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js

@@ -52,7 +52,7 @@ describe('RunnerInstructionsModal component', () => {
   const findBinaryInstructions = () => wrapper.findByTestId('binary-instructions');
   const findRegisterCommand = () => wrapper.findByTestId('register-command');
 
-  const createComponent = (options = {}) => {
+  const createComponent = ({ props, ...options } = {}) => {
     const requestHandlers = [
       [getRunnerPlatformsQuery, runnerPlatformsHandler],
       [getRunnerSetupInstructionsQuery, runnerSetupInstructionsHandler],
@@ -64,6 +64,8 @@ describe('RunnerInstructionsModal component', () => {
       shallowMount(RunnerInstructionsModal, {
         propsData: {
           modalId: 'runner-instructions-modal',
+          registrationToken: 'MY_TOKEN',
+          ...props,
         },
         localVue,
         apolloProvider: fakeApollo,
@@ -119,18 +121,30 @@ describe('RunnerInstructionsModal component', () => {
       expect(instructions).toBe(installInstructions);
     });
 
-    it('register command is shown', () => {
+    it('register command is shown with a replaced token', () => {
       const instructions = findRegisterCommand().text();
 
-      expect(instructions).toBe(registerInstructions);
+      expect(instructions).toBe(
+        'sudo gitlab-runner register --url http://gdk.test:3000/ --registration-token MY_TOKEN',
+      );
+    });
+
+    describe('when a register token is not shown', () => {
+      beforeEach(async () => {
+        createComponent({ props: { registrationToken: undefined } });
+        await nextTick();
+      });
+
+      it('register command is shown without a defined registration token', () => {
+        const instructions = findRegisterCommand().text();
+
+        expect(instructions).toBe(registerInstructions);
+      });
     });
   });
 
   describe('after a platform and architecture are selected', () => {
-    const {
-      installInstructions,
-      registerInstructions,
-    } = mockGraphqlInstructionsWindows.data.runnerSetup;
+    const { installInstructions } = mockGraphqlInstructionsWindows.data.runnerSetup;
 
     beforeEach(async () => {
       runnerSetupInstructionsHandler.mockResolvedValue(mockGraphqlInstructionsWindows);
@@ -158,7 +172,9 @@ describe('RunnerInstructionsModal component', () => {
     it('register command is shown', () => {
       const command = findRegisterCommand().text();
 
-      expect(command).toBe(registerInstructions);
+      expect(command).toBe(
+        './gitlab-runner.exe register --url http://gdk.test:3000/ --registration-token MY_TOKEN',
+      );
     });
   });