Display an image's shortened path with an option to expand
Context
When you have many image repositories in your container registry, it's important that you can quickly scan the list of images and find the one you are looking for, so you can validate it's correct or troubleshoot when something has gone wrong.
Problem to solve
The problem is that the current user interface displays the full path in the UI. This makes it very difficult to find the image repository you are looking for. Why? Because the full path can be very long and difficult for your eyes to quickly parse.
Proposal
- By default, display the shortened path of an image, this will allow users to quickly scan their image repository list and find what they are looking for.
- Give users the option to expand a given image name and view the full path.
- Give users the ability to copy the full image path, so they can use it in their pipeline definition files or from the command line.
- Measure the number of clicks on the ellipsis that allows users to view the full path. (This will help inform if a more global setting is needed)
Solution
How the path displays in UI
This proposal was informed by the following survey
- Hide the
company/group/sub-group
from the path in the UI by default, with an option to expand it. Keep the sub repositories in the pathsub1/sub2/sub3
Currently shown in UI | Proposal |
---|---|
company/group/project/ Root image |
project/ Root image |
company/group/project/image |
project/image |
company/group/project/sub1/sub2/sub3 |
project/sub1/sub2/sub3 |
Copy button
The copy button should still copy the entire path
What's shown in the UI | What the copy button copies |
---|---|
project/image |
registry.gitlab.com/company/group/project/image |
Implementation
- In group context, the GraphQL query needs to return extra fields related to project path to implement as mentioned in the table since its hard to determine the project path from the existing
path
field on the group query.
Tracking button clicks
We should track how often the ellipsis button is clicked each time the user is on the page. If the user clicks on every row to expand the full path, we know that we're inconveniencing the user.
Phased rollout
We could considering rolling out the truncation with the ellipsis button to a small subset of users, tracking how often users are clicking the ellipsis button and then making a determination to roll out further.