Add status icons to VNet panel, adjust empty state copy & start notif…

…ication (#43090) * Add status icons to VNet panel * Always show VNet notification * Adjust empty state copy
gravitational · Jun 17, 2024 · 7eb3d0f · 7eb3d0f
1 parent 5ebfbf9
commit 7eb3d0f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/...eleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx b/...eleterm/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 <StyledStatus {...styles} $status={status} />;
+  return <StyledStatus {...styles} $status={status} $inline={inline} />;
 };
 
 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
@@ -16,14 +16,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-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';
 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) => {
       <VnetSliderStepHeader goBack={props.prev} />
       <Flex
         p={textSpacing}
-        gap={1}
+        gap={3}
         flexDirection="column"
         css={`
           &:empty {
@@ -73,32 +74,31 @@ export const VnetSliderStep = (props: StepComponentProps) => {
         `}
       >
         {startAttempt.status === 'error' && (
-          <Text>Could not start VNet: {startAttempt.statusText}</Text>
+          <ErrorText>Could not start VNet: {startAttempt.statusText}</ErrorText>
         )}
         {stopAttempt.status === 'error' && (
-          <Text>Could not stop VNet: {stopAttempt.statusText}</Text>
+          <ErrorText>Could not stop VNet: {stopAttempt.statusText}</ErrorText>
         )}
 
         {status.value === 'stopped' &&
           (status.reason.value === 'unexpected-shutdown' ? (
-            <Text>
+            <ErrorText>
               VNet unexpectedly shut down:{' '}
               {status.reason.errorMessage ||
                 'no direct reason was given, please check logs'}
               .
-            </Text>
+            </ErrorText>
           ) : (
-            <>
+            <Flex flexDirection="column" gap={1}>
               <Text>
                 VNet enables any program to connect to TCP applications
                 protected by Teleport.
               </Text>
               <Text>
-                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.
               </Text>
-            </>
+            </Flex>
           ))}
       </Flex>
 
@@ -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. */}
             <Text p={textSpacing}>
-              Proxying TCP connections to {rootProxyHostnames.join(', ')}
+              <ConnectionStatusIndicator status="on" inline mr={1} /> Proxying
+              TCP connections to {rootProxyHostnames.join(', ')}
             </Text>
           </>
         ))}
@@ -121,3 +122,10 @@ export const VnetSliderStep = (props: StepComponentProps) => {
 };
 
 const textSpacing = 1;
+
+const ErrorText = (props: PropsWithChildren) => (
+  <Text>
+    <ConnectionStatusIndicator status="error" inline mr={2} />
+    {props.children}
+  </Text>
+);
diff --git 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).`
+  );
 }
 
 /**