fix(dashboard): Improve default json display in data tables

packages/dashboard/src/lib/components/data-display/json.tsx

@@ -1,5 +1,20 @@
 import { JsonEditor } from 'json-edit-react';
+import { FileJson } from 'lucide-react';
+
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu.js';
 
 export function Json({ value }: Readonly<{ value: any }>) {
-    return <JsonEditor data={value} />;
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="secondary" size="icon">
+                    <FileJson />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-96 max-h-96 overflow-auto p-2">
+                <JsonEditor viewOnly data={value} collapse={1} rootFontSize={12} />
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
 }

packages/dashboard/src/lib/components/data-table/use-generated-columns.tsx

@@ -136,7 +136,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                         return <DisplayComponent id="vendure:asset" value={value} />;
                     }
                     if (value !== null && typeof value === 'object') {
-                        return JSON.stringify(value);
+                        return <DisplayComponent id="vendure:json" value={value} />;
                     }
                     return value;
                 },

packages/dashboard/src/lib/framework/extension-api/display-component-extensions.tsx

@@ -1,5 +1,6 @@
 import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/vdb/components/data-display/boolean.js';
 import { DateTime } from '@/vdb/components/data-display/date-time.js';
+import { Json } from '@/vdb/components/data-display/json.js';
 import { Money } from '@/vdb/components/data-display/money.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
 import { DataDisplayComponent } from '../component-registry/component-registry.js';
@@ -17,6 +18,7 @@ displayComponents.set('vendure:booleanBadge', BooleanDisplayBadge);
 displayComponents.set('vendure:dateTime', DateTime);
 displayComponents.set('vendure:asset', AssetDisplay);
 displayComponents.set('vendure:money', Money);
+displayComponents.set('vendure:json', Json);
 
 export function getDisplayComponent(id: string): DataDisplayComponent | undefined {
     return globalRegistry.get('displayComponents').get(id);