Discover: Add UI for connection test for Connect My Computer#35131
Discover: Add UI for connection test for Connect My Computer#35131
Conversation
…on same line This will be needed in connection test for Connect My Computer to make it consistent with the look of previous steps.
ravicious
added
backport/branch/v14
no-changelog
| title: 'Test Connection', | ||
| component: TestConnection, | ||
| eventName: DiscoverEvent.TestConnection, | ||
| // TODO(ravicious): Manually emit success event on test connection success. |
There was a problem hiding this comment.
useConnectionDiagnostic takes care of this, I didn't have to add any special code to handle this.
| function startSshSession(login: string) { | ||
| const url = cfg.getSshConnectRoute({ | ||
| clusterId: node.clusterId, | ||
| serverId: node.id, | ||
| login, | ||
| }); | ||
|
|
||
| openNewTab(url); | ||
| } | ||
|
|
||
| function testConnection(login: string, mfaResponse?: MfaAuthnResponse) { | ||
| return runConnectionDiagnostic( | ||
| { | ||
| resourceKind: 'node', | ||
| resourceName: props.agentMeta.resourceName, | ||
| sshPrincipal: login, | ||
| }, | ||
| mfaResponse | ||
| ); | ||
| } |
There was a problem hiding this comment.
In #34952 I mentioned sharing these two functions between Connect My Computer and Server connection tests, but I think for now I'm going to keep them this way. It's not much code, in the end it calls functions from useConnectionDiagnostic which is already shared. And to make the diagnostic messages be more relevant to Connect My Computer, I'll have to add some extra parameter to runConnectionDiagnostic anyway.
So in the end I don't think there's much to be gained from sharing these two functions.
| 'foo', | ||
| 'bar', | ||
| 'baz', | ||
| 'czesława_maria_de_domo_cieślak_primo_voto_gospodarek_secundo_voto_kowalczyk', |
There was a problem hiding this comment.
Server/TestConnection uses a shorter login:
and the width of the login select is set to be just wide enough to contain it, but it fails with the full name of Violetta Villas. 😭
For now I'm just not going to try to fix what's broken as I couldn't quickly figure out how to make react-select work in this scenario.
public-teleport-github-review-bot
Bot
removed the request for review
from gzdunek
| buttonOnClick: () => void; | ||
| }) => ( | ||
| <StepSkeletonPickUser> | ||
| <> |
There was a problem hiding this comment.
There was a few more unnecessary fragments in this file. react/jsx-no-useless-fragment doesn't catch that, even with allowExpressions disabled.
|
@ravicious See the table below for backport results.
|
👍 |
4 participants
This PR adds just the UI for a proper connection test that actually attempts to connect to the node and shows diagnostic messages. The diagnostic messages are yet to be customized towards Connect My Computer (#32206), for now the test behaves the same way as if we were testing a regular SSH node.
I also added a feature flag so that I don't have to wait with merging this PR before I have the backend changes ready.
The implementation is done in a few simple steps:
LegacyTestConnection.Server/TestConnection.LegacyTestConnectionand fit them into the new component copied from Server.I had to balance Figma designs with how the existing implementation looks like, both for Connect My Computer and a regular server. Mostly this meant keeping step numbers on the same line as descriptions and how particular buttons and actions are called.
To test this locally, you need to enable the feature flag: