[UX] Correlation rules page improvements

[xeniatup]

Meta UX issue

The issue is tracking the individual tasks to improve list correlation rules user experience. See a more detailed description for each item below.

Note: the "Log types" search bar filter experience on the Correlation rules page is identical to the respective experience with "Log types" filter on the "Correlations" page. There is an opportunity to contribute the customizations to OUI components.

Page layout:

• 1.1 Implement OuiPage as a wrapper for the page and place OuiPageHeader on the page content panel.

Log types filter:

• 2.1 Indicate the number of available options for “Log types” search bar filter (badge) by passing numFilters in the OuiFilterGroup component.
• 2.2 Implement isClearable set to true for the "Log types" search bar filter when user makes selections that differ from the default ("Select all")
• 2.3 Use sentence case for "Log types" label (as opposed to "Log Types") in the search bar filter (no visual needed).

Log types filter select popover:

• 3.1 Implement OuiButtonGroups with type="single" prop for “Select all” and “Deselect all” options in the “Log types” selector popover.
• 3.2 Implement multi-select experience for the "Log types" popover without moving selected items on the top of the list. Set the default to all log types selected.
• 3.3 Implement selecting/deselecting all items within a group by selecting a group label.

---

Page layout:

1.1 Implement OuiPage as a wrapper for the page to place OuiPageHeader on the page content panel.

Current experience:

Proposed experience:

Log types filter:

2.1 Indicate the number of available options for “Log types” search bar filter (badge) by passing numFilters in the OuiFilterGroup component.

A badge should be added to the search bar filter in order to align with OuiFilterGroup component default behavior.

Current experience:

Proposed experience:

2.2 Implement isClearable set to true for the "Log types" search bar filter when user makes selections that differ from the default ("Select all")

Current experience:

Proposed experience:

Log types filter select popover:

3.1 Implement OuiButtonGroups with type="single" prop for “Select all” and “Deselect all” options in the “Log type” selector popover.

Current experience:

Proposed experience:

3.2. Implement multi-select experience for the "Log types" popover without moving selected items on the top of the list.

Current experience:

Proposed experience:

3.3 Implement selecting/deselecting all items within a group by selecting a group label. Remove the checked property from the group label when at least one option within the group is unselected.

Current experience:
The group label is not clickable and is not selectable.

Proposed experience:

[dblock]

Catch All Triage - 1 2 3 4 5 - thanks for opening this

[xeniatup]

cc @amsiglan