Connect My Computer: Use a single document (#31699)

* Use single `ConnectMyComputer` document

* Fix and simplify stories setup

* Remove unneeded `createConnectMyComputerDocument`

web/packages/teleterm/src/services/tshd/fixtures/mocks.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
+
 import {
   AuthSettings,
   AccessRequest,
@@ -34,14 +36,12 @@ import {
   TshAbortSignal,
   TshClient,
   GetRequestableRolesResponse,
-  CreateConnectMyComputerRoleResponse,
-  CreateConnectMyComputerNodeTokenResponse,
   UpdateHeadlessAuthenticationStateParams,
 } from '../types';
 
 export class MockTshClient implements TshClient {
   listRootClusters: () => Promise<Cluster[]>;
-  listLeafClusters: (clusterUri: string) => Promise<Cluster[]>;
+  listLeafClusters = () => Promise.resolve([]);
   getKubes: (params: GetResourcesParams) => Promise<GetKubesResponse>;
   getDatabases: (params: GetResourcesParams) => Promise<GetDatabasesResponse>;
   listDatabaseUsers: (dbUri: string) => Promise<string[]>;
@@ -82,7 +82,7 @@ export class MockTshClient implements TshClient {
     localPort: string
   ) => Promise<Gateway>;
 
-  getCluster: (clusterUri: string) => Promise<Cluster>;
+  getCluster = () => Promise.resolve(makeRootCluster());
   getAuthSettings: (clusterUri: string) => Promise<AuthSettings>;
   removeCluster = () => Promise.resolve();
   loginLocal: (
@@ -101,9 +101,10 @@ export class MockTshClient implements TshClient {
   transferFile: () => undefined;
   reportUsageEvent: () => undefined;
 
-  createConnectMyComputerRole: () => Promise<CreateConnectMyComputerRoleResponse>;
-  createConnectMyComputerNodeToken: () => Promise<CreateConnectMyComputerNodeTokenResponse>;
-  deleteConnectMyComputerToken: () => Promise<void>;
+  createConnectMyComputerRole = () => Promise.resolve({ certsReloaded: true });
+  createConnectMyComputerNodeToken = () =>
+    Promise.resolve({ token: 'abc', labelsList: [] });
+  deleteConnectMyComputerToken = () => Promise.resolve();
 
   updateHeadlessAuthenticationState: (
     params: UpdateHeadlessAuthenticationStateParams

web/packages/teleterm/src/services/tshd/testHelpers.ts

@@ -72,7 +72,112 @@ export const makeLoggedInUser = (
   activeRequestsList: [],
   assumedRequests: {},
   name: 'alice',
-  acl: {},
+  acl: {
+    recordedSessions: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    activeSessions: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    authConnectors: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    roles: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    users: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    trustedClusters: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    events: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    tokens: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    servers: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    apps: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    dbs: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    kubeservers: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+    accessRequests: {
+      list: true,
+      read: true,
+      edit: true,
+      create: true,
+      pb_delete: true,
+      use: true,
+    },
+  },
   sshLoginsList: [],
   rolesList: [],
   requestableRolesList: [],

web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputer.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import Indicator from 'design/Indicator';
+
+import * as types from 'teleterm/ui/services/workspacesService';
+import Document from 'teleterm/ui/Document';
+
+import { useConnectMyComputerContext } from './connectMyComputerContext';
+import { DocumentConnectMyComputerStatus } from './DocumentConnectMyComputerStatus/DocumentConnectMyComputerStatus';
+import { DocumentConnectMyComputerSetup } from './DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup';
+
+interface DocumentConnectMyComputerProps {
+  visible: boolean;
+  doc: types.DocumentConnectMyComputer;
+}
+
+export function DocumentConnectMyComputer(
+  props: DocumentConnectMyComputerProps
+) {
+  const { isAgentConfiguredAttempt } = useConnectMyComputerContext();
+  const shouldShowSetup =
+    isAgentConfiguredAttempt.status === 'success' &&
+    !isAgentConfiguredAttempt.data;
+
+  if (isAgentConfiguredAttempt.status === 'processing') {
+    return <Indicator m="auto" />;
+  }
+
+  return (
+    <Document visible={props.visible}>
+      {shouldShowSetup ? (
+        <DocumentConnectMyComputerSetup />
+      ) : (
+        <DocumentConnectMyComputerStatus />
+      )}
+    </Document>
+  );
+}

web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.story.tsx

@@ -19,40 +19,37 @@ import React from 'react';
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import { MockWorkspaceContextProvider } from 'teleterm/ui/fixtures/MockWorkspaceContextProvider';
-import * as types from 'teleterm/ui/services/workspacesService';
 
 import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
 
+import { ConnectMyComputerContextProvider } from 'teleterm/ui/ConnectMyComputer';
+
 import { DocumentConnectMyComputerSetup } from './DocumentConnectMyComputerSetup';
 
 export default {
-  title: 'Teleterm/ConnectMyComputer/DocumentConnectMyComputerSetup',
+  title: 'Teleterm/ConnectMyComputer/Setup',
 };
 
 export function Default() {
   const cluster = makeRootCluster();
-  const doc: types.DocumentConnectMyComputerSetup = {
-    kind: 'doc.connect_my_computer_setup',
-    rootClusterUri: cluster.uri,
-    title: 'Connect My Computer',
-    uri: '/docs/123',
-  };
   const appContext = new MockAppContext();
   appContext.clustersService.state.clusters.set(cluster.uri, cluster);
   appContext.workspacesService.setState(draftState => {
     draftState.rootClusterUri = cluster.uri;
     draftState.workspaces[cluster.uri] = {
       localClusterUri: cluster.uri,
-      documents: [doc],
-      location: doc.uri,
+      documents: [],
+      location: undefined,
       accessRequests: undefined,
     };
   });
 
   return (
     <MockAppContextProvider appContext={appContext}>
       <MockWorkspaceContextProvider rootClusterUri={cluster.uri}>
-        <DocumentConnectMyComputerSetup visible={true} doc={doc} />
+        <ConnectMyComputerContextProvider rootClusterUri={cluster.uri}>
+          <DocumentConnectMyComputerSetup />
+        </ConnectMyComputerContextProvider>
       </MockWorkspaceContextProvider>
     </MockAppContextProvider>
   );

web/packages/teleterm/src/ui/ConnectMyComputer/DocumentConnectMyComputerSetup/DocumentConnectMyComputerSetup.test.tsx

@@ -40,7 +40,7 @@ beforeEach(() => {
   jest.restoreAllMocks();
 });
 
-describe('documentConnectMyComputerSetup', () => {
+describe('connectMyComputerSetup', () => {
   const tests: Array<{
     name: string;
     expectedStatus: AttemptStatus;
@@ -83,20 +83,14 @@ describe('documentConnectMyComputerSetup', () => {
         },
       }),
     });
-    const doc = {
-      kind: 'doc.connect_my_computer_setup' as const,
-      rootClusterUri: cluster.uri,
-      title: '',
-      uri: '/docs/123' as const,
-    };
     const appContext = new MockAppContext({});
     appContext.clustersService.state.clusters.set(cluster.uri, cluster);
     appContext.workspacesService.setState(draftState => {
       draftState.rootClusterUri = cluster.uri;
       draftState.workspaces[cluster.uri] = {
         localClusterUri: cluster.uri,
-        documents: [doc],
-        location: doc.uri,
+        documents: [],
+        location: undefined,
         accessRequests: undefined,
       };
     });
@@ -125,7 +119,7 @@ describe('documentConnectMyComputerSetup', () => {
           <connectMyComputerContext.ConnectMyComputerContextProvider
             rootClusterUri={cluster.uri}
           >
-            <DocumentConnectMyComputerSetup visible={true} doc={doc} />
+            <DocumentConnectMyComputerSetup />
           </connectMyComputerContext.ConnectMyComputerContextProvider>
         </MockWorkspaceContextProvider>
       </MockAppContextProvider>