Branch list UI improvements

Proposal

During design explorations for #385571 (comment 1270634828) there was a discussion on exploring visual improvements to the branch list to improve clarity.

The left side of the branch list has a lot of noise. For example, do we need an icon for the commit? Can we use a smaller font-size or lighter color for this secondary metadata?

Overflow menu for actions

  • Move all actions except for "merge request" actions to an overflow menu
  • In the overflow menu, it will have the following actions
    • Compare
    • Delete
  • Remove the download action completely as it can be accessed from the repository view if the user clicks on the branch name
    • To be verified either with solution validation or product analytics looking at clicks

Design

Figma file

Design
Current image
Updated image

Areas to explore/question

  • How important is it to have the commit id and message in the list? Can we remove it?
    • It is important to have commit id and message
  • Which design between Concept A & Concept B is ideal for checking pipeline status?
    • Checking status is an important thing for a list of branches.
Edited by Michael Le