Show available target ports in gateways for multi-port apps

[ravicious]

This PR adds a line under the form with ports with a list of available target ports. The list is fetched before the gateway is created, but only when the tab with the gateway is visible. This is so that if the user reopens a session with many app gateways open, we don't attempt to fetch all apps at once.

It's best to start the review at web/packages/teleterm/src/ui/DocumentGatewayApp/DocumentGatewayApp.tsx and then go deeper.

[gzdunek]

LGTM, I left a small UX suggestion.

[gzdunek]

What would you say for a small UX improvement? We could display the ports as buttons to make it easier to change the target port (plus it would be more obvious what these ports are for):

buttons.mov

Here is the code if you find this worth adding :)

        {props.tcpPortsAttempt.status === 'success' && (
          <Box>
            Available target ports:
            <Flex gap={1} flexWrap="wrap">
              {props.tcpPortsAttempt.data.map(portRange => {
                const formatted = formatPortRange(portRange);
                return (
                  <ButtonSecondary
                    key={formatted}
                    onClick={() => {
                      const port = portRange.port.toString();
                      multiPortFieldRef.current.value = port;
                      changeTargetPort(port);
                    }}
                    size="small"
                  >
                    {formatted}
                  </ButtonSecondary>
                );
              })}
            </Flex>
          </Box>
        )}

[ravicious]

That's a great idea, thanks. It didn't even occur to me because I was trying to keep it as simple as possible, since I've already spent too much time on this. ;f

[ravicious]

I tweaked it slightly to save space in the "expected" case where there's just a couple of ports.

[gzdunek]

Suggested change

	>
	m=0
	>