Skip to content

Frontend for clarifying the usefulness of the search bar

Description

With #35269 (closed) we're removing the “project switcher” from the breadcrumbs to avoid duplicating existing functionality. The current search bar already searches projects, groups, project pages, settings, and help pages — it's an incredibly powerful and useful tool, yet it's too subtle and unnoticed for any kind of user. We need to make this functionality clearer and accessible to everyone. This will be a step in the direction of making the search bar become more of an omnibox, Spotlight, or Alfred.

Proposal

Resting state:

  • Increase the width of the search box to 240px
  • Remove the scope indicator (This group and This project).
  • Rephrase the placeholder to: “Search or jump to…”

When the search bar becomes active:

Project Group Global
ce_36409-search-navigate--focused-project ce_36409-search-navigate--focused-group ce_36409-search-navigate--focused-global
  • The width of the search box should increase to 320px for more comfortable typing.
  • The width of the suggestions dropdown should be 320px
  • The separator between the options for issues and MRs should be removed.
  • The headers that indicate the scope should be as follows:
    • Project: Name of the project (no change)
    • Group: Name of the group (no change)
    • Global: All GitLab
  • The style of these headers should match the 'Header title' style from the dropdown library spec previews.

Once the user starts typing:

[Examples for all the possible row types can be found here]

  • The max height of the suggestion dropdown should be 400px
  • There should be a fade effect layer at the bottom to indicate the dropdown is scrollable.
  • All substrings inside the dropdown which match the query should be bolded.
  • The first row should be automatically highlighted, so the user can just press Enter to search.
  • The first rows in the dropdown should allow the user to perform a search for the entered term:
    • Search rows for project scope:
      • Row 1: Magnifying glass + "KEYWORD" in this project
      • Row 2: Magnifying glass + "KEYWORD" in all GitLab
    • Search rows for group scope:
      • Row 1: Magnifying glass + "KEYWORD" in this group
      • Row 2: Magnifying glass + "KEYWORD" in all GitLab
    • Search row for global scope:
      • Row 1: Magnifying glass + "KEYWORD" in all GitLab

After that, navigation suggestions will be shown for projects, groups, pages inside the project/group, preferences pages and help pages that match the string entered.

  • Project and group rows will show their avatar on the left side.
    • The size of the avatar will be 16px x 16px
    • The margin between the avatar and the name will be 4px
    • If the project or group doesn't have an avatar, the generic one with its initial should be used.
  • The headers for each type of suggestion should also be updated to match the spec previews
  • The header for pages in the project or group should be renamed to:
    • Project: In this project
    • Group: In this group

Links / references

Edited by Chris Peressini