LibreChat/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/MCPServerForm.tsx
Marco Beretta d6b6f191f7
style(MCP): Enhance dialog accessibility and styling consistency (#11585)
* style: update input IDs in BasicInfoSection for consistency and improve accessibility

* style: add border-destructive variable for improved design consistency

* style: update error border color for title input in BasicInfoSection

* style: update delete confirmation dialog title and description for MCP Server

* style: add text-destructive variable for improved design consistency

* style: update error message and border color for URL and trust fields for consistency

* style: reorder imports and update error message styling for consistency across sections

* style: enhance MCPServerDialog with copy link functionality and UI improvements

* style: enhance MCPServerDialog with improved accessibility and loading indicators

* style: bump @librechat/client to 0.4.51 and enhance OGDialogTemplate for improved selection handling

* a11y: enhance accessibility and error handling in MCPServerDialog sections

* style: enhance MCPServerDialog accessibility and improve resource name handling

* style: improve accessibility in MCPServerDialog and AuthSection, update translation for delete confirmation

* style: update aria-invalid attributes to use string values for improved accessibility in form sections

* style: enhance accessibility in AuthSection by updating aria attributes and adding error messages

* style: remove unnecessary aria-hidden attributes from Spinner components in MCPServerDialog

* style: simplify legacy selection check in OGDialogTemplate
2026-02-11 22:08:40 -05:00

31 lines
933 B
TypeScript

import { FormProvider } from 'react-hook-form';
import type { useMCPServerForm } from './hooks/useMCPServerForm';
import ConnectionSection from './sections/ConnectionSection';
import BasicInfoSection from './sections/BasicInfoSection';
import TransportSection from './sections/TransportSection';
import TrustSection from './sections/TrustSection';
import AuthSection from './sections/AuthSection';
interface MCPServerFormProps {
formHook: ReturnType<typeof useMCPServerForm>;
}
export default function MCPServerForm({ formHook }: MCPServerFormProps) {
const { methods, isEditMode, server } = formHook;
return (
<FormProvider {...methods}>
<div className="space-y-4 px-1 py-1">
<BasicInfoSection />
<ConnectionSection />
<TransportSection />
<AuthSection isEditMode={isEditMode} serverName={server?.serverName} />
<TrustSection />
</div>
</FormProvider>
);
}