[8.16] [Security Solution] Fix incorrect changes highlighting in diff view (#205138) (#205612)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Security Solution] Fix incorrect changes highlighting in diff view
(#205138)](https://github.com/elastic/kibana/pull/205138)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nikita
Indik","email":"nikita.indik@elastic.co"},"sourceCommit":{"committedDate":"2024-12-30T12:38:42Z","message":"[Security
Solution] Fix incorrect changes highlighting in diff view
(#205138)\n\n**Resolves:
https://github.com/elastic/kibana/issues/202016**\n\n## Summary\n\nThis
PR resolves an issue where the diff view incorrectly marked
certain\ncharacters as changed (using bold font) in some cases.\n\n##
Root Cause\nThe issue arises from a bug in the `diff` library (v5). The
library is\nused to compute two-way diffs between strings (old field
value and new\nfield value), producing an array of change objects that
is then used for\nrendering.\n\nConditions for the bug:\n- `diff` v5
library is in use (fixed in v6 and above) and\n`DiffMethod.WORDS` is
passed as a parameter to it.\n- The old field value contains a line with
an addition separated by a\nspace (see example below).\n- The next line
contains some changes (additions, deletions, or\nupdates).\n\n\nFor
example, for these input strings:\n```\nfoo
bar\nspring\n```\n```\nfoo\nsprint\n```\n\n| You would expect to see
this diff | But you actually see this |\n|----------|----------|\n| <img
width=\"119\"
alt=\"expected\"\nsrc=\"https://github.com/user-attachments/assets/c41b3dec-e578-4a12-8eb8-91fbb60d7247\"\n/>
| <img width=\"118\"
alt=\"actual\"\nsrc=\"https://github.com/user-attachments/assets/f2a33fee-5de2-4291-876a-e7575ea07079\"\n/>
|\n\n**A more real-life example**\n<img width=\"1661\"
alt=\"more_real_life\"\nsrc=\"https://github.com/user-attachments/assets/91ebfe93-81ad-45c8-8f9b-e173c2cf940b\"\n/>\n\n\n##
Solution\nSwitching to `DiffMethod.WORDS_WITH_SPACE` avoids this issue.
\nScreenshot showing the difference between `DiffMethod.WORDS`
and\n`DiffMethod.WORDS_WITH_SPACE`:\n<img width=\"675\"
alt=\"words_vs_words_with_space\"\nsrc=\"https://github.com/user-attachments/assets/3c91e1d2-63fc-4fcd-a762-a905878bfc3a\"\n/>\n\n##
Other changes\n- Removed `DiffMethod.TRIMMED_LINES` since it's
now\n[deprecated](https://github.com/kpdecker/jsdiff/pull/486) in the
`diff`\nlibrary and we are not using it anyways.\n- Stopped using the
\"zip\" option since I believe it produces a less\nreadable diff,
especially for cases when there's a different number of\nlines in the
original value vs updated
value.\n\n<details>\n<summary><strong>Screenshots: with and without
\"zip\" (click to\nexpand)</strong></summary>\n<strong>With the \"zip\"
option (how it was before)</strong>\n<img width=\"1918\"
alt=\"zip\"\nsrc=\"https://github.com/user-attachments/assets/272ed849-47d6-4fef-8acc-ab1b22c9f42e\"\n/>\n\n<strong>No
\"zip\" (this branch)</strong>\n<img width=\"1919\"
alt=\"no_zip\"\nsrc=\"https://github.com/user-attachments/assets/417303bf-9570-4ee1-98c5-8a78f59c7956\"\n/>\n</details>\n\n##
Testing\n\nI thoroughly tested with `DiffMethod.WORDS_WITH_SPACE` across
various\ninputs and scenarios, including:\n- Single-line and multi-line
strings.\n- Numbers, arrays, and objects.\n- Additions, deletions, and
updates at different positions (start,\nmiddle, and end) within and
across lines.\n\nI also validated diffs against real prebuilt rules by
installing an\nolder Fleet package version and observed no
issues.\n\nYou can test by trying different input strings and settings
in\nStorybook.\n**Run Storybook**: `yarn storybook
security_solution`.\n\n\nhttps://github.com/user-attachments/assets/0440b73c-a4d7-40cf-9cee-e632146d292e\n\nYou
can notice that `ComparisonSide` stories are broken, but
that's\nunrelated to these changes and needs to be handled
separately.\n\n## Compatibility with future upgrades\n\nThere's an open
[PR](https://github.com/elastic/kibana/pull/202622) that\nwill upgrade
the `diff` library from v5 to v7. I verified the behavior\nof
`DiffMethod.WORDS_WITH_SPACE` on v7 and found no differences
compared\nto v5, so it should be safe to upgrade to v7 without any
changes on our\nend.\n\nWork started on
23-Dec-2024.","sha":"140c2e0ecf9f8a0277699052f9ba472066a0e96d","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Detections
and Resp","Team: SecuritySolution","Feature:Rule
Management","Team:Detection Rule Management","Feature:Prebuilt Detection
Rules","backport:version","v8.18.0"],"number":205138,"url":"https://github.com/elastic/kibana/pull/205138","mergeCommit":{"message":"[Security
Solution] Fix incorrect changes highlighting in diff view
(#205138)\n\n**Resolves:
https://github.com/elastic/kibana/issues/202016**\n\n## Summary\n\nThis
PR resolves an issue where the diff view incorrectly marked
certain\ncharacters as changed (using bold font) in some cases.\n\n##
Root Cause\nThe issue arises from a bug in the `diff` library (v5). The
library is\nused to compute two-way diffs between strings (old field
value and new\nfield value), producing an array of change objects that
is then used for\nrendering.\n\nConditions for the bug:\n- `diff` v5
library is in use (fixed in v6 and above) and\n`DiffMethod.WORDS` is
passed as a parameter to it.\n- The old field value contains a line with
an addition separated by a\nspace (see example below).\n- The next line
contains some changes (additions, deletions, or\nupdates).\n\n\nFor
example, for these input strings:\n```\nfoo
bar\nspring\n```\n```\nfoo\nsprint\n```\n\n| You would expect to see
this diff | But you actually see this |\n|----------|----------|\n| <img
width=\"119\"
alt=\"expected\"\nsrc=\"https://github.com/user-attachments/assets/c41b3dec-e578-4a12-8eb8-91fbb60d7247\"\n/>
| <img width=\"118\"
alt=\"actual\"\nsrc=\"https://github.com/user-attachments/assets/f2a33fee-5de2-4291-876a-e7575ea07079\"\n/>
|\n\n**A more real-life example**\n<img width=\"1661\"
alt=\"more_real_life\"\nsrc=\"https://github.com/user-attachments/assets/91ebfe93-81ad-45c8-8f9b-e173c2cf940b\"\n/>\n\n\n##
Solution\nSwitching to `DiffMethod.WORDS_WITH_SPACE` avoids this issue.
\nScreenshot showing the difference between `DiffMethod.WORDS`
and\n`DiffMethod.WORDS_WITH_SPACE`:\n<img width=\"675\"
alt=\"words_vs_words_with_space\"\nsrc=\"https://github.com/user-attachments/assets/3c91e1d2-63fc-4fcd-a762-a905878bfc3a\"\n/>\n\n##
Other changes\n- Removed `DiffMethod.TRIMMED_LINES` since it's
now\n[deprecated](https://github.com/kpdecker/jsdiff/pull/486) in the
`diff`\nlibrary and we are not using it anyways.\n- Stopped using the
\"zip\" option since I believe it produces a less\nreadable diff,
especially for cases when there's a different number of\nlines in the
original value vs updated
value.\n\n<details>\n<summary><strong>Screenshots: with and without
\"zip\" (click to\nexpand)</strong></summary>\n<strong>With the \"zip\"
option (how it was before)</strong>\n<img width=\"1918\"
alt=\"zip\"\nsrc=\"https://github.com/user-attachments/assets/272ed849-47d6-4fef-8acc-ab1b22c9f42e\"\n/>\n\n<strong>No
\"zip\" (this branch)</strong>\n<img width=\"1919\"
alt=\"no_zip\"\nsrc=\"https://github.com/user-attachments/assets/417303bf-9570-4ee1-98c5-8a78f59c7956\"\n/>\n</details>\n\n##
Testing\n\nI thoroughly tested with `DiffMethod.WORDS_WITH_SPACE` across
various\ninputs and scenarios, including:\n- Single-line and multi-line
strings.\n- Numbers, arrays, and objects.\n- Additions, deletions, and
updates at different positions (start,\nmiddle, and end) within and
across lines.\n\nI also validated diffs against real prebuilt rules by
installing an\nolder Fleet package version and observed no
issues.\n\nYou can test by trying different input strings and settings
in\nStorybook.\n**Run Storybook**: `yarn storybook
security_solution`.\n\n\nhttps://github.com/user-attachments/assets/0440b73c-a4d7-40cf-9cee-e632146d292e\n\nYou
can notice that `ComparisonSide` stories are broken, but
that's\nunrelated to these changes and needs to be handled
separately.\n\n## Compatibility with future upgrades\n\nThere's an open
[PR](https://github.com/elastic/kibana/pull/202622) that\nwill upgrade
the `diff` library from v5 to v7. I verified the behavior\nof
`DiffMethod.WORDS_WITH_SPACE` on v7 and found no differences
compared\nto v5, so it should be safe to upgrade to v7 without any
changes on our\nend.\n\nWork started on
23-Dec-2024.","sha":"140c2e0ecf9f8a0277699052f9ba472066a0e96d"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205138","number":205138,"mergeCommit":{"message":"[Security
Solution] Fix incorrect changes highlighting in diff view
(#205138)\n\n**Resolves:
https://github.com/elastic/kibana/issues/202016**\n\n## Summary\n\nThis
PR resolves an issue where the diff view incorrectly marked
certain\ncharacters as changed (using bold font) in some cases.\n\n##
Root Cause\nThe issue arises from a bug in the `diff` library (v5). The
library is\nused to compute two-way diffs between strings (old field
value and new\nfield value), producing an array of change objects that
is then used for\nrendering.\n\nConditions for the bug:\n- `diff` v5
library is in use (fixed in v6 and above) and\n`DiffMethod.WORDS` is
passed as a parameter to it.\n- The old field value contains a line with
an addition separated by a\nspace (see example below).\n- The next line
contains some changes (additions, deletions, or\nupdates).\n\n\nFor
example, for these input strings:\n```\nfoo
bar\nspring\n```\n```\nfoo\nsprint\n```\n\n| You would expect to see
this diff | But you actually see this |\n|----------|----------|\n| <img
width=\"119\"
alt=\"expected\"\nsrc=\"https://github.com/user-attachments/assets/c41b3dec-e578-4a12-8eb8-91fbb60d7247\"\n/>
| <img width=\"118\"
alt=\"actual\"\nsrc=\"https://github.com/user-attachments/assets/f2a33fee-5de2-4291-876a-e7575ea07079\"\n/>
|\n\n**A more real-life example**\n<img width=\"1661\"
alt=\"more_real_life\"\nsrc=\"https://github.com/user-attachments/assets/91ebfe93-81ad-45c8-8f9b-e173c2cf940b\"\n/>\n\n\n##
Solution\nSwitching to `DiffMethod.WORDS_WITH_SPACE` avoids this issue.
\nScreenshot showing the difference between `DiffMethod.WORDS`
and\n`DiffMethod.WORDS_WITH_SPACE`:\n<img width=\"675\"
alt=\"words_vs_words_with_space\"\nsrc=\"https://github.com/user-attachments/assets/3c91e1d2-63fc-4fcd-a762-a905878bfc3a\"\n/>\n\n##
Other changes\n- Removed `DiffMethod.TRIMMED_LINES` since it's
now\n[deprecated](https://github.com/kpdecker/jsdiff/pull/486) in the
`diff`\nlibrary and we are not using it anyways.\n- Stopped using the
\"zip\" option since I believe it produces a less\nreadable diff,
especially for cases when there's a different number of\nlines in the
original value vs updated
value.\n\n<details>\n<summary><strong>Screenshots: with and without
\"zip\" (click to\nexpand)</strong></summary>\n<strong>With the \"zip\"
option (how it was before)</strong>\n<img width=\"1918\"
alt=\"zip\"\nsrc=\"https://github.com/user-attachments/assets/272ed849-47d6-4fef-8acc-ab1b22c9f42e\"\n/>\n\n<strong>No
\"zip\" (this branch)</strong>\n<img width=\"1919\"
alt=\"no_zip\"\nsrc=\"https://github.com/user-attachments/assets/417303bf-9570-4ee1-98c5-8a78f59c7956\"\n/>\n</details>\n\n##
Testing\n\nI thoroughly tested with `DiffMethod.WORDS_WITH_SPACE` across
various\ninputs and scenarios, including:\n- Single-line and multi-line
strings.\n- Numbers, arrays, and objects.\n- Additions, deletions, and
updates at different positions (start,\nmiddle, and end) within and
across lines.\n\nI also validated diffs against real prebuilt rules by
installing an\nolder Fleet package version and observed no
issues.\n\nYou can test by trying different input strings and settings
in\nStorybook.\n**Run Storybook**: `yarn storybook
security_solution`.\n\n\nhttps://github.com/user-attachments/assets/0440b73c-a4d7-40cf-9cee-e632146d292e\n\nYou
can notice that `ComparisonSide` stories are broken, but
that's\nunrelated to these changes and needs to be handled
separately.\n\n## Compatibility with future upgrades\n\nThere's an open
[PR](https://github.com/elastic/kibana/pull/202622) that\nwill upgrade
the `diff` library from v5 to v7. I verified the behavior\nof
`DiffMethod.WORDS_WITH_SPACE` on v7 and found no differences
compared\nto v5, so it should be safe to upgrade to v7 without any
changes on our\nend.\n\nWork started on
23-Dec-2024.","sha":"140c2e0ecf9f8a0277699052f9ba472066a0e96d"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/205253","number":205253,"state":"MERGED","mergeCommit":{"sha":"2c736a7fcb9e8e8f209f1734562992b39fa2ebe7","message":"[8.x]
[Security Solution] Fix incorrect changes highlighting in diff view
(#205138) (#205253)\n\n# Backport\n\nThis will backport the following
commits from `main` to `8.x`:\n- [[Security Solution] Fix incorrect
changes highlighting in diff
view\n(#205138)](https://github.com/elastic/kibana/pull/205138)\n\n<!---
Backport version: 9.4.3 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT
[{\"author\":{\"name\":\"Nikita\nIndik\",\"email\":\"nikita.indik@elastic.co\"},\"sourceCommit\":{\"committedDate\":\"2024-12-30T12:38:42Z\",\"message\":\"[Security\nSolution]
Fix incorrect changes highlighting in diff
view\n(#205138)\\n\\n**Resolves:\nhttps://github.com/elastic/kibana/issues/202016**\\n\\n##
Summary\\n\\nThis\nPR resolves an issue where the diff view incorrectly
marked\ncertain\\ncharacters as changed (using bold font) in some
cases.\\n\\n##\nRoot Cause\\nThe issue arises from a bug in the `diff`
library (v5). The\nlibrary is\\nused to compute two-way diffs between
strings (old field\nvalue and new\\nfield value), producing an array of
change objects that\nis then used for\\nrendering.\\n\\nConditions for
the bug:\\n- `diff` v5\nlibrary is in use (fixed in v6 and above)
and\\n`DiffMethod.WORDS` is\npassed as a parameter to it.\\n- The old
field value contains a line with\nan addition separated by a\\nspace
(see example below).\\n- The next line\ncontains some changes
(additions, deletions, or\\nupdates).\\n\\n\\nFor\nexample, for these
input
strings:\\n```\\nfoo\nbar\\nspring\\n```\\n```\\nfoo\\nsprint\\n```\\n\\n|
You would expect to see\nthis diff | But you actually see this
|\\n|----------|----------|\\n|
<img\nwidth=\\\"119\\\"\nalt=\\\"expected\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/c41b3dec-e578-4a12-8eb8-91fbb60d7247\\\"\\n/>\n|
<img
width=\\\"118\\\"\nalt=\\\"actual\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/f2a33fee-5de2-4291-876a-e7575ea07079\\\"\\n/>\n|\\n\\n**A
more real-life example**\\n<img
width=\\\"1661\\\"\nalt=\\\"more_real_life\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/91ebfe93-81ad-45c8-8f9b-e173c2cf940b\\\"\\n/>\\n\\n\\n##\nSolution\\nSwitching
to `DiffMethod.WORDS_WITH_SPACE` avoids this issue.\n\\nScreenshot
showing the difference between
`DiffMethod.WORDS`\nand\\n`DiffMethod.WORDS_WITH_SPACE`:\\n<img
width=\\\"675\\\"\nalt=\\\"words_vs_words_with_space\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/3c91e1d2-63fc-4fcd-a762-a905878bfc3a\\\"\\n/>\\n\\n##\nOther
changes\\n- Removed `DiffMethod.TRIMMED_LINES` since
it's\nnow\\n[deprecated](https://github.com/kpdecker/jsdiff/pull/486) in
the\n`diff`\\nlibrary and we are not using it anyways.\\n- Stopped using
the\n\\\"zip\\\" option since I believe it produces a less\\nreadable
diff,\nespecially for cases when there's a different number of\\nlines
in the\noriginal value vs
updated\nvalue.\\n\\n<details>\\n<summary><strong>Screenshots: with and
without\n\\\"zip\\\" (click
to\\nexpand)</strong></summary>\\n<strong>With the \\\"zip\\\"\noption
(how it was before)</strong>\\n<img
width=\\\"1918\\\"\nalt=\\\"zip\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/272ed849-47d6-4fef-8acc-ab1b22c9f42e\\\"\\n/>\\n\\n<strong>No\n\\\"zip\\\"
(this branch)</strong>\\n<img
width=\\\"1919\\\"\nalt=\\\"no_zip\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/417303bf-9570-4ee1-98c5-8a78f59c7956\\\"\\n/>\\n</details>\\n\\n##\nTesting\\n\\nI
thoroughly tested with `DiffMethod.WORDS_WITH_SPACE`
across\nvarious\\ninputs and scenarios, including:\\n- Single-line and
multi-line\nstrings.\\n- Numbers, arrays, and objects.\\n- Additions,
deletions, and\nupdates at different positions (start,\\nmiddle, and
end) within and\nacross lines.\\n\\nI also validated diffs against real
prebuilt rules by\ninstalling an\\nolder Fleet package version and
observed no\nissues.\\n\\nYou can test by trying different input strings
and settings\nin\\nStorybook.\\n**Run Storybook**: `yarn
storybook\nsecurity_solution`.\\n\\n\\nhttps://github.com/user-attachments/assets/0440b73c-a4d7-40cf-9cee-e632146d292e\\n\\nYou\ncan
notice that `ComparisonSide` stories are broken, but\nthat's\\nunrelated
to these changes and needs to be handled\nseparately.\\n\\n##
Compatibility with future upgrades\\n\\nThere's an
open\n[PR](https://github.com/elastic/kibana/pull/202622) that\\nwill
upgrade\nthe `diff` library from v5 to v7. I verified the
behavior\\nof\n`DiffMethod.WORDS_WITH_SPACE` on v7 and found no
differences\ncompared\\nto v5, so it should be safe to upgrade to v7
without any\nchanges on our\\nend.\\n\\nWork started
on\n23-Dec-2024.\",\"sha\":\"140c2e0ecf9f8a0277699052f9ba472066a0e96d\",\"branchLabelMapping\":{\"^v9.0.0$\":\"main\",\"^v8.18.0$\":\"8.x\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"release_note:skip\",\"v9.0.0\",\"Team:Detections\nand
Resp\",\"Team:
SecuritySolution\",\"Feature:Rule\nManagement\",\"Team:Detection Rule
Management\",\"Feature:Prebuilt
Detection\nRules\",\"backport:version\",\"v8.18.0\"],\"title\":\"[Security
Solution] Fix\nincorrect changes highlighting in
diff\nview\",\"number\":205138,\"url\":\"https://github.com/elastic/kibana/pull/205138\",\"mergeCommit\":{\"message\":\"[Security\nSolution]
Fix incorrect changes highlighting in diff
view\n(#205138)\\n\\n**Resolves:\nhttps://github.com/elastic/kibana/issues/202016**\\n\\n##
Summary\\n\\nThis\nPR resolves an issue where the diff view incorrectly
marked\ncertain\\ncharacters as changed (using bold font) in some
cases.\\n\\n##\nRoot Cause\\nThe issue arises from a bug in the `diff`
library (v5). The\nlibrary is\\nused to compute two-way diffs between
strings (old field\nvalue and new\\nfield value), producing an array of
change objects that\nis then used for\\nrendering.\\n\\nConditions for
the bug:\\n- `diff` v5\nlibrary is in use (fixed in v6 and above)
and\\n`DiffMethod.WORDS` is\npassed as a parameter to it.\\n- The old
field value contains a line with\nan addition separated by a\\nspace
(see example below).\\n- The next line\ncontains some changes
(additions, deletions, or\\nupdates).\\n\\n\\nFor\nexample, for these
input
strings:\\n```\\nfoo\nbar\\nspring\\n```\\n```\\nfoo\\nsprint\\n```\\n\\n|
You would expect to see\nthis diff | But you actually see this
|\\n|----------|----------|\\n|
<img\nwidth=\\\"119\\\"\nalt=\\\"expected\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/c41b3dec-e578-4a12-8eb8-91fbb60d7247\\\"\\n/>\n|
<img
width=\\\"118\\\"\nalt=\\\"actual\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/f2a33fee-5de2-4291-876a-e7575ea07079\\\"\\n/>\n|\\n\\n**A
more real-life example**\\n<img
width=\\\"1661\\\"\nalt=\\\"more_real_life\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/91ebfe93-81ad-45c8-8f9b-e173c2cf940b\\\"\\n/>\\n\\n\\n##\nSolution\\nSwitching
to `DiffMethod.WORDS_WITH_SPACE` avoids this issue.\n\\nScreenshot
showing the difference between
`DiffMethod.WORDS`\nand\\n`DiffMethod.WORDS_WITH_SPACE`:\\n<img
width=\\\"675\\\"\nalt=\\\"words_vs_words_with_space\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/3c91e1d2-63fc-4fcd-a762-a905878bfc3a\\\"\\n/>\\n\\n##\nOther
changes\\n- Removed `DiffMethod.TRIMMED_LINES` since
it's\nnow\\n[deprecated](https://github.com/kpdecker/jsdiff/pull/486) in
the\n`diff`\\nlibrary and we are not using it anyways.\\n- Stopped using
the\n\\\"zip\\\" option since I believe it produces a less\\nreadable
diff,\nespecially for cases when there's a different number of\\nlines
in the\noriginal value vs
updated\nvalue.\\n\\n<details>\\n<summary><strong>Screenshots: with and
without\n\\\"zip\\\" (click
to\\nexpand)</strong></summary>\\n<strong>With the \\\"zip\\\"\noption
(how it was before)</strong>\\n<img
width=\\\"1918\\\"\nalt=\\\"zip\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/272ed849-47d6-4fef-8acc-ab1b22c9f42e\\\"\\n/>\\n\\n<strong>No\n\\\"zip\\\"
(this branch)</strong>\\n<img
width=\\\"1919\\\"\nalt=\\\"no_zip\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/417303bf-9570-4ee1-98c5-8a78f59c7956\\\"\\n/>\\n</details>\\n\\n##\nTesting\\n\\nI
thoroughly tested with `DiffMethod.WORDS_WITH_SPACE`
across\nvarious\\ninputs and scenarios, including:\\n- Single-line and
multi-line\nstrings.\\n- Numbers, arrays, and objects.\\n- Additions,
deletions, and\nupdates at different positions (start,\\nmiddle, and
end) within and\nacross lines.\\n\\nI also validated diffs against real
prebuilt rules by\ninstalling an\\nolder Fleet package version and
observed no\nissues.\\n\\nYou can test by trying different input strings
and settings\nin\\nStorybook.\\n**Run Storybook**: `yarn
storybook\nsecurity_solution`.\\n\\n\\nhttps://github.com/user-attachments/assets/0440b73c-a4d7-40cf-9cee-e632146d292e\\n\\nYou\ncan
notice that `ComparisonSide` stories are broken, but\nthat's\\nunrelated
to these changes and needs to be handled\nseparately.\\n\\n##
Compatibility with future upgrades\\n\\nThere's an
open\n[PR](https://github.com/elastic/kibana/pull/202622) that\\nwill
upgrade\nthe `diff` library from v5 to v7. I verified the
behavior\\nof\n`DiffMethod.WORDS_WITH_SPACE` on v7 and found no
differences\ncompared\\nto v5, so it should be safe to upgrade to v7
without any\nchanges on our\\nend.\\n\\nWork started
on\n23-Dec-2024.\",\"sha\":\"140c2e0ecf9f8a0277699052f9ba472066a0e96d\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[\"8.x\"],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v9.0.0\",\"branchLabelMappingKey\":\"^v9.0.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/205138\",\"number\":205138,\"mergeCommit\":{\"message\":\"[Security\nSolution]
Fix incorrect changes highlighting in diff
view\n(#205138)\\n\\n**Resolves:\nhttps://github.com/elastic/kibana/issues/202016**\\n\\n##
Summary\\n\\nThis\nPR resolves an issue where the diff view incorrectly
marked\ncertain\\ncharacters as changed (using bold font) in some
cases.\\n\\n##\nRoot Cause\\nThe issue arises from a bug in the `diff`
library (v5). The\nlibrary is\\nused to compute two-way diffs between
strings (old field\nvalue and new\\nfield value), producing an array of
change objects that\nis then used for\\nrendering.\\n\\nConditions for
the bug:\\n- `diff` v5\nlibrary is in use (fixed in v6 and above)
and\\n`DiffMethod.WORDS` is\npassed as a parameter to it.\\n- The old
field value contains a line with\nan addition separated by a\\nspace
(see example below).\\n- The next line\ncontains some changes
(additions, deletions, or\\nupdates).\\n\\n\\nFor\nexample, for these
input
strings:\\n```\\nfoo\nbar\\nspring\\n```\\n```\\nfoo\\nsprint\\n```\\n\\n|
You would expect to see\nthis diff | But you actually see this
|\\n|----------|----------|\\n|
<img\nwidth=\\\"119\\\"\nalt=\\\"expected\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/c41b3dec-e578-4a12-8eb8-91fbb60d7247\\\"\\n/>\n|
<img
width=\\\"118\\\"\nalt=\\\"actual\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/f2a33fee-5de2-4291-876a-e7575ea07079\\\"\\n/>\n|\\n\\n**A
more real-life example**\\n<img
width=\\\"1661\\\"\nalt=\\\"more_real_life\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/91ebfe93-81ad-45c8-8f9b-e173c2cf940b\\\"\\n/>\\n\\n\\n##\nSolution\\nSwitching
to `DiffMethod.WORDS_WITH_SPACE` avoids this issue.\n\\nScreenshot
showing the difference between
`DiffMethod.WORDS`\nand\\n`DiffMethod.WORDS_WITH_SPACE`:\\n<img
width=\\\"675\\\"\nalt=\\\"words_vs_words_with_space\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/3c91e1d2-63fc-4fcd-a762-a905878bfc3a\\\"\\n/>\\n\\n##\nOther
changes\\n- Removed `DiffMethod.TRIMMED_LINES` since
it's\nnow\\n[deprecated](https://github.com/kpdecker/jsdiff/pull/486) in
the\n`diff`\\nlibrary and we are not using it anyways.\\n- Stopped using
the\n\\\"zip\\\" option since I believe it produces a less\\nreadable
diff,\nespecially for cases when there's a different number of\\nlines
in the\noriginal value vs
updated\nvalue.\\n\\n<details>\\n<summary><strong>Screenshots: with and
without\n\\\"zip\\\" (click
to\\nexpand)</strong></summary>\\n<strong>With the \\\"zip\\\"\noption
(how it was before)</strong>\\n<img
width=\\\"1918\\\"\nalt=\\\"zip\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/272ed849-47d6-4fef-8acc-ab1b22c9f42e\\\"\\n/>\\n\\n<strong>No\n\\\"zip\\\"
(this branch)</strong>\\n<img
width=\\\"1919\\\"\nalt=\\\"no_zip\\\"\\nsrc=\\\"https://github.com/user-attachments/assets/417303bf-9570-4ee1-98c5-8a78f59c7956\\\"\\n/>\\n</details>\\n\\n##\nTesting\\n\\nI
thoroughly tested with `DiffMethod.WORDS_WITH_SPACE`
across\nvarious\\ninputs and scenarios, including:\\n- Single-line and
multi-line\nstrings.\\n- Numbers, arrays, and objects.\\n- Additions,
deletions, and\nupdates at different positions (start,\\nmiddle, and
end) within and\nacross lines.\\n\\nI also validated diffs against real
prebuilt rules by\ninstalling an\\nolder Fleet package version and
observed no\nissues.\\n\\nYou can test by trying different input strings
and settings\nin\\nStorybook.\\n**Run Storybook**: `yarn
storybook\nsecurity_solution`.\\n\\n\\nhttps://github.com/user-attachments/assets/0440b73c-a4d7-40cf-9cee-e632146d292e\\n\\nYou\ncan
notice that `ComparisonSide` stories are broken, but\nthat's\\nunrelated
to these changes and needs to be handled\nseparately.\\n\\n##
Compatibility with future upgrades\\n\\nThere's an
open\n[PR](https://github.com/elastic/kibana/pull/202622) that\\nwill
upgrade\nthe `diff` library from v5 to v7. I verified the
behavior\\nof\n`DiffMethod.WORDS_WITH_SPACE` on v7 and found no
differences\ncompared\\nto v5, so it should be safe to upgrade to v7
without any\nchanges on our\\nend.\\n\\nWork started
on\n23-Dec-2024.\",\"sha\":\"140c2e0ecf9f8a0277699052f9ba472066a0e96d\"}},{\"branch\":\"8.x\",\"label\":\"v8.18.0\",\"branchLabelMappingKey\":\"^v8.18.0$\",\"isSourceBranch\":false,\"state\":\"NOT_CREATED\"}]}]\nBACKPORT-->\n\nCo-authored-by:
Nikita Indik <nikita.indik@elastic.co>"}}]}] BACKPORT-->

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/json_diff/diff_view.stories.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { Story } from '@storybook/react';
+import type { DiffViewProps } from './diff_view';
+import { DiffView } from './diff_view';
+import { DiffMethod } from './mark_edits';
+
+export default {
+  component: DiffView,
+  title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/DiffView',
+  argTypes: {
+    oldSource: {
+      control: 'text',
+    },
+    newSource: {
+      control: 'text',
+    },
+    diffMethod: {
+      control: 'select',
+      options: [
+        DiffMethod.WORDS_WITH_SPACE,
+        DiffMethod.WORDS,
+        DiffMethod.CHARS,
+        DiffMethod.LINES,
+        DiffMethod.SENTENCES,
+      ],
+      defaultValue: DiffMethod.WORDS_WITH_SPACE,
+    },
+    zip: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+const Template: Story<DiffViewProps> = ({ oldSource, newSource, diffMethod, zip }) => {
+  return (
+    <DiffView
+      oldSource={oldSource}
+      newSource={newSource}
+      diffMethod={diffMethod}
+      zip={zip}
+      viewType="unified"
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  oldSource:
+    'from logs-endpoint.alerts-*\n| where event.code in ("malicious_file", "memory_signature", "shellcode_thread") and rule.name is not null\n| keep host.id, rule.name, event.code\n| stats hosts = count_distinct(host.id) by rule.name, event.code\n| where hosts >= 3',
+  newSource:
+    'from logs-endpoint.alerts-*\n| where event.code in ("malicious_file", "memory_signature", "shellcode_thread")\n| stats hosts = count_distinct(host.id)\n| where hosts >= 3',
+};

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/json_diff/diff_view.tsx

@@ -25,7 +25,6 @@ import type {
   HunkTokens,
 } from 'react-diff-view';
 import unidiff from 'unidiff';
-import type { Change } from 'diff';
 import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui';
 import { Hunks } from './hunks';
 import { markEdits, DiffMethod } from './mark_edits';
@@ -89,7 +88,7 @@ const useTokens = (
 
   try {
     /*
-      Synchroniously apply all the enhancers to the hunks and return an array of tokens.
+      Synchronously apply all the enhancers to the hunks and return an array of tokens.
     */
     return tokenize(hunks, options);
   } catch (ex) {
@@ -128,7 +127,7 @@ const convertChangesToUnifiedDiffString = (changes: Change[]): string => {
   return unifiedDiff;
 };
 
-const convertToDiffFile = (oldSource: string, newSource: string) => {
+const convertToDiffFile = (oldSource: string, newSource: string, zip?: boolean) => {
   /*
     "diffLines" call converts two strings of text into an array of Change objects.
   */
@@ -156,7 +155,7 @@ const convertToDiffFile = (oldSource: string, newSource: string) => {
     Hunks represent changed lines of code plus a few unchanged lines above and below for context.
   */
   const [diffFile] = parseDiff(unifiedDiff, {
-    nearbySequences: 'zip',
+    nearbySequences: zip ? 'zip' : undefined,
   });
 
   return diffFile;
@@ -255,18 +254,25 @@ const CustomStyles: FC<PropsWithChildren<unknown>> = ({ children }) => {
   );
 };
 
-interface DiffViewProps extends Partial<DiffProps> {
+export interface DiffViewProps extends Partial<DiffProps> {
   oldSource: string;
   newSource: string;
   diffMethod?: DiffMethod;
   viewType?: 'split' | 'unified';
+  /*
+    When "zip" is set to true, the change lines will be rendered in an interlaced style.
+    For an example, refer to:
+    https://github.com/otakustay/react-diff-view/blob/8a2dbdf97af0890aff6e563ed435e7da13c5e7b1/README.md#parse-diff-text
+  */
+  zip?: boolean;
 }
 
 export const DiffView = ({
   oldSource,
   newSource,
-  diffMethod = DiffMethod.WORDS,
+  diffMethod = DiffMethod.WORDS_WITH_SPACE,
   viewType = 'split',
+  zip = false,
 }: DiffViewProps) => {
   /*
     "react-diff-view" components consume diffs not as a strings, but as something they call "hunks".
@@ -277,7 +283,10 @@ export const DiffView = ({
   /*
     "diffFile" is essentially an object containing an array of hunks plus some metadata.
   */
-  const diffFile = useMemo(() => convertToDiffFile(oldSource, newSource), [oldSource, newSource]);
+  const diffFile = useMemo(
+    () => convertToDiffFile(oldSource, newSource, zip),
+    [oldSource, newSource, zip]
+  );
 
   /*
     Sections of diff without changes are hidden by default, because they are not present in the "hunks" array.

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/json_diff/mark_edits.tsx

@@ -38,7 +38,6 @@ export enum DiffMethod {
   WORDS = 'diffWords',
   WORDS_WITH_SPACE = 'diffWordsWithSpace',
   LINES = 'diffLines',
-  TRIMMED_LINES = 'diffTrimmedLines',
   SENTENCES = 'diffSentences',
   CSS = 'diffCss',
 }
@@ -262,7 +261,7 @@ function diffChangeBlock(
  * The format of the strings is as follows:
  */
 export function markEdits(hunks: HunkData[], diffMethod: DiffMethod): TokenizeEnhancer {
-  /* 
+  /*
     changeBlocks is an array that contains information about the lines that have changes (additions or deletions).
     Unchanged lines are not included.
   */