[Security Solution ] expanded flyout - Redux store

[PhilippeOberti]

Summary

This PR is the first of many implementing a new expanded flyout.

Mocks can be found here.

This first part was based on some preliminary work done by @michaelolo24 and can be seen in this draft PR.

Here's what's included in this PR:

• add the securityFlyoutEnabled feature flag while we're working on the expanded flyout over multiple PRs
• setup the redux store (actions, reducers, selectors) to open and close the flyout as well as add and remove flyout panels
• skeleton of the expanded flyout with left, right and preview panels

Commits

• the first commit sets up the work done only within the Security Solution plugin. Protected behind a feature flag, the expanded flyout can be accessed from the Alerts page (by clicking on the expanded button in each table row)
• the second commit moves the code to a Kibana package
• the last commit is there for testing purpose only, it will be removed before merging the PR. It contains example panels for the left, right and previews sections

TODO

• add some missing code documentation
• fix CI errors

How to test

• add xpack.securitySolution.enableExperimental: ['securityFlyoutEnabled'] to the kibana.json file

Screen.Recording.2023-02-01.at.5.10.45.PM.mov

Notes/thoughts

• at the moment the width of each panel is set in pixels. We should probably think about converting it in percentage of the flyout width or something like that... Maybe some UIUX guidance is needed here.
• also the width is currently a property of a panel level, but we might want to handle this at the flyout level instead
• at the moment the code brings the flexibitly to put basically any panel anywhere (meaning we could in theory show the alert detail overview panel on the right, left or preview sections. I'm not sure that's necessary

What's next?

• save/load to/from url
• add the actual content (panels) of the flyout sections (like JSON view, table view...)
• rework the width (pixels vs percentage)

[elasticmachine]

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

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: fc778e9
• Interpreting CI Failures

Failed CI Steps

• Build API Docs
• Check Types
• Security Solution Tests #1
• Security Solution Tests #1
• Security Solution Tests #2
• Security Solution Tests #2
• Security Solution Tests #3
• Security Solution Tests #3
• Security Solution Tests #4
• Security Solution Tests #4

Test Failures

• [job] [logs] Security Solution Tests #1 / Enrichment Custom query rule Should has enrichment fields
• [job] [logs] Security Solution Tests #1 / Enrichment Custom query rule Should has enrichment fields
• [job] [logs] Security Solution Tests #2 / Guided onboarding tour persists tour steps in flyout on flyout toggle step: 3, resets to 3
• [job] [logs] Security Solution Tests #2 / Guided onboarding tour persists tour steps in flyout on flyout toggle step: 3, resets to 3
• [job] [logs] Security Solution Tests #2 / Guided onboarding tour persists tour steps in flyout on flyout toggle step: 4, resets to 4
• [job] [logs] Security Solution Tests #2 / Guided onboarding tour persists tour steps in flyout on flyout toggle step: 4, resets to 4
• [job] [logs] Security Solution Tests #2 / Guided onboarding tour persists tour steps in flyout on flyout toggle step: 7, resets to 7
• [job] [logs] Security Solution Tests #2 / Guided onboarding tour persists tour steps in flyout on flyout toggle step: 7, resets to 7
• [job] [logs] Security Solution Tests #2 / Persistent rules table state preserved after navigation from another page
• [job] [logs] Security Solution Tests #2 / Persistent rules table state preserved after navigation from another page
• [job] [logs] Security Solution Tests #2 / Persistent rules table state preserved after navigation from the rules details page
• [job] [logs] Security Solution Tests #2 / Persistent rules table state preserved after navigation from the rules details page
• [job] [logs] Security Solution Tests #2 / Persistent rules table state reloads the state from the url if the storage was cleared
• [job] [logs] Security Solution Tests #2 / Persistent rules table state reloads the state from the url if the storage was cleared
• [job] [logs] Security Solution Tests #3 / timeline flyout button re-focuses the toggle button when timeline is closed by pressing the Esc key
• [job] [logs] Security Solution Tests #3 / timeline flyout button re-focuses the toggle button when timeline is closed by pressing the Esc key
• [job] [logs] Security Solution Tests #3 / timeline flyout button should render the global search dropdown when the input is focused
• [job] [logs] Security Solution Tests #3 / timeline flyout button should render the global search dropdown when the input is focused
• [job] [logs] Security Solution Tests #4 / url state Do not clears kql when navigating to a new page
• [job] [logs] Security Solution Tests #4 / url state Do not clears kql when navigating to a new page

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	3584	3606	+22

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.9MB	13.1MB	+180.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
securitySolution	52.5KB	52.5KB	+25.0B

History

• 💔 Build #104969 failed df5772f80b2db7a2eedf554f3ef54bcbb669a919
• 💔 Build #104943 failed 3e80a7a9629ba398c95e308b81d7601578025218
• 💔 Build #104933 failed 41b444cead51bf3442f1f0e59dfee2dc473bb5fc
• 💔 Build #104452 failed 6ec58b7

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

[PhilippeOberti]

closing this PR in favor of this one which is similar but doesn't use Redux