Add token UI for filtered search bar

Resources

PM @victorwu | UX @cperessini

Background

Part of https://gitlab.com/gitlab-org/gitlab-ce/issues/25913

Scope

After a user completely finishes typing an entire token, it is converted into the token UI
Clicking on a token changes the color of the token (signifies that the token is selected)
Clicking on a token and then hitting the backspace key will delete the entire token
Double clicking on a token opens the corresponding filter dropdown and changes both the key and value UI to an editable text field (Example/ label:~frontend

Not in Scope

Avatars in the tokens are not in scope for this issue. Just showing the name is sufficient.
After a user finishes typing a token key, it is converted into the token UI
Adding the close button for each token so that they can be individually removed
Double clicking on a token only makes the value editable
Clicking on a token and then hitting the backspace key will only delete the token value, another backspace is required to clear the token key
Make tokens horizontally scrollable so that they mimic being a part of the text input

Tests to add

Check to make sure that the token UI is rendered for each token key (author, assignee, label, weight)
Check to make sure that the token UI renders for the key
Check to make sure that the token UI renders for the value
Check to make sure that clicking the token UI changes the UI (signifies that the token is selected)
Check to make sure that clicking the token UI and then hitting the backspace key deletes the entire selected token
Check to make sure that double clicking the token UI opens the dropdown
Check to make sure that double clicking the token UI makes the token value
Check to make sure that selecting an option from the dropdown updates the token UI

Frontend Architecture Direction

After the user completes a token, we will decrease the size of the input field and replace the completed token with a <div> containing the name of the token. When a user double clicks and makes the token editable, we will dynamically create a text field to replace the token UI <div>. This text field would need to be binded to a new FilteredSearchManager instance (or an abstraction of it) so that it can load the corresponding dropdown. It would be easier to just load the corresponding dropdown (without the manager) but the user has the option of changing the token key entirely.

We need to determine how we want the UI to work when we have a lot of tokens and not enough space in the text input for first iteration. Do we have to add token horizontal scrolling to this first iteration?

Design

Sketch file with specs

Sketch file preview images

Example

Measurements and color