Connection list: Hide cluster name for single cluster

web/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx

@@ -23,6 +23,8 @@ import AppContextProvider from 'teleterm/ui/appContextProvider';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import { VnetContextProvider } from 'teleterm/ui/Vnet';
 
+import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
+
 import { Connections } from './Connections';
 
 export default {
@@ -36,6 +38,8 @@ export default {
   ],
 };
 
+const rootClusterUri = '/clusters/foo';
+
 export function Story() {
   const appContext = new MockAppContext();
   prepareAppContext(appContext);
@@ -49,6 +53,43 @@ export function Story() {
   );
 }
 
+export function MultipleClusters() {
+  const appContext = new MockAppContext();
+  prepareAppContext(appContext);
+  appContext.clustersService.setState(draft => {
+    const rootCluster1 = makeRootCluster({
+      uri: rootClusterUri,
+      name: 'teleport.example.sh',
+    });
+    const rootCluster2 = makeRootCluster({
+      uri: '/clusters/bar',
+      name: 'bar.example.com',
+    });
+    draft.clusters.set(rootCluster1.uri, rootCluster1);
+    draft.clusters.set(rootCluster2.uri, rootCluster2);
+  });
+  appContext.connectionTracker.getConnections = () => [
+    ...makeConnections(),
+    {
+      connected: true,
+      kind: 'connection.server' as const,
+      title: 'runner-prod',
+      id: 'ed23ded1',
+      serverUri: '/clusters/bar/servers/ed23ded1',
+      login: 'alice',
+      clusterName: 'bar.example.com',
+    },
+  ];
+
+  return (
+    <AppContextProvider value={appContext}>
+      <VnetContextProvider>
+        <Connections />
+      </VnetContextProvider>
+    </AppContextProvider>
+  );
+}
+
 export function JustVnet() {
   const appContext = new MockAppContext();
   prepareAppContext(appContext);

web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx

@@ -28,18 +28,14 @@ import { isAppUri, isDatabaseUri } from 'teleterm/ui/uri';
 
 import { ConnectionStatusIndicator } from './ConnectionStatusIndicator';
 
-interface ConnectionItemProps {
+export function ConnectionItem(props: {
   index: number;
   item: ExtendedTrackedConnection;
-
+  showClusterName: boolean;
   onActivate(): void;
-
   onRemove(): void;
-
   onDisconnect(): void;
-}
-
-export function ConnectionItem(props: ConnectionItemProps) {
+}) {
   const offline = !props.item.connected;
   const { isActive, scrollIntoViewIfActive } = useKeyboardArrowsNavigation({
     index: props.index,
@@ -71,8 +67,13 @@ export function ConnectionItem(props: ConnectionItemProps) {
       onClick={props.onActivate}
       isActive={isActive}
       ref={ref}
+      $showClusterName={props.showClusterName}
       css={`
-        padding: 6px 8px;
+        padding: ${props => props.theme.space[1]}px
+          ${props => props.theme.space[2]}px;
+        // Space out items more if there are two lines of text to show inside a single item.
+        margin-block-start: ${props =>
+          props.$showClusterName ? props.theme.space[1] : 0}px;
         height: unset;
       `}
     >
@@ -100,6 +101,7 @@ export function ConnectionItem(props: ConnectionItemProps) {
             color="text.main"
             title={props.item.title}
             css={`
+              // Needed to condense a single item when the cluster name is displayed.
               line-height: 16px;
             `}
           >
@@ -123,13 +125,16 @@ export function ConnectionItem(props: ConnectionItemProps) {
               {props.item.title}
             </span>
           </Text>
-          <Text
-            color="text.slightlyMuted"
-            typography="body2"
-            title={props.item.clusterName}
-          >
-            {props.item.clusterName}
-          </Text>
+
+          {props.showClusterName && (
+            <Text
+              color="text.slightlyMuted"
+              typography="body2"
+              title={props.item.clusterName}
+            >
+              {props.item.clusterName}
+            </Text>
+          )}
         </div>
         <ButtonIcon
           mr="-3px"

web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx

@@ -22,6 +22,7 @@ import { FilterableList } from 'teleterm/ui/components/FilterableList';
 import { ExtendedTrackedConnection } from 'teleterm/ui/services/connectionTracker';
 import { useKeyboardArrowsNavigationStateUpdate } from 'teleterm/ui/components/KeyboardArrowsNavigation';
 import { VnetConnectionItem, useVnetContext } from 'teleterm/ui/Vnet';
+import { useAppContext } from 'teleterm/ui/appContextProvider';
 
 import { ConnectionItem } from './ConnectionItem';
 
@@ -34,6 +35,20 @@ export function ConnectionsFilterableList(props: {
 }) {
   const { setActiveIndex } = useKeyboardArrowsNavigationStateUpdate();
   const { isSupported: isVnetSupported } = useVnetContext();
+  const { clustersService } = useAppContext();
+  const clustersInConnections = new Set(props.items.map(i => i.clusterName));
+  // showClusterNames is based on two values, as there are two cases we need to account for:
+  //
+  // 1. If there's only a single cluster a user has access to, they don't care about its name.
+  // However, the moment there's an extra leaf cluster or just another profile, the user might want
+  // to know the name of a cluster for the given connection, even if the connection list currently
+  // shows connections only from a single cluster.
+  //
+  // 2. The connection list might include a connection to a leaf cluster resource even after that
+  // leaf is no longer available and there's only a single cluster in clustersService. As such, we
+  // have to look at the number of clusters in connections as well.
+  const showClusterName =
+    clustersService.getClustersCount() > 1 || clustersInConnections.size > 1;
 
   if (!isVnetSupported && props.items.length === 0) {
     return <Text color="text.muted">No Connections</Text>;
@@ -51,6 +66,7 @@ export function ConnectionsFilterableList(props: {
         <ConnectionItem
           item={item}
           index={index}
+          showClusterName={showClusterName}
           onActivate={() => props.onActivateItem(item.id)}
           onRemove={() => props.onRemoveItem(item.id)}
           onDisconnect={() => props.onDisconnectItem(item.id)}

web/packages/teleterm/src/ui/Vnet/VnetConnectionItem.tsx

@@ -47,7 +47,8 @@ export const VnetConnectionItem = (props: {
   return (
     <ListItem
       css={`
-        padding: 6px 8px;
+        padding: ${props => props.theme.space[1]}px
+          ${props => props.theme.space[2]}px;
         height: unset;
       `}
       onClick={props.onClick}

web/packages/teleterm/src/ui/services/clusters/clustersService.ts

@@ -619,6 +619,10 @@ export class ClustersService extends ImmutableStore<types.ClustersServiceState>
     return [...this.state.clusters.values()];
   }
 
+  getClustersCount() {
+    return this.state.clusters.size;
+  }
+
   getRootClusters() {
     return this.getClusters().filter(c => !c.leaf);
   }