[Cloud Security] Asset Inventory - Universal Flyout Header Boxes, Tags, Fields Components

[JordanSh]

Resolves #212862
Resolves #211487
Resolves #212863

Summary

Added header and body content for Universal Flyout
All new components are built to be reuseable and potentially to be exported from a package if we will decide we want to reuse them in other flyouts or components

Screen.Recording.2025-03-02.at.14.12.19.mov

Reuseable header data boxes

• Removed EUI auto resposive which aligns everything in a column when the width is small
• Used container query to add custom responsive behaviour which will work regardless of placement or window size. for example in the current implementation the boxes are used in a resizeable flyout but keep their custom responsiveness.
• Added truncation for all text boxes with unexpected values
• Copy button for ID box

Screen.Recording.2025-02-23.at.18.34.47.mov

This solution will also scale with more/less items and will address situations of uneven amount of items

Screen.Recording.2025-02-23.at.18.36.45.mov

Expandable Badge Group

Screen.Recording.2025-02-25.at.20.16.13.mov

• Logic to limit amount of badges
• Calculate and present remaining badges button with count
• Expand on click
• Tried to calculate amount to show based on container width.. its a tricky business since each badge can be a different width by itself. it will require to go into calculation before the render and such, seems too complicated. for now we will have to decide on an initial value of max badges by number.
• Added inner scrolling for a large amount of badges upon expand:

Screen.Recording.2025-02-26.at.18.22.58.mov

Fields Table

• Table for showing flatten fields from an object
• Paginated, limited to 100 rows per page
• Searchable for both values and fields
• This is just an early state for this table. next PRs will revolve around improvements to match the design

[elasticmachine]

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

[janmonschke]

Only checked THI changes and they look good to me 👍

[albertoblaz]

LGTM!! 🚀

[kapral18]

LGTM for explore

[opauloh]

great work! left a couple of questions and suggestions

[tiansivive]

LGTM from EA! 🚀

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 4e4e3e1

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	7100	7104	+4

Async chunks

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

id	before	after	diff
securitySolution	8.9MB	8.9MB	+4.8KB

History

• 💔 Build #281098 failed ecbe2ca
• 💔 Build #281015 failed c13543f
• 💚 Build #280682 succeeded 8561fab
• 💛 Build #280623 was flaky 80e40df
• 💔 Build #280393 failed ffef597
• 💔 Build #280355 failed bd6dc8b

cc @JordanSh

[opauloh]

💯