[Security Solution] Discuss UI/UX designs for customizing prebuilt rules

[jpdjere]

Epics: https://github.com/elastic/security-team/issues/1974 (internal), #174168

This ticket contains decisions made in sync meetings about the UI/UX of the different pages/components needed for Milestone 3 of the Prebuilt Rules Customization epic. You can always refer to the designs:

Figma designs

Design alignment of 2024-03-28

Three-Way-Diff component

• Two scenarios of conflict for a specific field, solvable and non-solvable:
  • If solvable: use read-only view as default, and pre-populated with automerged proposal
  • If not-solvable: use editable component view as default, pre-populated with current version
• Both dropdowns should be in the left column. They allow the user to choose two versions for comparison using an inline diff in the left column
• Review update after accepting all field changes:
  • Button called "Preview final update", onclick opens modal with final review in JSON diff style (current vs final versions)
  • Reuse JSON diff component for final review

Rule Updates table and Add Elastic Rules page

• Update filtering to allow by: Elastic rules and Customized Elastic rules
• Rule category wording in filters:
  • How do we differentiate Elastic customized vs Elastic non-customized? Maybe just call customized vs non-customized. Or customized: YES vs NO.
• (Milestone 4) Rework filtering as Alex proposed in the design in the Rule Updates page and Add Elastic Rules page, with the facet sidebar.

Rule Management table

• Explore adding a facet view for filtering, as well. Take into account space constraints.
• If not possible, just add a new "Elastic customized" button to the existing filters

Rule Details page

• How are we indicating what the "rule category" is (non-customized prebuilt VS customized prebuilt VS custom) on the page?
  • Display it somewhere in the header. Design TBD
• For future (not Milestone 3): Which fields were customized? Add icon beside the field to mark it as customized.

Rule Editing page

• For future (not Milestone 3): Which fields were customized? Add icon beside the edit field component to mark it as customized.

Design alignment of 2024-03-06

Alignment between @ARWNightingale @banderror and @jpdjere on changes needed for:

Three Way Diff component for each field:

• Discussed new two-layout concept.
• Changes reflected in the component's ticket: [Security Solution] Rework Update flyout to display all field updates and build Three-Way-Diff field component #171520

Update Flyout

• Rule Preview
  • To see diffs between the current version and the Final Version chosen by the user, we’d like to introduce a subsequent step to field diff solving, which works as a preview, where the current rule field values are displayed against the final rule field values (that is, the end result that the rule will have once the upgrade is performed) with diffs+highlighting.
  • Preview button should only be enabled when all fields are accepted
  • Clicking on the preview button changes the view to a JSON diff view showing the diff between the current view and the Final Version of the rule.
  • We should reuse the JSON diff view component that currently lives in its own tab.

Update Rules Table

• Bulk Rule Update button
  • Should be a top-level table button (like the one currently existing)
  • On click, should fast-forward update ONLY of rules with no conflicts in ANY field
  • Fields with conflicts or rules with no conflicts but with merge proposals should not be merged and should remain in the table. They should be manually reviewed by the user.
• Per-rule Update button(https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU?node-id=3903:88369&mode=design#712826409)](https://www.figma.com/file/gLHm8LpTtSkAUQHrkG3RHU?node-id=3903:88369&mode=design#712826409)
  • There are three scenarios
    • Conflict: should show Review button
    • No conflict, but customizations for at least 1 field (API responded with merge proposal, but we cannot be sure if it makes sense): should show Review button
    • No need to automerge (fast-forward updates like cases AAB, ABA, ABB): should show and Update button and fast-forward merge on click

Rules Table

• Discussed if Elastic prebuilt rules should show some kind of indication that they are customized:
  • Not for now due to space constraints.
  • Instead create a good filtering experience.
• Filters:
  • Allow users to filter rules by custom, Elastic or Elastic customized (Elastic customized will be a subset of Elastic)

Rule Detail page

• How do we indicate that a Prebuilt Rules is customized:
  • Will add to the designs a "Rule category" piece of information that describes this.
  • For now, we won't show which fields were modified or how (this requires introducing a new endpoint that calculates a rules' diff with its base version).

[elasticmachine]

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

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management)

[jpdjere]

UI tickets created, see draft plan for links: #174168 (comment)