From 2e460b16fdba556bf3f20acf92ad9e405e41990e Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 19 Jun 2025 10:08:28 +0200
Subject: [PATCH] Chore(1 3836)/no changes in json diff (#10175)

Contains several improvements for the new json diff render:

1. Removes extra left-inset of the +/- icons for changed lines. This
means that the +/- icons will now show up in the change request popover,
whereas they were hidden (pushed outside the frame) previously).
2. Change styling based on whether it's an edit or a full replacement.
If it's an edit, keep the +/- icons per changed line. If it's a full
replacement (e.g. the object has been created or deleted), don't show
the +/- icons, and make the whole object the right color (specifically:
this also colors the surrounding braces that weren't colored before).
Not showing +/- for new/deleted objects is in line with how the previous
system worked.
3. If there are no changes, show `(no changes)`, as we did before.
Unfortunately, I don't think the component has any fallback for this
case, so we can't render arbitrary code. However, when it does happen,
the .diff container doesn't have any children, so we can render it with
CSS. It's not ideal for accessibility reasons etc, but it's better than
nothing, I think.
4. Adds a +/- to the button to open and close the full diff to indicate
better what it does. Also, only shows the button if it's an edit. When
it's a replacement, we show the full diff anyway, so the button has no
effect.
5. Does not exclude any keys by default anymore, but makes it a
parameter

## Left inset change + no excluded keys:
Before:
<img width="277" alt="image"
src="https://github.com/user-attachments/assets/65d4c972-ccbd-4202-b162-1c94a49920cc"
/>


After:
<img width="462" alt="image"
src="https://github.com/user-attachments/assets/14408bf2-cc00-4710-869b-83479d72f2f3"
/>


## Edit vs full replacement
Before:
<img width="324" alt="image"
src="https://github.com/user-attachments/assets/5a7f6727-f4a6-40f1-becf-184f2f390e9b"
/>

(notice the surrounding braces (`{}`) aren't the right color)
<img width="339" alt="image"
src="https://github.com/user-attachments/assets/65247bde-469d-4408-90da-3867c1b4d650"
/>


After:
<img width="364" alt="image"
src="https://github.com/user-attachments/assets/972fe602-fe2a-46b3-ba52-d13e4427db5b"
/>


<img width="374" alt="image"
src="https://github.com/user-attachments/assets/0d2f194b-3194-469b-9096-9a946c362178"
/>


## No changes
Before:
<img width="276" alt="image"
src="https://github.com/user-attachments/assets/dac79332-1739-4ee8-91ca-c0e5950424fa"
/>


After:
<img width="271" alt="image"
src="https://github.com/user-attachments/assets/23f70e8e-c9ef-42e0-9862-303c5a7df0b9"
/>

(The show all props button will show the whole object regardless):
<img width="352" alt="image"
src="https://github.com/user-attachments/assets/c2f7cba0-3afa-4c54-aa5a-6e01120a5eee"
/>


## Button
Before:
<img width="240" alt="image"
src="https://github.com/user-attachments/assets/45201048-5946-41fe-999c-b95c6617b384"
/>


After:
<img width="274" alt="image"
src="https://github.com/user-attachments/assets/68cf96cf-4536-47db-903e-2e7884fa045f"
/>
---
 .../component/events/EventDiff/EventDiff.tsx  | 52 +++++++++++++++----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/events/EventDiff/EventDiff.tsx b/frontend/src/component/events/EventDiff/EventDiff.tsx
index c0b3c8dfd9..f5bc7bf8fd 100644
--- a/frontend/src/component/events/EventDiff/EventDiff.tsx
+++ b/frontend/src/component/events/EventDiff/EventDiff.tsx
@@ -23,6 +23,7 @@ interface IEventDiffProps {
      * @deprecated remove with flag improvedJsonDiff
      */
     sort?: (a: IEventDiffResult, b: IEventDiffResult) => number;
+    excludeKeys?: string[];
 }
 
 const DiffStyles = styled('div')(({ theme }) => ({
@@ -37,7 +38,6 @@ const DiffStyles = styled('div')(({ theme }) => ({
             position: 'absolute',
             left: 0,
             top: 0,
-            marginLeft: '-10px',
         },
     },
 
@@ -47,35 +47,65 @@ const DiffStyles = styled('div')(({ theme }) => ({
             content: '"+"',
         },
     },
+
     '.deletion': {
         color: theme.palette.eventLog.diffSub,
         '::before': {
             content: '"-"',
         },
     },
+
+    '&[data-change-type="replacement"]': {
+        ':has(.addition)': {
+            color: theme.palette.eventLog.diffAdd,
+        },
+        ':has(.deletion)': {
+            color: theme.palette.eventLog.diffSub,
+        },
+        '.addition::before, .deletion::before': {
+            content: 'none',
+        },
+    },
+
+    '.diff:not(:has(*))': {
+        '::before': {
+            content: '"(no changes)"',
+        },
+    },
 }));
 
-const NewEventDiff: FC<IEventDiffProps> = ({ entry }) => {
+const ButtonIcon = styled('span')(({ theme }) => ({
+    marginInlineEnd: theme.spacing(0.5),
+}));
+
+const NewEventDiff: FC<IEventDiffProps> = ({ entry, excludeKeys }) => {
+    const changeType = entry.preData && entry.data ? 'edit' : 'replacement';
+    const showExpandButton = changeType === 'edit';
     const [full, setFull] = useState(false);
     const diffId = useId();
 
     return (
         <>
-            <Button
-                onClick={() => setFull(!full)}
-                aria-controls={diffId}
-                aria-expanded={full}
-            >
-                {full ? 'Show only changed properties' : 'Show all properties'}
-            </Button>
-            <DiffStyles id={diffId}>
+            {showExpandButton ? (
+                <Button
+                    onClick={() => setFull(!full)}
+                    aria-controls={diffId}
+                    aria-expanded={full}
+                >
+                    <ButtonIcon aria-hidden>{full ? '-' : '+'}</ButtonIcon>
+                    {full
+                        ? 'Show only changed properties'
+                        : 'Show all properties'}
+                </Button>
+            ) : null}
+            <DiffStyles data-change-type={changeType} id={diffId}>
                 <JsonDiffComponent
                     jsonA={(entry.preData ?? {}) as JsonValue}
                     jsonB={(entry.data ?? {}) as JsonValue}
                     jsonDiffOptions={{
                         full: full,
                         maxElisions: 2,
-                        excludeKeys: ['id', 'createdAt', 'updatedAt'],
+                        excludeKeys: excludeKeys,
                     }}
                 />
             </DiffStyles>