Add support for custom headers and migrate from legacy auth
- Introduced CustomHeaders component for managing custom headers. - Updated Sidebar to include CustomHeaders component. - Enhanced useConnection hook to handle custom headers and legacy auth migration. - Added tests for custom headers functionality. - Updated package.json and package-lock.json for new dependencies.
This commit is contained in:
jeetul.samaiya
parent
b476ece67e
commit
c5acc63129
4 changed files with 606 additions and 48 deletions
215
client/src/components/CustomHeaders.tsx
Normal file
215
client/src/components/CustomHeaders.tsx
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Plus, Trash2, Eye, EyeOff } from "lucide-react";
|
||||
import { CustomHeaders as CustomHeadersType, CustomHeader, createEmptyHeader } from "@/lib/types/customHeaders";
|
||||
|
||||
interface CustomHeadersProps {
|
||||
headers: CustomHeadersType;
|
||||
onChange: (headers: CustomHeadersType) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CustomHeaders = ({ headers, onChange, className }: CustomHeadersProps) => {
|
||||
const [isJsonMode, setIsJsonMode] = useState(false);
|
||||
const [jsonValue, setJsonValue] = useState("");
|
||||
const [jsonError, setJsonError] = useState<string | null>(null);
|
||||
const [visibleValues, setVisibleValues] = useState<Set<number>>(new Set());
|
||||
|
||||
const updateHeader = (index: number, field: keyof CustomHeader, value: string | boolean) => {
|
||||
const newHeaders = [...headers];
|
||||
newHeaders[index] = { ...newHeaders[index], [field]: value };
|
||||
onChange(newHeaders);
|
||||
};
|
||||
|
||||
const addHeader = () => {
|
||||
onChange([...headers, createEmptyHeader()]);
|
||||
};
|
||||
|
||||
const removeHeader = (index: number) => {
|
||||
const newHeaders = headers.filter((_, i) => i !== index);
|
||||
onChange(newHeaders);
|
||||
};
|
||||
|
||||
const toggleValueVisibility = (index: number) => {
|
||||
const newVisible = new Set(visibleValues);
|
||||
if (newVisible.has(index)) {
|
||||
newVisible.delete(index);
|
||||
} else {
|
||||
newVisible.add(index);
|
||||
}
|
||||
setVisibleValues(newVisible);
|
||||
};
|
||||
|
||||
const switchToJsonMode = () => {
|
||||
const jsonObject: Record<string, string> = {};
|
||||
headers.forEach((header) => {
|
||||
if (header.enabled && header.name.trim() && header.value.trim()) {
|
||||
jsonObject[header.name.trim()] = header.value.trim();
|
||||
}
|
||||
});
|
||||
setJsonValue(JSON.stringify(jsonObject, null, 2));
|
||||
setJsonError(null);
|
||||
setIsJsonMode(true);
|
||||
};
|
||||
|
||||
const switchToFormMode = () => {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonValue);
|
||||
if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
|
||||
setJsonError("JSON must be an object with string key-value pairs");
|
||||
return;
|
||||
}
|
||||
|
||||
const newHeaders: CustomHeadersType = Object.entries(parsed).map(([name, value]) => ({
|
||||
name,
|
||||
value: String(value),
|
||||
enabled: true,
|
||||
}));
|
||||
|
||||
onChange(newHeaders);
|
||||
setJsonError(null);
|
||||
setIsJsonMode(false);
|
||||
} catch (error) {
|
||||
setJsonError("Invalid JSON format");
|
||||
}
|
||||
};
|
||||
|
||||
const handleJsonChange = (value: string) => {
|
||||
setJsonValue(value);
|
||||
setJsonError(null);
|
||||
};
|
||||
|
||||
if (isJsonMode) {
|
||||
return (
|
||||
<div className={`space-y-3 ${className}`}>
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<h4 className="text-sm font-semibold flex-shrink-0">Custom Headers (JSON)</h4>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={switchToFormMode}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
Switch to Form
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Textarea
|
||||
value={jsonValue}
|
||||
onChange={(e) => handleJsonChange(e.target.value)}
|
||||
placeholder='{\n "Authorization": "Bearer token123",\n "X-Tenant-ID": "acme-inc",\n "X-Environment": "staging"\n}'
|
||||
className="font-mono text-sm min-h-[100px] resize-none"
|
||||
/>
|
||||
{jsonError && (
|
||||
<p className="text-sm text-red-600">{jsonError}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Enter headers as a JSON object with string key-value pairs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`space-y-3 ${className}`}>
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<h4 className="text-sm font-semibold flex-shrink-0">Custom Headers</h4>
|
||||
<div className="flex gap-1 flex-shrink-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={switchToJsonMode}
|
||||
className="text-xs px-2"
|
||||
>
|
||||
JSON
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={addHeader}
|
||||
className="text-xs px-2"
|
||||
>
|
||||
<Plus className="w-3 h-3 mr-1" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{headers.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground">
|
||||
<p className="text-sm">No custom headers configured</p>
|
||||
<p className="text-xs mt-1">Click "Add" to get started</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
||||
{headers.map((header, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-2 p-2 border rounded-md"
|
||||
>
|
||||
<Switch
|
||||
checked={header.enabled}
|
||||
onCheckedChange={(enabled) => updateHeader(index, "enabled", enabled)}
|
||||
className="shrink-0 mt-2"
|
||||
/>
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<Input
|
||||
placeholder="Header Name"
|
||||
value={header.name}
|
||||
onChange={(e) => updateHeader(index, "name", e.target.value)}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="Header Value"
|
||||
value={header.value}
|
||||
onChange={(e) => updateHeader(index, "value", e.target.value)}
|
||||
type={visibleValues.has(index) ? "text" : "password"}
|
||||
className="font-mono text-xs pr-8"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleValueVisibility(index)}
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0"
|
||||
>
|
||||
{visibleValues.has(index) ? (
|
||||
<EyeOff className="w-3 h-3" />
|
||||
) : (
|
||||
<Eye className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeHeader(index)}
|
||||
className="shrink-0 text-red-600 hover:text-red-700 hover:bg-red-50 h-6 w-6 p-0 mt-2"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{headers.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Use the toggle to enable/disable headers. Only enabled headers with both name and value will be sent.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomHeaders;
|
||||
|
|
@ -37,6 +37,8 @@ import {
|
|||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from "@/components/ui/tooltip";
|
||||
import CustomHeaders from "./CustomHeaders";
|
||||
import { CustomHeaders as CustomHeadersType } from "@/lib/types/customHeaders";
|
||||
import { useToast } from "../lib/hooks/useToast";
|
||||
|
||||
interface SidebarProps {
|
||||
|
|
@ -51,10 +53,14 @@ interface SidebarProps {
|
|||
setSseUrl: (url: string) => void;
|
||||
env: Record<string, string>;
|
||||
setEnv: (env: Record<string, string>) => void;
|
||||
// Legacy auth props (for backward compatibility)
|
||||
bearerToken: string;
|
||||
setBearerToken: (token: string) => void;
|
||||
headerName?: string;
|
||||
setHeaderName?: (name: string) => void;
|
||||
// New custom headers support
|
||||
customHeaders: CustomHeadersType;
|
||||
setCustomHeaders: (headers: CustomHeadersType) => void;
|
||||
oauthClientId: string;
|
||||
setOauthClientId: (id: string) => void;
|
||||
oauthScope: string;
|
||||
|
|
@ -80,10 +86,12 @@ const Sidebar = ({
|
|||
setSseUrl,
|
||||
env,
|
||||
setEnv,
|
||||
bearerToken,
|
||||
setBearerToken,
|
||||
headerName,
|
||||
setHeaderName,
|
||||
bearerToken: _bearerToken,
|
||||
setBearerToken: _setBearerToken,
|
||||
headerName: _headerName,
|
||||
setHeaderName: _setHeaderName,
|
||||
customHeaders,
|
||||
setCustomHeaders,
|
||||
oauthClientId,
|
||||
setOauthClientId,
|
||||
oauthScope,
|
||||
|
|
@ -497,38 +505,12 @@ const Sidebar = ({
|
|||
</Button>
|
||||
{showAuthConfig && (
|
||||
<>
|
||||
{/* Bearer Token Section */}
|
||||
<div className="space-y-2 p-3 rounded border">
|
||||
<h4 className="text-sm font-semibold flex items-center">
|
||||
API Token Authentication
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Header Name</label>
|
||||
<Input
|
||||
placeholder="Authorization"
|
||||
onChange={(e) =>
|
||||
setHeaderName && setHeaderName(e.target.value)
|
||||
}
|
||||
data-testid="header-input"
|
||||
className="font-mono"
|
||||
value={headerName}
|
||||
/>
|
||||
<label
|
||||
className="text-sm font-medium"
|
||||
htmlFor="bearer-token-input"
|
||||
>
|
||||
Bearer Token
|
||||
</label>
|
||||
<Input
|
||||
id="bearer-token-input"
|
||||
placeholder="Bearer Token"
|
||||
value={bearerToken}
|
||||
onChange={(e) => setBearerToken(e.target.value)}
|
||||
data-testid="bearer-token-input"
|
||||
className="font-mono"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{/* Custom Headers Section */}
|
||||
<div className="p-3 rounded border overflow-hidden">
|
||||
<CustomHeaders
|
||||
headers={customHeaders}
|
||||
onChange={setCustomHeaders}
|
||||
/>
|
||||
</div>
|
||||
{transportType !== "stdio" && (
|
||||
// OAuth Configuration
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@ describe("Sidebar", () => {
|
|||
setEnv: jest.fn(),
|
||||
bearerToken: "",
|
||||
setBearerToken: jest.fn(),
|
||||
headerName: "",
|
||||
setHeaderName: jest.fn(),
|
||||
customHeaders: [],
|
||||
setCustomHeaders: jest.fn(),
|
||||
onConnect: jest.fn(),
|
||||
onDisconnect: jest.fn(),
|
||||
stdErrNotifications: [],
|
||||
|
|
|
|||
27
client/src/components/ui/switch.tsx
Normal file
27
client/src/components/ui/switch.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from "react";
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
));
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||
|
||||
export { Switch };
|
||||
Loading…
Reference in a new issue