From bfacfa03b40f2f7c6e33390bb6f843751849bb7c Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Fri, 15 Sep 2023 15:41:53 +0200
Subject: [PATCH] Show compatibility promise on setup page

---
 .../DocumentConnectMyComputerSetup.story.tsx  | 27 ++++++++++++++++++-
 .../DocumentConnectMyComputerSetup.test.tsx   |  4 ++-
 .../DocumentConnectMyComputerSetup.tsx        | 15 +++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx
index 761c38a87f139..c76241307b714 100644
--- a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx
+++ b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx
@@ -32,7 +32,32 @@ export default {
 
 export function Default() {
   const cluster = makeRootCluster();
-  const appContext = new MockAppContext();
+  const appContext = new MockAppContext({ appVersion: cluster.serverVersion });
+  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,
+    };
+  });
+
+  return (
+    <MockAppContextProvider appContext={appContext}>
+      <MockWorkspaceContextProvider rootClusterUri={cluster.uri}>
+        <ConnectMyComputerContextProvider rootClusterUri={cluster.uri}>
+          <DocumentConnectMyComputerSetup />
+        </ConnectMyComputerContextProvider>
+      </MockWorkspaceContextProvider>
+    </MockAppContextProvider>
+  );
+}
+
+export function NonCompatibleAgent() {
+  const cluster = makeRootCluster();
+  const appContext = new MockAppContext({ appVersion: '3.0.0' });
   appContext.clustersService.state.clusters.set(cluster.uri, cluster);
   appContext.workspacesService.setState(draftState => {
     draftState.rootClusterUri = cluster.uri;
diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.test.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.test.tsx
index f43b3023dbc76..98fd217dc8d29 100644
--- a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.test.tsx
+++ b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.test.tsx
@@ -83,7 +83,9 @@ describe('connectMyComputerSetup', () => {
         },
       }),
     });
-    const appContext = new MockAppContext({});
+    const appContext = new MockAppContext({
+      appVersion: cluster.serverVersion,
+    });
     appContext.clustersService.state.clusters.set(cluster.uri, cluster);
     appContext.workspacesService.setState(draftState => {
       draftState.rootClusterUri = cluster.uri;
diff --git a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.tsx b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.tsx
index 1dbd13dbf0f5f..5aa5bb8e3577d 100644
--- a/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.tsx
+++ b/web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.tsx
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 import { Box, ButtonPrimary, Flex, Text } from 'design';
 import { makeEmptyAttempt, useAsync } from 'shared/hooks/useAsync';
 import { wait } from 'shared/utils/wait';
@@ -34,6 +35,7 @@ import { RootClusterUri } from 'teleterm/ui/uri';
 
 import { useAgentProperties } from '../useAgentProperties';
 import { Logs } from '../Logs';
+import { CompatibilityError } from '../CompatibilityPromise';
 
 const logger = new Logger('DocumentConnectMyComputerSetup');
 
@@ -60,9 +62,16 @@ export function DocumentConnectMyComputerSetup() {
 function Information(props: { onSetUpAgentClick(): void }) {
   const { systemUsername, hostname, roleName, clusterName } =
     useAgentProperties();
+  const { isNonCompatibleAgent } = useConnectMyComputerContext();
 
   return (
     <>
+      {isNonCompatibleAgent && (
+        <>
+          <CompatibilityError />
+          <Separator mt={3} mb={2} />
+        </>
+      )}
       <Text>
         The setup process will download and launch the Teleport agent, making
         your computer available in the <strong>{clusterName}</strong> cluster as{' '}
@@ -84,6 +93,7 @@ function Information(props: { onSetUpAgentClick(): void }) {
         css={`
           display: block;
         `}
+        disabled={isNonCompatibleAgent}
         onClick={props.onSetUpAgentClick}
       >
         Connect
@@ -381,3 +391,8 @@ function StandardError(props: {
 function isAccessDeniedError(error: Error): boolean {
   return (error.message as string)?.includes('access denied');
 }
+
+const Separator = styled(Box)`
+  background: ${props => props.theme.colors.spotBackground[2]};
+  height: 1px;
+`;