Loading
Move the setup instructions entry point into the page header
What does this MR do and why?
This MR moves setup instructions from the kebab menu to a dedicated button in the page heading, on the Artifact Registry repository detail page.
- Adds a "Setup instructions" button to the page heading, placed before Edit. (address #613241 (comment 3685382498))
- Removes "View setup instructions" from the kebab menu. The kebab keeps "Copy repository URL" and "Delete repository".
- Shows the button only when a client URL can be built, same condition the kebab item used before.
- Hides the button on a hosted repository with no artifacts. That empty state already shows the same setup steps inline.
- Keeps the button on a remote repository. Remote repositories have no such empty state.
- Adds a
kindprop to the drawer. Hosted repositories get Install and Publish tabs. Remote repositories get Install only, since nothing publishes to a remote repository. - Shares one translated string,
SETUP_INSTRUCTIONS_TITLE, between the button label and the drawer title. - Restyles the code snippets in the drawer: rounded corners, subtle background, even spacing, smaller section headings.
- Regenerates
locale/gitlab.pot. Drops the stringArtifactRegistry|View setup instructions. - Touches the hosted repository page as part of this remote work slice. The issue accepts this. A remote-only button would leave the hosted page with both a kebab item and a button for the same content.
References
- Issue (this MR does Step 4): #627312 (closed)
- Parent epic: gitlab-org#22453
- Sibling MR (Step 9): !253142 (merged)
Ordering: this MR and the Step 9 MR both branch off master and merge cleanly in either order. Until the Step 9 MR merges, an empty remote repository shows both the old empty state and the new button. That resolves once it lands.
Screenshots or screen recordings
| What | Screenshot |
|---|---|
| Setup instructions button | ![]() |
Show only Install tab for remote repositories & styling changes |
![]() |
| code-block border and background changes | ![]() |
This change is behind the default-off artifact_registry_ui feature flag.
How to set up and validate locally
- Enable the
artifact_registry_uifeature flag. - Open the Artifact Registry repository list for an organization.
- Open a hosted repository and check the setup instructions button and drawer.
- Open a hosted repository with no artifacts and confirm the button is hidden.
- Open a remote repository and check the button shows with an Install-only drawer.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
- No changelog entry. The
artifact_registry_uiflag is default off. - Jest specs updated in
repository_header_spec.js,repository_actions_spec.js,setup_drawer_spec.js, andrepository_detail_spec.js. All 52 suites and 1755 tests pass inee/spec/frontend/packages_and_registries/artifact_registry. - ESLint and Prettier clean.
- No docs change. The Artifact Registry UI is not documented yet.
- No database, security, or migration surface.
- Strings externalized.
locale/gitlab.potregenerated.
Edited by Rahul Chanila


