From 9172ee315a6866df6238efc2d30f13b0d4733461 Mon Sep 17 00:00:00 2001
From: JeremiahUy <jeremiah.augie.uy@nav.no>
Date: Wed, 11 Oct 2023 13:30:05 +0200
Subject: [PATCH 1/3] UPDATE: package for json view

---
 apps/frontend/package.json                    |  2 +-
 .../admin/audit/AuditRecentTable.tsx          |  4 +--
 .../src/components/admin/audit/AuditView.tsx  | 25 ++++++++-----------
 apps/frontend/src/main.css                    |  3 ++-
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 254028531..fb6f09bff 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -10,7 +10,6 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@microlink/react-json-view": "^1.22.2",
     "@navikt/aksel-icons": "^5.6.0",
     "@navikt/ds-css": "^5.6.0",
     "@navikt/ds-react": "^5.6.0",
@@ -41,6 +40,7 @@
     "react-markdown-editor-lite": "^1.3.4",
     "react-player": "^2.13.0",
     "react-process-string": "^1.2.0",
+    "react18-json-view": "^0.2.6",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "styletron-engine-atomic": "^1.5.0",
diff --git a/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx b/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx
index 46dac1d75..5d5f5e30f 100644
--- a/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx
+++ b/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx
@@ -19,7 +19,7 @@ import {getAudits} from '../../../api/AuditApi'
 import {Cell, Row, Table} from '../../common/Table'
 import * as _ from 'lodash'
 import {theme} from '../../../util'
-import ReactJson from '@microlink/react-json-view'
+import JsonView from 'react18-json-view'
 import {ObjectLink} from '../../common/RouteLink'
 import {CustomizedStatefulSelect} from '../../common/CustomizedSelect'
 import {buttonContentStyle} from '../../common/Button'
