[User Profile] Update page header design #205250

kowalczyk-krzysztof · 2024-12-30T12:27:14Z

Summary

This PR wraps each right side item of EuiPageHeaderSection in a EuiFlexItem and assigns grow property based on what the field is. This makes it so fields that are usually longer (e.g email) won't truncate too early.

Closes: #204121

Visuals

Previous	New	Typical user

kowalczyk-krzysztof · 2024-12-30T12:28:17Z

@jeramysoucy @ryankeairns Can I get some feedback on this?

jeramysoucy · 2024-12-31T19:13:34Z

@kowalczyk-krzysztof Sorry for the delay. The truncation part seems fine to me - I think it will support the vast majority of usernames. The fields can still be hidden when resizing, which is a strange behavior. Not sure how to resolve this. Maybe someone from the @elastic/eui-team could offer a suggestion.
cc @azasypkin

Screen.Recording.2024-12-31.at.2.09.04.PM.mov

kowalczyk-krzysztof · 2025-01-02T08:29:32Z

@jeramysoucy Yeah it seems like when you resize the viewport down and then up again, then the max-width on EuiPageHeader is not respected. I'll try to find out why it's happening.

kowalczyk-krzysztof · 2025-01-02T13:03:37Z

@jeramysoucy
It seems that there is something wrong with the onResize function of EuiTextTruncate in this scenario. Assigning width prop to EuiTextTruncate which as per documentation (This callback will not fire if width is passed.) stops the function from firing and fixes this issue. But the goal here was to make the fields have dynamic width based on content so instead I assigned a reasonable max-width to each item. Let me know what you think about it.

elasticmachine · 2025-01-03T13:29:40Z

Pinging @elastic/kibana-security (Team:Security)

jeramysoucy · 2025-01-06T20:59:36Z

I pinged the EUI team for some suggestions here. We'll see what they come up with.

MichaelMarcialis · 2025-01-06T22:21:07Z

Hey, all! Sorry for sticking my nose in here, but since I was involved in this page's design in the past, I figured I'd add my two cents. In short, I think this page's contents have outgrown the current use of EuiDescriptionList components in the header for displaying immutable user information. I imagine we can make a few small tweaks to the header to better accommodate the current content. Here's a super quick mockup with what I was thinking:

Key suggested changes include:

Replace current page title of "Profile" with username. Unless things have changed, I believe username is alway immutable after user creation. As such, it should be OK to use it as the page title for all user types (regardless of manage_security, reserved, SAML, etc.). Page breadcrumbs should be changed to match.
Move the user's full name and email address as simple subtitle text below the page title, separated by a comma.
Keep the user roles displayed as badges in the right of the page header, but remove the parent EuiDescriptionList. Also reduce the "+X more" text down to a simple "+X" in a default badge.

But like I said, this is just my two cents. I'll defer to whomever is responsible for the design of these pages now (@ek-so?), in case they have different thoughts.

kowalczyk-krzysztof · 2025-01-07T05:35:34Z

@MichaelMarcialis
This PR is a followup of changes introduced in #202902 as part of papercuts projects so @ryankeairns is involved in this design. IMO your suggestions are great and they would solve the text wrapping and resizing issues.

@ryankeairns could you take a look at this?

ek-so · 2025-01-07T07:57:52Z

Thanks for pinging @MichaelMarcialis! I also like your suggestion, we could make a better use of the space "Profile" takes up now.

I'm not deeply involved in the papercuts project and don’t have much context here — but I assume the goal is to quickly address some obvious issues. Speaking more broadly, I’d suggest considering whether the whole profile might be worth a second design iteration. A few new elements have been added, and perhaps we could arrange everything in a more effective manner.

acstll · 2025-01-07T10:24:13Z

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

@@ -98,6 +99,18 @@ const rightSideItemCSS = css`
  min-width: 160px;
 `;

