Redesign profile switcher by gzdunek · Pull Request #51419 · gravitational/teleport

gzdunek · 2025-01-23T16:43:46Z

This is the part 2/2 of the redesigned profile switcher. The aim of this redesign is to address two issues:

Truncating the cluster name. Currently, items on the list have the format of user@cluster, so when they are long, they become truncated. We can solve this by putting them in separate lines.
It’s challenging to quickly differentiate clusters. Currently, we display the first letter of a username in a purple circle in the top-right corner. However, if you use the same username across all clusters, this indicator remains identical, making it difficult to distinguish between them. To improve it, we could allow the users to assign custom colors to the “avatars”.

This PR is quite large (unfortunately, I also had to refactor the entire Identity story). I tried to extract smaller commits, but it was difficult because there were a lot of changes in all the components. To reduce the number of changed lines, I tried to keep the components in their original files, but I'm going to move things around and rename them in the cleaning PR.

The thing that could be better is accessibility. These list items should probably be buttons to improve keyboard navigation, but since we have logout buttons inside them, I got a HTML error about nesting button inside another button, so I stayed with li and made it tabbable.
Also selecting a color should work better with a keyboard. I will try to improve this one.

Before going through the code, I would like to ask you to test the app first. I would like to get your feedback on the redesigned switcher, perhaps you will find that something does not look / work well, so I will update the implementation.

Changelog: Redesigned the profile switcher in Teleport Connect for a more intuitive experience. Clusters now have distinct colors for easier identification, and readability is improved by preventing truncation of long user and cluster names.

Demo:

new.profile.switcher.mov

ravicious

I'll continue the review tomorrow.

avatus

This works really great for me locally. I love it. I think a min width a little larger would be good for my taste but i know thats subjective.

i know this isnt really crowded but it feels slightly crowded to me.

at any rate, it works great and i think its a nice addition

ravicious

I got to "Put the new identity components together", will continue tomorrow.

ravicious

Good job!

…e lines

…"presentational" one

This was suggested by Kenny, and I think it looks good.

public-teleport-github-review-bot · 2025-01-30T16:01:10Z

@gzdunek See the table below for backport results.

Branch	Result
branch/v17	Failed

* Add mapping of profile color to theme color * Prepare UserIcon to display colors, make it slightly larger * Rewrite single identity item to show icon and user/cluster in separate lines * Render single cluster items in a list * Add color picker * Render active cluster separately, above inactive clusters * Put the new identity components together * Refactor `Identity` story, render the container component instead of "presentational" one * Refresh startup page * Minor style fixes * Add comment about `dataVisualisationColors` * Bring back the original styling of `StaticListItem` * Make the pencil icon hoverable and clickable * Increase min-width from 200 px to 300 px, simplify active cluster layout * Show logout button when any part of `ListItem` is hovered * Remove text from logout button, improve titles * Pass correct index number to `AddClusterItem` * Update comment for `focusGrabber` * Use `useStoreSelector` correctly * Improve accessibility of color picker * Replace Pam icon with plus symbol * Remove unnecessary optional chaining * Align profile status error with user icon * Add story for cluster connect panel * Make user icon letter follow active theme This was suggested by Kenny, and I think it looks good. * Change gap from 11 px to 10 px * Rename profile color -> workspace color (cherry picked from commit 937e4a9)

