[v14] Update copy of Connect My Computer setup & misc improvements (#…

…32565) * Update copy of Connect My Computer setup * Fix setup stories by using ResourcesContextProvider * Add alignSelf to Button * Use Flex to specify gap instead defining margins on individual elements * Prevent setup story from updating store on each render Otherwise I was getting Immer errors about updating frozen objects after updating the Setup component.
gravitational · Sep 27, 2023 · 67bb59d · 67bb59d
1 parent 8ad4b1b
commit 67bb59d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/...ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx b/...ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx
@@ -19,15 +19,13 @@ import React, { useEffect, useRef, useLayoutEffect } from 'react';
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import { MockWorkspaceContextProvider } from 'teleterm/ui/fixtures/MockWorkspaceContextProvider';
-
 import {
   makeRootCluster,
   makeServer,
 } from 'teleterm/services/tshd/testHelpers';
-
 import { IAppContext } from 'teleterm/ui/types';
-
 import { Cluster } from 'teleterm/services/tshd/types';
+import { ResourcesContextProvider } from 'teleterm/ui/DocumentCluster/resourcesContext';
 
 import { ConnectMyComputerContextProvider } from '../connectMyComputerContext';
 
@@ -119,31 +117,35 @@ function ShowState({
   appContext: IAppContext;
   clickStartSetup?: boolean;
 }) {
-  appContext.clustersService.state.clusters.set(cluster.uri, cluster);
-  appContext.workspacesService.setState(draftState => {
-    draftState.rootClusterUri = cluster.uri;
-    draftState.workspaces[cluster.uri] = {
-      localClusterUri: cluster.uri,
-      documents: [],
-      location: undefined,
-      accessRequests: undefined,
-    };
-  });
+  if (!appContext.clustersService.state.clusters.get(cluster.uri)) {
+    appContext.clustersService.state.clusters.set(cluster.uri, cluster);
+    appContext.workspacesService.setState(draftState => {
+      draftState.rootClusterUri = cluster.uri;
+      draftState.workspaces[cluster.uri] = {
+        localClusterUri: cluster.uri,
+        documents: [],
+        location: undefined,
+        accessRequests: undefined,
+      };
+    });
+  }
 
   useLayoutEffect(() => {
     if (clickStartSetup) {
       (
         document.querySelector('[data-testid=start-setup]') as HTMLButtonElement
       )?.click();
     }
-  }, []);
+  }, [clickStartSetup]);
 
   return (
     <MockAppContextProvider appContext={appContext}>
       <MockWorkspaceContextProvider rootClusterUri={cluster.uri}>
-        <ConnectMyComputerContextProvider rootClusterUri={cluster.uri}>
-          <DocumentConnectMyComputerSetup />
-        </ConnectMyComputerContextProvider>
+        <ResourcesContextProvider>
+          <ConnectMyComputerContextProvider rootClusterUri={cluster.uri}>
+            <DocumentConnectMyComputerSetup />
+          </ConnectMyComputerContextProvider>
+        </ResourcesContextProvider>
       </MockWorkspaceContextProvider>
     </MockAppContextProvider>
   );

diff --git a/...rc/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.tsx b/...rc/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { Box, ButtonPrimary, Text } from 'design';
+import { Box, ButtonPrimary, Flex, Text } from 'design';
 import { makeEmptyAttempt, useAsync } from 'shared/hooks/useAsync';
 import { wait } from 'shared/utils/wait';
 import * as Alerts from 'design/Alert';
@@ -77,6 +77,8 @@ function Information(props: { onSetUpAgentClick(): void }) {
         </>
       )}
       <Text>
+        Connect My Computer allows you to add this device to the Teleport
+        cluster with just a few clicks.{' '}
         <ClusterAndHostnameCopy clusterName={clusterName} hostname={hostname} />
         <br />
         <br />
@@ -345,8 +347,8 @@ function AgentSetup({ rootClusterUri }: { rootClusterUri: RootClusterUri }) {
   const { clusterName, hostname } = useAgentProperties();
 
   return (
-    <>
-      <Text mb={3}>
+    <Flex flexDirection="column" alignItems="flex-start" gap={3}>
+      <Text>
         <ClusterAndHostnameCopy clusterName={clusterName} hostname={hostname} />
       </Text>
       <ProgressBar
@@ -361,18 +363,11 @@ function AgentSetup({ rootClusterUri }: { rootClusterUri: RootClusterUri }) {
         }))}
       />
       {hasSetupFailed && (
-        <ButtonPrimary
-          mt={3}
-          mx="auto"
-          css={`
-            display: block;
-          `}
-          onClick={runSteps}
-        >
+        <ButtonPrimary alignSelf="center" onClick={runSteps}>
           Retry
         </ButtonPrimary>
       )}
-    </>
+    </Flex>
   );
 }
 
@@ -398,7 +393,7 @@ function ClusterAndHostnameCopy(props: {
 }): JSX.Element {
   return (
     <>
-      The setup process will download and launch the Teleport agent, making your
+      The setup process will download and launch a Teleport agent, making your
       computer available in the <strong>{props.clusterName}</strong> cluster as{' '}
       <strong>{props.hostname}</strong>.
     </>