We have some form of suggestion already in a few places of our application (like search suggestions for repo:, file:, ...etc). But this component was built over the top of Monaco editor which is overkill for a simple suggestion component or Combobox. Ideally, we probably want to have some as simple as possible Combobox component which just consists of input and suggestion panel.
Implementation
For first implementation we can use reach-ui/combobox. Also, we have to take into account that the repository field in search insight creation UI can have more than one repo as a string. Values of repositories in the repository field are separated by commas which we should consider for better suggestion options
UX
Example 1
↓ — input caret is here. `github.com/sourcegraph/about, github.com/sourcegraph/sourcegraph`
In this example we need to provide suggestions for github.com/sourcegraph/about value and ignore github.com/sourcegraph/sourcegraph since now we edit the first repo in the repository input
Example 2
↓ — input caret is here`github.com/sourcegraph/about, github.com/sourcegraph/sourcegraph`
In this example, we need to provide suggestions only for github.com/sourcegraph/sourcegraph value.
Also, if the user picked value from the suggest-panel we need to find the input caret position and replace the value in input on value from suggest-panel
Example:
↓ — input caret is here. `github.com/sourcegraph/about, github.com/sourcegraph/sourcegraph`
In the suggest-panel, we got 3 options
github.com/sourcegraph/about-1github.com/sourcegraph/about-2 ← user picked the second one suggestiongithub.com/sourcegraph/about-3
Input value after suggestion pick
↓ — input caret is here. `github.com/sourcegraph/about-2, github.com/sourcegraph/sourcegraph`