* Store profile color in workspace (#51417) * Adjust workspace tests to accept persisted workspace type * Store profile color in workspace * Replace manual workspace creation in stories/tests with `addRootClusterWithDoc` * Fix checking if all colors are taken * Add DELETE IN comment * `ProfileColor` -> `WorkspaceColor` * Lint * Prettier * Add TODO about creating workspaces in `setActiveWorkspace` (cherry picked from commit 3b1c689) * Redesign profile switcher (#51419) * Add mapping of profile color to theme color * Prepare UserIcon to display colors, make it slightly larger * Rewrite single identity item to show icon and user/cluster in separate lines * Render single cluster items in a list * Add color picker * Render active cluster separately, above inactive clusters * Put the new identity components together * Refactor `Identity` story, render the container component instead of "presentational" one * Refresh startup page * Minor style fixes * Add comment about `dataVisualisationColors` * Bring back the original styling of `StaticListItem` * Make the pencil icon hoverable and clickable * Increase min-width from 200 px to 300 px, simplify active cluster layout * Show logout button when any part of `ListItem` is hovered * Remove text from logout button, improve titles * Pass correct index number to `AddClusterItem` * Update comment for `focusGrabber` * Use `useStoreSelector` correctly * Improve accessibility of color picker * Replace Pam icon with plus symbol * Remove unnecessary optional chaining * Align profile status error with user icon * Add story for cluster connect panel * Make user icon letter follow active theme This was suggested by Kenny, and I think it looks good. * Change gap from 11 px to 10 px * Rename profile color -> workspace color (cherry picked from commit 937e4a9)

* Add mapping of profile color to theme color * Prepare UserIcon to display colors, make it slightly larger * Rewrite single identity item to show icon and user/cluster in separate lines * Render single cluster items in a list * Add color picker * Render active cluster separately, above inactive clusters * Put the new identity components together * Refactor `Identity` story, render the container component instead of "presentational" one * Refresh startup page * Minor style fixes * Add comment about `dataVisualisationColors` * Bring back the original styling of `StaticListItem` * Make the pencil icon hoverable and clickable * Increase min-width from 200 px to 300 px, simplify active cluster layout * Show logout button when any part of `ListItem` is hovered * Remove text from logout button, improve titles * Pass correct index number to `AddClusterItem` * Update comment for `focusGrabber` * Use `useStoreSelector` correctly * Improve accessibility of color picker * Replace Pam icon with plus symbol * Remove unnecessary optional chaining * Align profile status error with user icon * Add story for cluster connect panel * Make user icon letter follow active theme This was suggested by Kenny, and I think it looks good. * Change gap from 11 px to 10 px * Rename profile color -> workspace color

gzdunek added the backport/branch/v17 label Jan 23, 2025

gzdunek requested review from avatus and ravicious January 23, 2025 16:43

github-actions Bot added size/sm ui labels Jan 23, 2025

github-actions Bot requested review from flyinghermit and kimlisa January 23, 2025 16:44

gzdunek removed request for flyinghermit and kimlisa January 23, 2025 16:49

gzdunek force-pushed the gzdunek/redesign-profiles branch from afc5f21 to 9ac9a2f Compare January 23, 2025 17:26

ravicious reviewed Jan 27, 2025

View reviewed changes

ravicious self-requested a review January 27, 2025 14:17

avatus approved these changes Jan 27, 2025

View reviewed changes

ravicious reviewed Jan 28, 2025

View reviewed changes

ravicious self-requested a review January 28, 2025 13:50

ravicious reviewed Jan 29, 2025

View reviewed changes

gzdunek requested a review from ravicious January 29, 2025 17:37

ravicious approved these changes Jan 30, 2025

View reviewed changes

Comment thread web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx Outdated

gzdunek force-pushed the gzdunek/redesign-profiles branch from 3c172ba to 74720ad Compare January 30, 2025 14:06

Base automatically changed from gzdunek/store-profile-color to master January 30, 2025 15:39

gzdunek added 10 commits January 30, 2025 16:42

Add mapping of profile color to theme color

55c9094

Prepare UserIcon to display colors, make it slightly larger

53ae5ca

Rewrite single identity item to show icon and user/cluster in separat…

a38c33b

…e lines

Render single cluster items in a list

eef851a

Add color picker

38ea693

Render active cluster separately, above inactive clusters

adf1a12

Put the new identity components together

f6b3aae

Refactor Identity story, render the container component instead of …

589a3b6

…"presentational" one

Refresh startup page

2277d20

Minor style fixes

5764532

gzdunek added 15 commits January 30, 2025 16:42

Make the pencil icon hoverable and clickable

c1ca1d5

Increase min-width from 200 px to 300 px, simplify active cluster layout

f832037

Show logout button when any part of ListItem is hovered

a40abe4

Remove text from logout button, improve titles

65129f7

Pass correct index number to AddClusterItem

fd15900

Update comment for focusGrabber

69fd8b1

Use useStoreSelector correctly

850e92e

Improve accessibility of color picker

4dda63b

Replace Pam icon with plus symbol

d7306ce

Remove unnecessary optional chaining

b2ee4c1

Align profile status error with user icon

a633924

Add story for cluster connect panel

56348fd

Make user icon letter follow active theme

ef3bf76

This was suggested by Kenny, and I think it looks good.

Change gap from 11 px to 10 px

08230d0

Rename profile color -> workspace color

2e6b4a4

gzdunek force-pushed the gzdunek/redesign-profiles branch from 74720ad to 2e6b4a4 Compare January 30, 2025 15:42

gzdunek enabled auto-merge January 30, 2025 15:43

gzdunek added this pull request to the merge queue Jan 30, 2025

Merged via the queue into master with commit 937e4a9 Jan 30, 2025

gzdunek deleted the gzdunek/redesign-profiles branch January 30, 2025 16:00

gzdunek mentioned this pull request Jan 30, 2025

[v17] Redesign profile switcher #51654

Merged

This was referenced Jan 30, 2025

Add support for different background and font colors in sessions in Teleport Connect #36754

Closed

guardrails to help differentiate between clusters (tsh) #26156

Open

This was referenced May 29, 2025

Connect: Add a way to manually relogin to a cluster #21385

Closed

Connect: Unrecoverable SSH cert errors after logging in as another user without logging out first #55251

Closed

Conversation

gzdunek commented Jan 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ravicious left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

avatus left a comment

Choose a reason for hiding this comment

Uh oh!

ravicious left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ravicious left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

public-teleport-github-review-bot Bot commented Jan 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gzdunek commented Jan 23, 2025 •

edited

Loading