Filtered search > Make "remove" implications more clear

User feedback regarding the filtered search component was reported in &7262. This issue is to determine next steps in regards to the intended UX of the component. Review the feedback below and provide UX input/next steps.

Problem

It isn't clear at the moment that the × removes the entire key/operator/value group.

User feedback

  • Should clearing the token search value also clear the token?
  • Clicking the x in ~group x removes the whole label search. I did not like or expect this given there is a separate action button to the far right in the filter bar to clear everything. I would prefer to retain the label = and just remove the ~group when clicking the x.
Original screenshot

https://gitlab.com/gitlab-org/gitlab/uploads/aeb038312bc51e786b6a6109b9d08201/Screen_Shot_2021-11-19_at_2.38.19_PM.png

Solution

Update the UI of the key/operator/value group to show a more concrete relationship between them so that the × seems to relate to all of it as a single unit and not just the value portion.

From the conversation below:

I think the current behavior makes sense because it's essentially removing the entire key/value pair as a unit. If there were more tokens in the search, the × would only remove the relevant one, so it isn't clearing the entire search as assumed in the description.

If the × on the token just removed the latter part, then I suspect what would happen would be a dropdown opening to select a new one. But, opening a dropdown isn't the action that was performed, removing a token was.

Edited by Jeremy Elder