[Security Solution] Create a mock for the Diff tab in rule preview flyout

[nikitaindik]

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

Summary

Create a mockup for the Diff tab that shows the diff between a few types of fields:

• fields related to query (Index patterns, Filters and Custom query)
• long string (Investigation Guide)
• array of strings (Tags)
• complex object field (MITRE ATT&CK™)

We need to display the base version, the current version and the merge preview.

Ideally we want to reuse existing components from the Rule Details page (or modified versions of them) for read-only versions of a field (base and current) and components from Rule Creation page for the merged version.

User should be able to easily understand what was added / removed in the new version of a rule.

Query fields on the Rule Details page

Same query fields on the Rule Creation / Edit page

Note that currently query Language is only visible if you open a dropdown

---

Investigation Guide field on the Rule Details page

Investigation Guide field on the Rule Creation / Edit page

---

Tags field on the Rule Details page

Tags field on the Rule Creation / Edit page

---

MITRE ATT&CK™ field on the Rule Details page

MITRE ATT&CK™ field on the Rule Creation / Edit page

### Designs

Figma file

[elasticmachine]

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

[elasticmachine]

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

[banderror]

Hey @ARWNightingale, I added you to the assignees because we will need your help with finalizing the designs for the Diff tab we're going to show in the Prebuilt rule upgrade flyout.

@nikitaindik Could you schedule a meeting for us three to sync on what needs to be done exactly and why? Also, @approksiu let us know if you'd like to join.

[banderror]

A link to the designs is in the description. There are initial designs for:

• The Updates tab which will show per-field diffs using custom diff components.
• A custom diff component for index patterns
• A custom diff component for custom query
• A custom diff component for setup guide
• A custom diff component for MITRE ATT&CK™ mappings
• A custom diff component for tags
• A custom diff component for rule name
• A custom diff component for filters

This is enough for the dev team to move forward. The plan is to first implement text-based per-field diffs (#166489) using the same mechanism used for showing JSON diff (#169160), and then get back to building custom diff components for those fields where it would significantly improve the UX. For example, such components could be related integrations or MITRE ATT&CK™ mappings.

Closing the ticket as done.

cc @dplumlee @ARWNightingale @approksiu