Merge pull request #714 from navikt/update_json_view_package

UPDATE: package for json view
navikt · Oct 12, 2023 · 6adba04 · 6adba04
2 parents 51424a7 + 4690e48
commit 6adba04
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 29 deletions.
diff --git 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",
@@ -26,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",
@@ -34,9 +34,9 @@
     "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",
     "react-markdown": "^9.0.0",
     "react-markdown-editor-lite": "^1.3.4",
     "react-player": "^2.13.0",

diff --git 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 '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={<ReactJson src={audit.data} name={null} />}
+                      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
@@ -1,6 +1,6 @@
 import moment from 'moment'
 import { Block } from 'baseui/block'
-import ReactJson from '@microlink/react-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'
@@ -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'
@@ -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}>
@@ -104,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>
                         )}
@@ -132,12 +125,14 @@ export const AuditView = (props: AuditViewProps) => {
                       </StatefulPopover>
                     </Block>
                   </Block>
-                  <ReactJson
-                    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)
+                  <JsonView
+                    data={audit.data}
+                    shouldExpandNode={() => {
+                      if(openAll) {
+                        return true
+                      } else {
+                        return index === 0 ? true : false
+                      }
                     }}
                   />
                 </Block>
@@ -147,4 +142,4 @@ export const AuditView = (props: AuditViewProps) => {
       )}
     </Card>
   )
-}
+}
diff --git a/apps/frontend/src/main.css b/apps/frontend/src/main.css
@@ -1,4 +1,6 @@
 @import "tailwindcss/base";
 @import "@navikt/ds-css";
 @import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities";
+@import "react-json-view-lite/dist/index.css";
+@import "json-diff-kit/dist/viewer.css";