[Security Solution] Do frontend software design for prebuilt rule upgrade and installation workflows

[banderror]

Epic: https://github.com/elastic/security-team/issues/1974

Summary

Do frontend software design for prebuilt rule upgrade and installation workflows.

Draw a diagram of React components, hooks, contexts, and dependencies between them. Understand what modules will be doing what actions and API requests, where data will be stored, when caches will be invalidated or updated, and how we ensure the logic is testable and extracted from components. Think about dependencies between subdomains and decide where (what subdomains and folders) the new code will live.

Document what will be improved and what approach we will use for the new UIs. Include the following in this documentation:

• The diagram of React components, hooks, contexts, and dependencies between them.
• A comparison of the new architecture to the existing typical FE code. Let's pick the implementation of the Rules table. Describe what's in common, and what's different.
• A performance measurement of the Rules table at the time of working on this ticket. APM traces and rendering flame charts for table loading and some actions.
• An implementation plan, aka created follow-up tickets.

Post the above as one or a few comments here in this ticket. Share it with folks during one of the next Playtime meetings.

[elasticmachine]

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

[elasticmachine]

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

[spong]

Here's a first pass design at outlining the above for discussion in tech time tomorrow.

And corresponding WIP PR (#154403) for migrating components to Storybook and starting to implement the above arch changes.

[banderror]

@spong Great, thanks. Let's discuss it later today.

Based on @peluja1012's plan from the D&R Frontend Architecture Improvements (internal) I added a few other items to do in the description.