Skip to content

Commit 1596973

Browse files
kavinkumar807kavinkumar807
committed
Merge branch 'main' into highlight-tool-errors-in-red-text
2 parents 256972a + 6c07559 commit 1596973

File tree

9 files changed

+269
-79
lines changed

9 files changed

+269
-79
lines changed

‎client/src/components/DynamicJsonForm.tsx

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,9 @@ import { Button } from "@/components/ui/button";
33
import { Input } from "@/components/ui/input";
44
import { Label } from "@/components/ui/label";
55
import JsonEditor from "./JsonEditor";
6-
import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
6+
import { updateValueAtPath } from "@/utils/jsonUtils";
77
import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
8-
9-
export type JsonValue =
10-
| string
11-
| number
12-
| boolean
13-
| null
14-
| undefined
15-
| JsonValue[]
16-
| { [key: string]: JsonValue };
17-
18-
export type JsonSchemaType = {
19-
type:
20-
| "string"
21-
| "number"
22-
| "integer"
23-
| "boolean"
24-
| "array"
25-
| "object"
26-
| "null";
27-
description?: string;
28-
required?: boolean;
29-
default?: JsonValue;
30-
properties?: Record<string, JsonSchemaType>;
31-
items?: JsonSchemaType;
32-
};
8+
import type { JsonValue, JsonSchemaType, JsonObject } from "@/utils/jsonUtils";
339

3410
interface DynamicJsonFormProps {
3511
schema: JsonSchemaType;

‎client/src/components/JsonView.tsx

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useState, memo, useMemo, useCallback, useEffect } from "react";
2-
import { JsonValue } from "./DynamicJsonForm";
2+
import type { JsonValue } from "@/utils/jsonUtils";
33
import clsx from "clsx";
44
import { Copy, CheckCheck } from "lucide-react";
55
import { Button } from "@/components/ui/button";
66
import { useToast } from "@/hooks/use-toast";
7+
import { getDataType, tryParseJson } from "@/utils/jsonUtils";
78

