feat(web): Link to Bot Details by nicholasmarais1158 · Pull Request #57210 · gravitational/teleport

nicholasmarais1158 · 2025-07-28T10:25:42Z

Summary

This change links the Bot Details page with the rest of the app by clicking a row on the Bots List. It also includes a number of UI/UX refinements to the Bot Details page as a result of a design review.

Changelog: Use the bot details page to view and edit bot configuration, and see active instances with their upgrade status.

Depends on: #57023
Designs: Figma link
RFD: RFD0217 - Bot Details (web)
Updates: #47342

Changes

Navigate to bot details on row click
Tweak Label component borders (including making them override-able)
Update back/up behaviour on Bot Detail and Bot Instance Details pages
Handle overflow when content is un-wrappable
Handle no heartbeat data state
Increase size of join token icons
Use new edit for on bots list
Remove old bot edit form
Rename bot view option to "View GitHub example"

Demo

Screen.Recording.2025-07-28.at.11.02.14.mov

Screenshots

# Conflicts: # web/packages/teleport/src/Bots/Details/BotDetails.story.tsx # web/packages/teleport/src/Bots/Details/BotDetails.tsx # web/packages/teleport/src/Bots/Details/Instance.story.tsx # web/packages/teleport/src/Bots/Details/Instance.tsx # web/packages/teleport/src/Bots/Details/InstancesPanel.story.tsx # web/packages/teleport/src/Bots/Details/InstancesPanel.tsx # web/packages/teleport/src/Bots/Details/JoinMethodIcon.tsx # web/packages/teleport/src/test/helpers/tokens.ts # web/packages/teleport/src/useClusterVersion.ts

kimlisa · 2025-07-31T05:13:38Z

+    // 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.getBotsRoute());
+    } else {
+      history.goBack();
+    }


i thought this meant, if there were no history, then push a history, otherwise go back to previous route in the app, but this seems to always default back to the bots list route

also i was just curious, i saw a similar code earlier and it was wrapped in useCallback but not here?

I grabbed this snippet from AccessList. Doesn't appear to be done anywhere else within a useCallback.

It seems to be working as I would expect. Are you suggesting it should replace instead of push when navigating back without history?

