feat(web): replace JSONViewer with react-json-tree

packages/web/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "description": "> TODO: description",
   "dependencies": {
-    "@alenaksu/json-viewer": "^1.0.0",
     "@apollo/client": "^3.4.15",
     "@automatisch/types": "0.1.0",
     "@emotion/react": "^11.4.1",
@@ -30,6 +29,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.17.2",
     "react-intl": "^5.20.12",
+    "react-json-tree": "^0.16.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "5.0.0",
     "slate": "^0.72.8",

packages/web/src/components/JSONViewer/index.tsx

@@ -1,31 +1,44 @@
 import * as React from 'react';
-import '@alenaksu/json-viewer';
-
+import { JSONTree } from 'react-json-tree';
 import type { IJSONObject } from '@automatisch/types';
-import { jsonViewerStyles } from './style';
 
 type JSONViewerProps = {
   data: IJSONObject;
 }
+
+const theme = {
+  scheme: 'inspector',
+  author: 'Alexander Kuznetsov (alexkuz@gmail.com)',
+  base00: '#181818',
+  base01: '#282828',
+  base02: '#383838',
+  base03: '#585858',
+  base04: '#b8b8b8',
+  base05: '#d8d8d8',
+  base06: '#e8e8e8',
+  base07: '#FFFFFF',
+  base08: '#E92F28',
+  base09: '#dc9656',
+  base0A: '#f7ca88',
+  base0B: '#65AD00',
+  base0C: '#86c1b9',
+  base0D: '#347BD9',
+  base0E: '#EC31C0',
+  base0F: '#a16946',
+};
+
 function JSONViewer(props: JSONViewerProps) {
   const { data } = props;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const viewerRef = React.useRef<any>(null);
-
-  React.useEffect(() => {
-    if (viewerRef.current){
-      viewerRef.current.data = data;
-    }
-  }, [data]);
 
   return (
-    <div>
-      {jsonViewerStyles}
-
-      <json-viewer ref={viewerRef} />
-    </div>
+    <JSONTree
+      hideRoot
+      data={data}
+      shouldExpandNode={() => true}
+      invertTheme={true}
+      theme={theme}
+    />
   );
 }
 
-
 export default JSONViewer;

packages/web/src/components/TestSubstep/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useMutation } from '@apollo/client';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import Button from '@mui/material/Button';
@@ -59,7 +60,9 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
         <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
 
           {response && (
-            <JSONViewer data={response} />
+            <Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }}>
+              <JSONViewer data={response} />
+            </Box>
           )}
 
           <Button