UI for Maven virtual registries
# UI for the Virtual Registries Feature
## Overview
This epic covers the implementation of the user interface for the virtual registries feature. The backend API is already in place, and we're now focusing on creating an intuitive and efficient UI to interact with virtual registries.
Documentation:
* https://docs.gitlab.com/api/maven_virtual_registries
* https://docs.gitlab.com/user/packages/virtual_registry/
* https://docs.gitlab.com/user/packages/virtual_registry/maven/
## Goals
- Create a user-friendly interface for managing virtual registries
- Ensure seamless integration with the existing Container Registry UI
- Implement all necessary CRUD operations through the UI
- Provide clear visualization of virtual registry structures and relationships
## User Stories
1. As a user, I want to view a list of all virtual registries in my group
2. As a user, I want to create a new virtual registry
3. As a user, I want to edit the properties of an existing virtual registry
4. As a user, I want to delete a virtual registry
5. As a user, I want to view the contents and structure of a virtual registry
## Technical Considerations
- Integrate with the existing registry frontend architecture
- Ensure responsive design for various screen sizes
- Consider performance optimizations for large numbers of virtual registries
## Design Requirements
- Create wireframes and mockups for all major UI components
- Ensure consistency with GitLab's design system
- Design intuitive navigation between regular and virtual registries
### Design issue
https://gitlab.com/gitlab-org/gitlab/-/issues/493842+
## Setup instructions
1. Make sure your GDK has an enterprise licence: https://gitlab.com/gitlab-org/gitlab-development-kit/blob/main/doc/index.md#use-gitlab-enterprise-features.
2. Enable feature flags `virtual_registry_maven` & `ui_for_virtual_registry`
3. In the gitlab admin UI, edit the group to be on an ultimate/premium plan(edit button from `http://gdk.test:3000/admin/groups`)
**Note:** The feature flag is being updated in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/190356+ so the ~backend feature flag will be changed from `virtual_registry_maven` to `maven_virtual_registry`
- `/groups/<root-group>/-/virtual_registries` is the route entrypoint to the feature
- From there you should be able to create a Maven registry.
**Limitations:**
1. Only one Maven Virtual registry can be created. You can delete the model from the rails console using `VirtualRegistries::Packages::Maven::Registry.find(1).destroy!`
2. The GET API does not support filter/sort/pagination at the moment, I've opened https://gitlab.com/gitlab-org/gitlab/-/issues/541451+ to track this ~frontend features
**Routes**
1. You can view all the available routes using the command `rails routes | grep virtual_registries` The following routes are now available:
```
/groups/*group_id/-/virtual_registries
/groups/*group_id/-/virtual_registries/maven
/groups/*group_id/-/virtual_registries/maven/new
/groups/*group_id/-/virtual_registries/maven/:id
/groups/*group_id/-/virtual_registries/maven/upstreams/:id
/groups/*group_id/-/virtual_registries/maven/upstreams/:id/edit
```
2. Edit maven registry route `/groups/*group_id/-/virtual_registries/maven/:id/edit` is being added in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/191111+s
~backend files:
* Routes: `ee/config/routes/virtual_registries.rb`
* Helper: `ee/app/helpers/virtual_registry_helper.rb`
* Views: `ee/app/views/groups/virtual_registries/*`
* Controllers: `ee/app/controllers/groups/virtual_registries_controller.rb`, `ee/app/controllers/groups/virtual_registries/*`
* Feature specs: `ee/spec/features/groups/virtual_registries_spec.rb`, `ee/spec/features/groups/virtual_registries/*`
~frontend files:
* JS Entrypoints: `ee/app/assets/javascripts/pages/groups/virtual_registries/*`
* Components - `ee/app/assets/javascripts/packages_and_registries/virtual_registries/components/*`
* Root components for maven - `ee/app/assets/javascripts/packages_and_registries/virtual_registries/maven/*`
* axios REST API calls - `ee/app/assets/javascripts/api/virtual_registries_api.js` **Note:** we don't have ~GraphQL endpoints, see [API documentation](https://docs.gitlab.com/api/maven_virtual_registries)
### Setting up models from rails console
```
Feature.enable(:maven_virtual_registry)
Feature.enable(:ui_for_virtual_registries)
g = Group.find(1) // must be a root group
r = VirtualRegistries::Packages::Maven::Registry.create(group: g, name: 'Maven')
# create an upstream, note: if you get validation error for local URL you need to comment out url validations in ee/app/models/virtual_registries/packages/maven/upstream.rb
u = VirtualRegistries::Packages::Maven::Upstream.create!(group: g, url: 'http://local.test/maven/', name: 'Upstream')
# create a registry_upstream join table row
VirtualRegistries::Packages::Maven::RegistryUpstream.create!(group: g, registry: r, upstream: u)
# create a cache entry
ce = VirtualRegistries::Packages::Maven::Cache::Entry.create!(group: g, upstream: u, relative_path: '/test/bar', size: 15, file: Tempfile.new('bar'), file_sha1: '4e1243bd22c66e76c2ba9eddc1f91394e57f9f83', object_storage_key: 'new-key')
```
## Acceptance Criteria
- All user stories are implemented and functional
- UI is responsive and works on desktop and mobile devices
- Design is consistent with GitLab's UI guidelines
- All interactions with the API are correctly handled, including error states
- Documentation is updated to reflect new UI features
## Out of Scope
- Changes to the backend API (unless necessary for UI implementation)
- Modifications to non-virtual registry functionality
## Open Questions
- How should we visualize the relationship between virtual registries and their source registries?
- Do we need any new permissions or roles specific to virtual registries?
<!--triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION-->
_This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc._
<!--triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION-->
epic