The current filtering method (syntax) for code results in global search is not easily discovered or recalled for users

Insight

Users are often unaware of the filtering capabilities for code searches in global search, and even when they are aware, they often forget the exact syntax method to use.

Supporting evidence

Some users mentioned knowing that they believed it was possible in GitLab to filter code results, but said they would forget what the proper syntax was and not use it. Others simply didn’t realize it was a current capability, most likely because today there is no indication unless a user goes to the documentation for Advanced Search (which the current link to the docs on the result page also doesn’t indicate there are details found there).

Resources

• 🕊 Dovetail project
• 🔍 Research issue

Proposal

For the first iteration to solve this problem, we will add a link in the UI that opens up a modal on the page with details regarding the syntax options. This allows the user to stay in context to what they are doing and not require them to navigate away. By naming this link "Syntax options", it is also more clear to users that syntax is available (in comparison to the current link that just states "Advanced search").

Remaining UX Tasks

• Finalize content (#355543 (closed))
  • 1st iteration - !84634 (merged)
  • Simplified - !86381 (merged)
• Decide on how best to generate the content for the modal
  • Either have content specific for this page/modal, or update the current docs and pull the content from there. The latter would be the better option as the current docs page could use this same improvement.
  • UPDATE: Decision was made to pull in content from the docs (!85867 (comment 928233524))

Development Tasks

• Increase the spacing between the search field, Group, and Project filters from 8px to 1rem (16px), as seen in the design.
• Add a link next to the search field that will initiate the modal. Link should only be visible when:
  • Advanced Search is enabled
• Utilize the Drawer component to display content details and syntax examples within Tables

Release Notes

GitLab provides advanced search syntax to help users find specific information on GitLab instances. However, users had to refer to the GitLab documentation when using them. In GitLab 15.8 release, we added a link, "Syntax options", in the UI that would open up a modal on the page with details of the syntax options such that users can look up the syntax options without leaving the search page.