[WIP] Change search to handle multiple resources

[zherman0]

Change search page to allow for multiple resources to be selected at one time and searched using query.
Functionality this is complete, but visually we might want to make more tweaks.
Version 2: (Using PF4 Select with multi and typeahead)
There are still several visual issues and there is a difference between PF 3.112 (consle version) and PF 3.124 (current).
Images with 3.112



Filter Removed:

Images with PF 3.124

Version1: (non PF dropdown)
I tried several ways to unselect resources but decided on a checkbox for UX. I don't love the appearance so I am open to comments. I did try simply highlighting the selected row in the dropdown but was not sure that it would be obvious to users they needed to click on it again to unselect the item. I also added a close button on each resource but the title area of the dropdown is controlled by the generic Dropdown component and the close button was not clickable since it invoked the dropdown. I should have taken more pics along the way but I did not.
Here are the current images:

[zherman0]

@spadgett - first version. Please review when you have some time.

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: zherman0
To complete the pull request process, please assign jhadvig
You can assign the PR to them by writing /assign @jhadvig in a comment when ready.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[zherman0]

/retest

[zherman0]

/retest

[spadgett]

I wonder if we should just use Patternfly Select with SelectVariant.typeaheadMulti.

https://www.patternfly.org/v4/documentation/react/components/select#multiple

If we use our own, I would just show a count for the number selected like the Patternfly widget.

[spadgett]

We might skip preselecting Service when we make this change since it's extra clicks to manually deselect it when you want something else.

[spadgett]

We should try to have one text filter for all types instead of repeating it.

[zherman0]

/retest

[zherman0]

/retest

[sg00dwin]

UX and visual issues to be addressed

---

• Tab shortcut closes the dropdown
• Arrow shortcut rotates though select options, but :hover :focus state highlighting doesn't work
• Left side Resource name is cut off

---

Search Results

• Many resource selections can cause actual results to be below the scroll
  

cc @spadgett @benjaminapetersen @rhamilto

[openshift-ci-robot]

@zherman0: The following tests failed, say /retest to rerun them all:

Test name	Commit	Details	Rerun command
ci/prow/frontend	c07b46b	link	/test frontend
ci/prow/e2e-gcp-console	c07b46b	link	/test e2e-gcp-console

Full PR test history. Your PR dashboard. Please help us cut down on flakes by linking to an open issue when you hit one in your PR.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here.

[benjaminapetersen]

/hold
As we look at the issues to address. @zherman0 was going to open a second PR with his initial simplified impl as a fallback.

[zherman0]

patternfly/patternfly-react#3457 has been created to tweak how this PF component works which should make this more usable. @spadgett @benjaminapetersen

[zherman0]

Closing in favor of solution #3875