[Epic][Security Solution][Investigations][Tech Debt] - Update timeline redux

[michaelolo24]

Background:

Currently within the security_solution, there is a mixture of Redux and context used to manage visual logic or manage prop drilling. In addition, react hooks are used to manage query fetching as well. This mixture of state management, query fetching, and ui state management may have negative rendering performance impacts as well as subtle errors masked by the different interacting forms of state. The effects are somewhat unknown at this point, but from a developer experience standpoint this architecture makes it harder to build upon. The goal of this work will be to update the timeline architecture to make better use of existing redux patterns and centralize state management in a more logical manner.

Existing references

Context:

• StatefulEventContext
• DragDropContext
• TimelineContext
• ActiveTimelineContext -- this may not actually be used anywhere?

Data fetching hooks

• useTimelineEvents
• useTimelineEventDetails -- This one is primarily used in the security alert flyout
• useTimelineKpis
• All Other Containers -- some of which are utilized in the epics detailed below rather than having their own hook

Existing middleware

• see: https://github.com/elastic/kibana/tree/main/x-pack/plugins/security_solution/public/timelines/store/timeline
• timeline epic

Tasks

Beta Give feedback

1. Investigate if redux observable middleware is actually necessary for any of the epics here
2. Migrate aforementioned epics to standard thunk middleware ([SecuritySolution] Remove usage of redux observables from the localstorage and change epics #175450).
3. [Tech Debt][Security Solution][Investigations] Replace redux-observable with redux-thunk and middlewares #175427
   4 of 4
   Team:Threat Hunting:Investigations technical debt +2
   
4. Move comment -> pin event logic to middleware. Context: [SecuritySolution] Add timeline middleware tests #178009 (comment) ([SecuritySolution] Fix behavior of pinnend events and comments on unsaved timelines #178212)
5. Remove the timeline note's timelineVersion prop. It's not used and creates version confusion. ([SecuritySolution] Fix behavior of pinnend events and comments on unsaved timelines #178212)
6. Investigate migrating to a standard tool such as RTK for redux state management: https://redux-toolkit.js.org. Specifcially look into syncing reducers, as migrating to RTK may require migrating all reducers to immer, which should not be part of this work.
7. Develop technical design document for new architecture
8. Develop plan for any localStorage or UI migrations that may be necessary
9. Develop plan for adding APM and telemetry around key user actions
10. Implement migration for timeline store (consider maintaining architecture for a multi-timeline environment)
11. Implement migration for timeline selectors
12. Migrate data fetching from hook containers to redux middleware to populate data slice of state and create actions to trigger fetching
13. Confirm localStorage saving still works as expected
14. Confirm UI state is working as expected
15. Confirm queries only run once or as many times as expected by the ui interactions

Acceptance Criteria

• TBD

[elasticmachine]

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