Add cluster context switching (#624)

web/packages/teleterm/src/mainProcess/types.ts

@@ -1,5 +1,5 @@
 import { ConfigService } from '../services/config';
-import { Kind } from 'teleterm/ui/services/docs/types';
+import { Kind } from 'teleterm/ui/services/workspacesService';
 
 export type RuntimeSettings = {
   dev: boolean;

web/packages/teleterm/src/ui/App.tsx

@@ -8,6 +8,7 @@ import AppContextProvider from './appContextProvider';
 import AppContext from './appContext';
 import ThemeProvider from './ThemeProvider';
 import { LayoutManager } from './LayoutManager';
+import { AppInitializer } from 'teleterm/ui/AppInitializer';
 
 const App: React.FC<{ ctx: AppContext }> = ({ ctx }) => {
   const { appearance } = ctx.mainProcessClient.configService.get();
@@ -17,8 +18,10 @@ const App: React.FC<{ ctx: AppContext }> = ({ ctx }) => {
         <DndProvider backend={HTML5Backend}>
           <AppContextProvider value={ctx}>
             <ThemeProvider appearanceConfig={appearance}>
-              <LayoutManager />
-              <ModalsHost />
+              <AppInitializer>
+                <LayoutManager />
+                <ModalsHost />
+              </AppInitializer>
             </ThemeProvider>
           </AppContextProvider>
         </DndProvider>

web/packages/teleterm/src/ui/AppInitializer.tsx

@@ -0,0 +1,18 @@
+import React, { ReactNode, useEffect } from 'react';
+import { useAppContext } from 'teleterm/ui/appContextProvider';
+
+interface AppInitializerProps {
+  children?: ReactNode;
+}
+
+export function AppInitializer(props: AppInitializerProps) {
+  const ctx = useAppContext();
+  useEffect(() => {
+    const { rootClusterUri } = ctx.statePersistenceService.getWorkspaces();
+    if (rootClusterUri) {
+      ctx.workspacesService.setActiveWorkspace(rootClusterUri);
+    }
+  }, []);
+
+  return <>{props.children}</>;
+}

web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.story.tsx

@@ -59,7 +59,8 @@ export const Notfound = () => {
 
 function renderState(state: ClustersServiceState) {
   const appContext = new MockAppContext();
-  appContext.docsService.update = () => null;
+  appContext.workspacesService.getActiveWorkspaceDocumentService().update =
+    () => null;
   appContext.clustersService.state = state;
 
   const doc = {

web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Text, Flex, Box, ButtonPrimary } from 'design';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService';
 import Document from 'teleterm/ui/Document';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import ClusterCtx, {

web/packages/teleterm/src/ui/DocumentCluster/clusterContext.tsx

@@ -187,23 +187,13 @@ const useClusterContext = () => {
   return React.useContext(ClusterReactContext);
 };
 
-export type ClusterNavItem = {
-  location: NavLocation;
-  title: string;
-};
-
 export type NavLocation =
   | '/resources/'
   | '/resources/databases'
   | '/resources/servers'
   | '/resources/apps'
   | '/resources/kubes';
 
-export type ClusterTopNavItem = {
-  navLocation: NavLocation;
-  title: string;
-};
-
 export default ClusterContext;
 
 export { ClusterContextProvider, ClusterReactContext, useClusterContext };

web/packages/teleterm/src/ui/DocumentGateway/DocumentGateway.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { Text, Flex, Box, ButtonPrimary } from 'design';
 import Document from 'teleterm/ui/Document';
 import * as Alerts from 'design/Alert';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService';
 import LinearProgress from 'teleterm/ui/components/LinearProgress';
 import { GatewayProtocol } from 'teleterm/ui/services/clusters/types';
 import useDocumentGateway, { State } from './useDocumentGateway';

web/packages/teleterm/src/ui/DocumentGateway/useDocumentGateway.ts

@@ -16,11 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService';
 import useAsync from 'teleterm/ui/useAsync';
+import { useWorkspaceDocumentsService } from 'teleterm/ui/Documents';
 
 export default function useGateway(doc: types.DocumentGateway) {
   const ctx = useAppContext();
+  const workspaceDocumentsService = useWorkspaceDocumentsService();
   const gateway = ctx.clustersService.findGateway(doc.gatewayUri);
   const connected = !!gateway;
 
@@ -32,7 +34,7 @@ export default function useGateway(doc: types.DocumentGateway) {
         user: doc.targetUser,
       });
 
-      ctx.docsService.update(doc.uri, {
+      workspaceDocumentsService.update(doc.uri, {
         gatewayUri: gw.uri,
       });
     }
@@ -69,7 +71,7 @@ export default function useGateway(doc: types.DocumentGateway) {
 
   React.useEffect(() => {
     if (disconnectAttempt.status === 'success') {
-      ctx.docsService.close(doc.uri);
+      workspaceDocumentsService.close(doc.uri);
     }
   }, [disconnectAttempt.status]);
 

web/packages/teleterm/src/ui/DocumentHome/DocumentHome.tsx

@@ -17,7 +17,9 @@ limitations under the License.
 import React from 'react';
 import { Text, Box, Flex } from 'design';
 import Document from 'teleterm/ui/Document';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService/documentsService';
+
+//TODO: remove
 
 export default function DocumentHome(props: PropTypes) {
   const { visible } = props;
@@ -42,5 +44,5 @@ const Key = props => <Text p={1} as="span" {...props} bg="primary.light" />;
 
 type PropTypes = {
   visible: boolean;
-  doc: types.DocumentHome;
+  // doc: types.DocumentHome;
 };

web/packages/teleterm/src/ui/DocumentTerminal/DocumentReconnect.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import Document from 'teleterm/ui/Document';
 import { Flex, Text, ButtonPrimary } from 'design';
 import { useReconnect, State } from './useReconnect';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService';
 import { Danger } from 'design/Alert';
 
 export default function Container(props: DocumentReconnectProps) {

web/packages/teleterm/src/ui/DocumentTerminal/useDocumentTerminal.ts

@@ -17,13 +17,18 @@ limitations under the License.
 import { useEffect } from 'react';
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 import { IAppContext } from 'teleterm/ui/types';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService';
 import { PtyCommand } from 'teleterm/services/pty/types';
 import useAsync from 'teleterm/ui/useAsync';
+import { DocumentsService } from 'teleterm/ui/services/workspacesService';
+import { useWorkspaceDocumentsService } from 'teleterm/ui/Documents';
 
 export default function useDocumentTerminal(doc: Doc) {
   const ctx = useAppContext();
-  const [state, init] = useAsync(async () => initState(ctx, doc));
+  const workspaceDocumentsService = useWorkspaceDocumentsService();
+  const [state, init] = useAsync(async () =>
+    initState(ctx, workspaceDocumentsService, doc)
+  );
 
   useEffect(() => {
     init();
@@ -35,7 +40,11 @@ export default function useDocumentTerminal(doc: Doc) {
   return state;
 }
 
-async function initState(ctx: IAppContext, doc: Doc) {
+async function initState(
+  ctx: IAppContext,
+  docsService: DocumentsService,
+  doc: Doc
+) {
   const cmd = createCmd(doc);
   const ptyProcess = ctx.terminalsService.createPtyProcess(cmd);
   const openContextMenu = () => ctx.mainProcessClient.openTerminalContextMenu();
@@ -46,16 +55,16 @@ async function initState(ctx: IAppContext, doc: Doc) {
     }
 
     const cwd = await ptyProcess.getCwd();
-    ctx.docsService.update(doc.uri, { cwd, title: cwd });
+    docsService.update(doc.uri, { cwd, title: cwd });
   };
 
   ptyProcess.onOpen(() => {
-    ctx.docsService.update(doc.uri, { status: 'connected' });
+    docsService.update(doc.uri, { status: 'connected' });
     refreshTitle();
   });
 
   ptyProcess.onExit(() => {
-    ctx.docsService.close(doc.uri);
+    docsService.close(doc.uri);
   });
 
   return {

web/packages/teleterm/src/ui/DocumentTerminal/useReconnect.ts

@@ -15,15 +15,17 @@ limitations under the License.
 */
 
 import { useAppContext } from 'teleterm/ui/appContextProvider';
-import * as types from 'teleterm/ui/services/docs/types';
+import * as types from 'teleterm/ui/services/workspacesService';
 import useAttempt from 'shared/hooks/useAttemptNext';
+import { useWorkspaceDocumentsService } from 'teleterm/ui/Documents';
 
 export function useReconnect(doc: types.DocumentTshNode) {
   const ctx = useAppContext();
+  const workspaceDocumentsService = useWorkspaceDocumentsService();
   const { attempt, setAttempt } = useAttempt('');
 
   function updateDoc() {
-    ctx.docsService.update(doc.uri, { status: 'connected' });
+    workspaceDocumentsService.update(doc.uri, { status: 'connected' });
   }
 
   function reconnect() {

web/packages/teleterm/src/ui/Documents/DocumentsRenderer.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useAppContext } from 'teleterm/ui/appContextProvider';
+import * as types from 'teleterm/ui/services/workspacesService';
+import DocumentCluster from 'teleterm/ui/DocumentCluster';
+import DocumentGateway from 'teleterm/ui/DocumentGateway';
+import DocumentTerminal from 'teleterm/ui/DocumentTerminal';
+import Document from 'teleterm/ui/Document';
+import { DocumentsService } from 'teleterm/ui/services/workspacesService';
+import styled from 'styled-components';
+import { WorkspaceDocumentsServiceProvider } from './workspaceDocumentsServiceContext';
+
+export function DocumentsRenderer() {
+  const { workspacesService } = useAppContext();
+
+  function renderDocuments(documentsService: DocumentsService) {
+    return documentsService.getDocuments().map(doc => {
+      const isActiveDoc = doc === documentsService.getActive();
+      return <MemoizedDocument doc={doc} visible={isActiveDoc} key={doc.uri} />;
+    });
+  }
+
+  return (
+    <>
+      {workspacesService
+        .getWorkspacesDocumentsServices()
+        .map(({ clusterUri, workspaceDocumentsService }) => (
+          <DocumentsContainer
+            isVisible={clusterUri === workspacesService.getRootClusterUri()}
+            key={clusterUri}
+          >
+            <WorkspaceDocumentsServiceProvider value={workspaceDocumentsService}>
+              {renderDocuments(workspaceDocumentsService)}
+            </WorkspaceDocumentsServiceProvider>
+          </DocumentsContainer>
+        ))}
+    </>
+  );
+}
+
+const DocumentsContainer = styled.div`
+  display: ${props => (props.isVisible ? 'contents' : 'none')};
+`;
+
+function MemoizedDocument(props: { doc: types.Document; visible: boolean }) {
+  const { doc, visible } = props;
+  return React.useMemo(() => {
+    switch (doc.kind) {
+      case 'doc.cluster':
+        return <DocumentCluster doc={doc} visible={visible} />;
+      case 'doc.gateway':
+        return <DocumentGateway doc={doc} visible={visible} />;
+      case 'doc.terminal_shell':
+      case 'doc.terminal_tsh_node':
+      case 'doc.terminal_tsh_kube':
+        return <DocumentTerminal doc={doc} visible={visible} />;
+      default:
+        return (
+          <Document visible={visible}>
+            Document kind "{doc.kind}" is not supported
+          </Document>
+        );
+    }
+  }, [visible, doc]);
+}

web/packages/teleterm/src/ui/Documents/index.ts

@@ -0,0 +1,2 @@
+export * from './DocumentsRenderer';
+export * from './workspaceDocumentsServiceContext';

web/packages/teleterm/src/ui/Documents/workspaceDocumentsServiceContext.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2019 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 { DocumentsService } from 'teleterm/ui/services/workspacesService';
+
+const WorkspaceDocumentsServiceContext =
+  React.createContext<DocumentsService>(null);
+
+export const WorkspaceDocumentsServiceProvider: React.FC<{
+  value: DocumentsService;
+}> = props => {
+  return <WorkspaceDocumentsServiceContext.Provider {...props} />;
+};
+
+export const useWorkspaceDocumentsService = () => {
+  return React.useContext(WorkspaceDocumentsServiceContext);
+};

web/packages/teleterm/src/ui/Identity/ClusterItem.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ListItem } from 'teleterm/ui/Navigator/NavItem';
+import { Flex, Text } from 'design';
+import { ListAddCheck } from 'design/Icon';
+import styled from 'styled-components';
+import LinearProgress from 'teleterm/ui/components/LinearProgress';
+
+interface ClusterItemProps {
+  isActive: boolean;
+  title: string;
+  onClick(): void;
+  syncing: boolean;
+}
+
+export function ClusterItem(props: ClusterItemProps) {
+  return (
+    <ListItem onClick={props.onClick}>
+      <Flex justifyContent="space-between" alignItems="center" width="100%">
+        <Text typography="body1" title={props.title}>
+          {props.title}
+        </Text>
+        {props.isActive ? <ActiveCheck /> : null}
+        {props.syncing && <LinearProgress />}
+      </Flex>
+    </ListItem>
+  );
+}
+
+const ActiveCheck = styled(ListAddCheck)`
+  color: ${props => props.theme.colors.progressBarColor};
+`;