Skip to content

Add suggestions to repositories field in code insight creation UI

Administrator requested to merge code-insights/repository-suggest into main

Created by: vovakulikov

Closes #20198

Descriptions

This PR adds autosuggest component for repositories field at search-based creation UI form.

Repository suggestion story consists of two PRs

  1. This PR
  2. Adding suggestion to code stats insight creation form

Screenshot from figma design

image

Thist PR combobox component implementation

image

Backgound

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-1
github.com/sourcegraph/about-2  ← user picked the second one suggestion
github.com/sourcegraph/about-3

Input value after suggestion pick

                               ↓ — input caret is here.                            
`github.com/sourcegraph/about-2, github.com/sourcegraph/sourcegraph`

Merge request reports