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

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

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

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

@@ -215,9 +215,9 @@ const ResourcesTab = ({
<AlertDescription>{error}</AlertDescription>
</Alert>
) : 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} />
</pre>
</div>
) : selectedTemplate ? (
<div className="space-y-4">
<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>
{pendingRequests.map((request) => (
<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)} />
</pre>
</div>
<div className="flex space-x-2">
<Button onClick={() => handleApprove(request.id)}>Approve</Button>
<Button variant="outline" onClick={() => onReject(request.id)}>