Show available target ports in gateways for multi-port apps#51016
Merged
Show available target ports in gateways for multi-port apps#51016
Conversation
ravicious
added
no-changelog
gzdunek
approved these changes
Jan 14, 2025
Contributor
gzdunek
left a comment
gzdunek
left a comment
There was a problem hiding this comment.
LGTM, I left a small UX suggestion.
Comment on lines
+151
to
+152
| Available target ports:{' '} | ||
| {props.tcpPortsAttempt.data.map(formatPortRange).join(', ')}. |
Contributor
There was a problem hiding this comment.
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>
)}
Member
Author
There was a problem hiding this comment.
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
Member
Author
There was a problem hiding this comment.
I tweaked it slightly to save space in the "expected" case where there's just a couple of ports.
| kind="warning" | ||
| details={props.tcpPortsAttempt.statusText} | ||
| primaryAction={{ content: 'Retry', onClick: props.getTcpPorts }} | ||
| > |
avatus
approved these changes
Jan 14, 2025
ravicious
force-pushed
the
r7s/show-ports
branch
from
6b70b22 to
faca5f6
Compare
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
|
@ravicious See the table below for backport results.
|
mvbrock
pushed a commit
that referenced
this pull request
Jan 18, 2025
* Show available target ports * Use buttons to show available target ports * Add zero margin to Alert
carloscastrojumo
pushed a commit
to carloscastrojumo/teleport
that referenced
this pull request
Feb 19, 2025
…ional#51016) * Show available target ports * Use buttons to show available target ports * Add zero margin to Alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.tsxand then go deeper.