Add new ClusterDropdown component

[avatus]

This PR will add a ClusterDropdown component to all pages that actively use the cluster dropdown currently in the TopBar.
e buddy: https://github.com/gravitational/teleport.e/pull/3117

This is part 1 of a set of PRs to update the topbar. One of the bigger changes is that we are removing the current ClusterSelector from the TopBar and only having it on the pages that require it. This PR does not remove the current cluster selector in the top, thats in part 2.

The design of the component is meant to fit the "look" of other filters on the unified resources page. See here

The pages this affects are Unified Resources, Active Sessions, Audit Logs, and Session Recordings. The last 3 pages are supposed to have the same looking component for their dropdown as per design (there isn't actual designs for those pages, but this is via Kenny)

[kimlisa]

there's a cluster dropdown also in the web terminal view

also for the unified resources view, i think the cluster dropdown should be first before types

and gosh, the button is so tiny. i think in unified resource views, it kinda works because there are many small buttons surrounding it). everywhere else where there's lots of white space surrounding it, it's kinda hard to see. (i'm not asking for change, just ranting)

i'll try to test with a second cluster tomorrow (that's always a pain to set up)

[avatus]

also for the unified resources view, i think the cluster dropdown should be first before types

design asks for "less frequently used filters go further to the right" so this is where it ended up as per Kenny.

[avatus]

We spoke about using a bool to render the component, but because the component uses useStickyClusterId we couldn't import it to Connect at all (the tests break) so I just passed it as a JSX.Element instead and conditionally render based on existence

[kimlisa]

did some more testing. Is there a enterprise counterpart for this because I didn't see a cluster drop down for access request.

couple of other findings:

missed the web terminal view:

The loaders for non-unified resource pages should be after the cluster dropdown (otherwise it jumps around), also it should be disabled while processing unless we do abort controlling previous requests still pending

the loading state for unified resources, the cluster dropdown disappears . also while changing clusters, the previous filters disappear, i wonder if we should be preserving it? (the filter preservation can be like future fine tuning)

[kimlisa]

Suggested change

	value: string;
	clusterId: string;

[avatus]

also while changing clusters, the previous filters disappear, i wonder if we should be preserving it? (the filter preservation can be like future fine tuning)

agreed that we should probably preserve the filter when clusters change as it is sort of used as its own "filter" now. but i'll add that in a separate PR. It shouldn't preserve the exact filters, as we'd want to reset any kind of startKey or whatever, so this would be a special case

[avatus]

Added the e buddy here: https://github.com/gravitational/teleport.e/pull/3117

[avatus]

Moved the dropdown above indicators, and cached the results of the clusters fetch to prevent the menu from hiding on re-render (and updated tests accordingly)

[kimlisa]

sorry i hsould've been more clear on access request, the user groups looks like you can change cluster too?? but new cluster dropdown is missing:

[kimlisa]

i think we should add an abort controller here on option change. in the unified resource changing filter mid way cancels previous requests, we should do the same for cluster filter.

when one cluster is loading, changing to another one will briefly flash the previous results before the new one (in my case my other cluster was down, so it briefly flashed me a red error banner before loading the new response)

[avatus]

sorry i hsould've been more clear on access request, the user groups looks like you can change cluster too?? but new cluster dropdown is missing:

This branch is a bit out of date, but we don't have a user groups dropdown anymore. It's no longer an option to select from the user groups table on master/v14

i think we should add an abort controller here on option change.

sure!

[kimlisa]

i'm so dumb. so the abort controller didn't fix what i was seeing (b/c duh it's cached..) the flash i'm getting it's from the non-fetch-cluster api call that fails (eg: get sessions with a cluster that's down). that would mean we'd have to add aborters everywhere but i don't think it's that a big deal to change atm

[kimlisa]

ignore this comment if kenny okayed it, but I think changing the font size to 12px and adding a colon looks more cohesive

[avatus]

ignore this comment if kenny okayed it, but I think changing the font size to 12px and adding a colon looks more cohesive

that looks great. This specific part wasn't part of the design so I can implement that feedback 👍

[rudream]

Suggested change

	* onError is required because this dropdown can be placed on any page, it does not display it's own error
	* onError is required because this dropdown can be placed on any page, it does not display its own error

[rudream]

I would move the onError('') on line 78 here so that it also clears out the error before running a custom onLoad.

[avatus]

I've removed the custom onLoad so I'll skip this but very great idea if we kept it in.