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 path sub1/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.