fix: diff no changes (#4480)

frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx

@@ -27,15 +27,15 @@ export const SegmentDiff: FC<{
     change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
     currentSegment?: ISegment;
 }> = ({ change, currentSegment }) => {
-    const changeRequestStrategy =
+    const changeRequestSegment =
         change.action === 'deleteSegment' ? undefined : change.payload;
 
     return (
         <StyledCodeSection>
             <EventDiff
                 entry={{
-                    preData: omit(currentSegment, 'sortOrder'),
+                    preData: omit(currentSegment, ['createdAt', 'createdBy']),
-                    data: changeRequestStrategy,
+                    data: changeRequestSegment,
                 }}
             />
         </StyledCodeSection>

frontend/src/component/events/EventDiff/EventDiff.test.tsx

@@ -0,0 +1,49 @@
+import { render } from 'utils/testRenderer';
+import React from 'react';
+import { screen } from '@testing-library/react';
+import EventDiff from './EventDiff';
+
+test('Show no changes', async () => {
+    render(<EventDiff entry={{ preData: [], data: [] }} />);
+
+    expect(screen.getByText('(no changes)')).toBeInTheDocument();
+});
+
+test('Show new data added diff', async () => {
+    render(<EventDiff entry={{ preData: {}, data: { segments: [] } }} />);
+
+    expect(screen.getByText('+ segments: []')).toBeInTheDocument();
+});
+
+test('Show new data removed diff', async () => {
+    render(<EventDiff entry={{ preData: { segments: [] }, data: {} }} />);
+
+    expect(screen.getByText('- segments (deleted)')).toBeInTheDocument();
+});
+
+test('Show new data changes diff', async () => {
+    render(
+        <EventDiff
+            entry={{ preData: { segments: 'a' }, data: { segments: 'b' } }}
+        />
+    );
+
+    expect(screen.getByText('- segments: "a"')).toBeInTheDocument();
+    expect(screen.getByText('+ segments: "b"')).toBeInTheDocument();
+});
+
+test('Show new data only', async () => {
+    render(
+        <EventDiff entry={{ preData: undefined, data: { segments: [] } }} />
+    );
+
+    expect(screen.getByText('{ "segments": [] }')).toBeInTheDocument();
+});
+
+test('Show old data only', async () => {
+    render(
+        <EventDiff entry={{ preData: { segments: [] }, data: undefined }} />
+    );
+
+    expect(screen.getByText('{ "segments": [] }')).toBeInTheDocument();
+});

frontend/src/component/events/EventDiff/EventDiff.tsx

@@ -96,14 +96,14 @@ const EventDiff = ({
         };
     };
 
-    let changes;
+    let changes: any[] = [];
 
     if (diffs) {
         changes = diffs
             .map(buildDiff)
             .sort(sort)
             .map(({ value }) => value);
-    } else {
+    } else if (entry.data == null || entry.preData == null) {
         // Just show the data if there is no diff yet.
         const data = entry.data || entry.preData;
         changes = [