Skip to content

GitLab Next

GitLab FOSS
GitLab FOSS
Closed
Opened by Chris Peressini@cperessiniContributor
Report abuse New issue

Add dropdown to Groups link in top bar

With #35010 (closed) we added a dropdown to the Projects link in the top bar that allows users to directly navigate to the different subsections in the Project Dashboard, as well as navigate to other projects.

Design

The dropdown will contain direct links to the Your Groups and Explore groups subsections of the Groups dashboard.

On the right-hand side of the dropdown we will show a list of frequently accessed groups and a search box to navigate to other groups not present in the list.

The list of frequently accessed groups will be stored in localStorage. Every time the user visits a group, the Frontend evaluates how frequently that group is visited and adds it to the list if appropriate.

  • The dropdown will show up to 5 of the most frequently accessed groups
  • The list will have a static header, Frequently visited
  • If there are no frequent groups to show, an empty state message is shown: Groups you visit often will appear here
  • The height of the dropdown is always the same, which gives us available space to show search results
  • The avatar for each group should be shown next to its name
  • The group's parent group (or groups) is shown in a second line in the same style as the breadcrumbs
  • If there is no parent group, the group's name is centered in the row
  • The dropdown should follow the style used in https://gitlab.com/gitlab-org/gitlab-ce/issues/28921#note_36011920
Empty state 1 group 2 groups 3 groups 4 groups 5 groups
ce_35010__groups-dropdown--empty-state ce_35010__groups-dropdown--1-group ce_35010__groups-dropdown--2-groups ce_35010__groups-dropdown--3-groups ce_35010__groups-dropdown--4-groups ce_35010__groups-dropdown--5-groups

Search box behavior:

  • When the dropdown is opened, the keyboard focus is automatically put on the search box
  • When the user starts typing, the frequent groups list is replaced with a blank background. A spinner is shown until results start coming in
  • The results are shown right below the search bar
  • If there are no matching results, an error string is shown: Sorry, no groups matched your search
  • The switcher will only search groups you belong to (the ones shown under Your groups in the Group Dashboard)
Spinner Results No results
ce_35010__projects-dropdown--search-spinner ce_35010__projects-dropdown--search-results ce_35010__projects-dropdown--search-no-results

Mobile users:

  • On mobile the list of recent groups is shown below the navigation links.
  • Searching on mobile inside the dropdown wouldn't be comfortable, so the search box is hidden.
  • Since vertical space will be more limited, the list should show only 3 groups instead of 5.
Empty state 3 groups
ce_35010__projects-dropdown--mobile-empty-state ce_35010__projects-dropdown--mobile-3-projects

Anonymous users:

For anonymous users we don't show the dropdown at all because:

  • If users are visiting GitLab without an account they probably are occasional visitors who won't have frequently visited group. If they do, they probably always access those groups directly
  • The search box only searches groups you participate in, so it would always return empty results
  • The only link on the left side would be Explore group, so we'd be requiring two clicks where you currently only need one
Edited by Chris Peressini