Connections: Avoid creating component during rendering & remove non-reusable hook

[ravicious]

This builds on top of #40249.

While trying to fix keyboard navigation (which I ultimately didn't do), I noticed that dynamically creating components like this completely messes up how React keeps track of element focus:

teleport/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx

Lines 72 to 91 in 944085f

	const sliderSteps = [
	(props: StepComponentProps) => (
	<Box p={2} ref={props.refCallback}>
	<KeyboardArrowsNavigation>
	<ConnectionsFilterableList
	items={connections.items}
	onActivateItem={activateItem}
	onRemoveItem={connections.removeItem}
	onDisconnectItem={connections.disconnectItem}
	slideToVnet={props.next}
	/>
	</KeyboardArrowsNavigation>
	</Box>
	),
	VnetSliderStep,
	];
	return (
	<>
	<ConnectionsIcon

This is because there's a new anonymous component created on every render. So then I refactored it into a proper standalone component. But then I ran into another problem: I had two different components calling useConnections, but that hook wasn't meant to be reusable.

In the end, I added some tests to capture the behavior of useConnections and then I got rid of the hook. I managed to replace useEffect with useState and updating a component during rendering. Check out the changes related to updateSorting.

Removing this hook is going to be useful since in the future I'll move closing/opening the connection list to a context so that I can control it outside of the component itself. This way when you want to start VNet we'll be able to automatically show the VNet panel.

[ravicious]

Hmm I messed something up an now I get a lot of act warning all out of sudden.

[ravicious]

nvm, the act warnings are because of incorrectly resolved @testing-library/dom. #39883 (comment)