[v14] Make spacing of Connect My Computer status more consistent (#32736

) * Make spacing of Connect My Computer status more consistent * Add server labels to Running story, add ErrorWithAlertAndLogs story * Change copy depending on whether the agent is running * Fix proxyVersion in story Co-authored-by: Grzegorz Zdunek <[email protected]> --------- Co-authored-by: Grzegorz Zdunek <[email protected]>
gravitational · Sep 28, 2023 · aa0d14b · aa0d14b
1 parent 1b3a6d8
commit aa0d14b
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 156 deletions.
diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/CompatibilityPromise.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/CompatibilityPromise.tsx
@@ -15,8 +15,7 @@
  */
 
 import React from 'react';
-import { Text, ButtonPrimary, Alert } from 'design';
-
+import { Text, ButtonPrimary, Alert, Flex } from 'design';
 import Link from 'design/Link';
 
 import { useAppContext } from 'teleterm/ui/appContextProvider';
@@ -92,9 +91,9 @@ export function CompatibilityError(props: {
   }
 
   return (
-    <>
+    <Flex flexDirection="column" gap={2}>
       {!props.hideAlert && (
-        <Alert>
+        <Alert mb={0}>
           The agent version is not compatible with the cluster version
         </Alert>
       )}
@@ -110,7 +109,6 @@ export function CompatibilityError(props: {
         {$content}
       </Text>
       <ButtonPrimary
-        mt={3}
         mx="auto"
         type="button"
         as="a"
@@ -120,7 +118,7 @@ export function CompatibilityError(props: {
       >
         Visit the downloads page
       </ButtonPrimary>
-    </>
+    </Flex>
   );
 }
 

diff --git a/...nnectMyComputer/DocumentConnectMyComputerStatus/DocumentConnectMyComputerStatus.story.tsx b/...nnectMyComputer/DocumentConnectMyComputerStatus/DocumentConnectMyComputerStatus.story.tsx
@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 
-import { wait } from 'shared/utils/wait';
-
-import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
+import {
+  makeRootCluster,
+  makeServer,
+  makeLabelsList,
+} from 'teleterm/services/tshd/testHelpers';
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 import AppContext from 'teleterm/ui/appContext';
 
@@ -30,6 +32,7 @@ import { makeRuntimeSettings } from 'teleterm/mainProcess/fixtures/mocks';
 import {
   AgentCompatibilityError,
   ConnectMyComputerContextProvider,
+  NodeWaitJoinTimeout,
 } from '../connectMyComputerContext';
 
 import { DocumentConnectMyComputerStatus } from './DocumentConnectMyComputerStatus';
@@ -43,7 +46,45 @@ export function NotStarted() {
 }
 
 export function Running() {
-  return <ShowState agentProcessState={{ status: 'running' }} />;
+  const appContext = new MockAppContext({ appVersion: '17.0.0' });
+
+  let agentUpdateListener: (state: AgentProcessState) => void;
+  appContext.mainProcessClient.subscribeToAgentUpdate = (
+    rootClusterUri,
+    listener
+  ) => {
+    agentUpdateListener = listener;
+    return { cleanup: () => undefined };
+  };
+  appContext.connectMyComputerService.isAgentConfigFileCreated = () =>
+    Promise.resolve(true);
+  appContext.connectMyComputerService.runAgent = async () => {
+    agentUpdateListener({ status: 'running' });
+  };
+  appContext.connectMyComputerService.waitForNodeToJoin = () =>
+    Promise.resolve(
+      makeServer({
+        hostname: 'staging-mac-mini',
+        labelsList: makeLabelsList({
+          hostname: 'staging-mac-mini',
+          'teleport.dev/connect-my-computer/owner': '[email protected]',
+        }),
+      })
+    );
+
+  useLayoutEffect(() => {
+    (
+      document.querySelector('[data-testid=start-agent]') as HTMLButtonElement
+    )?.click();
+  });
+
+  return (
+    <ShowState
+      appContext={appContext}
+      agentProcessState={{ status: 'not-started' }}
+      proxyVersion="17.0.0"
+    />
+  );
 }
 
 export function Errored() {
@@ -84,6 +125,30 @@ export function ExitedUnsuccessfully() {
   );
 }
 
+export function ErrorWithAlertAndLogs() {
+  const appContext = new MockAppContext({ appVersion: '17.0.0' });
+
+  appContext.connectMyComputerService.isAgentConfigFileCreated = () =>
+    Promise.resolve(true);
+  appContext.connectMyComputerService.waitForNodeToJoin = () =>
+    Promise.reject(
+      new NodeWaitJoinTimeout(
+        'teleport: error: unknown short flag -non-existing-flag'
+      )
+    );
+
+  return (
+    <ShowState
+      appContext={appContext}
+      agentProcessState={{
+        status: 'not-started',
+      }}
+      autoStart={true}
+      proxyVersion="17.0.0"
+    />
+  );
+}
+
 export function FailedToReadAgentConfigFile() {
   const appContext = new MockAppContext();
   appContext.connectMyComputerService.isAgentConfigFileCreated = async () => {
@@ -182,40 +247,6 @@ function ShowState(props: {
     new MockAppContext({ appVersion: cluster.proxyVersion });
 
   appContext.mainProcessClient.getAgentState = () => props.agentProcessState;
-  appContext.mainProcessClient.subscribeToAgentUpdate = (
-    rootClusterUri,
-    listener
-  ) => {
-    listener(props.agentProcessState);
-    return { cleanup: () => undefined };
-  };
-  appContext.connectMyComputerService.runAgent = async () => {
-    await wait(1_000);
-  };
-  appContext.connectMyComputerService.waitForNodeToJoin = async () => {
-    if (props.agentProcessState.status === 'running') {
-      await wait(2_000);
-      return {
-        uri: `${cluster.uri}/servers/178ef081-259b-4aa5-a018-449b5ea7e694`,
-        tunnel: false,
-        name: '178ef081-259b-4aa5-a018-449b5ea7e694',
-        hostname: 'staging-mac-mini',
-        addr: '127.0.0.1:3022',
-        labelsList: [
-          {
-            name: 'hostname',
-            value: 'staging-mac-mini',
-          },
-          {
-            name: 'teleport.dev/connect-my-computer',
-            value: '[email protected]',
-          },
-        ],
-      };
-    }
-    await wait(3_000);
-    throw new Error('TIMEOUT. Cannot find node.');
-  };
   appContext.configService.set('feature.connectMyComputer', true);
   appContext.clustersService.state.clusters.set(cluster.uri, cluster);
   appContext.workspacesService.setState(draftState => {