From f69a5034afbe3cbbdd8b3917dd276a0cc64356d9 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <gzdunek@users.noreply.github.com>
Date: Fri, 24 Jun 2022 13:18:09 +0200
Subject: [PATCH] Show cluster breadcrumbs (#901)

---
 .../teleterm/src/ui/StatusBar/StatusBar.tsx   | 21 +++++++----
 .../useActiveDocumentClusterBreadcrumbs.ts    | 36 +++++++++++++++++++
 .../documentsService/documentsUtils.ts        | 25 +++++++++++++
 .../documentsService/index.ts                 |  1 +
 4 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 web/packages/teleterm/src/ui/StatusBar/useActiveDocumentClusterBreadcrumbs.ts
 create mode 100644 web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts

diff --git a/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx b/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
index ba21399e9a8c8..d63af13b094cd 100644
--- a/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
@@ -1,25 +1,32 @@
 import React from 'react';
 import { Flex, Text } from 'design';
-import { useAppContext } from 'teleterm/ui/appContextProvider';
+import { useActiveDocumentClusterBreadcrumbs } from './useActiveDocumentClusterBreadcrumbs';
 import { ShareFeedback } from './ShareFeedback';
 
 export function StatusBar() {
-  const ctx = useAppContext();
-  ctx.workspacesService.useState();
+  const clusterBreadcrumbs = useActiveDocumentClusterBreadcrumbs();
 
   return (
     <Flex
       width="100%"
       height="28px"
-      bg="primary.dark"
+      css={`
+        border-top: 1px solid ${props => props.theme.colors.primary.light};
+      `}
       alignItems="center"
       justifyContent="space-between"
       px={2}
       overflow="hidden"
     >
-      {/*TODO (gzdunek) display proper info here */}
-      <Text color="text.secondary" fontSize="14px">
-        {ctx.workspacesService.getRootClusterUri()}
+      <Text
+        color="text.secondary"
+        fontSize="14px"
+        css={`
+          white-space: nowrap;
+        `}
+        title={clusterBreadcrumbs}
+      >
+        {clusterBreadcrumbs}
       </Text>
       <ShareFeedback />
     </Flex>
diff --git a/web/packages/teleterm/src/ui/StatusBar/useActiveDocumentClusterBreadcrumbs.ts b/web/packages/teleterm/src/ui/StatusBar/useActiveDocumentClusterBreadcrumbs.ts
new file mode 100644
index 0000000000000..b4126b0b59fb0
--- /dev/null
+++ b/web/packages/teleterm/src/ui/StatusBar/useActiveDocumentClusterBreadcrumbs.ts
@@ -0,0 +1,36 @@
+import { useAppContext } from 'teleterm/ui/appContextProvider';
+import { getResourceUri } from 'teleterm/ui/services/workspacesService';
+import { routing } from 'teleterm/ui/uri';
+
+export function useActiveDocumentClusterBreadcrumbs(): string {
+  const ctx = useAppContext();
+  ctx.workspacesService.useState();
+  ctx.clustersService.useState();
+
+  const activeDocument = ctx.workspacesService
+    .getActiveWorkspaceDocumentService()
+    ?.getActive();
+
+  if (!activeDocument) {
+    return;
+  }
+
+  const resourceUri = getResourceUri(activeDocument);
+  if (!resourceUri) {
+    return;
+  }
+
+  const clusterUri = routing.ensureClusterUri(resourceUri);
+  const rootClusterUri = routing.ensureRootClusterUri(resourceUri);
+
+  const rootCluster = ctx.clustersService.findCluster(rootClusterUri);
+  const leafCluster =
+    clusterUri === rootClusterUri
+      ? undefined
+      : ctx.clustersService.findCluster(clusterUri);
+
+  return [rootCluster, leafCluster]
+    .filter(Boolean)
+    .map(c => c.actualName)
+    .join(' > ');
+}
diff --git a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts
new file mode 100644
index 0000000000000..62d72efd82996
--- /dev/null
+++ b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/documentsUtils.ts
@@ -0,0 +1,25 @@
+import { routing } from 'teleterm/ui/uri';
+import { Document } from './types';
+
+export function getResourceUri(document: Document): string {
+  switch (document.kind) {
+    case 'doc.cluster':
+      return document.clusterUri;
+    case 'doc.gateway':
+      return document.targetUri;
+    case 'doc.terminal_tsh_node':
+      return document.serverUri;
+    case 'doc.terminal_tsh_kube':
+      return document.kubeUri;
+    case 'doc.terminal_shell':
+      return routing.getClusterUri(document);
+    case 'doc.blank':
+      return undefined;
+    default:
+      assertUnreachable(document);
+  }
+}
+
+function assertUnreachable(x: never): never {
+  throw new Error(`Unhandled case: ${x}`);
+}
diff --git a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/index.ts b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/index.ts
index 9e6ce03da6035..6651a64fa5942 100644
--- a/web/packages/teleterm/src/ui/services/workspacesService/documentsService/index.ts
+++ b/web/packages/teleterm/src/ui/services/workspacesService/documentsService/index.ts
@@ -16,3 +16,4 @@ limitations under the License.
 
 export * from './documentsService';
 export * from './types';
+export * from './documentsUtils';