@@ -137,7 +137,7 @@ export const AuditRecentTable = (props: { show: boolean; tableType?: ObjectType
                       accessibilityType="tooltip"
                       overrides={{ Body: { style: { width: '80%' } } }}
                       placement={PLACEMENT.leftBottom}
-                      content={<ReactJson src={audit.data} name={null} />}
+                      content={<JsonView src={audit.data}/>}
                     >
                       <Button
                         size="compact"
diff --git a/apps/frontend/src/components/admin/audit/AuditView.tsx b/apps/frontend/src/components/admin/audit/AuditView.tsx
index c85a9841f..dbeddb678 100644
--- a/apps/frontend/src/components/admin/audit/AuditView.tsx
+++ b/apps/frontend/src/components/admin/audit/AuditView.tsx
@@ -1,6 +1,6 @@
 import moment from 'moment'
 import { Block } from 'baseui/block'
-import ReactJson from '@microlink/react-json-view'
+import JsonView from 'react18-json-view'
 import React, { useEffect, useState } from 'react'
 import { LabelLarge } from 'baseui/typography'
 import { AuditActionIcon, AuditLabel as Label } from './AuditComponents'
@@ -26,20 +26,15 @@ type AuditViewProps = {
   viewId: (id: string) => void
 }
 
-function initialOpen(auditLog?: AuditLog, auditId?: string) {
-  return auditLog?.audits.map((o, i) => i === 0 || o.id === auditId) || []
-}
-
 export const AuditView = (props: AuditViewProps) => {
   const { auditLog, auditId, loading, viewId } = props
   const refs = useRefs<HTMLDivElement>(auditLog?.audits.map((al) => al.id) || [])
-  const [open, setOpen] = useState(initialOpen(auditLog, auditId))
+  const [openAll, setOpenAll] = useState(false)
 
   useEffect(() => {
     if (auditId && auditLog && refs[auditId] && auditId !== auditLog.audits[0].id) {
       refs[auditId].current!.scrollIntoView({ block: 'start' })
     }
-    setOpen(initialOpen(auditLog, auditId))
   }, [auditId, auditLog])
 
   const logFound = auditLog && !!auditLog.audits.length
@@ -59,8 +54,8 @@ export const AuditView = (props: AuditViewProps) => {
               <Label label={intl.audits}>{auditLog?.audits.length}</Label>
             </Block>
             <Block display="flex">
-              <Button size="compact" kind="tertiary" marginRight onClick={() => setOpen(auditLog!.audits.map(() => true))}>
-                Åpne alle
+              <Button size="compact" kind="tertiary" marginRight onClick={() => setOpenAll(!openAll)}>
+                {openAll ? 'Lukke' : 'Åpne'} alle
               </Button>
               {newestAudit?.action !== AuditAction.DELETE && (
                 <StatefulTooltip content={() => intl.view} placement={PLACEMENT.top}>
@@ -132,12 +127,14 @@ export const AuditView = (props: AuditViewProps) => {
                       </StatefulPopover>
                     </Block>
                   </Block>
-                  <ReactJson
+                  <JsonView
                     src={audit.data}
-                    name={null}
-                    shouldCollapse={(p) => p.name === null && !open[index]}
-                    onSelect={(sel) => {
-                      ; (sel.name === 'id' || sel.name?.endsWith('Id')) && viewId(sel.value as string)
+                    collapsed={() => {
+                      if(openAll) {
+                        return false
+                      } else {
+                        return index === 0 ? false : true
+                      }
                     }}
                   />
                 </Block>
diff --git a/apps/frontend/src/main.css b/apps/frontend/src/main.css
index 687f87ad0..4e2bd8003 100644
--- a/apps/frontend/src/main.css
+++ b/apps/frontend/src/main.css
@@ -1,4 +1,5 @@
 @import "tailwindcss/base";
 @import "@navikt/ds-css";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
\ No newline at end of file
+@import "tailwindcss/utilities";
+@import "react18-json-view/src/style.css";
\ No newline at end of file

From 9620e328834b79c3ae7bd9f77837ade229f4668a Mon Sep 17 00:00:00 2001
From: Lord Andre Groseth <andregroseth@hotmail.com>
Date: Thu, 12 Oct 2023 10:44:11 +0200
Subject: [PATCH 2/3] CHANGE: react18-json-view TO react-json-view-lite

Co-authored-by: Jeremiah Uy <jeremiah.augie.uy@nav.no>
Co-authored-by: PaulMartinKokseter <Paul.martin.kokseter@nav.no>>
Co-authored-by: Shayan <shayan.yazdanmehr@nav.no>
---
 apps/frontend/package.json                             |  2 +-
 .../src/components/admin/audit/AuditRecentTable.tsx    |  4 ++--
 apps/frontend/src/components/admin/audit/AuditView.tsx | 10 +++++-----
 apps/frontend/src/main.css                             |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index fb6f09bff..9c94f609e 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -36,11 +36,11 @@
     "react-diff-viewer-continued": "^3.2.6",
     "react-dom": "^18.2.0",
     "react-draft-wysiwyg": "^1.15.0",
+    "react-json-view-lite": "^1.1.0",
     "react-markdown": "^9.0.0",
     "react-markdown-editor-lite": "^1.3.4",
     "react-player": "^2.13.0",
     "react-process-string": "^1.2.0",
-    "react18-json-view": "^0.2.6",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "styletron-engine-atomic": "^1.5.0",
diff --git a/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx b/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx
index 5d5f5e30f..13ed63313 100644
--- a/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx
+++ b/apps/frontend/src/components/admin/audit/AuditRecentTable.tsx
@@ -19,7 +19,7 @@ import {getAudits} from '../../../api/AuditApi'
 import {Cell, Row, Table} from '../../common/Table'
 import * as _ from 'lodash'
 import {theme} from '../../../util'
-import JsonView from 'react18-json-view'
+import { JsonView} from 'react-json-view-lite'
 import {ObjectLink} from '../../common/RouteLink'
 import {CustomizedStatefulSelect} from '../../common/CustomizedSelect'
 import {buttonContentStyle} from '../../common/Button'
@@ -137,7 +137,7 @@ export const AuditRecentTable = (props: { show: boolean; tableType?: ObjectType
                       accessibilityType="tooltip"
                       overrides={{ Body: { style: { width: '80%' } } }}
                       placement={PLACEMENT.leftBottom}
-                      content={<JsonView src={audit.data}/>}
+                      content={<JsonView data={audit.data}/>}
                     >
                       <Button
                         size="compact"
diff --git a/apps/frontend/src/components/admin/audit/AuditView.tsx b/apps/frontend/src/components/admin/audit/AuditView.tsx
index dbeddb678..1c863fd94 100644
--- a/apps/frontend/src/components/admin/audit/AuditView.tsx
+++ b/apps/frontend/src/components/admin/audit/AuditView.tsx
@@ -1,6 +1,6 @@
 import moment from 'moment'
 import { Block } from 'baseui/block'
-import JsonView from 'react18-json-view'
+import { JsonView} from 'react-json-view-lite'
 import React, { useEffect, useState } from 'react'
 import { LabelLarge } from 'baseui/typography'
 import { AuditActionIcon, AuditLabel as Label } from './AuditComponents'
@@ -128,12 +128,12 @@ export const AuditView = (props: AuditViewProps) => {
                     </Block>
                   </Block>
                   <JsonView
-                    src={audit.data}
-                    collapsed={() => {
+                    data={audit.data}
+                    shouldExpandNode={() => {
                       if(openAll) {
-                        return false
+                        return true
                       } else {
-                        return index === 0 ? false : true
+                        return index === 0 ? true : false
                       }
                     }}
                   />
diff --git a/apps/frontend/src/main.css b/apps/frontend/src/main.css
index 4e2bd8003..70ce40d53 100644
--- a/apps/frontend/src/main.css
+++ b/apps/frontend/src/main.css
@@ -2,4 +2,4 @@
 @import "@navikt/ds-css";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "react18-json-view/src/style.css";
\ No newline at end of file
+@import "react-json-view-lite/dist/index.css";
\ No newline at end of file

From 4690e488d96d3e651b6cf75dc9148dc185ba378f Mon Sep 17 00:00:00 2001
From: K153697 <paul.martin.kokseter@nav.no>
Date: Thu, 12 Oct 2023 13:08:07 +0200
Subject: [PATCH 3/3] UPDATE: Byttet til json-diff-kit

Co-authored-by: Shayan <shayan.yazdanmehr@nav.no>
Co-authored-by: Jeremiah Uy <jeremiah.augie.uy@nav.no>
Co-authored-by: andre groseth <andregroseth@hotmail.com>
---
 apps/frontend/package.json                       |  2 +-
 .../src/components/admin/audit/AuditView.tsx     | 16 +++++++---------
 apps/frontend/src/main.css                       |  3 ++-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 9c94f609e..a6f241fb2 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -25,6 +25,7 @@
     "formik": "^2.4.5",
     "graphql": "^16.8.1",
     "history": "5.3.0",
+    "json-diff-kit": "^1.0.18",
     "lodash": "^4.17.21",
     "markdown-draft-js": "^2.4.0",
     "moment": "^2.29.4",
@@ -33,7 +34,6 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-diff-viewer-continued": "^3.2.6",
     "react-dom": "^18.2.0",
     "react-draft-wysiwyg": "^1.15.0",
     "react-json-view-lite": "^1.1.0",
diff --git a/apps/frontend/src/components/admin/audit/AuditView.tsx b/apps/frontend/src/components/admin/audit/AuditView.tsx
index 1c863fd94..2d0388d92 100644
--- a/apps/frontend/src/components/admin/audit/AuditView.tsx
+++ b/apps/frontend/src/components/admin/audit/AuditView.tsx
@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faBinoculars, faExchangeAlt, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { PLACEMENT, StatefulTooltip } from 'baseui/tooltip'
 import { StatefulPopover } from 'baseui/popover'
-import DiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
+import {Differ, Viewer} from 'json-diff-kit'
 import { Spinner } from 'baseui/spinner'
 import { useRefs } from '../../../util/hooks'
 import { theme } from '../../../util'
@@ -99,13 +99,11 @@ export const AuditView = (props: AuditViewProps) => {
                         placement={PLACEMENT.left}
                         content={() => (
                           <Card>
-                            <DiffViewer
-                              leftTitle="Previous"
-                              rightTitle="Current"
-                              oldValue={JSON.stringify(auditLog?.audits[index + 1]?.data, null, 2)}
-                              newValue={JSON.stringify(audit.data, null, 2)}
-                              showDiffOnly={true}
-                              compareMethod={DiffMethod.LINES}
+                            <Viewer
+                              diff={new Differ().diff(auditLog && auditLog.audits[index + 1] ? auditLog.audits[index + 1].data : {},  audit.data)}
+                              highlightInlineDiff={true}
+                              lineNumbers={true}
+                              indent={4}
                             />
                           </Card>
                         )}
@@ -144,4 +142,4 @@ export const AuditView = (props: AuditViewProps) => {
       )}
     </Card>
   )
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/src/main.css b/apps/frontend/src/main.css
index 70ce40d53..bc33b7be2 100644
--- a/apps/frontend/src/main.css
+++ b/apps/frontend/src/main.css
@@ -2,4 +2,5 @@
 @import "@navikt/ds-css";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "react-json-view-lite/dist/index.css";
\ No newline at end of file
+@import "react-json-view-lite/dist/index.css";
+@import "json-diff-kit/dist/viewer.css";