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 kind prop 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 string ArtifactRegistry|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

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 Screenshot_2026-09-03_at_12.49.58_am
Show only Install tab for remote repositories & styling changes Screenshot_2026-09-03_at_12.51.09_am
code-block border and background changes Screenshot_2026-09-03_at_12.51.25_am

This change is behind the default-off artifact_registry_ui feature flag.

How to set up and validate locally

  1. Enable the artifact_registry_ui feature flag.
  2. Open the Artifact Registry repository list for an organization.
  3. Open a hosted repository and check the setup instructions button and drawer.
  4. Open a hosted repository with no artifacts and confirm the button is hidden.
  5. 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_ui flag is default off.
  • Jest specs updated in repository_header_spec.js, repository_actions_spec.js, setup_drawer_spec.js, and repository_detail_spec.js. All 52 suites and 1755 tests pass in ee/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.pot regenerated.
Edited by Rahul Chanila

Merge request reports

Loading
Loading