feat: add default JSON view styles and integrate into JsonBlock and InteractiveJsonViewer components

Author: ErwanDecoster

src/modules/JsonBlock.tsx

@@ -1,32 +1,56 @@
+import JsonView from '@uiw/react-json-view';
 import CopyButton from '@/components/CopyButton';
+import { defaultJsonViewStyle } from '@/utils/jsonViewStyles';
 
 type JsonBlockProps = {
   children: string | object;
+  className?: string;
+  collapsed?: number;
+  enableClipboard?: boolean;
 };
 
-const JsonBlock = ({ children }: JsonBlockProps) => {
-  let display: string;
+const JsonBlock = ({
+  children,
+  className,
+  collapsed = 1,
+  enableClipboard = true,
+}: JsonBlockProps) => {
+  let jsonData: object;
   let rawToCopy: string;
 
   try {
     if (typeof children === 'object') {
+      jsonData = children;
       rawToCopy = JSON.stringify(children);
-      display = JSON.stringify(children, null, 2);
     } else {
+      jsonData = JSON.parse(children);
       rawToCopy = children;
-      display = JSON.stringify(JSON.parse(children), null, 2);
     }
   } catch {
-    display = String(children);
-    rawToCopy = String(children);
+    // If parsing fails, display as plain text
+    return (
+      <div className={`flex min-w-0 items-start gap-1 ${className}`}>
+        <code className="min-w-0 overflow-x-auto text-sm whitespace-pre">
+          {String(children)}
+        </code>
+        {enableClipboard && <CopyButton textToCopy={String(children)} />}
+      </div>
+    );
   }
 
   return (
-    <div className="flex min-w-0 items-start gap-1">
-      <code className="min-w-0 overflow-x-auto text-sm whitespace-pre">
-        {display}
-      </code>
-      <CopyButton textToCopy={rawToCopy} />
+    <div className={`flex min-w-0 items-start gap-1 ${className}`}>
+      <div className="min-w-0 flex-1 overflow-x-auto">
+        <JsonView
+          value={jsonData}
+          displayDataTypes={false}
+          displayObjectSize={false}
+          enableClipboard={false}
+          collapsed={collapsed}
+          style={defaultJsonViewStyle}
+        />
+      </div>
+      {enableClipboard && <CopyButton textToCopy={rawToCopy} />}
     </div>
   );
 };

src/modules/datasets/dataset/schema/InteractiveJsonViewer.tsx

@@ -1,5 +1,6 @@
 import { DatasetSchemaQuery } from '@/graphql/dataprotector/graphql';
 import JsonView from '@uiw/react-json-view';
+import { defaultJsonViewStyle } from '@/utils/jsonViewStyles';
 
 interface JsonViewerProps {
   schemaPaths?: Array<{ path?: string | null; type?: string | null }>;
@@ -62,17 +63,7 @@ export function InteractiveJsonViewer({
         displayObjectSize={false}
         enableClipboard={false}
         collapsed={2}
-        style={
-          {
-            color: 'white',
-            '--w-rjv-quotes-string-color': '#ffc480', // Override string color to light gray
-            '--w-rjv-curlybraces-color': '#728cff', // Override curly braces color to light gray
-            '--w-rjv-quotes-color': '#728cff', // Override quotes color to light gray
-            '--w-rjv-key-string': 'white', // Override key color to light gray
-            '--w-rjv-type-string-color': '#ffc480',
-            '--w-rjv-indent-width': '24px', // Increase indentation for nested keys
-          } as React.CSSProperties
-        }
+        style={defaultJsonViewStyle}
       />
     </div>
   );

src/utils/jsonViewStyles.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+
+export const defaultJsonViewStyle: CSSProperties = {
+  color: 'var(--color-foreground)',
+  '--w-rjv-key-string': 'var(--color-foreground)',
+  '--w-rjv-line-color': 'var(--color-foreground)',
+  '--w-rjv-quotes-string-color': 'var(--color-primary)',
+  '--w-rjv-type-string-color': 'var(--color-primary)',
+  '--w-rjv-curlybraces-color': '#728cff',
+  '--w-rjv-quotes-color': '#728cff',
+  '--w-rjv-indent-width': '20px',
+} as CSSProperties;