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)

changed milestone to %15.10

added GitLab Free Technical Writing UI text UX [Deprecated] Category:Runner Fleet devopsverify featureaddition grouprunner sectionops severity3 typefeature workflowin dev + 1 deleted label

assigned to @mrincon

added backend documentation frontend labels

	4 Warnings
	This merge request is quite big (769 lines changed), please consider splitting it into multiple merge requests.
	c854587d: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.
	This merge request changed files with disabled eslint rules. Please consider fixing them.

	1 Message
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the Changelog trailer to the commit message you want to add to the changelog. If you want to create a changelog entry for GitLab EE, also add the EE: true trailer to your commit message. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Disabled eslint rules

The following files have disabled eslint rules. Please consider fixing them:

• app/assets/javascripts/ci/runner/components/registration/utils.js

Run the following command for more details

node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
  'app/assets/javascripts/ci/runner/components/registration/utils.js'

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
backend	Madelein van Niekerk (@maddievn) (UTC+2, 1 hour ahead of @mrincon)	Tetiana Chupryna (@brytannia) (UTC+1, same timezone as @mrincon)
frontend	Ross Byrne (@robyrne) (UTC+0, 1 hour behind @mrincon)	Jose Ivan Vargas (@jivanvl) (UTC-6, 7 hours behind @mrincon)
UX	Ali Ndlovu (@andlovu) (UTC+2, 1 hour ahead of @mrincon)	Maintainer review is optional for UX

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

changed title from Draft: Add Create Runner mutation to Draft: Add runner registration instructions

changed target branch from master to 383139-add-runner-creation-button

added 373 commits

• 859807d7...3e6b3446 - 371 commits from branch 383139-add-runner-creation-button
• 3e2b9d29 - Call API to create runner
• a2a20630 - Add runner registration instructions

Compare with previous version

added 2 commits

• f8583d0d - 1 commit from branch 383139-add-runner-creation-button
• 85cd4ca7 - Add runner registration instructions

Compare with previous version

Allure report

allure-report-publisher generated test report!

e2e-review-qa: test report for c854587d

expand test summary

+-----------------------------------------------------------------------+
|                            suites summary                             |
+------------------+--------+--------+---------+-------+-------+--------+
|                  | passed | failed | skipped | flaky | total | result |
+------------------+--------+--------+---------+-------+-------+--------+
| Create           | 28     | 0      | 1       | 0     | 29    | ✅     |
| Plan             | 49     | 0      | 1       | 0     | 50    | ✅     |
| Manage           | 31     | 0      | 5       | 0     | 36    | ✅     |
| Verify           | 12     | 0      | 0       | 1     | 12    | ❗     |
| Package          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Govern           | 27     | 0      | 5       | 5     | 32    | ❗     |
| Monitor          | 4      | 0      | 0       | 0     | 4     | ✅     |
| Framework sanity | 9      | 0      | 1       | 0     | 10    | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+
| Total            | 160    | 0      | 14      | 6     | 174   | ❗     |
+------------------+--------+--------+---------+-------+-------+--------+

changed title from Draft: Add runner registration instructions to Draft: Add runner registration instructions (2)

added 2 commits

• e10a1ed1 - Add create runner action to New Runner page
• 8101cecd - Add runner registration instructions

Compare with previous version

mentioned in merge request !111789 (merged)

changed the description

added 5 commits

• 8101cecd...a62f9c6d - 4 commits from branch 383139-add-runner-creation-button
• 88260f5b - Add runner registration instructions

Compare with previous version

mentioned in merge request !112561 (merged)

added 1 commit

• 8449787a - Add runner registration instructions

Compare with previous version

added 1 commit

• d506498a - Add runner registration instructions

Compare with previous version

changed the description

@andlovu could you help me review the UX here? Please note I plan to add the drawer in the designs in the next MR.

@ajwalker would you like to review commands copy-paste action? I suggest you try different OS, including Windows.

cc @gdoyle

requested review from @andlovu and @ajwalker

added 1 commit

• a5f3cde4 - Add runner registration instructions

Compare with previous version

resolved all threads

mentioned in issue #392950

deleted the 383139-add-runner-creation-button branch. This merge request now targets the master branch

added 462 commits

• a5f3cde4...1aff600b - 461 commits from branch master
• aed50340 - Add runner registration instructions

Compare with previous version

marked this merge request as ready

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 5ce7bc9a and c854587d

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.49 MB	3.5 MB	+1.61 KB	0.0 %
mainChunk	2 MB	2 MB	-	0.0 %

Significant Growth: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.admin.runners.register	13.14 KB	731.09 KB	+717.96 KB	5464.4 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@leipert, @markrian, @ohoral or @pgascouvaillancourt) for review, if you are unsure about the size increase.

Note: We do not have exact data for 5ce7bc9a. So we have used data from: 074fced0.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

added 1 commit

• 7d5cc78d - Add runner registration instructions

Compare with previous version

changed the description

added 1 commit

• d52f3641 - Add runner registration instructions

Compare with previous version

added 1 commit

• b1c378de - Add runner registration instructions

Compare with previous version

added 1 commit

• 672aa364 - Add runner registration instructions

Compare with previous version

changed the description

@robyrne could you help me review this largish MR? I left some explanation as to why it's large at the top, hope it helps make the review easier.

requested review from @robyrne

changed the description

@fneill could you help me with a technical writing review? Thanks!