89
interface JsonViewProps {
910
data: unknown;
@@ -14,21 +15,6 @@ interface JsonViewProps {
1415
isError?: boolean;
1516
}
1617

17-
function tryParseJson(str: string): { success: boolean; data: JsonValue } {
18-
const trimmed = str.trim();
19-
if (
20-
!(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
21-
!(trimmed.startsWith("[") && trimmed.endsWith("]"))
22-
) {
23-
return { success: false, data: str };
24-
}
25-
try {
26-
return { success: true, data: JSON.parse(str) };
27-
} catch {
28-
return { success: false, data: str };
29-
}
30-
}
31-
3218
const JsonView = memo(
3319
({
3420
data,
@@ -129,24 +115,16 @@ const JsonNode = memo(
129115
isError = false,
130116
}: JsonNodeProps) => {
131117
const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
132-
133-
const getDataType = (value: JsonValue): string => {
134-
if (Array.isArray(value)) return "array";
135-
if (value === null) return "null";
136-
return typeof value;
137-
};
138-
139-
const dataType = getDataType(data);
140-
141-
const typeStyleMap: Record<string, string> = {
118+
const [typeStyleMap] = useState<Record<string, string>>({
142119
number: "text-blue-600",
143120
boolean: "text-amber-600",
144121
null: "text-purple-600",
145122
undefined: "text-gray-600",
146123
string: "text-green-600 group-hover:text-green-500",
147124
error: "text-red-600 group-hover:text-red-500",
148125
default: "text-gray-700",
149-
};
126+
});
127+
const dataType = getDataType(data);
150128

151129
const renderCollapsible = (isArray: boolean) => {
152130
const items = isArray

‎client/src/components/Sidebar.tsx

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,19 @@ const Sidebar = ({
103103
<div className="p-4 flex-1 overflow-auto">
104104
<div className="space-y-4">
105105
<div className="space-y-2">
106-
<label className="text-sm font-medium">Transport Type</label>
106+
<label
107+
className="text-sm font-medium"
108+
htmlFor="transport-type-select"
109+
>
110+
Transport Type
111+
</label>
107112
<Select
108113
value={transportType}
109114
onValueChange={(value: "stdio" | "sse") =>
110115
setTransportType(value)
111116
}
112117
>
113-
<SelectTrigger>
118+
<SelectTrigger id="transport-type-select">
114119
<SelectValue placeholder="Select transport type" />
115120
</SelectTrigger>
116121
<SelectContent>
@@ -123,17 +128,26 @@ const Sidebar = ({
123128
{transportType === "stdio" ? (
124129
<>
125130
<div className="space-y-2">
126-
<label className="text-sm font-medium">Command</label>
131+
<label className="text-sm font-medium" htmlFor="command-input">
132+
Command
133+
</label>
127134
<Input
135+
id="command-input"
128136
placeholder="Command"
129137
value={command}
130138
onChange={(e) => setCommand(e.target.value)}
131139
className="font-mono"
132140
/>
133141
</div>
134142
<div className="space-y-2">
135-
<label className="text-sm font-medium">Arguments</label>
143+
<label
144+
className="text-sm font-medium"
145+
htmlFor="arguments-input"
146+
>
147+
Arguments
148+
</label>
136149
<Input
150+
id="arguments-input"
137151
placeholder="Arguments (space-separated)"
138152
value={args}
139153
onChange={(e) => setArgs(e.target.value)}
@@ -144,8 +158,11 @@ const Sidebar = ({
144158
) : (
145159
<>
146160
<div className="space-y-2">
147-
<label className="text-sm font-medium">URL</label>
161+
<label className="text-sm font-medium" htmlFor="sse-url-input">
162+
URL
163+
</label>
148164
<Input
165+
id="sse-url-input"
149166
placeholder="URL"
150167
value={sseUrl}
151168
onChange={(e) => setSseUrl(e.target.value)}
@@ -157,6 +174,7 @@ const Sidebar = ({
157174
variant="outline"
158175
onClick={() => setShowBearerToken(!showBearerToken)}
159176
className="flex items-center w-full"
177+
aria-expanded={showBearerToken}
160178
>
161179
{showBearerToken ? (
162180
<ChevronDown className="w-4 h-4 mr-2" />
@@ -167,8 +185,14 @@ const Sidebar = ({
167185
</Button>
168186
{showBearerToken && (
169187
<div className="space-y-2">
170-
<label className="text-sm font-medium">Bearer Token</label>
188+
<label
189+
className="text-sm font-medium"
190+
htmlFor="bearer-token-input"
191+
>
192+
Bearer Token
193+
</label>
171194
<Input
195+
id="bearer-token-input"
172196
placeholder="Bearer Token"
173197
value={bearerToken}
174198
onChange={(e) => setBearerToken(e.target.value)}
@@ -187,6 +211,7 @@ const Sidebar = ({
187211
onClick={() => setShowEnvVars(!showEnvVars)}
188212
className="flex items-center w-full"
189213
data-testid="env-vars-button"
214+
aria-expanded={showEnvVars}
190215
>
191216
{showEnvVars ? (
192217
<ChevronDown className="w-4 h-4 mr-2" />
@@ -201,6 +226,7 @@ const Sidebar = ({
201226
<div key={idx} className="space-y-2 pb-4">
202227
<div className="flex gap-2">
203228
<Input
229+
aria-label={`Environment variable key ${idx + 1}`}
204230
placeholder="Key"
205231
value={key}
206232
onChange={(e) => {
@@ -243,6 +269,7 @@ const Sidebar = ({
243269
</div>
244270
<div className="flex gap-2">
245271
<Input
272+
aria-label={`Environment variable value ${idx + 1}`}
246273
type={shownEnvVars.has(key) ? "text" : "password"}
247274
placeholder="Value"
248275
value={value}
@@ -309,6 +336,7 @@ const Sidebar = ({
309336
onClick={() => setShowConfig(!showConfig)}
310337
className="flex items-center w-full"
311338
data-testid="config-button"
339+
aria-expanded={showConfig}
312340
>
313341
{showConfig ? (
314342
<ChevronDown className="w-4 h-4 mr-2" />
@@ -325,7 +353,10 @@ const Sidebar = ({
325353
return (
326354
<div key={key} className="space-y-2">
327355
<div className="flex items-center gap-1">
328-
<label className="text-sm font-medium text-green-600 break-all">
356+
<label
357+
className="text-sm font-medium text-green-600 break-all"
358+
htmlFor={`${configKey}-input`}
359+
>
329360
{configItem.label}
330361
</label>
331362
<Tooltip>
@@ -339,6 +370,7 @@ const Sidebar = ({
339370
</div>
340371
{typeof configItem.value === "number" ? (
341372
<Input
373+
id={`${configKey}-input`}
342374
type="number"
343375
data-testid={`${configKey}-input`}
344376
value={configItem.value}
@@ -365,7 +397,7 @@ const Sidebar = ({
365397
setConfig(newConfig);
366398
}}
367399
>
368-
<SelectTrigger>
400+
<SelectTrigger id={`${configKey}-input`}>
369401
<SelectValue />
370402
</SelectTrigger>
371403
<SelectContent>
@@ -375,6 +407,7 @@ const Sidebar = ({
375407
</Select>
376408
) : (
377409
<Input
410+
id={`${configKey}-input`}
378411
data-testid={`${configKey}-input`}
379412
value={configItem.value}
380413
onChange={(e) => {
@@ -448,14 +481,19 @@ const Sidebar = ({
448481

449482
{loggingSupported && connectionStatus === "connected" && (
450483
<div className="space-y-2">
451-
<label className="text-sm font-medium">Logging Level</label>
484+
<label
485+
className="text-sm font-medium"
486+
htmlFor="logging-level-select"
487+
>
488+
Logging Level
489+
</label>
452490
<Select
453491
value={logLevel}
454492
onValueChange={(value: LoggingLevel) =>
455493
sendLogLevelRequest(value)
456494
}
457495
>
458-
<SelectTrigger>
496+
<SelectTrigger id="logging-level-select">
459497
<SelectValue placeholder="Select logging level" />
460498
</SelectTrigger>
461499
<SelectContent>

‎client/src/components/ToolsTab.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { Input } from "@/components/ui/input";
55
import { Label } from "@/components/ui/label";
66
import { TabsContent } from "@/components/ui/tabs";
77
import { Textarea } from "@/components/ui/textarea";
8-
import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
8+
import DynamicJsonForm from "./DynamicJsonForm";
9+
import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
910
import { generateDefaultValue } from "@/utils/schemaUtils";
1011
import {
1112
CallToolResultSchema,

‎client/src/components/__tests__/DynamicJsonForm.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, screen, fireEvent } from "@testing-library/react";
22
import { describe, it, expect, jest } from "@jest/globals";
33
import DynamicJsonForm from "../DynamicJsonForm";
4-
import type { JsonSchemaType } from "../DynamicJsonForm";
4+
import type { JsonSchemaType } from "@/utils/jsonUtils";
55

66
describe("DynamicJsonForm String Fields", () => {
77
const renderForm = (props = {}) => {

0 commit comments

Comments
 (0)