feat(web): Link to Bot Details

web/packages/design/src/Label/Label.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { space, SpaceProps } from '../system';
+import { border, BorderProps, space, SpaceProps } from '../system';
 import { Theme } from '../theme';
 
 const kind = ({ kind, theme }: { kind?: LabelKind; theme: Theme }) => {
@@ -102,23 +102,26 @@ export type LabelKind =
   | 'outline-warning'
   | 'outline-danger';
 
-interface LabelProps extends SpaceProps {
+type LabelProps = {
   kind?: LabelKind;
   children?: React.ReactNode;
-}
+} & SpaceProps &
+  BorderProps;
 
 const Label = styled.div<LabelProps>`
   box-sizing: border-box;
-  border-radius: 10px;
+  border-radius: 999px;
   display: inline-block;
   font-size: 10px;
   font-weight: 500;
   padding: 0 8px;
   margin: 1px 0;
   vertical-align: middle;
+  overflow: hidden;
 
   ${kind}
   ${space}
+  ${border}
 `;
 
 export default Label;

web/packages/design/src/ResourceIcon/ResourceIcon.story.tsx

@@ -19,7 +19,7 @@
 import React, { PropsWithChildren } from 'react';
 import { useTheme } from 'styled-components';
 
-import { Flex, Text } from 'design';
+import { Flex, Stack, Text } from 'design';
 import { ResourceIcon } from 'design/ResourceIcon';
 
 import { iconNames } from './resourceIconSpecs';
@@ -43,6 +43,21 @@ export const Icons = () => {
   );
 };
 
