Skip to content
Snippets Groups Projects
New issue look: Off

Add dropdown to Groups link in top bar

    • Open Issue created by Chris Peressini @cperessini

    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

    Designs

      Child items ...

      2. Activity

      Please register or sign in to reply