Suggest labels during check creation / editing

[ckbedwell]

Problem

Currently when adding labels to checks during check creation / editing you want to view and re-use existing labels. Typing them manually is very error prone or it is likely to result in labels that are very similar but ever-so-slightly different (e.g. team:fe vs team:frontend, etc.)

Completion criteria

The completion criteria is a little open-ended for this ticket. There is plenty of screen real estate for us to explore suitable solutions. Consider that we want to prompt users to add labels based on what is existing when they have no idea what to add but if a tenant has thousands of differing labels we don't want to show them all. On the other hand if a tenant only has a few labels we may want to show them all. Possibly show a top ten with the option to show more 20, 30, all, etc?

Please also consider a UI that adds:

• Adding auto-suggestion for the name field with what is existing
• Adding auto-suggestion for the value field based on the input in the name field

Please ensure the solution has the appropriate integration tests added.

Additional considerations

As we currently fetch all checks in our useChecks call (even if there are thousands and the response is tens of megabytes long...) we have all the data available to know what labels are available to re-use across all checks. However this may change at some point and there could be a separate labels api so please ensure your solution is flexible enough to support a change in how we would gather the labels information.

[w1kman]

Ran into some issues with being able to focus the react-select component (which doesn't play nice at all with react-hook-forms.

I will revisit this one after #892 is done.