@vertesia/ui 1.4.0-dev.20260615.042549Z → 1.4.0-dev.20260629.130134Z

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -17,6 +17,15 @@ interface CollectionsFacetsNavProps {
         dynamic?: FacetBucket[];
     };
     search: SearchInterface;
+    /**
+     * Optional controlled filter state. When provided, the parent owns the filter list (and is
+     * responsible for translating it into the search query via {@link useCollectionsFilterHandler}).
+     * This lets other surfaces — e.g. per-row "quick filter" buttons in the table — add filters that
+     * show up in the filter bar. When omitted, the component manages its own filter state internally.
+     */
+    filters?: BaseFilter[];
+    setFilters?: React.Dispatch<React.SetStateAction<BaseFilter[]>>;
+    filterGroups?: FilterGroup[];
 }
 
 // Hook to create filter groups for collections
@@ -85,14 +94,30 @@ export function useCollectionsFilterHandler(search: SearchInterface) {
 }
 
 // Component for collections filtering
-export function CollectionsFacetsNav({ facets, search }: CollectionsFacetsNavProps) {
-    const [filters, setFilters] = useState<BaseFilter[]>([]);
-    const filterGroups = useCollectionsFilterGroups(facets);
+export function CollectionsFacetsNav({
+    facets,
+    search,
+    filters: controlledFilters,
+    setFilters: controlledSetFilters,
+    filterGroups: controlledFilterGroups,
+}: CollectionsFacetsNavProps) {
+    const [internalFilters, setInternalFilters] = useState<BaseFilter[]>([]);
+    const internalFilterGroups = useCollectionsFilterGroups(facets);
     const handleFilterLogic = useCollectionsFilterHandler(search);
 
+    // Controlled when the parent supplies both the filter list and its setter; otherwise self-managed.
+    const isControlled = controlledFilters !== undefined && controlledSetFilters !== undefined;
+    const filters = isControlled ? controlledFilters : internalFilters;
+    const filterGroups = controlledFilterGroups ?? internalFilterGroups;
+
     const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
-        const newFilters = typeof value === 'function' ? value(filters) : value;
-        setFilters(newFilters);
+        if (isControlled) {
+            // The parent's setter is expected to also run the filter→query translation.
+            controlledSetFilters(value);
+            return;
+        }
+        const newFilters = typeof value === 'function' ? value(internalFilters) : value;
+        setInternalFilters(newFilters);
         handleFilterLogic(newFilters);
     };
 

package/src/features/facets/PromptsFacetsNav.tsx

@@ -17,6 +17,15 @@ interface PromptsFacetsNavProps {
         tags?: FacetBucket[];
     };
     search: SearchInterface;
+    /**
+     * Optional controlled filter state. When provided, the parent owns the filter list (and is
+     * responsible for translating it into the search query via {@link usePromptsFilterHandler}). This
+     * lets other surfaces — e.g. per-row "quick filter" buttons in the table — add filters that show
+     * up in the filter bar. When omitted, the component manages its own filter state internally.
+     */
+    filters?: BaseFilter[];
+    setFilters?: React.Dispatch<React.SetStateAction<BaseFilter[]>>;
+    filterGroups?: FilterGroup[];
 }
 
 // Hook to create filter groups for prompts
@@ -76,14 +85,30 @@ export function usePromptsFilterHandler(search: SearchInterface) {
 }
 
 // Component for prompts filtering
