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.
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,
- 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|
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 groupsin the Group Dashboard)
- 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|
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