## Context The repository detail page is where users interact with a repository after navigating to it from the listing page (https://gitlab.com/gitlab-org/gitlab/-/work_items/594412). Artifact Registry supports three repository types (hosted, remote and virtual), this issue covers the detail page for all three, establishing a consistent layout and interaction pattern with type-specific variations where needed. ## Scope **In scope** * Repository detail page layout for all three types: hosted, remote and virtual * What the page shows and how it is laid out per type * Artifact browsing within a repository, including format-specific hierarchy (e.g. Maven packages and versions, npm packages and tags, Docker images and tags) * Artifact metadata display (name, version, size, checksums, timestamps) * Basic artifact operations: upload, download, delete, tag, and untag * Version management * Download tracking and storage usage data per repository * Empty state for a repository with no artifacts yet **Out of scope** * Artifact search within a repository (https://gitlab.com/gitlab-org/gitlab/-/work_items/594717) * CRUD flows (https://gitlab.com/gitlab-org/gitlab/-/work_items/598033) * Access control and permissions (separate issue) * Lifecycle and retention policy configuration (separate issue) * PyPI, NuGet, and additional formats (v1.0+) ## Users and goals **Intended users:** Platform engineers, software developers **Primary need:** Improve artifact discoverability and visibility - users need to see what artifacts exist inside a repository, understand what they are, and access or manage them efficiently. **Relevant JTBDs:** * **Work with dependencies:** When I need to use or publish dependencies, I want to handle them in a single system that works the same across languages, so I can avoid switching between multiple tools. * **Ensure fast and reliable dependency operations:** When I fetch or publish dependencies, I want to ensure they resolve quickly and consistently, so I can stay productive. See https://gitlab.com/gitlab-org/gitlab/-/work_items/585652+ for the full vision. ## Design proposal ### :point_right: Hosted repo :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=590-2658&t=Gifqr07oJPvxn3Wg-0) | :robot: [AI prototype](https://gitlab-org.gitlab.io/ci-cd/package-stage/artifact-registry-design-proposal/repositories/local/?name=payments-maven-registry) <table> <tr> <th>Populated state</th> <th>Setup instructions drawer</th> <th>Empty state</th> </tr> <tr> <td> {width="900" height="586"} </td> <td> {width="78" height="175"} </td> <td> {width="900" height="587"} </td> </tr> <tr> <td> **Page header** * Format icon + repo name * Visibility icon (Private / Internal / Public) * Type badge (Hosted) * Description (if provided) * Edit repo button * Kebab menu \[•••\]: * Setup instructions (open drawer) * Copy repository URL * Delete repository **Filtering** (see https://gitlab.com/gitlab-org/gitlab/-/work_items/594717#design-proposal) **Package list** * Table * Package (with latest version below) * Versions * Size * Published (sorted by most recent by default) * Source * CI-built (MR ref + commit SHA + project link + user) or; * Manually published + user * Copy URL icon button * Kebab menu \[•••\] * Download package * Delete package * Pagination **Sidebar** * Repo stats * Size * Downloads * Package count * Virtual repository associations * List of virtual repos this repo is a member of * Truncated for scale, with "+ N more" to expand * Retention policies * Access rules * Created timestamp (date + user avatar + name) * Last updated timestamp (date + user avatar + name) </td> <td> Setup instructions drawer triggered by "setup instructions action" in kebab menu * Build tool selector dropdown (Maven, Gradle Groovy, Gradle Kotlin) May also consider other tools like: SBT, Mill, Ivy, Grape, Leiningen, Buildr) * Tabs: Install, Publish * Tab content: * Copyable code blocks * Link to docs for more information Setup instructions is accessible in drawer from populated state via kebab. In empty state the content is surfaced inline instead. </td> <td> **Page header** * Same as populated state **Page content** * Empty state illustration + heading + support text * Setup instructions with build tool selector dropdown + copyable code blocks * Numbered setup steps with copyable code blocks **Sidebar** * Same as populated state minus repo stats (no packages yet) and last updated </td> </tr> </table> ### :point_right: Remote repo :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=590-2663&t=NotYvsZbRqv3IJad-0) | :robot: [AI prototype](https://gitlab-org.gitlab.io/ci-cd/package-stage/artifact-registry-design-proposal/repositories/remote/?name=maven-central) <table> <tr> <th>Populated state</th> <th>Empty state</th> </tr> <tr> <td> {width="900" height="587"} </td> <td> {width="1124" height="731"} </td> </tr> <tr> <td> **Page header** * Format icon + repo name * Visibility icon (Private / Internal / Public) * Type badge (Remote) * Upstream URL + copy button * Description (if provided) * Edit button * Kebab menu \[•••\] * Copy repository URL * Clear cache * Delete repository **Filtering** (see https://gitlab.com/gitlab-org/gitlab/-/work_items/594717#design-proposal) **Package list** Packages appear once they are cached from the source. * Table * Package * Cached versions * Size * Last downloaded (sorted by most recent by default) * Kebab menu \[•••\] * Delete cache entry * Pagination **Sidebar** * Connection * Status badge (Connected, Disconnected) * Last verified timestamp * Test button (manually triggers a connection check) * Repo stats * Size * Downloads * Artifact count * Virtual repository associations * List of virtual repos this repo is a member of * Truncated for scale, with "+ N more" to expand * Caching period * Artifact cache TTL * Metadata cache TTL * Retention policies * Access rules * Created timestamp (date + user avatar + name) * Last updated timestamp (date + user avatar + name) </td> <td> **Page header** * Same as populated state **Page content** * Table with column headers visible * Inline message: "No packages have been cached yet." **Sidebar** * Same as populated state minus repo stats (no cache yet) and last updated </td> </tr> </table> ### :point_right: Virtual repo :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=590-2668&t=NotYvsZbRqv3IJad-0) | :robot: [AI prototype](https://gitlab-org.gitlab.io/ci-cd/package-stage/artifact-registry-design-proposal/repositories/virtual/?name=company-maven-virtual) <table> <tr> <th>Populated state</th> <th>Empty state</th> </tr> <tr> <td> {width="900" height="585"} </td> <td> {width="1112" height="724"} </td> </tr> <tr> <td> **Page header** * Format icon + repo name * Visibility icon (Private / Internal / Public) * Type badge (Virtual) * Description (if provided) * Add repository button dropdown * Hosted repository * Remote repository * Edit button * Kebab menu \[•••\] * Copy repository URL * Clear all caches * Delete repository **Filtering** (see https://gitlab.com/gitlab-org/gitlab/-/work_items/594717#design-proposal) **Repository list** * Table * Order: with (?) help icon in column header * Repository repo name * Visibility (Private / Internal / Public) * Type badge (Remote / Local) * Remote repos: globe icon + URL + connection status * Size * Kebab menu \[•••\] * Remote: Clear cache, Edit repository, Remove repository * Local: Edit repository, Remove repository * Row order matters (resolution priority follows list order - top = highest priority. Reordering via edit workflow, to be design * No sorting **Sidebar** * Repo stats * Size * Downloads * Repository count * Retention policies * Access rules * Created on (date + user avatar + name) * Last updated (date + user avatar + name) </td> <td> **Page header** * Same as populated state **Page content** * Empty state illustration + heading + support text * Add repository dropdown button **Sidebar** * Same as populated state minus repo stats and last updated </td> </tr> </table> ### Other MVP formats The designs above use Maven as the reference format. npm and Docker follow the same page structure, layout, sidebar sections, empty states, and interaction patterns. The tables below document format-specific differences only. ### :point_right: npm :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=1107-44238&t=G9sRR2ZCc7BtPD0e-0) | :robot: AI prototype (to be built) | Hosted repo | Remote repo | Virtual repo | |-------------|-------------|--------------| | {width="900" height="586"} | {width="900" height="586"} | {width="900" height="587"} | | Refer to [hosted repo design](https://gitlab.com/gitlab-org/gitlab/-/work_items/594712#point_right-local-repo) above. | Refer to [remote repo design](https://gitlab.com/gitlab-org/gitlab/-/work_items/594712#point_right-remote-repo) above. | Refer to [virtual repo design](https://gitlab.com/gitlab-org/gitlab/-/work_items/594712#point_right-virtual-repo) above. | ### :point_right: Docker :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=1107-49869&t=G9sRR2ZCc7BtPD0e-0) | :robot: AI prototype (to be built) <table> <tr> <th>Hosted repo</th> <th>Remote repo</th> <th>Virtual repo</th> </tr> <tr> <td> {width="900" height="585"} </td> <td> {width="900" height="586"} </td> <td> {width="1373" height="891"} </td> </tr> <tr> <td> **Table** * ~~Package~~ Image * Shows the most recently pushed tag under the image name. * ~~Versions~~ Tags **Sidebar** * \[N\] ~~Packages~~ Images </td> <td> **Table** * ~~Package~~ Image * Shows the most recently pushed tag under the image name. * ~~Cached versions~~ Cached tags **Sidebar** * \[N\] ~~Packages cached~~ Images cached </td> <td> Refer to [virtual repo design](https://gitlab.com/gitlab-org/gitlab/-/work_items/594712#point_right-virtual-repo) above. </td> </tr> </table> ## Relevant links * Format split vs. Hybrid list discussion thread: https://gitlab.com/gitlab-org/gitlab/-/work_items/568349#note_3043270822 * Glossary: [Key terms](https://gitlab.com/gitlab-org/ci-cd/package-stage/unified-artifact-management/-/blob/main/glossary.md?ref_type=heads)