List and Details page for container registry explorer
What does this MR do?
This MR is part of a series of merge requests to bring new UX and routing methods to the Container Registry. This enables the Container Registry pages to behave like a SPA using vue-router
.
This MR is part three which implements the image list page and the image details page ( tags list ) adds fully working navigation and in general replicate completely the functionality exposed by the current container registry page.
In the list
page we have:
- list of images of the repo ( or image of the group )
- pagination ( if necessary )
- image delete button ( and modal )
- link to the image details
in the details
page we have
- table with all the tags
- pagination ( if necessary )
- tag delete button ( and modal )
- multi-tag delete button ( and modal )
Both pages honor the tracking already implemented in the system so that we could have consistent data tracking.
This new UX is behind the vue_container_registry_explorer
feature flag so it can easily be reverted. No modifications have been made to the existing Container Registry code as part of this.
Related MRs:
- Add pagination and new routing for docker container registry
- Add new basic registry explorer app
- [This MR] Add final List and Details page for container registry explorer
- Add vue powered breadcrumb compatible with vue router
Original proof of concept MR (not to be merged): !23079 (closed)
Screenshots
Repo/Images list on project level
Repo/Images list on group level
Image details (tag list) without pagination
Image details (tag list) with pagination
Image details (tag list) empty state
Screencapture
Does this MR meet the acceptance criteria?
Conformity
- [-] Changelog entry
- [-] Documentation (if required)
-
Code review guidelines -
Merge request performance guidelines -
Style guides - [-] Database guides
-
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
- [-] Label as security and @ mention
@gitlab-com/gl-security/appsec
- [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
- [-] Security reports checked/validated by a reviewer from the AppSec team
Part of #23315 (closed)