[Security Solution] Fix incorrect changes highlighting in diff view

[nikitaindik]

Resolves: #202016

Summary

This PR resolves an issue where the diff view incorrectly marked certain characters as changed (using bold font) in some cases.

Root Cause

The issue arises from a bug in the diff library (v5). The library is used to compute two-way diffs between strings (old field value and new field value), producing an array of change objects that is then used for rendering.

Conditions for the bug:

• diff v5 library is in use (fixed in v6 and above) and DiffMethod.WORDS is passed as a parameter to it.
• The old field value contains a line with an addition separated by a space (see example below).
• The next line contains some changes (additions, deletions, or updates).

For example, for these input strings:

foo bar
spring

foo
sprint

You would expect to see this diff	But you actually see this

A more real-life example

Solution

Switching to DiffMethod.WORDS_WITH_SPACE avoids this issue.
Screenshot showing the difference between DiffMethod.WORDS and DiffMethod.WORDS_WITH_SPACE:

Other changes

• Removed DiffMethod.TRIMMED_LINES since it's now deprecated in the diff library and we are not using it anyways.
• Stopped using the "zip" option since I believe it produces a less readable diff, especially for cases when there's a different number of lines in the original value vs updated value.

Screenshots: with and without "zip" (click to expand)

With the "zip" option (how it was before)

No "zip" (this branch)

Testing

I thoroughly tested with DiffMethod.WORDS_WITH_SPACE across various inputs and scenarios, including:

• Single-line and multi-line strings.
• Numbers, arrays, and objects.
• Additions, deletions, and updates at different positions (start, middle, and end) within and across lines.

I also validated diffs against real prebuilt rules by installing an older Fleet package version and observed no issues.

You can test by trying different input strings and settings in Storybook.
Run Storybook: yarn storybook security_solution.

storybook.mov

You can notice that ComparisonSide stories are broken, but that's unrelated to these changes and needs to be handled separately.

Compatibility with future upgrades

There's an open PR that will upgrade the diff library from v5 to v7. I verified the behavior of DiffMethod.WORDS_WITH_SPACE on v7 and found no differences compared to v5, so it should be safe to upgrade to v7 without any changes on our end.

Work started on 23-Dec-2024.

[elasticmachine]

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

[elasticmachine]

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

[elasticmachine]

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 4f1f40c
• Storybooks Preview

Metrics [docs]

✅ unchanged

History

• 💚 Build #262939 succeeded 51ab627

cc @nikitaindik