+const usernameTextCSS = css`
+  max-width: 160px;


@kowalczyk-krzysztof in case this is the final solution, have you considered using the ch unit? It would be an approximation (not exact) to the actual limit in characters.

@acstll I didn't think of using ch unit at all but it seems like a good idea, I'll check it out if we decide to proeceed with this solution.

jeramysoucy · 2025-01-07T14:25:16Z

Thanks @MichaelMarcialis! I prefer this solution, especially if it resolves both the original papercut and the subsequent issues. I'll review with my team to get additional feedback.

One thing worth noting is that it does not show the title of each piece of information, which the previous interface did. I don't think this is necessarily an issue.

jeramysoucy · 2025-01-07T18:27:26Z

After discussing with the team, we are in favor of Michael's design update, with a few notes/asks:

Re-include the "Roles" title: removing the titles for username, full name, and email is acceptable, as these fields are generally understandable by all. The roles list should have a title to denote what is being listed.
Accessibility: because the titles are removed, we'll want to make sure that accessibility is not negatively impacted. ARIA labels could fill the gap here, but we'll want to test this specifically.
Wrapping: using a comma to separate the full name and email puts both on the same line. In most cases this is fine, but someone with a long full name likely also has a longer email. We'll want to make sure this text wraps well if needed, or that the fields are separated to individual lines. Either option is fine with us.

@MichaelMarcialis @kowalczyk-krzysztof
What do you think?

ryankeairns · 2025-01-07T18:49:20Z

+1 for Michael's suggestions. Greatly simplifies things and looks better to boot :)

kowalczyk-krzysztof · 2025-01-07T23:31:58Z

@jeramysoucy @MichaelMarcialis
I've updated the PR with the requested changes from both comments.

Feel free to play with the draft and let me know what other changes could be made - I guess the typography could use some more styling.

jeramysoucy · 2025-01-09T23:10:08Z

@kowalczyk-krzysztof this looks great to me! And resizing works very well. I'll leave it to @MichaelMarcialis or @ryankeairns to comment on typeface/styling.

ryankeairns

We're close! Two suggested changes, then good to go.

Make 'Roles' a proper header - Wrap with an h3 + an EuiTitle size=xxs outside of that (see below)

**Fix heigh of badges when the '+X' badge is present. The xs size EuiEmptyButton is taller than the badges which results in some extra padding on the bottom. EuiBadge accept an onClick, can we remove the empty button and move the this and datat-test-subj to the EuiBadge instead?

Before

After

MichaelMarcialis · 2025-01-13T19:09:12Z

@kowalczyk-krzysztof this looks great to me! And resizing works very well. I'll leave it to @MichaelMarcialis or @ryankeairns to comment on typeface/styling.

Looking good! Some final suggestions on my part:

Unless dealing with super long strings, the page header's subtitle should be a single line with a comma separating the user's full name and email address. The current nesting of these strings in an EuiFlexGroup is preventing that from ever happening. Can the full name and email instead be populated using the page header component's description prop without the EuiFlexGroup? Also, the comma in between is missing.
For the page header component, use the alignItems="bottom" prop to vertically align the roles with the subheader.
If ya'll feel the "Roles" title is necessary, I'd recommend putting it back in a EuiDescriptionList component with type="column" so that you get that nice bolded title again.

Quick mockup with updates attached.

kowalczyk-krzysztof · 2025-01-13T20:04:40Z

@ryankeairns @MichaelMarcialis
I updated the PR to include both the removal EuiEmptyButton and @MichaelMarcialis requested changes. The <h3> change @ryankeairns suggested is redundant with EuiDescriptionList so I didn't include it.

kowalczyk-krzysztof · 2025-01-13T20:43:21Z

Not sure about those "help texts" - previously they were rendered as EuiIconTip next to labels.

elasticmachine · 2025-01-14T02:06:44Z

💚 Build Succeeded

Buildkite Build
Commit: 2a4df1c

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`security`	565.2KB	563.3KB	-1.8KB

History

💔 Build #266717 failed 911b648
💔 Build #266707 failed c3df70d

cc @kowalczyk-krzysztof

jeramysoucy

LGTM! Thanks for your patience and attention to detail on this. I left one comment regarding the aria-labels, but I don't think we need to hold up this PR for that.

jeramysoucy · 2025-01-14T12:22:35Z

x-pack/platform/plugins/shared/security/public/account_management/user_profile/user_profile.tsx

+                alignItems="bottom"
+                pageTitleProps={{
+                  'data-test-subj': 'username',
+                  'aria-label': i18n.translate(


Nit: I had no luck getting any of these aria labels to announce. I tested this out on main as well, and also could not get the previous implementation to announce. So I don't think this is within scope of this PR, but it is worth noting.
cc @elastic/kibana-accessibility for some guidance

ryankeairns

Thanks for the changes and patience :)

## Summary This PR wraps each `right side item` of `EuiPageHeaderSection` in a `EuiFlexItem` and assigns `grow` property based on what the field is. This makes it so fields that are usually longer (e.g `email`) won't truncate too early. Closes: elastic#204121 ## Visuals | Previous | New | Typical user | |-----------------|-----------------|-----------------| |![previous](https://github.com/user-attachments/assets/a7b2d4cc-5ec5-4b0c-883f-d1918a25942f) | ![new](https://github.com/user-attachments/assets/4447da5d-a8bb-434d-a68c-b6deb3b933a6) | ![typical_user](https://github.com/user-attachments/assets/f4cfd33f-74ce-4683-b391-8dc6c789c45e)

kowalczyk-krzysztof added Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting Feature:Security/User Profile labels Dec 30, 2024

kowalczyk-krzysztof self-assigned this Dec 30, 2024

Make email and full name grow over username and roles

2cf2c63

kowalczyk-krzysztof force-pushed the fix/user-profile-items-grow branch from 0dd7d42 to 2cf2c63 Compare December 30, 2024 14:06

Merge branch 'main' into fix/user-profile-items-grow

c91948d

Add max width to fields

8e88a68

kowalczyk-krzysztof force-pushed the fix/user-profile-items-grow branch from d1a60fc to 8e88a68 Compare January 2, 2025 15:34

kowalczyk-krzysztof marked this pull request as ready for review January 3, 2025 13:29

kowalczyk-krzysztof requested a review from a team as a code owner January 3, 2025 13:29

kc13greiner requested review from kc13greiner and removed request for kc13greiner January 3, 2025 13:58

acstll reviewed Jan 7, 2025

View reviewed changes

kowalczyk-krzysztof marked this pull request as draft January 7, 2025 22:05

kowalczyk-krzysztof closed this Jan 7, 2025

kowalczyk-krzysztof force-pushed the fix/user-profile-items-grow branch from a617687 to 72d3f7b Compare January 7, 2025 22:09

Merge branch 'main' into fix/user-profile-items-grow

6ce6cd4

kowalczyk-krzysztof reopened this Jan 7, 2025

Update design

defdc28

kowalczyk-krzysztof changed the title ~~[User Profile] Make email and full name grow over username and roles~~ [User Profile] Update page header design Jan 7, 2025

Update tests

c2a0fb2

ryankeairns self-requested a review January 13, 2025 18:39

ryankeairns requested changes Jan 13, 2025

View reviewed changes

kowalczyk-krzysztof added 3 commits January 13, 2025 20:28

Merge branch 'main' into fix/user-profile-items-grow

dae4f16

Merge branch 'main' into fix/user-profile-items-grow

e15a0e4

CR changes

c3df70d

kowalczyk-krzysztof marked this pull request as ready for review January 13, 2025 20:04

Translation id fixes

911b648

Test fixes

2a4df1c

jeramysoucy self-requested a review January 14, 2025 11:23

jeramysoucy approved these changes Jan 14, 2025

View reviewed changes

ryankeairns self-requested a review January 14, 2025 15:50

ryankeairns approved these changes Jan 14, 2025

View reviewed changes

kowalczyk-krzysztof merged commit 8e9fea7 into elastic:main Jan 14, 2025
9 checks passed

kibanamachine added the v9.0.0 label Jan 14, 2025

jeramysoucy mentioned this pull request Jan 14, 2025

(Accessibility) User profile header items do not announce #206635

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[User Profile] Update page header design #205250

[User Profile] Update page header design #205250

kowalczyk-krzysztof commented Dec 30, 2024 •

edited

Loading

kowalczyk-krzysztof commented Dec 30, 2024

jeramysoucy commented Dec 31, 2024

kowalczyk-krzysztof commented Jan 2, 2025

kowalczyk-krzysztof commented Jan 2, 2025 •

edited

Loading

elasticmachine commented Jan 3, 2025

jeramysoucy commented Jan 6, 2025

MichaelMarcialis commented Jan 6, 2025

kowalczyk-krzysztof commented Jan 7, 2025 •

edited

Loading

ek-so commented Jan 7, 2025

acstll Jan 7, 2025

kowalczyk-krzysztof Jan 7, 2025

jeramysoucy commented Jan 7, 2025 •

edited

Loading

jeramysoucy commented Jan 7, 2025

ryankeairns commented Jan 7, 2025

kowalczyk-krzysztof commented Jan 7, 2025

jeramysoucy commented Jan 9, 2025 •

edited

Loading

ryankeairns left a comment

MichaelMarcialis commented Jan 13, 2025

kowalczyk-krzysztof commented Jan 13, 2025

kowalczyk-krzysztof commented Jan 13, 2025

elasticmachine commented Jan 14, 2025

jeramysoucy left a comment

jeramysoucy Jan 14, 2025

ryankeairns left a comment

[User Profile] Update page header design #205250

[User Profile] Update page header design #205250

Conversation

kowalczyk-krzysztof commented Dec 30, 2024 • edited Loading

Summary

Visuals

kowalczyk-krzysztof commented Dec 30, 2024

jeramysoucy commented Dec 31, 2024

kowalczyk-krzysztof commented Jan 2, 2025

kowalczyk-krzysztof commented Jan 2, 2025 • edited Loading

elasticmachine commented Jan 3, 2025

jeramysoucy commented Jan 6, 2025

MichaelMarcialis commented Jan 6, 2025

kowalczyk-krzysztof commented Jan 7, 2025 • edited Loading

ek-so commented Jan 7, 2025

acstll Jan 7, 2025

Choose a reason for hiding this comment

kowalczyk-krzysztof Jan 7, 2025

Choose a reason for hiding this comment

jeramysoucy commented Jan 7, 2025 • edited Loading

jeramysoucy commented Jan 7, 2025

ryankeairns commented Jan 7, 2025

kowalczyk-krzysztof commented Jan 7, 2025

jeramysoucy commented Jan 9, 2025 • edited Loading

ryankeairns left a comment

Choose a reason for hiding this comment

Before

After

MichaelMarcialis commented Jan 13, 2025

kowalczyk-krzysztof commented Jan 13, 2025

kowalczyk-krzysztof commented Jan 13, 2025

elasticmachine commented Jan 14, 2025

💚 Build Succeeded

Metrics [docs]

Async chunks

History

jeramysoucy left a comment

Choose a reason for hiding this comment

jeramysoucy Jan 14, 2025

Choose a reason for hiding this comment

ryankeairns left a comment

Choose a reason for hiding this comment

kowalczyk-krzysztof commented Dec 30, 2024 •

edited

Loading

kowalczyk-krzysztof commented Jan 2, 2025 •

edited

Loading

kowalczyk-krzysztof commented Jan 7, 2025 •

edited

Loading

jeramysoucy commented Jan 7, 2025 •

edited

Loading

jeramysoucy commented Jan 9, 2025 •

edited

Loading