kimlisa · 2025-07-31T05:16:21Z

 }) {
  const { id, version, hostname, activeAt, method, os } = props;

+  const hasHeartbeatData = !!version || !!hostname || !!method || !!os;


is this b/c of backwards compat? if so, should we say they need to upgrade? (sorry if im way off)

Technically, an instance may not have or failed to send an initial heartbeat (therefore no heartbeat data is available). In reality, this doesn't happen.

bl-nero · 2025-07-31T10:23:30Z

+          flex={1}
+          gap={2}
+          justifyContent="space-between"
+          overflow={'hidden'}


What's the role of the overflow here? I thought it's already handled in the bot name container and labels container separately. Also: You can just write overflow="hidden".

It prevents the header expanding off the right of the page when there's a title that's too long.

bl-nero · 2025-07-31T11:23:04Z

+
+            {hostname ? (
+              <HoverTooltip placement="top" tipContent={'Hostname'}>
+                <SecondaryOutlined borderRadius={2}>


These things proliferate, and this page alone already has two variants of it ("round" and "less round"). We have these Label and Pill components, but they aged (like milk, not like wine) and since they don't really support the new designs, they are not reused. There's also the new Chips spec, but not yet ready for implementation.

I'm not asking you to fix it here (it needs to be a separate effort), but I'd just like to bring this UI to attention of @rishibarbhaya-design and @roraback as what is possibly the most extensive use of the chip pattern and one of the places that could really benefit from having these unified and implemented as a part of our design library.

One thing I would consider, though, is to get to agreement with the UX team about what are the guidelines about using the round and semi-round chips here, as I don't see the semi-round variant in the new designs.

Agreed - it's a bit of a mess.

I didn't want to implement the Chips spec as a part of these changes, and tweaking the Label component was the easiest way to achieve the visual style.

@samratambadekar, correct me if I'm wrong, but the elements used by Bot Instance items for version and hostname are separate in design from Chips. Again, I've reused the Label component with slightly less rounded corners.

bl-nero · 2025-07-31T11:33:17Z

-
-function sizetoInnerPx(size: IconProps['size']) {
-  if (size === 'small') return '12px';
+function sizetoPx(size: IconProps['size']) {


This function mirrors a part of the logic that belongs to the inside of the Icon component, so consider extracting it to a separate common function. Secondly, since we started using IconProps to define sizes of ResourceIcon, it may be a better idea to port the concept of an icon size enum to the ResourceIcon component itself and handle it there, with IconProps['size'] extracted as a separate type, perhaps common to both IconandResourceIcon`.

I've moved this mapping to ResourceIcon. It's slightly different to the mapping in Icon to account for there being no in-asset padding for resource icons as there is for regular icons.

I've added an optional size prop to ResourceIcon and reused IconTypes['size'] without moving the type.

backport-bot-workflows · 2025-08-05T08:54:16Z

@nicholasmarais1158 See the table below for backport results.

Branch	Result
branch/v17	Failed
branch/v18	Failed

* RPC and cache * API * Update rfc0217 * Remove unnecessary copy * Fix import ordering * Fix cache bypass issue * Add context to unmarshal error * Wrap page_size parse error * Keep backend range logic consistent * feat(web): Add Join Tokens panel to Bot Details * Copy correction * Remove unneeded alert action * Handle outdated proxy error * Extend tests * Rename * Use `tokens.list` for access to tokens page (instead of `tokens.create`) * Add outline label variants * Add `semver` dep to teleport package * Add `useClusterVersion` hook * Expose heartbeat OS * Add sorting icons * Add `JoinMethodIcon` component * Add bot instances to Bot Details * Missing lock content * Fix scroll container * Scroll to top on sort * Remove unused import * Extract join method icons to component * Add mission join token icons/logos * Use OS logos (update windows) * Save some lines 😮‍💨 * Unused imports * Use shared semver * Fix exhaustive check * Re-export new Label variants * Correct version compatibility logic and messaging * Improve error state UX * Use `H2` * Reduce lines * Reduce lines (more) * Fix tests and lint * Fix grid alignment * Remove unnecessary margin 0 * Clarify roles container * Improve type safety of sort state * Remove unnecessary wrappers * Improve `useClusterVersion` * Add sorting icons (used later) * Bot details nav and edit from list * Add up/back navigation * Make icons bigger * Make label text bigger * Add "No heartbeat data" state * Rename `check()` * Correct newer version messaging * Tweak Label component border radius * Spacing, sizing and overflow handling * Add overflow stories * Fix typing * Remove old edit form * Remove fixme comment * Fix lint * Remove redundant memoization * Tidy text styles * Add `style` prop to ResourceIcon

* feat(web): Link to Bot Details (#57210) * RPC and cache * API * Update rfc0217 * Remove unnecessary copy * Fix import ordering * Fix cache bypass issue * Add context to unmarshal error * Wrap page_size parse error * Keep backend range logic consistent * feat(web): Add Join Tokens panel to Bot Details * Copy correction * Remove unneeded alert action * Handle outdated proxy error * Extend tests * Rename * Use `tokens.list` for access to tokens page (instead of `tokens.create`) * Add outline label variants * Add `semver` dep to teleport package * Add `useClusterVersion` hook * Expose heartbeat OS * Add sorting icons * Add `JoinMethodIcon` component * Add bot instances to Bot Details * Missing lock content * Fix scroll container * Scroll to top on sort * Remove unused import * Extract join method icons to component * Add mission join token icons/logos * Use OS logos (update windows) * Save some lines 😮‍💨 * Unused imports * Use shared semver * Fix exhaustive check * Re-export new Label variants * Correct version compatibility logic and messaging * Improve error state UX * Use `H2` * Reduce lines * Reduce lines (more) * Fix tests and lint * Fix grid alignment * Remove unnecessary margin 0 * Clarify roles container * Improve type safety of sort state * Remove unnecessary wrappers * Improve `useClusterVersion` * Add sorting icons (used later) * Bot details nav and edit from list * Add up/back navigation * Make icons bigger * Make label text bigger * Add "No heartbeat data" state * Rename `check()` * Correct newer version messaging * Tweak Label component border radius * Spacing, sizing and overflow handling * Add overflow stories * Fix typing * Remove old edit form * Remove fixme comment * Fix lint * Remove redundant memoization * Tidy text styles * Add `style` prop to ResourceIcon * fix(web): Bot details instance spacing (#57563) * Add padded container to `ResourceIcon` * Increase join method and os icon size * Include value in hostname tooltip * Improve version and hostname spacing * Tidy hostname height * Lower heading weight * Revert title weight back to bold * Fix warning label text colour * Unused imports 😞 * Add Oracle icon and `pnpm process-icons` * fix(web): Oracle brand icon (#57708) * fix(web): Oracle brand icon * Run `pnpm process-icons`

nicholasmarais1158 added 30 commits July 16, 2025 13:20

RPC and cache

ffe7b3e

API

e2b8277

Update rfc0217

ba0cc5e

Remove unnecessary copy

3382643

Fix import ordering

fd81804

Fix cache bypass issue

ee1d5e9

Merge branch 'master' into nicholasmarais1158/feat/bot-tokens-api

3f22dfe

Add context to unmarshal error

34841a6

Wrap page_size parse error

e6aedff

Keep backend range logic consistent

fe5ad69

feat(web): Add Join Tokens panel to Bot Details

b50542d

Copy correction

6412069

Remove unneeded alert action

93fd018

Handle outdated proxy error

fe7b24f

Extend tests

e5e57fc

Rename

e336f84

Use tokens.list for access to tokens page (instead of tokens.create)

5063cbb

Add outline label variants

b28b66a

Add semver dep to teleport package

eda80bd

Add useClusterVersion hook

4597088

Expose heartbeat OS

93c35df

Add sorting icons

3faf420

Add JoinMethodIcon component

a66c869

Add bot instances to Bot Details

81eaee2

Merge branch 'master' into nicholasmarais1158/feat/bot-instances-web

0a208ef

Missing lock content

4fac800

Fix scroll container

a0ed511

Scroll to top on sort

957d2cf

Remove unused import

6129d4e

Extract join method icons to component

0b5695d

nicholasmarais1158 self-assigned this Jul 28, 2025

nicholasmarais1158 added machine-id backport/branch/v17 backport/branch/v18 labels Jul 28, 2025

nicholasmarais1158 marked this pull request as ready for review July 28, 2025 11:16

github-actions bot requested a review from bl-nero July 28, 2025 11:16

github-actions bot added size/sm ui labels Jul 28, 2025

github-actions bot requested a review from kimlisa July 28, 2025 11:16

Base automatically changed from nicholasmarais1158/feat/bot-instances-web to master July 30, 2025 09:13

kimlisa approved these changes Jul 31, 2025

View reviewed changes

Fix lint

3efb63f

bl-nero reviewed Jul 31, 2025

View reviewed changes

nicholasmarais1158 added 4 commits July 31, 2025 17:49

Remove redundant memoization

f49194b

Tidy text styles

5d41eda

Add style prop to ResourceIcon

b8d7eab

Merge branch 'master' into nicholasmarais1158/feat/bot-detail-nav

ccfcc08

nicholasmarais1158 requested a review from bl-nero August 1, 2025 09:36

Merge branch 'master' into nicholasmarais1158/feat/bot-detail-nav

85a585f

bl-nero approved these changes Aug 4, 2025

View reviewed changes

nicholasmarais1158 added this pull request to the merge queue Aug 5, 2025

Merged via the queue into master with commit 7b3e149 Aug 5, 2025
40 checks passed

nicholasmarais1158 deleted the nicholasmarais1158/feat/bot-detail-nav branch August 5, 2025 08:52

Conversation

nicholasmarais1158 commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Demo

Screenshots

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

backport-bot-workflows bot commented Aug 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nicholasmarais1158 commented Jul 28, 2025 •

edited

Loading