Skip to content

search: Refactor Monaco query input suggestions

Administrator requested to merge fkling/cm/suggestions into main

Created by: fkling

I intended to factor out some of the Monaco specific logic to make the other parts easier to reuse for CodeMirror, but in the end I wasn't able to separate things as much as I would liked. Still, I hope this change streamlines the implementation, which had evolved quite a bit over the last years.

A PR for the changes for the CodeMirror implementation will follow.

While it looks like this PR contains a lot of changes, most of it is just moving lines around and reorganize things.


Most notable changes

Debouncing the completion request was replaced by canceling the search stream instead. This has the effect that results are shown quicker, especially static ones since we don't have to wait anymore. (not sure whether cancelling the stream is a good approach since it will still consume some server resources?; however, through this refactor we could still get faster results for static suggestions and continue to debounce dynamic queries) We still debounce but also cancel any running queries. Suggestions that only contain static entries are still faster since we only debounce dynamic suggestions. Together with this change I refactored how the search request is initiated. Instead of getting an Observable, getCompletionItems is now passed a function that returns a promise.

getSuggestionQuery was changed to accept the completion type as parameter instead of inferring it from the token. Additionally that type is now being supplied by completeFilterValue from the filter's configuration. This makes the relationship between the generated search query and the filter value that is being completed more explicit and easier to follow (IMO).

This PR also fixes the cases where triggering completion in an empty input wouldn't show any suggestions and where triggering completion at a whitespace token would show suggestions for filters and repos (due to empty search query).


Videos of before and after behavior (note that the for server side suggestions is unfortunately not comparable because there was much lower network latency when I recorded the new after version 🤷🏻‍♂️ )

Before:

https://user-images.githubusercontent.com/179026/161146499-05936efe-c164-4175-bab7-b00e830afa58.mp4

After (outdated because this version didn't include debouncing dynamic suggestions):

https://user-images.githubusercontent.com/179026/161146538-1cf817d5-5fe5-47c8-98fe-5bde366abddf.mp4

Test plan

  • Unit test
  • Opened search page, triggered completion in empty search input and saw filter suggestions
  • Typed arbitrary input and verified via the browser dev tools that search streams are cancelled (see video)

App preview:

Merge request reports

Loading