Package Registry - In the group registry view, make the project UI moment easier to read and relevant

Problem to solve

When a user is looking at a group level registry, we display the package's project as a data-point on each individual list item. This helps users stay organized and understand the breakdown of different registries.

However, for users operating in a complicated group structure, this information can become unmanageable and difficult to discern.

Current UI

Intended users

User experience goal

Display the project data related to a specific package in the list view in a manageable and human way.

Proposal

Update the design of the "project" data points in the list view so that it displays the project data relative to the group the user is viewing:

Updated project UI update

Because the project name (or subgroup/project name) is a more flexible UI object, I also suggest we move it to the end of the package metadata line. This would mean the package type will come second instead of last.

Further details

For most of our users, the "Project" datapoint will only show the project that is a child of the group they're currently viewing.

UI With Single child project

For some users, they'll find a package that is contained in a project that is a child of a sub-group. That subgroup is a child of the group the user is currently looking at.

UI with single sub-group project child relationship

In our rarest case, users will view a package that has a more complex hierarchy. After the first Sub-Group is displayed, an ellipses icon will be used similar to the breadcrumb navigation to show all of the n+2 subgroups.

UI with multiple subgroups included

We should also include a tooltip on hover that displays the entire path of the related project from instance -> group -> subgroup -> project

Tooltip hover example

Permissions and Security

N/a

Documentation

Updating screenshots in the documentation may be needed when discussing the group level view.

@nmezzopera @trizzi - If we go with this breakdown, do you think the documentation should include a note explaining the elipses icon will show all of the sub-groups between the first sub-group and the project name?

Availability & Testing

n/a

What does success look like, and how can we measure that?

Users will be able to more easily identify the project/sub-group relationship of a package compared to the group they're viewing. They won't be forced to see the hierarchy of all the groups above the currently viewed (sub) group.