Add runner registration instructions (2)

What does this MR do and why?

This change adds specific registration instructions for each platform according to the user's selection during runner creation.

This is a large MR!

This MR includes over 700 lines however it is only new static page, so it's UX is quick to review, you'll see the entire change in a single place. I'll leave some extra comments so reviewing is easier

This is a summary of the changes:

• We are working behind the create_runner_workflow feature flag.
• Adds a new mounting point for our page at #js-admin-register-runner (a bit of boilerplate)
• Adds a new app component with an Apollo query in it (so a bit more bolierplate)
• Renders instructions for different platforms, with a helper cli_command component

Related MRs

Add CreateRunner Mutation Endpoint (!110593 - merged)
Call API to create runner (1) (!111789 - merged)
Add runner registration instructions (2) (!112487 - merged)	you are here
Add installation command for drawer (3) (!112561 - merged)

Screenshots or screen recordings

UI notes

After a discussion over Slack at https://gitlab.slack.com/archives/C0199KBMY59/p1676910832818489 (internal) I used user-select: none; in part of the command to allow the user to have their command in a single line, so it behaves like the copy button:

This allows us to avoid using line breaks in the command.

The command prompt (e.g. $) is also ignored when copying.

How to set up and validate locally

1. Enable the feature flag: in your console rails c, and then Feature.enable(:create_runner_workflow)
2. Visit Admin -> CI/CD -> Runners
3. Select the "New instance runner" button
4. Input values to create a new runner, select a platform you want.
5. After "submit", confirm the success message
6. In the runner list a "Never connected" runner will appear.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #383139 (closed)

app/assets/javascripts/ci/runner/admin_new_runner/admin_new_runner_app.vue

 <script>
-import { GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
+import { GlSprintf, GlLink, GlModalDirective, GlForm, GlButton } from '@gitlab/ui';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { redirectTo, setUrlParams } from '~/lib/utils/url_utility';
+import { __ } from '~/locale';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
+import { modelToUpdateMutationVariables } from 'ee_else_ce/ci/runner/runner_update_form_utils';
+import runnerCreateMutation from '~/ci/runner/graphql/new/runner_create.mutation.graphql';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
 import RunnerFormFields from '~/ci/runner/components/runner_form_fields.vue';
-import { DEFAULT_PLATFORM, DEFAULT_ACCESS_LEVEL } from '../constants';
+import { DEFAULT_PLATFORM, DEFAULT_ACCESS_LEVEL, PARAM_KEY_PLATFORM } from '../constants';
+import { captureException } from '../sentry_utils';
+import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_local_storage';
 
 export default {
   name: 'AdminNewRunnerApp',
   components: {
     GlLink,
     GlSprintf,
+    GlForm,
+    GlButton,
     RunnerInstructionsModal,
     RunnerPlatformsRadioGroup,
     RunnerFormFields,
@@ -26,6 +35,7 @@ export default {
   data() {
     return {
       platform: DEFAULT_PLATFORM,
+      saving: false,
       runner: {
         description: '',
         maintenanceNote: '',
@@ -33,10 +43,53 @@ export default {
         accessLevel: DEFAULT_ACCESS_LEVEL,
         runUntagged: false,
         tagList: '',
-        maximumTimeout: ' ',
+        maximumTimeout: '',
       },
     };
   },
+  computed: {
+    variables() {
+      return modelToUpdateMutationVariables(this.runner);
+    },
+  },
+  methods: {
+    async onSubmit() {
+      this.saving = true;
+
+      try {
+        const {
+          data: {
+            runnerCreate: { errors, runner },
+          },
+        } = await this.$apollo.mutate({
+          mutation: runnerCreateMutation,
+          variables: modelToUpdateMutationVariables(this.runner),
+        });
+
+        if (errors?.length) {
+          this.onError(errors[0]);
+        } else {
+          this.onSuccess(runner);
+        }
+      } catch (error) {
+        const { message } = error;
+        this.onError(message);
+        captureException({ error, component: this.$options.name });
+      }
+    },
+    onSuccess(runner) {
+      const registerUrl = setUrlParams(
+        { [PARAM_KEY_PLATFORM]: this.platform },
+        runner.registerAdminUrl,
+      );
+      saveAlertToLocalStorage({ message: __('Runner created.'), variant: VARIANT_SUCCESS });
+      redirectTo(registerUrl);
+    },
+    onError(message) {
+      this.saving = false;
+      createAlert({ message });
+    },
+  },
   modalId: 'runners-legacy-registration-instructions-modal',
 };
 </script>
@@ -73,6 +126,14 @@ export default {
 
     <hr aria-hidden="true" />
 
-    <runner-form-fields v-model="runner" />
+    <gl-form @submit.prevent="onSubmit">
+      <runner-form-fields v-model="runner" />
+
+      <div class="gl-display-flex">
+        <gl-button type="submit" variant="confirm" class="js-no-auto-disable" :loading="saving">
+          {{ __('Submit') }}
+        </gl-button>
+      </div>
+    </gl-form>
   </div>
 </template>