+export const StandardSizes = () => {
+  return (
+    <Stack flexWrap="wrap" gap={2}>
+      <ResourceIcon name={'1password'} size="small" />
+      Small
+      <ResourceIcon name={'1password'} size="medium" />
+      Medium
+      <ResourceIcon name={'1password'} size="large" />
+      Large
+      <ResourceIcon name={'1password'} size="extra-large" />
+      Extra Large
+    </Stack>
+  );
+};
+
 const IconBox: React.FC<PropsWithChildren<{ text: string }>> = ({
   children,
   text,

web/packages/design/src/ResourceIcon/index.tsx

@@ -20,6 +20,7 @@ import { ComponentProps } from 'react';
 import { useTheme } from 'styled-components';
 
 import { Image } from 'design';
+import { IconProps } from 'design/Icon/Icon';
 
 import {
   iconNames,
@@ -33,6 +34,11 @@ interface ResourceIconProps extends ComponentProps<typeof Image> {
    * available names.
    */
   name: ResourceIconName;
+
+  /**
+   * Use a standard size. Otherwise, use `width` and `height` props.
+   */
+  size?: IconProps['size'];
 }
 
 /**
@@ -45,7 +51,32 @@ export const ResourceIcon = ({ name, ...props }: ResourceIconProps) => {
   if (!icon) {
     return null;
   }
-  return <Image src={icon} data-testid={`res-icon-${name}`} {...props} />;
+  const width = props.size ? sizetoPx(props.size) : props.width;
+  const height = props.size ? sizetoPx(props.size) : props.height;
+  return (
+    <Image
+      src={icon}
+      data-testid={`res-icon-${name}`}
+      {...props}
+      width={width}
+      height={height}
+    />
+  );
 };
 
+/**
+ * Convert a standard size to a pixel width/height. This is different to the
+ * conversion done for Icons as they include in-asset padding.
+ *
+ * @param size the standard size to convert.
+ * @returns the pixel size
+ */
+function sizetoPx(size: IconProps['size']) {
+  if (size === 'small') return '14px';
+  if (size === 'medium') return '16px';
+  if (size === 'large') return '20px';
+  if (size === 'extra-large') return '24px';
+  return '24px';
+}
+
 export { type ResourceIconName, resourceIconSpecs, iconNames };

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

@@ -17,7 +17,7 @@
  */
 
 import { MouseEventHandler, useCallback } from 'react';
-import { useHistory, useParams } from 'react-router';
+import { useHistory, useLocation, useParams } from 'react-router';
 import styled from 'styled-components';
 
 import { Alert } from 'design/Alert/Alert';
@@ -37,6 +37,7 @@ import {
   FeatureHeader,
   FeatureHeaderTitle,
 } from 'teleport/components/Layout/Layout';
+import cfg from 'teleport/config';
 
 import { useGetBotInstance } from '../hooks';
 
@@ -47,6 +48,7 @@ export function BotInstanceDetails(props: {
   onDocsLinkClickedForTesting?: MouseEventHandler<HTMLAnchorElement>;
 }) {
   const history = useHistory();
+  const location = useLocation();
   const params = useParams<{
     botName: string;
     instanceId: string;
@@ -60,8 +62,13 @@ export function BotInstanceDetails(props: {
   );
 
   const handleBackPress = useCallback(() => {
-    history.goBack();
-  }, [history]);
+    // If location.key is unset, or 'default', this is the first history entry in-app in the session.
+    if (!location.key || location.key === 'default') {
+      history.push(cfg.getBotInstancesRoute());
+    } else {
+      history.goBack();
+    }
+  }, [history, location.key]);
 
   return (
     <FeatureBox>

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

@@ -19,7 +19,6 @@
 import format from 'date-fns/format';
 import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict';
 import parseISO from 'date-fns/parseISO';
-import { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Info } from 'design/Alert/Alert';
@@ -69,14 +68,6 @@ export function BotInstancesList({
       : '-',
   }));
 
-  const rowConfig = useMemo(
-    () => ({
-      onClick: onItemSelected,
-      getStyle: () => ({ cursor: 'pointer' }),
-    }),
-    [onItemSelected]
-  );
-
   return (
     <Table<(typeof tableData)[number]>
       data={tableData}
@@ -99,7 +90,10 @@ export function BotInstancesList({
           />
         ),
       }}
-      row={rowConfig}
+      row={{
+        onClick: onItemSelected,
+        getStyle: () => ({ cursor: 'pointer' }),
+      }}
       columns={[
         {
           key: 'bot_name',

web/packages/teleport/src/Bots/Details/BotDetails.story.tsx

@@ -118,13 +118,76 @@ export const HappyWithEmpty: Story = {
           },
         }),
         listV2TokensSuccess({
-          isEmpty: true,
+          tokens: [],
         }),
         mfaAuthnChallengeSuccess(),
         listBotInstancesSuccess({
           bot_instances: [],
           next_page_token: '',
         }),
+        successGetRoles({
+          startKey: '',
+          items: Array.from({ length: 10 }, (_, k) => k).map(r => ({
+            content: `role-${r}`,
+            id: `role-${r}`,
+            name: `role-${r}`,
+            kind: 'role',
+          })),
+        }),
+        editBotSuccess(),
+      ],
+    },
+  },
+};
+
+export const HappyWithLongValues: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        getBotSuccess({
+          name: 'ansibleworkeransibleworkeransibleworkeransibleworkeransibleworkeransibleworker',
+          roles: [
+            'rolerolerolerolerolerolerolerolerolerolerolerolerolerolerolerolerolerolerolerolerole',
+          ],
+          traits: [
+            {
+              name: 'traittraittraittraittraittraittraittraittraittraittraittraittraittraittrait',
+              values: ['value'],
+            },
+            {
+              name: 'name',
+              values: [
+                'valuevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevaluevalue',
+              ],
+            },
+          ],
+          max_session_ttl: {
+            seconds: 43200,
+          },
+        }),
+        listV2TokensSuccess({
+          tokens: [
+            'tokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentokentoken',
+          ],
+        }),
+        mfaAuthnChallengeSuccess(),
+        listBotInstancesSuccess({
+          bot_instances: [
+            {
+              bot_name: '',
+              instance_id:
+                '04241a2a66b904241a2a66b904241a2a66b904241a2a66b904241a2a66b9',
+              host_name_latest:
+                'hotnamehotnamehotnamehotnamehotnamehotnamehotnamehotnamehotname',
+              active_at_latest: '2025-01-01T00:00:00Z',
+              join_method_latest: 'github',
+              os_latest: 'linux',
+              version_latest:
+                '17.2.6-04241a2a66b904241a2a66b904241a2a66b904241a2a66b9',
+            },
+          ],
+          next_page_token: '',
+        }),
         successGetRoles({
           startKey: '',
           items: ['access', 'editor', 'terraform-provider'].map(r => ({