Skip to content

search: Migrate search console page to use CodeMirror

Warren Gifford requested to merge fkling/search-console-page into main

Created by: fkling

This PR replaces the Monaco query editor used on the search console page with the CodeMirror version. I thought that directly replacing this instance (without a feature flag) is relatively safe to do because the multiline version is already different enough from the main query input, and it's probably a feature that is not widely used. This also fixes at least two problems with current implementation:

  • Diagnostics are rendered at the correct position
  • Query completion works everywhere, not just the first line (fixes #20636 (closed))

Besides replacing the editor I also made some style tweaks:

  • Full column editor
  • Scrollable result list (i.e. not scrolling the whole page)

Before:

https://user-images.githubusercontent.com/179026/175657358-e82b14c2-f152-4376-9f4e-afaca2ef8f9f.mp4

After:

https://user-images.githubusercontent.com/179026/175657370-a07ab8a0-2076-4e3f-838a-ae9f600ca442.mp4

Test plan

  • Enable search console via the experimental feature flag "showMultilineSearchConsole: true".
  • Go to https://sourcegraph.test:3443/search/console
  • Clicking on the editor div should focus the editor
  • Type search query -> filter/symbol suggestions should appear
  • Press Enter -> line break is inserted, search query is not submitted
  • Press CTRL/CMD + Enter to submit query -> URL should update and result list should update
  • Enter as many line breaks as necessary to cause the editor to scroll -> it should not overflow and show a scrollbar.
  • Typing an invalid query (e.g. test\n\nauthor:) should show diagnostic information at the correct position.

App preview:

Check out the client app preview documentation to learn more.

Merge request reports