[v18] feat(web): Link to Bot Details (#57210)

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 }) => {
@@ -65,7 +65,7 @@ const kind = ({ kind, theme }: { kind?: LabelKind; theme: Theme }) => {
 
   if (kind === 'outline-warning') {
     return {
-      color: theme.colors.interactive.solid.alert.default,
+      color: theme.colors.dataVisualisation.primary.sunflower,
       backgroundColor: theme.colors.interactive.tonal.alert[0],
       borderColor: theme.colors.interactive.tonal.alert[2],
       borderWidth: 1,
@@ -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/icons.ts

@@ -226,6 +226,7 @@ import onepasswordLight from './assets/onepassword-light.svg?no-inline';
 import opencomp from './assets/opencomp.svg?no-inline';
 import openid from './assets/openid.svg?no-inline';
 import opsgenie from './assets/opsgenie.svg?no-inline';
+import oracle from './assets/oracle.svg?no-inline';
 import orbitLove from './assets/orbit.love.svg?no-inline';
 import orcasecurityDark from './assets/orcasecurity-dark.svg?no-inline';
 import orcasecurityLight from './assets/orcasecurity-light.svg?no-inline';
@@ -522,6 +523,7 @@ export {
   opencomp,
   openid,
   opsgenie,
+  oracle,
   orbitLove,
   orcasecurityDark,
   orcasecurityLight,

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

@@ -17,9 +17,10 @@
  */
 
 import { ComponentProps } from 'react';
-import { useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-import { Image } from 'design';
+import { Flex, 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,53 @@ export const ResourceIcon = ({ name, ...props }: ResourceIconProps) => {
   if (!icon) {
     return null;
   }
+  if (props.size) {
+    const width = sizetoInnerPx(props.size);
+    const height = sizetoInnerPx(props.size);
+    return (
+      <Container $size={props.size}>
+        <Image
+          src={icon}
+          data-testid={`res-icon-${name}`}
+          {...props}
+          width={width}
+          height={height}
+        />
+      </Container>
+    );
+  }
+
   return <Image src={icon} data-testid={`res-icon-${name}`} {...props} />;
 };
 
+const Container = styled(Flex)<{ $size: IconProps['size'] }>`
+  width: ${props => sizetoOuterPx(props.$size)};
+  height: ${props => sizetoOuterPx(props.$size)};
+  align-items: center;
+  justify-content: center;
+`;
+
+/**
+ * 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 sizetoInnerPx(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';
+}
+
+function sizetoOuterPx(size: IconProps['size']) {
+  if (size === 'small') return '16px';
+  if (size === 'medium') return '20px';
+  if (size === 'large') return '24px';
+  if (size === 'extra-large') return '32px';
+  return '32px';
+}
+
 export { type ResourceIconName, resourceIconSpecs, iconNames };

web/packages/design/src/ResourceIcon/resourceIconSpecs.ts

@@ -208,6 +208,7 @@ export const resourceIconSpecs = {
   openid: forAllThemes(i.openid),
   opsgenie: forAllThemes(i.opsgenie),
   'orbit.love': forAllThemes(i.orbitLove),
+  oracle: forAllThemes(i.oracle),
   orcasecurity: { dark: i.orcasecurityDark, light: i.orcasecurityLight },
   'outreach.io': forAllThemes(i.outreachIo),
 

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',