-export function PromptsFacetsNav({ facets, search }: PromptsFacetsNavProps) {
-    const [filters, setFilters] = useState<BaseFilter[]>([]);
-    const filterGroups = usePromptsFilterGroups(facets);
+export function PromptsFacetsNav({
+    facets,
+    search,
+    filters: controlledFilters,
+    setFilters: controlledSetFilters,
+    filterGroups: controlledFilterGroups,
+}: PromptsFacetsNavProps) {
+    const [internalFilters, setInternalFilters] = useState<BaseFilter[]>([]);
+    const internalFilterGroups = usePromptsFilterGroups(facets);
     const handleFilterLogic = usePromptsFilterHandler(search);
 
+    // Controlled when the parent supplies both the filter list and its setter; otherwise self-managed.
+    const isControlled = controlledFilters !== undefined && controlledSetFilters !== undefined;
+    const filters = isControlled ? controlledFilters : internalFilters;
+    const filterGroups = controlledFilterGroups ?? internalFilterGroups;
+
     const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
-        const newFilters = typeof value === 'function' ? value(filters) : value;
-        setFilters(newFilters);
+        if (isControlled) {
+            // The parent's setter is expected to also run the filter→query translation.
+            controlledSetFilters(value);
+            return;
+        }
+        const newFilters = typeof value === 'function' ? value(internalFilters) : value;
+        setInternalFilters(newFilters);
         handleFilterLogic(newFilters);
     };
 

package/src/features/facets/RunsFacetsNav.tsx

@@ -31,6 +31,15 @@ interface RunsFacetsNavProps {
     search: SearchInterface;
     actions?: React.ReactNode[];
     selectionCount?: number;
+    /**
+     * Optional controlled filter state. When provided, the parent owns the filter list (and is
+     * responsible for translating it into the search query via {@link useRunsFilterHandler}). This
+     * lets other surfaces — e.g. per-row "quick filter" buttons in the table — add filters that show
+     * up in the filter bar. When omitted, the component manages its own filter state internally.
+     */
+    filters?: BaseFilter[];
+    setFilters?: React.Dispatch<React.SetStateAction<BaseFilter[]>>;
+    filterGroups?: FilterGroup[];
 }
 
 // Hook to create filter groups for runs
@@ -179,14 +188,32 @@ export function useRunsFilterHandler(search: SearchInterface) {
 }
 
 // Legacy component for backward compatibility
-export function RunsFacetsNav({ facets, search, actions, selectionCount }: RunsFacetsNavProps) {
-    const [filters, setFilters] = useState<BaseFilter[]>([]);
-    const filterGroups = useRunsFilterGroups(facets);
+export function RunsFacetsNav({
+    facets,
+    search,
+    actions,
+    selectionCount,
+    filters: controlledFilters,
+    setFilters: controlledSetFilters,
+    filterGroups: controlledFilterGroups,
+}: RunsFacetsNavProps) {
+    const [internalFilters, setInternalFilters] = useState<BaseFilter[]>([]);
+    const internalFilterGroups = useRunsFilterGroups(facets);
     const handleFilterLogic = useRunsFilterHandler(search);
 
+    // Controlled when the parent supplies both the filter list and its setter; otherwise self-managed.
+    const isControlled = controlledFilters !== undefined && controlledSetFilters !== undefined;
+    const filters = isControlled ? controlledFilters : internalFilters;
+    const filterGroups = controlledFilterGroups ?? internalFilterGroups;
+
     const handleFilterChange: React.Dispatch<React.SetStateAction<BaseFilter[]>> = (value) => {
-        const newFilters = typeof value === 'function' ? value(filters) : value;
-        setFilters(newFilters);
+        if (isControlled) {
+            // The parent's setter is expected to also run the filter→query translation.
+            controlledSetFilters(value);
+            return;
+        }
+        const newFilters = typeof value === 'function' ? value(internalFilters) : value;
+        setInternalFilters(newFilters);
         handleFilterLogic(newFilters);
     };
 

package/src/features/index.ts

@@ -1,6 +1,5 @@
 export * from './activity-doc/index.js';
 export * from './agent';
-export * from './document-viewer/index.js';
 export * from './errors/index.js';
 export * from './facets/index.js';
 export * from './layout/index.js';

package/src/features/oauth/McpConnectionsButton.test.tsx

@@ -0,0 +1,248 @@
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../__tests__/test-utils.js';
+import { McpConnectionsActionMenu, McpConnectionsInlineList } from './McpConnectionsButton.js';
+
+const mocks = vi.hoisted(() => ({
+    getCollectionStatus: vi.fn(),
+    getInstalledApps: vi.fn(),
+    getStatus: vi.fn(),
+}));
+
+const mockClient = {
+    apps: {
+        getInstalledApps: mocks.getInstalledApps,
+    },
+    remoteMcpConnections: {
+        getCollectionStatus: mocks.getCollectionStatus,
+        getStatus: mocks.getStatus,
+    },
+};
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: mockClient,
+    }),
+}));
+
+function deferred<T>() {
+    let resolve!: (value: T) => void;
+    let reject!: (reason?: unknown) => void;
+    const promise = new Promise<T>((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve, reject };
+}
+
+describe('MCP connection controls', () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('shows available MCP servers and their connection and availability state inline', async () => {
+        mocks.getInstalledApps.mockResolvedValue([
+            {
+                id: 'app-1',
+                manifest: {
+                    name: 'mcp-app',
+                    title: 'MCP App',
+                    oauth_providers: {},
+                    tool_collections: [
+                        {
+                            type: 'mcp',
+                            id: 'jira',
+                            name: 'Jira',
+                            namespace: 'jira',
+                            url: 'https://jira-mcp.example.com',
+                        },
+                        {
+                            type: 'mcp',
+                            id: 'miro',
+                            name: 'Miro',
+                            namespace: 'miro',
+                            url: 'https://miro-mcp.example.com',
+                        },
+                        {
+                            type: 'mcp',
+                            id: 'linear',
+                            name: 'Linear',
+                            namespace: 'linear',
+                            url: 'https://linear-mcp.example.com',
+                        },
+                        {
+                            type: 'mcp',
+                            id: 'github',
+                            name: 'GitHub',
+                            namespace: 'github',
+                            url: 'https://github-mcp.example.com',
+                        },
+                    ],
+                },
+                oauth_collection_ids: ['jira', 'miro', 'linear', 'github'],
+            },
+        ]);
+        mocks.getStatus.mockResolvedValue([
+            {
+                authenticated: true,
+                collection_id: 'jira',
+                collection_name: 'Jira',
+                mcp_server_url: 'https://jira-mcp.example.com',
+            },
+            {
+                authenticated: true,
+                collection_id: 'miro',
+                collection_name: 'Miro',
+                mcp_server_url: 'https://miro-mcp.example.com',
+            },
+            {
+                authenticated: true,
+                collection_id: 'linear',
+                collection_name: 'Linear',
+                mcp_server_url: 'https://linear-mcp.example.com',
+            },
+            {
+                authenticated: false,
+                collection_id: 'github',
+                collection_name: 'GitHub',
+                mcp_server_url: 'https://github-mcp.example.com',
+            },
+        ]);
+        const onChange = vi.fn();
+
+        renderWithProviders(<McpConnectionsInlineList disabledCollections={['linear']} onChange={onChange} />);
+
+        await screen.findByText('Jira');
+        await waitFor(() => expect(mocks.getStatus).toHaveBeenCalledTimes(1));
+
+        expect(screen.getByText('Miro')).not.toBeNull();
+        expect(screen.getByText('Linear')).not.toBeNull();
+        expect(screen.getByText('GitHub')).not.toBeNull();
+        expect(screen.queryByText('Connected')).toBeNull();
+        expect(screen.getAllByRole('button', { name: 'Disconnect' })).toHaveLength(3);
+        const connectButton = screen.getByRole('button', { name: 'Connect' });
+        const disconnectButton = screen.getAllByRole('button', { name: 'Disconnect' })[0];
+        expect(connectButton.className).toContain('w-32');
+        expect(disconnectButton.className).toContain('w-32');
+        expect(screen.getAllByText('Enabled')).toHaveLength(3);
+        expect(screen.getByText('Disabled')).not.toBeNull();
+    });
+
+    it('renders MCP rows before connection statuses finish loading', async () => {
+        const statusRequest =
+            deferred<
+                Array<{
+                    authenticated: boolean;
+                    collection_id: string;
+                    collection_name: string;
+                    mcp_server_url: string;
+                }>
+            >();
+        mocks.getInstalledApps.mockResolvedValue([
+            {
+                id: 'app-1',
+                manifest: {
+                    name: 'jira-app',
+                    title: 'Jira App',
+                    oauth_providers: {},
+                    tool_collections: [
+                        {
+                            type: 'mcp',
+                            id: 'jira',
+                            name: 'Jira',
+                            namespace: 'jira',
+                            url: 'https://jira-mcp.example.com',
+                        },
+                    ],
+                },
+                oauth_collection_ids: ['jira'],
+            },
+        ]);
+        mocks.getStatus.mockReturnValue(statusRequest.promise);
+
+        renderWithProviders(<McpConnectionsInlineList onChange={vi.fn()} />);
+
+        expect(await screen.findByText('Jira')).not.toBeNull();
+        const checkingButton = screen.getByRole('button', { name: 'Checking status' });
+        expect((checkingButton as HTMLButtonElement).disabled).toBe(true);
+        expect(checkingButton.className).toContain('w-32');
+        expect(mocks.getCollectionStatus).not.toHaveBeenCalled();
+
+        await act(async () => {
+            statusRequest.resolve([
+                {
+                    authenticated: true,
+                    collection_id: 'jira',
+                    collection_name: 'Jira',
+                    mcp_server_url: 'https://jira-mcp.example.com',
+                },
+            ]);
+        });
+
+        await waitFor(() => expect(screen.getByRole('button', { name: 'Disconnect' })).not.toBeNull());
+        expect(screen.queryByText('Connected')).toBeNull();
+    });
+
+    it('renders MCP in a separate slash action menu', async () => {
+        mocks.getInstalledApps.mockResolvedValue([
+            {
+                id: 'app-1',
+                manifest: {
+                    name: 'jira-app',
+                    title: 'Jira',
+                    oauth_providers: {},
+                    tool_collections: [
+                        {
+                            type: 'mcp',
+                            id: 'jira',
+                            name: 'Jira',
+                            namespace: 'jira',
+                            url: 'https://mcp.example.com',
+                        },
+                        {
+                            type: 'mcp',
+                            id: 'github',
+                            name: 'GitHub',
+                            namespace: 'github',
+                            url: 'https://github-mcp.example.com',
+                        },
+                    ],
+                },
+                oauth_collection_ids: ['jira', 'github'],
+            },
+        ]);
+        mocks.getStatus.mockResolvedValue([
+            {
+                authenticated: true,
+                collection_id: 'jira',
+                collection_name: 'Jira',
+                mcp_server_url: 'https://mcp.example.com',
+            },
+            {
+                authenticated: false,
+                collection_id: 'github',
+                collection_name: 'GitHub',
+                mcp_server_url: 'https://github-mcp.example.com',
+            },
+        ]);
+
+        renderWithProviders(<McpConnectionsActionMenu />);
+
+        const trigger = await screen.findByRole('button', { name: /settings/i });
+        await waitFor(() => expect(mocks.getStatus).toHaveBeenCalledTimes(1));
+        expect(mocks.getStatus).toHaveBeenCalledWith('app-1');
+        expect(trigger.textContent).toBe('/');
+
+        fireEvent.pointerDown(trigger);
+
+        const menuItem = await screen.findByText('MCP');
+        expect(menuItem).not.toBeNull();
+        expect(screen.getByText('1')).not.toBeNull();
+
+        fireEvent.click(menuItem);
+
+        await waitFor(() => {
+            expect(screen.getByText('Manage the MCP servers available to this conversation.')).not.toBeNull();
+        });
+    });
+});

