[Security Solution][Detections] Add assignees UI into alert's details flyout component (#7662)

[e40pud]

Summary

Closes https://github.com/elastic/security-team/issues/7662

This PR adds Alert user assignment UI within alert's details flyout component.

Screen.Recording.2023-10-10.at.14.48.10.mov

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[PhilippeOberti]

thanks for implementing this @e40pud!

First question is how am I supposed to test this locally? Are there any easy steps I can do to get data to show in the assignee popover dropdown?

I see that the feature was only added to the new alert details flyout (the one using the expandable flyout). Users can still revert to the old flyout using the advanced settings. Are we ok with not adding this new feature to the old flyout as well?

I don't know if UIUX was involved here, but on smaller screens (like Macbook Pro), the header gets even more crowded than it was, and it's easy to get in a state where things aren't really readable anymore

[e40pud]

Thanks for the review @PhilippeOberti !!

First question is how am I supposed to test this locally? Are there any easy steps I can do to get data to show in the assignee popover dropdown?

You need to add users (and login with those users at least once) to be able to see those in the User Profiles dropdown menu.

I see that the feature was only added to the new alert details flyout (the one using the expandable flyout). Users can still revert to the old flyout using the advanced settings. Are we ok with not adding this new feature to the old flyout as well?

I will double check with design and product about this.

I don't know if UIUX was involved here, but on smaller screens (like Macbook Pro), the header gets even more crowded than it was, and it's easy to get in a state where things aren't really readable anymore

Good point! I will check this with design team.

[PhilippeOberti]

First question is how am I supposed to test this locally? Are there any easy steps I can do to get data to show in the assignee popover dropdown?

You need to add users (and login with those users at least once) to be able to see those in the User Profiles dropdown menu.

@e40pud is there anything else that I need to do? As you can see in the video below, I've added 4 users with some roles, logged in with each of them (and verify I can see data), but still can't see them in the Assignee dropdown. I'm getting an error finding users

Screen.Recording.2023-10-13.at.10.38.59.AM.mov

[PhilippeOberti]

First question is how am I supposed to test this locally? Are there any easy steps I can do to get data to show in the assignee popover dropdown?

You need to add users (and login with those users at least once) to be able to see those in the User Profiles dropdown menu.

@e40pud is there anything else that I need to do? As you can see in the video below, I've added 4 users with some roles, logged in with each of them (and verify I can see data), but still can't see them in the Assignee dropdown. I'm getting an error finding users

Ok with a fresh install of ES and Kibana I got it to work, not sure what I did last week. Will resume reviewing the PR shortly :)

[PhilippeOberti]

Looking at the UI a bit more specifically now that I can test locally, here are a few comments:

I see a slight difference in the badge itself, in the mocks I see a white border that I'm not seeing in the code here

Code	Mock

The spacing between the badges when show 2 of them isn't what the mocks are showing

Code	Mocks

The UI when displaying 3+ assignees is also very different from the mocks

Code	Mocks

One more thing, and that one might be tricky to handle but with small screens the UI gets messed up a bit. You might be able to ignore this last point as UIUX is discussing setting a min-width of the flyout that could prevent this from happening...

[e40pud]

@PhilippeOberti thanks for testing! You are right about misalignment with the mockups. Those we discussed and are ok to go with as of right now. I will be looking into those little improvements in a separate PR (borders and overlaps).

Also, which link do you use for mockups? It looks like the one you are looking at are slightly different from what I'm using :-)

Here is what I see for the 3+ users in the mockups here:

[e40pud]

Replaced by #169508