diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx index 1ca7acb9e0a57..3467a38489b18 100644 --- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx +++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx @@ -23,15 +23,17 @@ type Status = 'on' | 'off' | 'error'; export const ConnectionStatusIndicator = (props: { status: Status; + inline?: boolean; [key: string]: any; }) => { - const { status, ...styles } = props; + const { status, inline, ...styles } = props; - return ; + return ; }; const StyledStatus = styled(Box)` position: relative; + ${props => props.$inline && `display: inline-block;`} width: 8px; height: 8px; border-radius: 50%; @@ -60,11 +62,13 @@ const StyledStatus = styled(Box)` color: ${theme.colors.error.main}; &:after { content: '𐄂'; - position: absolute; + font-size: 19px; + + ${!props.$inline && + `position: absolute; top: -3px; left: -1px; - line-height: 8px; - font-size: 19px; + line-height: 8px;`} } `; } diff --git a/web/packages/teleterm/src/ui/Vnet/VnetSliderStep.tsx b/web/packages/teleterm/src/ui/Vnet/VnetSliderStep.tsx index 8e07798a2808b..697ad53a42bfa 100644 --- a/web/packages/teleterm/src/ui/Vnet/VnetSliderStep.tsx +++ b/web/packages/teleterm/src/ui/Vnet/VnetSliderStep.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { useCallback } from 'react'; +import { PropsWithChildren, useCallback } from 'react'; import { StepComponentProps } from 'design/StepSlider'; import { Box, Flex, Text } from 'design'; import { mergeRefs } from 'shared/libs/mergeRefs'; @@ -24,6 +24,7 @@ import { useRefAutoFocus } from 'shared/hooks'; import * as whatwg from 'whatwg-url'; import { useStoreSelector } from 'teleterm/ui/hooks/useStoreSelector'; +import { ConnectionStatusIndicator } from 'teleterm/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator'; import { useVnetContext } from './vnetContext'; import { VnetSliderStepHeader } from './VnetConnectionItem'; @@ -64,7 +65,7 @@ export const VnetSliderStep = (props: StepComponentProps) => { { `} > {startAttempt.status === 'error' && ( - Could not start VNet: {startAttempt.statusText} + Could not start VNet: {startAttempt.statusText} )} {stopAttempt.status === 'error' && ( - Could not stop VNet: {stopAttempt.statusText} + Could not stop VNet: {stopAttempt.statusText} )} {status.value === 'stopped' && (status.reason.value === 'unexpected-shutdown' ? ( - + VNet unexpectedly shut down:{' '} {status.reason.errorMessage || 'no direct reason was given, please check logs'} . - + ) : ( - <> + VNet enables any program to connect to TCP applications protected by Teleport. - Just start VNet and connect to any TCP app over its public - address – VNet authenticates the connection for you under the - hood. + Start VNet and connect to any TCP app over its public address – + VNet authenticates the connection for you under the hood. - + ))} @@ -112,7 +112,8 @@ export const VnetSliderStep = (props: StepComponentProps) => { {/* TODO(ravicious): Add leaf clusters and custom DNS zones when support for them lands in VNet. */} - Proxying TCP connections to {rootProxyHostnames.join(', ')} + Proxying + TCP connections to {rootProxyHostnames.join(', ')} ))} @@ -121,3 +122,10 @@ export const VnetSliderStep = (props: StepComponentProps) => { }; const textSpacing = 1; + +const ErrorText = (props: PropsWithChildren) => ( + + + {props.children} + +); diff --git a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/connectToApp.ts b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/connectToApp.ts index fe4437e0b2c68..92dac2447f71f 100644 --- a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/connectToApp.ts +++ b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/connectToApp.ts @@ -159,11 +159,16 @@ export async function connectToAppWithVnet( // prompt, the Electron app throws an error about clipboard write permission being denied. if (error['name'] === 'NotAllowedError') { console.error(error); + ctx.notificationsService.notifyInfo( + `Connect via VNet by using ${addrToCopy}.` + ); return; } throw error; } - ctx.notificationsService.notifyInfo(`Copied ${addrToCopy} to clipboard`); + ctx.notificationsService.notifyInfo( + `Connect via VNet by using ${addrToCopy} (copied to clipboard).` + ); } /**