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).`
+ );
}
/**