MCPX MCP Gateway

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Spinner } from "@/components/ui/spinner"; interface CreateToolGroupModalProps { isOpen: boolean; onClose: () => void; newGroupName: string; onGroupNameChange: (name: string) => void; newGroupDescription?: string; onGroupDescriptionChange?: (description: string) => void; error?: string | null; onSave: () => void; isCreating: boolean; selectedToolsCount: number; } const styles = { modalContent: "max-w-lg", modalSpace: "space-y-4 py-4", modalLabel: "text-sm font-medium", modalCharacterCount: "text-xs text-gray-500", modalFooter: "flex justify-end gap-2", modalCancelButton: "px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors", modalCreateButton: "px-4 py-2 bg-[#4F33CC] text-white rounded-md text-sm font-medium hover:bg-[#4F33CC] transition-colors disabled:opacity-50 disabled:cursor-not-allowed", }; export function CreateToolGroupModal({ isOpen, onClose, newGroupName, onGroupNameChange, newGroupDescription = "", onGroupDescriptionChange, error, onSave, isCreating, selectedToolsCount, }: CreateToolGroupModalProps) { return ( <Dialog open={isOpen} onOpenChange={onClose}> <DialogContent className={styles.modalContent}> <DialogHeader> <DialogTitle>Create Tool Group</DialogTitle> <DialogDescription> Create a new tool group with the selected tools. </DialogDescription> </DialogHeader> <div className={styles.modalSpace}> <div className={styles.modalSpace}> <label htmlFor="groupName" className={styles.modalLabel}> Group Name </label> {error && ( <div className="flex pt-1 items-center gap-1"> <img alt="Warning" className="w-4 h-4" src="/icons/warningCircle.png" /> <p className="text-xs text-[var(--color-fg-danger)]">{error}</p> </div> )} <Input id="groupName" placeholder="Enter tool group name" value={newGroupName} onChange={(e) => onGroupNameChange(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { onSave(); } }} maxLength={50} autoFocus aria-invalid={!!error} aria-describedby={error ? "groupName-error" : undefined} /> {newGroupName.length > 49 && ( <p className={styles.modalCharacterCount}> {newGroupName.length}/50 characters </p> )} </div> <div className={styles.modalSpace}> <label htmlFor="groupDescription" className={styles.modalLabel}> Description{" "} <span className="text-gray-400" style={{ fontSize: "12px" }}> (optional) </span> </label> <Textarea id="groupDescription" placeholder="Enter tool group description" value={newGroupDescription} onChange={(e) => onGroupDescriptionChange?.(e.target.value)} rows={1} maxLength={200} className="bg-white" /> {newGroupDescription.length > 190 && ( <p className={styles.modalCharacterCount}> {newGroupDescription.length}/200 characters </p> )} </div> </div> <div className={styles.modalFooter}> <Button variant="secondary" onClick={onClose} disabled={isCreating} className={styles.modalCancelButton} > Cancel </Button> <Button onClick={onSave} className={styles.modalCreateButton} disabled={ !newGroupName.trim() || isCreating || selectedToolsCount === 0 } > {isCreating ? ( <div className="flex items-center gap-2"> <Spinner size="small" className="text-white" /> <span>Creating...</span> </div> ) : ( "Create Group" )} </Button> </div> </DialogContent> </Dialog> ); }