[Security Solution][Alerts] Make rule preview flyout resizable

[e40pud]

Summary

This PR makes Rule Preview component resizable.

Screen.Recording.2023-01-10.at.18.18.20.mov

Closes #146847

[e40pud]

@elasticmachine merge upstream

[e40pud]

@elasticmachine merge upstream

[e40pud]

@elasticmachine merge upstream

[e40pud]

@elasticmachine merge upstream

[e40pud]

@elasticmachine merge upstream

[e40pud]

@ARWNightingale could you check these changes from UI/UX perspective please? We decided to move from having Rule Preview in EuiFlyout to EuiResizableContainer. There were a few issues with flyout component, so we decided to replace it. You can see changes in video recording in description and if you'd like to play with the current state then you can use cloud deployment (let me know if you need help with that).

[e40pud]

@elasticmachine merge upstream

[e40pud]

@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/security-detections-response (Team:Detections and Resp)

[ARWNightingale]

I am just checking with the EUI team in regards to another way we can action the interaction. For me it seems very hidden that the feature is there. Maybe we can just use another button to trigger the container.

[ARWNightingale]

@e40pud I have spoken to the EUI team and we can trigger the container using toggles like this. I suggest we add a toggle that replaces the existing button (pre-exiting rule preview button that was sitting on the top right). This would reduce learning new behaviour for our users. we can still keep the collapse and expand options too.

https://elastic.github.io/eui/#/layout/resizable-container#collapsible-panels-with-external-control

[spong]

Checked out, tested locally, code reviewed and overall functionality LGTM! 🎉 👍 Keyboard navigation works as expected (minus this other bug I found), and reflow perf seems reasonable given the content on the screen.

As @ARWNightingale commented, I agree it would be a good idea to bring back the preview button and have its action be the external control for showing/hiding preview container.

Additionally, a few small UI nits:

1. The min-size on the preview container allows for cutoff of the datepicker action button. Consider increasing the min-width ever so slightly. Or perhaps this is an overflow issue with the timepicker component?

2. If min-height is less than ~870px, the resize icon isn't displayed (since it's mid-way of total page height). Not a big deal once we move back to the dedicated button, and really only an issue when needing to collapse since the bar itself can be used to expand (but only the icon to collapse).

3. Would be nice if we could have the resize-bar extend to the edge of the page on the right (and perhaps the top/bottom of the page as well), but I understand we're working within the SecurityPageWrapper component which is adding this 24px padding. Just looks a little weird floating there (IMO) when comparing to the EUI examples. Not a huge deal either way.

edit: maybe this isn't so bad after all, as it prevents mis-clicks on the scroll bar, and won't be the only CTA for opening the panel once we add the button back. Please ignore this one... 😅

[e40pud]

@elasticmachine merge upstream

[vitaliidm]

@e40pud, thanks for this improvement. It looks good code wise and I have few questions regarding user experience

1. Agree on returning back Preview button, it might not be easy for users to open preview back, once it's closed without Preview button.
2. Maybe we can add a tooltip when preview section is closed when you navigate over closed resize bar? I'm not sure 100% sure it a something worth to do, but we could consider it

Screen.Recording.2023-01-05.at.11.35.38.mov

3. On small resolution new implementation become difficult to use
   Here is old implementation with flyout:

Here is a new one:

Maybe stacking it on each other on small resolution can be viable solution? It seems could be implemented easier than introducing overlay on that resolution. Although, if it possible, I would prefer overlay on small screens and resizable implementation on bigger

[e40pud]

@elasticmachine merge upstream

[e40pud]

@spong @vitaliidm As Alex suggested, I returned the Rule Preview button which fixed most of the concerns. We might need to fix the issue with extremely small screens, though I feel like we could do that in a separate PR. @vitaliidm we cannot really switch from resizable component to overlayed flyout component as it will introduce bigger issues with state being vanished. We already have that issue with the current implementation when user decreases the size of the window to a very narrow one. In that case flyout changes type from pushed to overlayed automatically and removes all the Rule Preview content.

[e40pud]

@elasticmachine merge upstream

[e40pud]

@elasticmachine merge upstream

[vitaliidm]

@e40pud

I've noticed Preview Button is absent on Rule Edit page

@vitaliidm we cannot really switch from resizable component to overlayed flyout component as it will introduce bigger issues with state being vanished. We already have that issue with the current implementation when user decreases the size of the window to a very narrow one. In that case flyout changes type from pushed to overlayed automatically and removes all the Rule Preview content.

I've been thinking of using https://elastic.github.io/eui/#/layout/flex for this purpose, but I don't know how that would work with resizable container. Can you please create a ticket to address small screen issue?

[e40pud]

@elasticmachine merge upstream

[e40pud]

@vitaliidm Good catch with the Rule editing page! Fixed that. Also, here is the ticket to cover UI issues mentioned above.

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 7cdee93
• Cloud Deployment

Failed CI Steps

• FTR Configs #7
• Security Solution Tests #4

Test Failures

• [job] [logs] Security Solution Tests #4 / Add exception using data views from rule details Creates an exception item from alert actions overflow menu
• [job] [logs] FTR Configs #7 / alerting api integration security and spaces enabled - Group 2 Alerts alerts alerts space_1_all_with_restricted_fixture at space1 should schedule task, run alert and schedule actions when appropriate

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	3478	3476	-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	12.7MB	12.7MB	+432.0B

History

• 💛 Build #99844 was flaky fdaff2a
• 💔 Build #99766 failed a8c13d8
• 💚 Build #99268 succeeded 6bb19f2
• 💛 Build #99170 was flaky 1a359a9
• 💚 Build #98098 succeeded f8b07cb

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

cc @e40pud

[vitaliidm]

Thanks for addressing comments

Good catch with the Rule editing page!

Some simple e2e tests could've been very handy here. Do you know if we have any tickets to increase tests coverage for rule preview?

[e40pud]

@vitaliidm not that I'm aware of. Here is the ticket that I created to track tests coverage for Rule Preview feature.