Redesign profile switcher

web/packages/design/src/theme/themes/darkTheme.ts

@@ -32,7 +32,11 @@ import { lighten } from '../utils/colorManipulator';
 import { sharedColors, sharedStyles } from './sharedStyles';
 import { DataVisualisationColors, Theme, ThemeColors } from './types';
 
-const dataVisualisationColors: DataVisualisationColors = {
+/**
+ * Used for the user icon in Connect (the top-right one).
+ * In both the light and dark mode, the dark version of dataVisualisationColors is used.
+ */
+export const dataVisualisationColors: DataVisualisationColors = {
   primary: {
     purple: '#9F85FF',
     wednesdays: '#F74DFF',

web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.story.tsx

@@ -0,0 +1,83 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  makeLoggedInUser,
+  makeRootCluster,
+} from 'teleterm/services/tshd/testHelpers';
+import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
+import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
+
+import { ClusterConnectPanel } from './ClusterConnectPanel';
+
+export default {
+  title: 'Teleterm/ClusterConnectPanel',
+};
+
+const profileStatusError =
+  'No YubiKey device connected with serial number 14358031. Connect the device and try again.';
+const clusterOrange = makeRootCluster({
+  name: 'orange',
+  loggedInUser: makeLoggedInUser({
+    name: 'bob',
+    roles: ['access', 'editor'],
+    sshLogins: ['root'],
+  }),
+  uri: '/clusters/orange',
+});
+const clusterViolet = makeRootCluster({
+  name: 'violet',
+  loggedInUser: makeLoggedInUser({ name: 'sammy' }),
+  uri: '/clusters/violet',
+});
+
+export const Empty = () => {
+  return (
+    <MockAppContextProvider>
+      <ClusterConnectPanel />
+    </MockAppContextProvider>
+  );
+};
+
+export const WithClusters = () => {
+  const ctx = new MockAppContext();
+  ctx.addRootCluster(clusterOrange);
+  ctx.addRootCluster(clusterViolet);
+
+  return (
+    <MockAppContextProvider appContext={ctx}>
+      <ClusterConnectPanel />;
+    </MockAppContextProvider>
+  );
+};
+
+export const WithErrors = () => {
+  const ctx = new MockAppContext();
+  ctx.addRootCluster(
+    makeRootCluster({
+      ...clusterOrange,
+      profileStatusError,
+    })
+  );
+  ctx.addRootCluster(clusterViolet);
+  return (
+    <MockAppContextProvider appContext={ctx}>
+      <ClusterConnectPanel />;
+    </MockAppContextProvider>
+  );
+};

web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx

@@ -16,21 +16,51 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import { Box, ButtonPrimary, Flex, H1, ResourceIcon, Text } from 'design';
+import {
+  Box,
+  ButtonPrimary,
+  Flex,
+  H1,
+  H2,
+  P2,
+  ResourceIcon,
+  Text,
+} from 'design';
 
 import { useAppContext } from 'teleterm/ui/appContextProvider';
-
-import { RecentClusters } from './RecentClusters';
+import { NullKeyboardArrowsNavigation } from 'teleterm/ui/components/KeyboardArrowsNavigation/KeyboardArrowsNavigation';
+import { useStoreSelector } from 'teleterm/ui/hooks/useStoreSelector';
+import { ClusterList } from 'teleterm/ui/TopBar/Identity/IdentityList/IdentityList';
+import { RootClusterUri } from 'teleterm/ui/uri';
 
 export function ClusterConnectPanel() {
   const ctx = useAppContext();
-
-  function handleConnect() {
+  const clusters = useStoreSelector(
+    'clustersService',
+    useCallback(state => state.clusters, [])
+  );
+  const rootClusters = [...clusters.values()].filter(c => !c.leaf);
+  function add(): void {
     ctx.commandLauncher.executeCommand('cluster-connect', {});
   }
 
+  function connect(clusterUri: RootClusterUri): void {
+    ctx.workspacesService.setActiveWorkspace(clusterUri);
+  }
+
+  const containerRef = useRef<HTMLDivElement>();
+
+  // Focus the first item.
+  const hasCluster = !!rootClusters.length;
+  useEffect(() => {
+    if (hasCluster) {
+      containerRef.current.querySelector('li').focus();
+    }
+  }, [hasCluster]);
+
   return (
     <ScrollingContainer>
       <Box width="100%" m="auto" pb={3} pt={1} px={3}>
@@ -41,16 +71,48 @@ export function ClusterConnectPanel() {
           alignItems="center"
         >
           <ResourceIcon width="120px" name="server" mb={3} />
-          <H1 mb={2}>Connect a Cluster</H1>
-          <Text color="text.slightlyMuted" mb={3} textAlign="center">
-            Connect an existing Teleport cluster <br /> to start using Teleport
-            Connect.
-          </Text>
-          <ButtonPrimary size="large" onClick={handleConnect}>
-            Connect
-          </ButtonPrimary>
+          {hasCluster ? (
+            <Flex flexDirection="column">
+              <H2>Clusters</H2>
+              <P2 color="text.slightlyMuted" mb={2}>
+                Log in to a cluster to use Teleport Connect.
+              </P2>
+              {/*Disable arrows navigation, it doesn't work well here,*/}
+              {/*since it requires the container to be focused.*/}
+              {/*The user can navigate with Tab.*/}
+              <NullKeyboardArrowsNavigation>
+                <Flex
+                  maxWidth="450px"
+                  ref={containerRef}
+                  flexDirection="column"
+                  css={`
+                    li {
+                      border-radius: ${p => p.theme.radii[2]}px;
+                      padding: ${p => p.theme.space[2]}px;
+                    }
+                  `}
+                >
+                  <ClusterList
+                    clusters={rootClusters}
+                    onAdd={add}
+                    onSelect={connect}
+                  />
+                </Flex>
+              </NullKeyboardArrowsNavigation>
+            </Flex>
+          ) : (
+            <>
+              <H1 mb={2}>Connect a Cluster</H1>
+              <Text color="text.slightlyMuted" mb={3} textAlign="center">
+                Connect an existing Teleport cluster <br /> to start using
+                Teleport Connect.
+              </Text>
+              <ButtonPrimary size="large" onClick={add}>
+                Connect
+              </ButtonPrimary>
+            </>
+          )}
         </Flex>
-        <RecentClusters />
       </Box>
     </ScrollingContainer>
   );