inspector/clients/web/src/components/molecules/RootsTable/RootsTable.tsx
2026-03-17 16:43:27 -04:00

106 lines
2.5 KiB
TypeScript

import {
ActionIcon,
Alert,
Button,
Divider,
Group,
Stack,
Table,
Text,
TextInput,
Title,
} from "@mantine/core";
export interface RootEntry {
name: string;
uri: string;
}
export interface RootsTableProps {
roots: RootEntry[];
newRootName: string;
newRootPath: string;
onRemoveRoot: (uri: string) => void;
onNewRootNameChange: (name: string) => void;
onNewRootPathChange: (path: string) => void;
onAddRoot: () => void;
onBrowse: () => void;
}
export function RootsTable({
roots,
newRootName,
newRootPath,
onRemoveRoot,
onNewRootNameChange,
onNewRootPathChange,
onAddRoot,
onBrowse,
}: RootsTableProps) {
return (
<Stack gap="md">
<Title order={4}>Roots Configuration</Title>
<Text size="sm" c="dimmed">
Filesystem roots exposed to the connected server:
</Text>
{roots.length > 0 && (
<Table>
<Table.Thead>
<Table.Tr>
<Table.Th>Name</Table.Th>
<Table.Th>URI</Table.Th>
<Table.Th>Actions</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{roots.map((root) => (
<Table.Tr key={root.uri}>
<Table.Td>{root.name}</Table.Td>
<Table.Td>{root.uri}</Table.Td>
<Table.Td>
<ActionIcon
color="red"
variant="subtle"
onClick={() => onRemoveRoot(root.uri)}
>
X
</ActionIcon>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
)}
<Button variant="light" fullWidth onClick={onAddRoot}>
+ Add Root
</Button>
<Divider />
<Title order={5}>Add New Root:</Title>
<TextInput
label="Name"
value={newRootName}
onChange={(e) => onNewRootNameChange(e.currentTarget.value)}
/>
<TextInput
label="Path"
value={newRootPath}
onChange={(e) => onNewRootPathChange(e.currentTarget.value)}
/>
<Group justify="flex-end">
<Button variant="light" onClick={onBrowse}>
Browse
</Button>
<Button onClick={onAddRoot}>Add</Button>
</Group>
<Alert color="yellow" title="Warning">
Roots give the server access to these directories. Only add directories
you trust the server to access.
</Alert>
</Stack>
);
}