Skip to content

Add MonacoQueryInput: search field with syntax highlighting, hovers, diagnostics

Administrator requested to merge smarter-search-field into master

Created by: lguychard

This PR adds a new component, MonacoQueryInput, to the Sourcegraph web app. It provides:

  • Basic syntax highlighting of search queries
  • Autocompletion of filter types.
  • Autocompletion of filter values (both static and dynamically fetched)
  • Hover tooltips on filters
  • Diagnostics for invalid filter types, invalid filter values, improper use of colons in queries

smarterSearchField_1 smarterSearchField_2

In order to do so, it is backed by a small search query parser, implemented in web/src/search/query/parser.ts.

This new query input is currently feature-flagged, off by default (on in dev environments), behind experimentalFeatures.smartSearchField in global settings. Very little pre-existing code has been changed. The intention is to refine this after merging, and to test it extensively internally before enabling it by default for all users. For instance (and I will file known issues):

  • The completions dropdown still looks very Monaco-y
  • Some dynamically fetched suggestions are not shown (eg. symbols)
  • Resize is still buggy

This PR is split in two commits:

  • The first commit contains the implementation of MonacoQueryInput.
  • The second commit integrates MonacoQueryInput in the webapp, behind a feature flag.

Known issues:

Merge request reports