[Rules] Improve rule types overview

[sorenlouv]

There are currently 30 rule types in the Kibana rule type management page, and this is growing every release. The existing ui doesn't scale, and no longer provides a good overview of the rule types.

Problems with the current layout:

• The rules types are all in a single flat list in a narrow flyout which makes it hard to navigate and find the one of interest.
• The rule types are grouped by category but the headings are small and the sections are non-collapsible. This makes it difficult to get an overview of the various categories of rule types.

Use Security UI as inspiration The security rule types on the other hand are not in a flyout, but instead utilizes the full size of the screen. This, together with the card-layout, makes it much easier to get a quick overview of the security rule types.

Kibana Rules UI

https://user-images.githubusercontent.com/209966/207565986-cd05ad8f-41ae-4707-a29b-1c9526f98524.mp4

Security Rules UI

Suggestions

• Move the Kibana rule types out of the flyout and into the main page
• Use a "card layout" similar to Security UI
• Make each rule type category collapsible - perhaps collapsed by default so the user can get an overview of the categories before expanding a category

To scope this down I suggest that for the first phase, only the rule type selection (and not the the actual rule creation) is moved out of the flyout so that when selecting a rule type it will open the flyout.

Related:

• https://github.com/elastic/kibana/issues/77549
• https://github.com/elastic/kibana/issues/147501

[elasticmachine]

Pinging @elastic/response-ops (Team:ResponseOps)

[elasticmachine]

Pinging @elastic/actionable-observability (Team: Actionable Observability)

[CoenWarmer]

The <EditAlertFlyout /> is part of TriggerActionsUI, which is owned by ResponseOps. Removing from our board.

[XavierM]

@mdefazio can you have a look please? and @shanisagiv1 can you help us to check the priority on this feature?