package/src/features/oauth/McpConnectionsButton.tsx

@@ -0,0 +1,269 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { Link2, Link2Off } from 'lucide-react';
+import { useState } from 'react';
+import { Badge, Button, Dropdown, MenuItem, Spinner, Switch, VTooltip } from '../../core/index.js';
+import { McpConnectionsDialog } from './McpConnectionsDialog.js';
+import { RemoteMcpConnectionButton } from './RemoteMcpConnectionButton.js';
+import {
+    countConnectedActiveGroups,
+    getConnectedActiveGroupLabels,
+    isGroupDisabled,
+    toggleGroupDisabled,
+    useMcpConnections,
+} from './useMcpConnections.js';
+
+export interface McpConnectionsButtonProps {
+    /** Collection ids deactivated for this conversation. `undefined`/empty ⇒ all active. */
+    disabledCollections?: string[];
+    /** Emits the next disabled-collection list when a server is toggled. Omit for read-only. */
+    onChange?: (disabled: string[]) => void;
+    /** Called after a successful connect/disconnect (e.g. to trigger tool re-discovery). */
+    onConnectionChange?: () => void;
+    /** Read-only: show status only, no toggles or connect/disconnect controls. */
+    readOnly?: boolean;
+    /** Button visual style. */
+    variant?: 'primary' | 'outline' | 'ghost' | 'secondary';
+    size?: 'xs' | 'sm' | 'md';
+}
+
+/**
+ * Toolbar button that opens the MCP connections dialog. The badge shows how many MCP
+ * servers are connected and active for this conversation.
+ * Renders nothing when the project has no OAuth MCP servers installed.
+ */
+export function McpConnectionsButton({
+    disabledCollections,
+    onChange,
+    onConnectionChange,
+    readOnly = false,
+    variant = 'outline',
+    size = 'sm',
+}: McpConnectionsButtonProps) {
+    const { t } = useUITranslation();
+    const { groups, loading, statusLoading, reload } = useMcpConnections();
+    const [isOpen, setIsOpen] = useState(false);
+
+    if (!loading && groups.length === 0) {
+        return null;
+    }
+
+    const activeCount = countConnectedActiveGroups(groups, disabledCollections);
+    const activeLabels = getConnectedActiveGroupLabels(groups, disabledCollections);
+    const visibleLabels = activeLabels.slice(0, 2);
+    const hiddenLabelCount = activeLabels.length - visibleLabels.length;
+    const summary =
+        visibleLabels.length > 0
+            ? `${visibleLabels.join(', ')}${hiddenLabelCount > 0 ? ` +${hiddenLabelCount}` : ''}`
+            : undefined;
+
+    return (
+        <>
+            <div className="flex min-w-0 items-center gap-2">
+                {summary && (
+                    <span className="max-w-48 truncate text-muted" title={activeLabels.join(', ')}>
+                        {summary}
+                    </span>
+                )}
+                <Button
+                    variant={variant}
+                    size={size}
+                    className="shrink-0"
+                    onClick={() => setIsOpen(true)}
+                    disabled={loading}
+                    aria-label={t('mcpConnections.manage')}
+                >
+                    <span>{t('mcpConnections.label')}</span>
+                    {activeCount > 0 && <Badge variant="success">{activeCount}</Badge>}
+                </Button>
+            </div>
+            <McpConnectionsDialog
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                groups={groups}
+                loading={loading}
+                reload={reload}
+                statusLoading={statusLoading}
+                disabledCollections={disabledCollections}
+                onChange={onChange}
+                onConnectionChange={onConnectionChange}
+                readOnly={readOnly}
+            />
+        </>
+    );
+}
+
+/**
+ * Inline MCP status list for forms. It shows all available OAuth MCP groups
+ * without requiring the user to open the management dialog.
+ */
+export function McpConnectionsInlineList({
+    disabledCollections,
+    onChange,
+    onConnectionChange,
+    readOnly = false,
+}: Omit<McpConnectionsButtonProps, 'variant' | 'size'>) {
+    const { t } = useUITranslation();
+    const { groups, loading, statusLoading, reload } = useMcpConnections();
+
+    if (!loading && groups.length === 0) {
+        return null;
+    }
+
+    const handleAuthChange = () => {
+        void reload();
+        onConnectionChange?.();
+    };
+
+    if (loading && groups.length === 0) {
+        return (
+            <div className="flex items-center gap-2 border-y border-border/70 py-2 text-sm text-muted">
+                <Spinner className="size-4" />
+                <span>{t('mcpConnections.label')}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-1">
+            {groups.map((group) => {
+                const active = !isGroupDisabled(group, disabledCollections);
+                const connected = group.authStatus?.authenticated === true;
+                const StatusIcon = connected ? Link2 : Link2Off;
+                return (
+                    <div key={group.key} className="flex flex-wrap items-center gap-x-3 gap-y-2 py-2 text-sm">
+                        <div className="flex min-w-36 flex-1 items-center gap-2">
+                            <StatusIcon
+                                className={`size-4 shrink-0 ${connected ? 'text-success' : 'text-muted'}`}
+                                aria-hidden="true"
+                            />
+                            <VTooltip
+                                description={
+                                    <div className="space-y-0.5">
+                                        <div className="font-medium">{group.appName}</div>
+                                        {group.memberNames.length > 1 && (
+                                            <div className="text-xs text-muted">{group.memberNames.join(' · ')}</div>
+                                        )}
+                                    </div>
+                                }
+                                placement="top"
+                                asChild
+                            >
+                                <span
+                                    className={`block truncate ${active ? 'text-foreground' : 'text-muted line-through'}`}
+                                >
+                                    {group.label}
+                                </span>
+                            </VTooltip>
+                        </div>
+                        {statusLoading && !group.authStatus ? (
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                disabled
+                                className="h-6 w-32 justify-center px-2 text-xs"
+                                aria-label={t('mcpConnections.checkingStatus')}
+                                title={t('mcpConnections.checkingStatus')}
+                            >
+                                <Spinner className="size-3" />
+                            </Button>
+                        ) : (
+                            <RemoteMcpConnectionButton
+                                appId={group.appId}
+                                collectionId={group.representativeId}
+                                collectionName={group.label}
+                                authenticated={group.authStatus?.authenticated}
+                                onAuthChange={handleAuthChange}
+                                variant="compact"
+                                showDisconnect
+                                readOnly={readOnly}
+                            />
+                        )}
+                        {onChange && (
+                            <div className="flex min-w-24 items-center justify-end gap-2 text-xs">
+                                <span className={active ? 'text-muted' : 'text-attention'}>
+                                    {active ? t('mcpConnections.enabled') : t('mcpConnections.disabled')}
+                                </span>
+                                <Switch
+                                    size="sm"
+                                    value={active}
+                                    onChange={(checked) =>
+                                        onChange(toggleGroupDisabled(group, disabledCollections, checked))
+                                    }
+                                    disabled={readOnly}
+                                    aria-label={
+                                        active
+                                            ? t('mcpConnections.deactivateAria', { name: group.label })
+                                            : t('mcpConnections.activateAria', { name: group.label })
+                                    }
+                                />
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+/**
+ * Compact composer action menu for MCP. The slash trigger keeps MCP out of the
+ * main composer toolbar while still exposing the connection dialog when relevant.
+ */
+export function McpConnectionsActionMenu({
+    disabledCollections,
+    onChange,
+    onConnectionChange,
+    readOnly = false,
+}: Omit<McpConnectionsButtonProps, 'variant' | 'size'>) {
+    const { t } = useUITranslation();
+    const { groups, loading, statusLoading, reload } = useMcpConnections();
+    const [isOpen, setIsOpen] = useState(false);
+
+    if (!loading && groups.length === 0) {
+        return null;
+    }
+
+    const activeCount = countConnectedActiveGroups(groups, disabledCollections);
+
+    return (
+        <>
+            <Dropdown
+                align="left"
+                trigger={
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 rounded-md text-muted hover:bg-muted"
+                        aria-label={t('mcpConnections.settings')}
+                        title={t('mcpConnections.settings')}
+                        disabled={loading}
+                    >
+                        <span
+                            className="flex size-5 items-center justify-center rounded-[3px] border border-muted text-sm font-semibold leading-none"
+                            aria-hidden="true"
+                        >
+                            /
+                        </span>
+                    </Button>
+                }
+            >
+                <MenuItem onClick={() => setIsOpen(true)} isDisabled={loading}>
+                    <span>{t('mcpConnections.title')}</span>
+                    {activeCount > 0 && <Badge variant="success">{activeCount}</Badge>}
+                </MenuItem>
+            </Dropdown>
+            <McpConnectionsDialog
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                groups={groups}
+                loading={loading}
+                reload={reload}
+                statusLoading={statusLoading}
+                disabledCollections={disabledCollections}
+                onChange={onChange}
+                onConnectionChange={onConnectionChange}
+                readOnly={readOnly}
+            />
+        </>
+    );
+}