Add filter to cluster dropdown

[avatus]

Fixes #37014

This PR adds a search field filter to the cluster dropdown. Some choices we made with design

• only show the input field if more than 5 clusters exist (when the menu starts to scroll)
• remove the border/focus styles border on the input.. because it was ugly with it
• bold the currently selected cluster in the dropdown
• show "half" an item in the dropdown menu to suggest we can scroll down

If you want to test it locally, update the loadClusters function to something like this

        // const res = await loadClusters(signal.signal);
      const clusters = new Array(500).fill(null).map(
        (_, i) =>
          ({
            clusterId: `cluster-${i}`,
          } as Cluster)
      );
      setOptions(createOptions(clusters));
      return clusters;

[rosstimothy]

Does this also prevent the cluster dropdown from extending beyond the bottom of the page? If you look real hard in the screenshot that I attached in #37014 I was scrolled all the way to the end of the list and was unable to see the last entry.

[avatus]

Does this also prevent the cluster dropdown from extending beyond the bottom of the page?

Yes, the screenshot above has 500 entries in it. it will not grow larger than the screenshot height and can scroll to the bottom of the list

[kimlisa]

i'd write a story for this shared component and write states for empty, 1, couple, and a few hundred.

[kimlisa]

matches the gap with the other filter dropdown

Suggested change

	top: 240px !important;
	top: 236px !important;

[kimlisa]

just as an fyi when you come back to tackle this, it still gets pushed up when a error banner renders

[kimlisa]

i think we can take this out so it isn't calculating when there is no filter?

let filteredOptions = options
if (clusterFilter) {
  filteredOptions = options
              .filter(cluster =>
                cluster.label
                  .toLowerCase()
                  .includes(clusterFilter.toLowerCase())
              )
}

[rudream]

LGTM once @kimlisa's comments are addressed

[avatus]

Force pushed because my branch got out of whack. added a story and fixed the padding

[public-teleport-github-review-bot]

@avatus See the table below for backport results.

Branch	Result
branch/v15	Create PR