Apply Identity design changes

web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ButtonPrimary, Flex, Text } from 'design';
-import { useAppContext } from 'teleterm/ui/appContextProvider';
-
-export function EmptyIdentityList() {
-  const ctx = useAppContext();
-
-  function handleConnect() {
-    ctx.commandLauncher.executeCommand('cluster-connect', {});
-  }
-
-  return (
-    <Flex m="auto" flexDirection="column" alignItems="center">
-      <Text typography="h6" bold mb={2}>
-        Connect to a Cluster
-      </Text>
-      <ButtonPrimary size="small" onClick={handleConnect}>
-        Connect
-      </ButtonPrimary>
-    </Flex>
-  );
-}

web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ButtonPrimary, Flex, Text } from 'design';
+import { useAppContext } from 'teleterm/ui/appContextProvider';
+import Image from 'design/Image';
+import clusterPng from './clusters.png';
+
+export function EmptyIdentityList() {
+  const ctx = useAppContext();
+
+  function handleConnect() {
+    ctx.commandLauncher.executeCommand('cluster-connect', {});
+  }
+
+  return (
+    <Flex
+      m="auto"
+      flexDirection="column"
+      alignItems="center"
+      width="200px"
+      p={3}
+    >
+      <Image width="60px" src={clusterPng} />
+      <Text fontSize={1} bold>
+        No root cluster connected
+      </Text>
+      <Text
+        typography="subtitle2"
+        fontWeight="regular"
+        color="text.secondary"
+        mb={3}
+        textAlign="center"
+        fontSize={1}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </Text>
+      <ButtonPrimary size="small" onClick={handleConnect}>
+        Connect
+      </ButtonPrimary>
+    </Flex>
+  );
+}

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

@@ -6,7 +6,7 @@ import { useIdentity } from './useIdentity';
 import { IdentityList } from './IdentityList/IdentityList';
 import { IdentitySelector } from './IdentitySelector/IdentitySelector';
 import { useKeyboardShortcuts } from 'teleterm/ui/services/keyboardShortcuts';
-import { EmptyIdentityList } from './EmptyIdentityList';
+import { EmptyIdentityList } from './EmptyIdentityList/EmptyIdentityList';
 
 export function Identity() {
   const selectorRef = useRef<HTMLButtonElement>();
@@ -84,6 +84,4 @@ const focusGrabber = (
 
 const Container = styled(Box)`
   background: ${props => props.theme.colors.primary.dark};
-  width: 350px;
-  padding-top: 12px;
 `;

web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx

@@ -20,16 +20,20 @@ interface IdentityListProps {
 
 export function IdentityList(props: IdentityListProps) {
   return (
-    <>
-      <Flex px={'24px'} pb={2} justifyContent="space-between">
-        <Box>
-          <Text bold>{props.loggedInUser?.name}</Text>
-          <Text typography="body2" color="text.secondary">
-            {props.loggedInUser?.rolesList?.join(', ')}
-          </Text>
-        </Box>
-      </Flex>
-      <Separator />
+    <Box minWidth="200px" pt="12px">
+      {props.loggedInUser && (
+        <>
+          <Flex px="24px" pb={2} justifyContent="space-between">
+            <Box>
+              <Text bold>{props.loggedInUser.name}</Text>
+              <Text typography="body2" color="text.secondary">
+                {props.loggedInUser.rolesList.join(', ')}
+              </Text>
+            </Box>
+          </Flex>
+          <Separator />
+        </>
+      )}
       <KeyboardArrowsNavigation>
         <Box px={'12px'}>
           {props.clusters.map((i, index) => (
@@ -53,7 +57,7 @@ export function IdentityList(props: IdentityListProps) {
           />
         </Box>
       </KeyboardArrowsNavigation>
-    </>
+    </Box>
   );
 }
 

web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ListItem } from 'teleterm/ui/components/ListItem';
 import { useKeyboardArrowsNavigation } from 'teleterm/ui/components/KeyboardArrowsNavigation';
 import { ButtonIcon, Flex, Label, Text } from 'design';
@@ -23,6 +23,8 @@ export function IdentityListItem(props: IdentityListItemProps) {
     index: props.index,
     onRun: props.onSelect,
   });
+  const ref = useRef<HTMLElement>();
+  const [newWidth, setMaxWidth] = useState<number>();
 
   const title = props.userName
     ? `${props.userName}@${props.clusterName}`
@@ -32,33 +34,44 @@ export function IdentityListItem(props: IdentityListItemProps) {
     <ListItem
       onClick={props.onSelect}
       isActive={isActive}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      ref={ref}
+      style={{ maxWidth: newWidth && newWidth + 'px' }}
+      onMouseEnter={() => {
+        // we set maxWidth to list item element, because otherwise it becomes wider on hover (new element is added to it)
+        setMaxWidth(ref.current.clientWidth);
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setMaxWidth(undefined);
+        setIsHovered(false);
+      }}
     >
       <Flex justifyContent="space-between" alignItems="center" width="100%">
+        {props.isSyncing && <LinearProgress />}
         <Text typography="body1" title={title}>
           {title}
         </Text>
-        {props.isSelected ? (
-          <Label kind="success" ml={2}>
-            active
-          </Label>
-        ) : null}
-        {props.isSyncing && <LinearProgress />}
-        {isHovered && (
-          <ButtonIcon
-            mr="-10px"
-            ml={1}
-            color="text.placeholder"
-            title="Logout"
-            onClick={e => {
-              e.stopPropagation();
-              props.onLogout();
-            }}
-          >
-            <CircleCross fontSize={12} />
-          </ButtonIcon>
-        )}
+        <Flex alignItems="center">
+          {props.isSelected ? (
+            <Label kind="success" ml={2} style={{ height: 'fit-content' }}>
+              active
+            </Label>
+          ) : null}
+          {isHovered && (
+            <ButtonIcon
+              mr="-10px"
+              ml={1}
+              color="text.placeholder"
+              title={`Log out from ${props.clusterName}`}
+              onClick={e => {
+                e.stopPropagation();
+                props.onLogout();
+              }}
+            >
+              <CircleCross fontSize={12} />
+            </ButtonIcon>
+          )}
+        </Flex>
       </Flex>
     </ListItem>
   );

web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx

@@ -54,7 +54,7 @@ const Container = styled.button`
   flex-direction: row;
   padding: 0 12px;
   height: 100%;
-  max-width: 260px;
+  min-width: 0;
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;

web/packages/teleterm/src/ui/TopBar/Identity/useIdentity.ts

@@ -15,7 +15,7 @@ export function useIdentity() {
     ctx.commandLauncher.executeCommand('cluster-connect', {});
   }
 
-  async function logout(clusterUri: string): Promise<void> {
+  function logout(clusterUri: string): void {
     ctx.commandLauncher.executeCommand('cluster-logout', {clusterUri})
   }
 

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

@@ -24,7 +24,7 @@ export function TopBar() {
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: 1fr auto minmax(250px, 1fr);
   width: 100%;
   padding: 8px 25px;
   height: 56px;
@@ -49,7 +49,7 @@ const JustifyLeft = styled.div`
 `;
 
 const JustifyRight = styled.div`
-  display: flex;
+  display: grid;
   justify-self: end;
   align-items: center;
   height: 100%;