fix: support new event format with diff will be done in the UI (#496)

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/package.json

@@ -43,6 +43,7 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/debounce": "1.2.1",
+    "@types/deep-diff": "^1.0.1",
     "@types/enzyme": "3.10.10",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/jest": "27.0.2",
@@ -60,6 +61,7 @@
     "cypress": "8.7.0",
     "date-fns": "2.25.0",
     "debounce": "1.2.1",
+    "deep-diff": "^1.0.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",

frontend/src/component/history/EventLog/EventCard/EventCard.jsx

@@ -1,36 +1,42 @@
 import EventDiff from './EventDiff/EventDiff';
 
 import { useStyles } from './EventCard.styles';
+import ConditionallyRender from '../../../common/ConditionallyRender';
 
 const EventCard = ({ entry, timeFormatted }) => {
     const styles = useStyles();
 
-    const getName = name => {
-        if (name) {
-            return (
-                <>
-                    <dt className={styles.eventLogHeader}>Name: </dt>
-                    <dd>{name}</dd>
-                </>
-            );
-        } else {
-            return null;
-        }
-    };
-
     return (
         <div>
             <dl>
+                <dt className={styles.eventLogHeader}>Event id: </dt>
+                <dd>{entry.id}</dd>
                 <dt className={styles.eventLogHeader}>Changed at:</dt>
                 <dd>{timeFormatted}</dd>
+                <dt className={styles.eventLogHeader}>Event: </dt>
+                <dd>{entry.type}</dd>
                 <dt className={styles.eventLogHeader}>Changed by: </dt>
                 <dd title={entry.createdBy}>{entry.createdBy}</dd>
-                <dt className={styles.eventLogHeader}>Type: </dt>
+                <ConditionallyRender condition={entry.project} show={
-                <dd>{entry.type}</dd>
+                    <>
-                {getName(entry.data.name)}
+                        <dt className={styles.eventLogHeader}>Project: </dt>
+                        <dd>{entry.project}</dd>
+                    </>
+                } />
+                <ConditionallyRender condition={entry.featureName} show={
+                    <>
+                        <dt className={styles.eventLogHeader}>Feature: </dt>
+                        <dd>{entry.featureName}</dd>
+                    </>
+                } />
             </dl>
-            <strong>Change</strong>
+            <ConditionallyRender condition={entry.data || entry.preData} show={
-            <EventDiff entry={entry} />
+                    <>
+                        <strong>Change</strong>
+                        <EventDiff entry={entry} />
+                    </>
+                } />
+            
         </div>
     );
 };

frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { diff } from 'deep-diff';
 
 import { useStyles } from './EventDiff.styles';
 
@@ -19,6 +20,8 @@ const EventDiff = ({ entry }) => {
         N: styles.positive, // added
     };
 
+    const diffs = entry.data && entry.preData ? diff(entry.preData, entry.data) : undefined;
+
     const buildItemDiff = (diff, key) => {
         let change;
         if (diff.lhs !== undefined) {
@@ -75,13 +78,14 @@ const EventDiff = ({ entry }) => {
 
     let changes;
 
-    if (entry.diffs) {
+    if (diffs) {
-        changes = entry.diffs.map(buildDiff);
+        changes = diffs.map(buildDiff);
     } else {
         // Just show the data if there is no diff yet.
+        const data = entry.data || entry.preData;
         changes = (
-            <div className={KLASSES.N}>
+            <div className={entry.data ? KLASSES.N : KLASSES.D}>
-                {JSON.stringify(entry.data, null, 2)}
+                {JSON.stringify(data, null, 2)}
             </div>
         );
     }