[Security Solution][Notes] - add note block to alert defaitls flyout header

[PhilippeOberti]

Summary

This PR adds a new section to the alert details flyout header to show how many notes have been added to the event or alert.

Note: This UI change only applies to the alert flyout. For event flyout, as we currently don't have this block section, we need to wait for UIUX to come up with a solution to show this note count

Here are the 2 states of this new section:

Loading	Showing data

The UI updates automatically whenever a new note is added.

Screen.Recording.2024-09-18.at.6.28.04.PM.mov

Also the flyout renders the values on 1 or 2 rows, depending of the width of the flyout itself

Screen.Recording.2024-09-18.at.6.27.08.PM.mov

The PR also introduce a small UI change in the way we're showing the Status, Risk score, Assignees and the new Notes section. Instead of being a single block with vertical divider between the values, we're now show individual blocks.

#193342

TODO

• use the number format component on the notes number

Checklist

• Unit or functional tests were updated or added to match the most common scenarios

[elasticmachine]

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)

[christineweng]

Code and desk testing LGTM! Comparing the current UI, the new design is taller (wider gutter maybe?). What do you think about making it more compact?

[PhilippeOberti]

Code and desk testing LGTM! Comparing the current UI, the new design is taller (wider gutter maybe?). What do you think about making it more compact?

Yeah I noticed this also. I tried a smaller padding size for the EuiPanel but didn't like it.
Here's what I have now (paddingSize="m")

And here is with paddingSize="s"

I had also tried with a custom padding like we were doing in the previous one block way (padding: ${euiTheme.size.m} ${euiTheme.size.s};)

Do you have one that you prefer? At first I didn't like the one with the smallest padding (the middle one above), but it's growing on me now!

[PhilippeOberti]

Ok the decision was to go with the smaller paddingSize="s" for each block, which allowed us to bring the minWidthor each block from 300px down to 280px. This is a gain of 80px for the flyout's width before switching from 1 row 4 blocks to 2 rows 2 blocks each!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: a063f0d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	5811	5813	+2

Async chunks

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

id	before	after	diff
securitySolution	20.4MB	20.4MB	+3.5KB

History

• 💔 Build #235756 failed 899da737478d9091a08b7a34e8df84f9a7d0db31
• 💛 Build #235707 was flaky abec400619f5216cdea0cdec959c753401c516a8
• 💔 Build #235701 failed d9ef96d033ce29dfa1b9be5c26f391f56fc31dab
• 💔 Build #235622 failed 9ace735ec0bd8a275160595ede1454a98c27e902
• 💔 Build #235442 failed 3a747e05109b7e59ffbdc71a9574ba227107e7f6

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation