hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use <pre> tag inside JsonView component for consistency

Browse Source
This commit is contained in:
cgoing
2025-03-27 12:55:36 +09:00
parent 2d252a389c
commit 18ca6e28a7
4 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/History.tsx
View File

@@ -75,9 +75,9 @@ const HistoryAndNotifications = ({
<Copy size={16} /> <Copy size={16} />
</button> </button>
</div> </div>
<pre className="whitespace-pre-wrap break-words bg-background p-2 rounded"> <div className="bg-background p-2 rounded">
<JsonView data={request.request} /> <JsonView data={request.request} />
</pre> </div>
</div> </div>
{request.response && ( {request.response && (
<div className="mt-2"> <div className="mt-2">
@@ -92,9 +92,9 @@ const HistoryAndNotifications = ({
<Copy size={16} /> <Copy size={16} />
</button> </button>
</div> </div>
<pre className="whitespace-pre-wrap break-words bg-background p-2 rounded"> <div className="bg-background p-2 rounded">
<JsonView data={request.response} /> <JsonView data={request.response} />
</pre> </div>
</div> </div>
)} )}
</> </>
@@ -143,11 +143,11 @@ const HistoryAndNotifications = ({
<Copy size={16} /> <Copy size={16} />
</button> </button>
</div> </div>
<pre className="whitespace-pre-wrap break-words bg-background p-2 rounded"> <div className="bg-background p-2 rounded">
<JsonView <JsonView
data={JSON.stringify(notification, null, 2)} data={JSON.stringify(notification, null, 2)}
/> />
</pre> </div>
</div> </div>
)} )}
</li> </li>

8
client/src/components/JsonView.tsx
View File

@@ -71,7 +71,7 @@ const JsonNode = memo(
boolean: "text-amber-600", boolean: "text-amber-600",
null: "text-purple-600", null: "text-purple-600",
undefined: "text-gray-600", undefined: "text-gray-600",
string: "text-green-600 break-all", string: "text-green-600 break-all whitespace-pre-wrap",
default: "text-gray-700", default: "text-gray-700",
}; };
@@ -174,7 +174,7 @@ const JsonNode = memo(
{name}: {name}:
</span> </span>
)} )}
<p className={typeStyleMap.string}>"{value}"</p> <pre className={typeStyleMap.string}>"{value}"</pre>
</div> </div>
); );
} }
@@ -186,7 +186,7 @@ const JsonNode = memo(
{name}: {name}:
</span> </span>
)} )}
<span <pre
className={clsx( className={clsx(
typeStyleMap.string, typeStyleMap.string,
"cursor-pointer group-hover:text-green-500", "cursor-pointer group-hover:text-green-500",
@@ -195,7 +195,7 @@ const JsonNode = memo(
title={isExpanded ? "Click to collapse" : "Click to expand"} title={isExpanded ? "Click to collapse" : "Click to expand"}
> >
{isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`} {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
</span> </pre>
</div> </div>
); );
}; };

4
client/src/components/ResourcesTab.tsx
View File

@@ -215,9 +215,9 @@ const ResourcesTab = ({
<AlertDescription>{error}</AlertDescription> <AlertDescription>{error}</AlertDescription>
</Alert> </Alert>
) : selectedResource ? ( ) : selectedResource ? (
<pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100"> <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100">
<JsonView data={resourceContent} /> <JsonView data={resourceContent} />
</pre> </div>
) : selectedTemplate ? ( ) : selectedTemplate ? (
<div className="space-y-4"> <div className="space-y-4">
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">

4
client/src/components/SamplingTab.tsx
View File

@@ -44,9 +44,9 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
<h3 className="text-lg font-semibold">Recent Requests</h3> <h3 className="text-lg font-semibold">Recent Requests</h3>
{pendingRequests.map((request) => ( {pendingRequests.map((request) => (
<div key={request.id} className="p-4 border rounded-lg space-y-4"> <div key={request.id} className="p-4 border rounded-lg space-y-4">
<pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded"> <div className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
<JsonView data={JSON.stringify(request.request)} /> <JsonView data={JSON.stringify(request.request)} />
</pre> </div>
<div className="flex space-x-2"> <div className="flex space-x-2">
<Button onClick={() => handleApprove(request.id)}>Approve</Button> <Button onClick={() => handleApprove(request.id)}>Approve</Button>
<Button variant="outline" onClick={() => onReject(request.id)}> <Button variant="outline" onClick={() => onReject(request.id)}>