Improve the container registry table UI

Problem to solve

Currently, the Container Registry table UI is fairly simple and not as feature rich as other parts of the UI. Whilst this issue isn't specifically for adding features, I feel we could improve the UI enough to look better now, become more consistent with the rest of GitLab's UI and ensure adding features later is easier.

Intended users

Further details

The Container Registry is not as typical as other parts of the UI because there are two navigation levels. There is first a list of registry repositories and then for each repository there is a list of images (which can be paginated). This means that some of the existing tables / layouts are a little harder to apply to this table.

Examples of similar UI:

Cycle Analytics

Screenshot_2019-07-15_at_16.49.04

The Cycle Analytics page is an example of nested navigation. This is very nice looking but might not suit Container Registry due with it's vertically split approach.

Environments

Screenshot_2019-07-15_at_17.07.09

The Environments page looks to have a more applicable UI that could be applied. The handling of longer lists is done with a transition to a new page (by pressing the Show All button). This is something we might not want with the Container Registry, but we could change this to show the pagination buttons instead.

Alternatively, we could transition to a new page and then show more features in context of working within that repository (for example: search / filtering, column ordering, etc).

The layout used here is also used across GitLab (issues, merge requests, etc), so we have predefined places to add features such as a search bar, tabs, new buttons, right hand side menu, etc.

Proposal

My suggestion would be to start by upgrading the style of the Container Registry table to match the table used on the Environments page. We could also borrow some example styling from the Security Dashboard page, as per issue gitlab-ce#24705 where we've started to do this.

This would benefit the Container Registry page by using a more standard / common UI and allow for us to build features in a standard GitLab way so users will immediately know how to use them.

Testing

  • We need to test that all existing functionality continues to work as expected
  • Test to ensure that we haven't lost or changed any existing functionality
  • Test that any new UI works well across browsers and devices

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

Success looks like more consistent UI is applied which drives increased engagement / usability.