[User Profile] Update edit profile header layout

[kowalczyk-krzysztof]

Summary

This PR updates layout of User Profile header according to this design.
Since those changes break the layout pattern suggested by EUI, I had to move the content to be children of the header as the EUI docs suggest.

Closes: #200059

[ryankeairns]

Hey @kowalczyk-krzysztof ,
I created a design PR against yours... sometimes this is faster than trying to describe it all in words :)

Feel free to merge it as-is, or re-create these changes in your PR.

[kowalczyk-krzysztof]

Hey @kowalczyk-krzysztof , I created a design PR against yours... sometimes this is faster than trying to describe it all in words :)

Feel free to merge it as-is, or re-create these changes in your PR.

Thanks for that!
For some reason I missed that EuiPageHeaderSection is an actual component and I thought all there is to do use children instead of pageTtitle and rightSideItems props. EuiBadgeGroup is new to me too, but it definitely makes more sense that just a div. I guess I need to read more about EUI 😄

[elasticmachine]

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

[jeramysoucy]

@kowalczyk-krzysztof I noticed that getting the components to wrap didn't work until the window was reduced to a fairly small width. Is this the expected behavior?

[ryankeairns]

@kowalczyk-krzysztof I noticed that getting the components to wrap didn't work until the window was reduced to a fairly small width. Is this the expected behavior?

Could you look into using EuiTextTruncate on the <dd>'s?
EUI docs

[kowalczyk-krzysztof]

Thanks for noticing the wrapping issue @jeramysoucy I'll fix it.

[kowalczyk-krzysztof]

@ryankeairns
I added EuiTextTruncate on item.description but there's still a small issue with wrapping. It seems like the item.title might also need some changes. Any suggestions? Below is a video of what is happening.

chrome_0rWE1FeLDY.mp4

[ryankeairns]

Thanks, it is in better shape with these changes. The last nit I would suggest is to set the<dl> min-width to 160px so that the truncation doesn't happen too soon (i.e. make the text to short to be useful). Other than that, looking good.

[kowalczyk-krzysztof]

@jeramysoucy This PR is ready for a re-review

[jeramysoucy]

Thanks for the updates! This works better for sure!

The only down side I see is that the full name and email are almost sure to be truncated unless a user has a particularly short name and the domain is also short.

Would it be simple to make these two fields able to take up more space based on the content? If not, I think we can live with the truncation as-is. I'll confer with my team in the meantime.

[kowalczyk-krzysztof]

@jeramysoucy I guess different min-width on different fields could work. WDYT @ryankeairns ?

[ryankeairns]

@jeramysoucy I guess different min-width on different fields could work. WDYT @ryankeairns ?

Yeah, that would help.
Ideally, they grow to a max, but I sense this is more work than the papercut this began as.

[jeramysoucy]

Ideally, they grow to a max, but I sense this is more work than the papercut this began as.

@ryankeairns Not trying to make more work, but I agree this would be ideal. If this would be a considerable effort, I am ok with opening a new issue for it, and approving this one with just the "different min-width on different fields" update if that is reasonably achievable.

[kowalczyk-krzysztof]

@jeramysoucy @ryankeairns IMO getting this merged and opening a new issue would be ideal. I'm not sure on the amount of work required but IMO an iterative approach would be best.

[jeramysoucy]

Thanks @kowalczyk-krzysztof and @ryankeairns! Could you open a follow-up issue to address the remaining work, with some commitment to addressing this by a specific future release? We don't want to block this PR, but want to ensure we've got a roadmap for resolving the remaining issues.

[jeramysoucy]

Approving to unblock the immediate paper cut fix.

[kowalczyk-krzysztof]

@jeramysoucy I created a follow-up issue #204121 - feel free to edit it, that's my first issue created for Kibana so I'm not sure if I did everything correctly.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: e40500c

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	540.8KB	541.4KB	+592.0B

History

• 💔 Build #258440 failed 3ec83b3
• 💛 Build #257124 was flaky 5f1f6ad

cc @kowalczyk-krzysztof