feat: Bot instances design review

web/packages/shared/components/Search/SearchPanel.tsx

@@ -22,6 +22,7 @@ import styled from 'styled-components';
 import { Flex } from 'design';
 import InputSearch from 'design/DataTable/InputSearch';
 import { PageIndicatorText } from 'design/DataTable/Pager/PageIndicatorText';
+import { FlexProps } from 'design/Flex/Flex';
 import { AdvancedSearchToggle } from 'shared/components/AdvancedSearchToggle';
 
 // eslint-disable-next-line no-restricted-imports -- FIXME
@@ -35,6 +36,7 @@ export function SearchPanel({
   disableSearch,
   hideAdvancedSearch,
   extraChildren,
+  mb = 3,
 }: {
   updateQuery?: (s: string) => void;
   updateSearch: (s: string) => void;
@@ -43,6 +45,7 @@ export function SearchPanel({
   disableSearch?: boolean;
   hideAdvancedSearch?: boolean;
   extraChildren?: JSX.Element;
+  mb?: FlexProps['mb'];
 }) {
   const [query, setQuery] = useState(filter.search || filter.query || '');
   const [isAdvancedSearch, setIsAdvancedSearch] = useState(!!filter.query);
@@ -72,7 +75,7 @@ export function SearchPanel({
       justifyContent="space-between"
       alignItems="center"
       width="100%"
-      mb={3}
+      mb={mb}
     >
       <Flex style={{ width: '100%' }} alignItems="center">
         <StyledFlex

web/packages/teleport/src/BotInstances/BotInstances.story.tsx

@@ -203,7 +203,7 @@ function Wrapper(props?: {
         <TeleportProviderBasic teleportCtx={ctx}>
           <Router history={history}>
             <Route path={cfg.routes.botInstances}>
-              <Box height={820} overflow={'auto'}>
+              <Box height={820}>
                 <BotInstances />
               </Box>
             </Route>

web/packages/teleport/src/BotInstances/BotInstances.test.tsx

@@ -229,16 +229,20 @@ describe('BotInstances', () => {
     await waitForElementToBeRemoved(() => screen.queryByTestId('loading'));
 
     expect(
-      screen.queryByRole('heading', { name: 'Resource YAML' })
+      screen.queryByRole('heading', {
+        name: 'test-bot-2/3c3aae3e-de25-4824-a8e9-5a531862f19a',
+      })
     ).not.toBeInTheDocument();
 
-    const item2 = screen.getByRole('listitem', {
+    const item = screen.getByRole('listitem', {
       name: 'test-bot-2/3c3aae3e-de25-4824-a8e9-5a531862f19a',
     });
-    await user.click(item2);
+    await user.click(item);
 
     expect(
-      screen.getByRole('heading', { name: 'Resource YAML' })
+      screen.getByRole('heading', {
+        name: 'test-bot-2/3c3aae3e-de25-4824-a8e9-5a531862f19a',
+      })
     ).toBeInTheDocument();
 
     expect(

web/packages/teleport/src/BotInstances/BotInstances.tsx

@@ -176,9 +176,9 @@ export function BotInstances() {
   }
 
   return (
-    <FeatureBox>
-      <FeatureHeader justifyContent="space-between">
-        <FeatureHeaderTitle>Bot instances</FeatureHeaderTitle>
+    <FeatureBox hideBottomSpacing>
+      <FeatureHeader justifyContent="space-between" mb={0}>
+        <FeatureHeaderTitle>Bot Instances</FeatureHeaderTitle>
         <InfoGuideButton config={{ guide: <InfoGuide /> }} />
       </FeatureHeader>
 
@@ -190,6 +190,7 @@ export function BotInstances() {
           }}
           updateSearch={query => handleQueryChange(query, false)}
           updateQuery={query => handleQueryChange(query, true)}
+          mb={2}
         />
         <ContentContainer>
           <ListAndDetailsContainer $listOnlyMode={!selectedItemId}>
@@ -234,7 +235,7 @@ const Container = styled(Flex)`
   flex-direction: column;
   flex: 1;
   overflow: auto;
-  gap: ${props => props.theme.space[2]}px;
+  padding-bottom: ${props => props.theme.space[3]}px;
 `;
 
 const ContentContainer = styled(Flex)`

web/packages/teleport/src/BotInstances/Details/BotInstanceDetails.tsx

@@ -57,14 +57,14 @@ export function BotInstanceDetails(props: {
   return (
     <Container>
       <TitleContainer>
-        <Flex gap={2} alignItems={'center'}>
-          <HoverTooltip placement="top" tipContent={'Close'}>
-            <ButtonIcon onClick={() => onClose()} aria-label="close">
-              <Cross size="medium" />
-            </ButtonIcon>
-          </HoverTooltip>
-          <TitleText>Resource YAML</TitleText>
-        </Flex>
+        <TitleText>
+          {botName}/{instanceId}
+        </TitleText>
+        <HoverTooltip placement="top" tipContent={'Close'}>
+          <ButtonIcon onClick={() => onClose()} aria-label="close">
+            <Cross size="medium" />
+          </ButtonIcon>
+        </HoverTooltip>
       </TitleContainer>
       <Divider />
       <ContentContainer>
@@ -90,7 +90,7 @@ export function BotInstanceDetails(props: {
         {isSuccess && data.yaml ? (
           <YamlContaner>
             <TextEditor
-              bg="levels.elevated"
+              bg="levels.sunken"
               data={[
                 {
                   content: data.yaml,
@@ -113,20 +113,26 @@ const Container = styled.section`
   border-left-color: ${p => p.theme.colors.interactive.tonal.neutral[0]};
   border-left-width: 1px;
   border-left-style: solid;
+  overflow: hidden;
 `;
 
 const TitleContainer = styled(Flex)`
   align-items: center;
   justify-content: space-between;
   height: ${p => p.theme.space[8]}px;
   padding-left: ${p => p.theme.space[3]}px;
+  padding-right: ${p => p.theme.space[3]}px;
   gap: ${p => p.theme.space[2]}px;
+  overflow: hidden;
 `;
 
 export const TitleText = styled(Text).attrs({
   as: 'h2',
   typography: 'h2',
-})``;
+})`
+  flex: 1;
+  white-space: nowrap;
+`;
 
 const Divider = styled.div`
   height: 1px;
@@ -143,5 +149,5 @@ const ContentContainer = styled.div`
 const YamlContaner = styled(Flex)`
   flex: 1;
   border-radius: ${props => props.theme.space[2]}px;
-  background-color: ${({ theme }) => theme.colors.levels.elevated};
+  background-color: ${({ theme }) => theme.colors.levels.surface};
 `;

web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx

@@ -86,7 +86,7 @@ function InternalBotInstancesList(
   return (
     <Container>
       <TitleContainer>
-        <TitleText>Currently Active</TitleText>
+        <TitleText>Active Instances</TitleText>
         <SortMenu
           current={{
             fieldName: sortField,
@@ -131,7 +131,7 @@ function InternalBotInstancesList(
       {hasData ? (
         <>
           {data && data.length > 0 ? (
-            <ContentContainer ref={contentRef}>
+            <ContentContainer ref={contentRef} data-scrollbar="default">
               {data.map((instance, i) => (
                 <React.Fragment key={`${instance.instance_id}`}>
                   {i === 0 ? undefined : <Divider />}

web/packages/teleport/src/Bots/Delete/DeleteDialog.test.tsx

@@ -56,7 +56,7 @@ describe('DeleteDialog', () => {
     expect(screen.getByText('Delete test-bot-name?')).toBeInTheDocument();
     expect(
       screen.getByText(
-        'Alternatively, you can lock a bot to stop all of its activity.'
+        'Alternatively, you can lock a bot to stop all of its activity immediately.'
       )
     ).toBeInTheDocument();
     expect(screen.getByText('Delete Bot')).toBeEnabled();
@@ -99,7 +99,7 @@ describe('DeleteDialog', () => {
     });
     expect(
       screen.queryByText(
-        'Alternatively, you can lock a bot to stop all of its activity.'
+        'Alternatively, you can lock a bot to stop all of its activity immediately.'
       )
     ).not.toBeInTheDocument();
     expect(screen.queryByText('Lock Bot')).not.toBeInTheDocument();

web/packages/teleport/src/Bots/Delete/DeleteDialog.tsx

@@ -92,15 +92,19 @@ export function DeleteDialog(props: {
       <DialogHeader>
         <DialogTitle>Delete {botName}?</DialogTitle>
       </DialogHeader>
-      <DialogContent>
+      <DialogContent maxWidth={540}>
         <div>
           <P>
-            Deleting a bot is permanent and cannot be undone. All bot instances
-            will terminate immediately.
+            Deleting a bot is permanent and cannot be undone. Bot instances
+            remain active until their issued credentials expire.
+            {showLockAlternative
+              ? ''
+              : ' To terminate active instances immediately, lock the bot before deleting it.'}
           </P>
           {showLockAlternative ? (
             <P>
-              Alternatively, you can lock a bot to stop all of its activity.
+              Alternatively, you can lock a bot to stop all of its activity
+              immediately.
             </P>
           ) : undefined}
         </div>

web/packages/teleport/src/Bots/Details/Instance.tsx

@@ -64,7 +64,16 @@ export function Instance(props: {
     <Container
       $isSelectable={!!isSelectable}
       $isSelected={!!isSelected}
-      onClick={() => onSelected?.()}
+      onClick={onSelected}
+      onKeyUp={
+        onSelected
+          ? event => {
+              if (event.key === 'Enter') {
+                onSelected();
+              }
+            }
+          : undefined
+      }
       role="listitem"
       tabIndex={0}
       aria-label={`${botName}/${id}`}
@@ -148,7 +157,8 @@ const Container = styled(Flex)<{
       ? css`
           border-left: ${p.theme.space[1]}px solid
             ${p.theme.colors.interactive.solid.primary.default};
-          background-color: ${p.theme.colors.interactive.tonal.neutral[0]};
+          padding-left: ${props => props.theme.space[3] - p.theme.space[1]}px;
+          background-color: ${p.theme.colors.levels.sunken};
         `
       : ''}
 
@@ -158,10 +168,12 @@ const Container = styled(Flex)<{
           cursor: pointer;
 
           &:hover {
-            background-color: ${p.theme.colors.interactive.tonal.neutral[0]};
+            background-color: ${p.theme.colors.levels.sunken};
           }
-          &:active {
-            background-color: ${p.theme.colors.interactive.tonal.neutral[1]};
+          &:active,
+          &:focus {
+            outline: none;
+            background-color: ${p.theme.colors.levels.deep};
           }
         `
       : ''}