## Context The artifact detail page is where users interact with a specific artifact after navigating to it from the repository detail page (https://gitlab.com/gitlab-org/gitlab/-/work_items/594712). This issue covers the artifact detail page for the MVP formats. Each format shares a consistent page structure with format-specific variations where the underlying data model differs. ## Scope **In scope** * Maven, npm, and Docker * Version/tag switcher and format-appropriate primary action * Page content: Overview, files, versions/tags **Out of scope** * PyPI, NuGet, Conan, and additional formats * Dependencies and vulnerability scanning tabs ## Users and goals **Intended users:** Software developers, platform engineers **Primary need:** When users need to use an artifact, they need to explore available versions, choose the one they need, access installation or usage instructions - so they can integrate it confidently without leaving GitLab or switching between tools. **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. * **Configure development environment:** When setting up a new development environment, I want to quickly find and configure the registries I need, so I can write secure and efficient code using the correct dependencies. See https://gitlab.com/gitlab-org/gitlab/-/work_items/585652+ for the full vision. ## Design proposal ### :point_right: **Common patterns across all formats** <table> <tr> <th colspan="2">Page head</th> </tr> <tr> <td> {width="838" height="504"} </td> <td> * **Artifact**: Format icon + artifact name * **Version/tag switcher:** * Defaults to the most recently pushed version or tag. Content reflects the selected version. * Download version icon button sits next to the version dropdown (Maven/npm) * **Kebab menu for delete artifact action** * This action deletes the artifact. Includes a confirmation modal with a type-to-confirm input. Redirects to the repository detail page on success. * To delete a single version or tag, go to the Versions/Tags tab in the main content and use the action button in the row. </td> </tr> </table> <table> <tr> <th colspan="2">Sidebar</th> </tr> <tr> <td> {width="900" height="349"} </td> <td> * Repository name + type badge * Size, Downloads * Published date (of selected version/tag) * Source: CI build ref + commit + project + user, or Manually published + user </td> </tr> </table> <table> <tr> <th colspan="3">Content tabs</th> </tr> <tr> <td> {width="781" height="596"} </td> <td> {width=834 height=600} </td> <td> {width="900" height="375"} </td> </tr> <tr> <td> **Overview** * **Installation code block** * Displays an install or pull command for the selected version/tag with a copyable code block * Maven: Displays a build tool selector (e.g. Maven (default), Gradle, etc). Footer links to setup instructions doc. * **README or OCI annotations** * If these information are provided, render and present this information under the code block. </td> <td> **Files** * **File count shown in the tab** * **Filter and search** * File name, file type * **Table** * Collapsible: Toggle button shows/hides checksums or digests with inline copy buttons * File (sorted by default) * Type * Size * Created date * Actions: Flyout contains download file </td> <td> **Versions / Tags** * **Version/Tag count shown in the tab** * **Filter and search** * Version, source * **Table** * Version/Tag * Download * Size * Published date (sorted by default) * Actions flyout * Maven or npm: * Download version * Delete version * Docker: * Copy pull command * Delete tag </td> </tr> </table> ### :point_right: Maven :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=1220-49567&t=dm1o3Zlh7atIw1IO-0) | :robot: [AI prototype](https://gitlab-org.gitlab.io/ci-cd/package-stage/artifact-registry-design-proposal/repositories/local/artifact/?artifact=com.company.payment:core&repo=payments-maven-registry&format=Maven) <table> <tr> <th>Overview</th> <th>Files</th> <th>Versions</th> </tr> <tr> <td> {width="900" height="585"} </td> <td> {width="1005" height="654"} </td> <td> {width="900" height="585"} </td> </tr> <tr> <td colspan="3"> No additional differences beyond the [common patterns](https://gitlab.com/gitlab-org/gitlab/-/work_items/598785#point_right-common-patterns-across-all-formats) above. </td> </tr> </table> ### :point_right: npm :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=1220-56223&t=dm1o3Zlh7atIw1IO-0) | :robot: [AI prototype](https://gitlab-org.gitlab.io/ci-cd/package-stage/artifact-registry-design-proposal/repositories/local/artifact/?artifact=@company/payment-core&repo=payments-npm-registry&format=npm) | Overview | Files | Versions | |----------|-------|----------| | {width="900" height="586"} | {width="1051" height="683"} | {width="900" height="586"} | | Displays README rendered from the npm package if present. | See the [common patterns](https://gitlab.com/gitlab-org/gitlab/-/work_items/598785#point_right-common-patterns-across-all-formats) above. | See the [common patterns](https://gitlab.com/gitlab-org/gitlab/-/work_items/598785#point_right-common-patterns-across-all-formats) above. | ### :point_right: Docker :frame_photo: [Figma file](https://www.figma.com/design/b5gaaEDjfxZbphoRQ3jVGv/AM-concepting?node-id=1222-59177&t=dm1o3Zlh7atIw1IO-0) | :robot: [AI prototype](https://gitlab-org.gitlab.io/ci-cd/package-stage/artifact-registry-design-proposal/repositories/local/artifact/?artifact=payments-service&repo=payments-docker-registry&format=Docker) <table> <tr> <th>Overview</th> <th>Files</th> <th>Tags</th> </tr> <tr> <td> {width="900" height="585"} </td> <td>N/A</td> <td> {width="962" height="627"} </td> </tr> <tr> <td>Displays OCI annotations if present.</td> <td>No Files tab. Docker images are layer-based rather than file-based. Layers are implementation details not meaningful to browse.</td> <td> * Tags tab replaces Version tab. * Tag column replaces Version column. </td> </tr> </table> ## Relevant links * Repo detail page: https://gitlab.com/gitlab-org/gitlab/-/work_items/594712 * Glossary: [Key terms](https://gitlab.com/gitlab-org/ci-cd/package-stage/unified-artifact-management/-/blob/main/glossary.md?ref_type=heads)