Skip to content

fix(web): Bot details instance spacing#57563

Merged
nicholasmarais1158 merged 14 commits intomasterfrom
nicholasmarais1158/fix/bot-details-instance-ux
Aug 8, 2025
Merged

fix(web): Bot details instance spacing#57563
nicholasmarais1158 merged 14 commits intomasterfrom
nicholasmarais1158/fix/bot-details-instance-ux

Conversation

@nicholasmarais1158
Copy link
Copy Markdown
Contributor

@nicholasmarais1158 nicholasmarais1158 commented Aug 5, 2025 •
edited
Loading

Summary

A few UX/UI tweaks to bot details.

Updates: #47342

Changes

  • Add padding to ResourceIcon (when supplying a standard size)
  • Use 'large' icons for OS and Join Method
  • Add the hostname value to the tooltip (hover)
  • Improve handling of spacing and overflow for version and hostname - version no longer shortens (...) and hostname uses all remaining space with an ellipsis if needed.
  • Lower heading weight to 'regular'

Screenshots

Before
image

After
image

@nicholasmarais1158 nicholasmarais1158 self-assigned this Aug 5, 2025
@nicholasmarais1158 nicholasmarais1158 added machine-id no-changelog Indicates that a PR does not require a changelog entry backport/branch/v17 backport/branch/v18 labels Aug 5, 2025
@nicholasmarais1158 nicholasmarais1158 marked this pull request as ready for review August 5, 2025 17:24
@github-actions github-actions bot requested review from ravicious and rudream August 5, 2025 17:25
@zmb3
Copy link
Copy Markdown
Collaborator

zmb3 commented Aug 5, 2025

image

Vertical alignment looks a little off here, but maybe it's just due to the shape of the Apple icon?

@nicholasmarais1158
Copy link
Copy Markdown
Contributor Author

nicholasmarais1158 commented Aug 5, 2025

image Vertical alignment looks a little off here, but maybe it's just due to the shape of the Apple icon?

@zmb3 Yeah, it's a visual quirk, I think. These assets don't have in-asset padding, so their visual centre can't be corrected individually. The k8s icon has a bit of spacing at the the bottom which serves to exacerbate the effect.

image image

ravicious
ravicious approved these changes Aug 7, 2025
View reviewed changes
Comment thread web/packages/teleport/src/Bots/Details/InstancesPanel.tsx
import { Indicator } from 'design/Indicator/Indicator';
import Text from 'design/Text';
import { H2 } from 'design/Text/Text';
import { fontWeights } from 'design/theme/typography';
Copy link
Copy Markdown
Member

@ravicious ravicious Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this was the exact cause of those unused imports, but: if you set up your editor to run ESLint with --fix on save, then it should automatically remove unused imports for you. Bartosz added an ESLint rule for that a while ago. #54953

Comment thread web/packages/design/src/ResourceIcon/index.tsx
Copy link
Copy Markdown
Member

@ravicious ravicious Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These assets don't have in-asset padding, so their visual centre can't be corrected individually.

Yeah this is such an annoying problem sometimes. 😩

@public-teleport-github-review-bot public-teleport-github-review-bot bot removed the request for review from rudream August 7, 2025 15:46
@nicholasmarais1158
Copy link
Copy Markdown
Contributor Author

nicholasmarais1158 commented Aug 8, 2025

@ravicious Since your review, I've added the Oracle brand logo. I made sure to run pmpm process-icons to optimise the asset. It also caught another recently added asset (strapi) that wasn't optimised. I think I've done it all correctly so I'll get this merged.

@nicholasmarais1158 nicholasmarais1158 added this pull request to the merge queue Aug 8, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Aug 8, 2025
@nicholasmarais1158 nicholasmarais1158 added this pull request to the merge queue Aug 8, 2025
Merged via the queue into master with commit 9e17754 Aug 8, 2025
40 checks passed
@nicholasmarais1158 nicholasmarais1158 deleted the nicholasmarais1158/fix/bot-details-instance-ux branch August 8, 2025 10:11
@backport-bot-workflows
Copy link
Copy Markdown
Contributor

backport-bot-workflows bot commented Aug 8, 2025

@nicholasmarais1158 See the table below for backport results.

Branch Result
branch/v17 Failed
branch/v18 Failed

nicholasmarais1158 added a commit that referenced this pull request Aug 8, 2025
@nicholasmarais1158
fix(web): Bot details instance spacing (#57563)
30ec769 
* 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`
nicholasmarais1158 added a commit that referenced this pull request Aug 8, 2025
@nicholasmarais1158
fix(web): Bot details instance spacing (#57563)
aab88ec 
* 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`
This was referenced Aug 8, 2025
Merged
Merged
github-merge-queue bot pushed a commit that referenced this pull request Aug 12, 2025
@nicholasmarais1158
[v17] feat(web): Link to Bot Details (#57210) (#57543)
46da036 
* 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`
github-merge-queue bot pushed a commit that referenced this pull request Aug 12, 2025
@nicholasmarais1158
[v18] feat(web): Link to Bot Details (#57210) (#57542)
bad0d6e 
* 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`
@alexhemard alexhemard mentioned this pull request Aug 14, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ravicious ravicious ravicious approved these changes

@strideynet strideynet strideynet approved these changes

Assignees

@nicholasmarais1158 nicholasmarais1158

Labels

backport/branch/v17 backport/branch/v18 machine-id no-changelog Indicates that a PR does not require a changelog entry size/sm ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@nicholasmarais1158 @zmb3 @ravicious @strideynet