@vertesia/ui 1.0.0 → 1.1.0-dev.20260427.060440Z

package/src/features/oauth/OAuthProviderConnectButton.tsx

@@ -0,0 +1,125 @@
+import type { OAuthProviderAuthStatus } from '@vertesia/common';
+import { useUserSession } from '@vertesia/ui/session';
+import { CheckCircle2, ExternalLink } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Spinner } from '../../core/index.js';
+import { useUITranslation } from '../../i18n/index.js';
+import { useOAuthPopup } from './useOAuthPopup.js';
+
+interface OAuthProviderConnectButtonProps {
+    oauthProviderId: string;
+    onAuthChange?: () => void;
+}
+
+/**
+ * Connect button for generic OAuth Providers (not MCP-specific).
+ * Uses the OAuth Providers API for authorize/status/disconnect.
+ */
+export function OAuthProviderConnectButton({ oauthProviderId, onAuthChange }: OAuthProviderConnectButtonProps) {
+    const { client } = useUserSession();
+    const { t } = useUITranslation();
+    const [status, setStatus] = useState<OAuthProviderAuthStatus | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [authenticating, setAuthenticating] = useState(false);
+    const [disconnecting, setDisconnecting] = useState(false);
+
+    const loadStatus = useCallback(async () => {
+        try {
+            setLoading(true);
+            const data = await client.oauthProviders.getStatus(oauthProviderId);
+            setStatus(data);
+        } catch (err: unknown) {
+            console.error('Failed to load OAuth provider status:', err);
+        } finally {
+            setLoading(false);
+        }
+    }, [client, oauthProviderId]);
+
+    useEffect(() => {
+        loadStatus();
+    }, [loadStatus]);
+
+    const { openOAuthPopup } = useOAuthPopup({
+        onComplete: () => {
+            setAuthenticating(false);
+            loadStatus();
+            onAuthChange?.();
+        },
+        onError: (error) => {
+            console.error('OAuth provider auth failed:', error);
+            setAuthenticating(false);
+        },
+    });
+
+    const handleConnect = async () => {
+        if (authenticating) return;
+        try {
+            setAuthenticating(true);
+            const response = await client.oauthProviders.authorize(oauthProviderId);
+            if (response.authorization_url) {
+                openOAuthPopup(response.authorization_url);
+            }
+        } catch (err: unknown) {
+            console.error('Failed to authorize OAuth provider:', err);
+            setAuthenticating(false);
+        }
+    };
+
+    const handleDisconnect = async () => {
+        if (disconnecting) return;
+        try {
+            setDisconnecting(true);
+            await client.oauthProviders.disconnect(oauthProviderId);
+            await loadStatus();
+            onAuthChange?.();
+        } catch (err: unknown) {
+            console.error('Failed to disconnect OAuth provider:', err);
+        } finally {
+            setDisconnecting(false);
+        }
+    };
+
+    if (loading) {
+        return <Spinner className="size-4" />;
+    }
+
+    if (status?.authenticated) {
+        return (
+            <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1 text-success text-sm">
+                    <CheckCircle2 className="size-4" />
+                    <span>{t('oauthProvider.connected')}</span>
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleDisconnect}
+                    disabled={disconnecting}
+                >
+                    {disconnecting ? <Spinner className="size-3" /> : t('oauthProvider.disconnect')}
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            onClick={handleConnect}
+            disabled={authenticating}
+        >
+            {authenticating ? (
+                <>
+                    <Spinner className="size-4" />
+                    <span>{t('oauthProvider.authenticating')}</span>
+                </>
+            ) : (
+                <>
+                    <ExternalLink className="size-4 mr-1" />
+                    <span>{t('oauthProvider.authenticate')}</span>
+                </>
+            )}
+        </Button>
+    );
+}

package/src/features/oauth/RemoteMcpConnectionButton.tsx

@@ -0,0 +1,274 @@
+import { useUserSession } from '@vertesia/ui/session';
+import { Button, Spinner } from '../../core/index.js';
+import { useUITranslation } from '../../i18n/index.js';
+import { CheckCircle2, ExternalLink, ShieldAlertIcon } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useOAuthPopup } from './useOAuthPopup.js';
+
+interface RemoteMcpConnectionButtonProps {
+    appId: string;
+    collectionId: string;
+    collectionName?: string;
+    /** Pre-fetched authentication status. If not provided, will fetch automatically. */
+    authenticated?: boolean;
+    onAuthChange?: () => void;
+    onError?: (error: string | null) => void;
+    variant?: 'default' | 'compact' | 'full';
+    /** Show collection name label */
+    showLabel?: boolean;
+    /** Show disconnect button when authenticated */
+    showDisconnect?: boolean;
+    /** Read-only mode - only show status, no interactive buttons */
+    readOnly?: boolean;
+}
+
+interface OAuthStatus {
+    authenticated: boolean;
+    collection_id: string;
+    collection_name: string;
+    expires_at?: string;
+    mcp_server_url: string;
+}
+
+/**
+ * Flexible connect button for remote MCP tool collections.
+ * - 'compact': minimal size for lists (no disconnect)
+ * - 'default': standard button size (no disconnect)
+ * - 'full': with label, status, and disconnect button
+ */
+export function RemoteMcpConnectionButton({
+    appId,
+    collectionId,
+    collectionName,
+    authenticated: providedAuthenticated,
+    onAuthChange,
+    onError,
+    variant = 'default',
+    showLabel = false,
+    showDisconnect = false,
+    readOnly = false
+}: RemoteMcpConnectionButtonProps) {
+    const { client } = useUserSession();
+    const { t } = useUITranslation();
+    const [status, setStatus] = useState<OAuthStatus | null>(null);
+    const [loading, setLoading] = useState(providedAuthenticated === undefined);
+    const [authenticating, setAuthenticating] = useState(false);
+    const [disconnecting, setDisconnecting] = useState(false);
+
+    const authenticated = providedAuthenticated ?? status?.authenticated ?? false;
+    const displayName = collectionName ?? collectionId;
+
+    const loadStatus = useCallback(async () => {
+        if (providedAuthenticated !== undefined) {
+            setLoading(false);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const data = await client.remoteMcpConnections.getCollectionStatus(appId, collectionId);
+            setStatus(data);
+        } catch (error) {
+            console.error('[RemoteMcpConnectionButton] Failed to load OAuth status:', error);
+        } finally {
+            setLoading(false);
+        }
+    }, [client, appId, collectionId, providedAuthenticated]);
+
+    useEffect(() => {
+        loadStatus();
+    }, [loadStatus]);
+
+    const { openOAuthPopup } = useOAuthPopup({
+        onComplete: () => {
+            setAuthenticating(false);
+            loadStatus();
+            onAuthChange?.();
+        },
+        onError: (error) => {
+            console.error('OAuth failed:', error);
+            setAuthenticating(false);
+        }
+    });
+
+    const handleConnect = async () => {
+        try {
+            setAuthenticating(true);
+            onError?.(null);
+            const response = await client.remoteMcpConnections.authorize(appId, collectionId);
+            if (response.connected) {
+                setAuthenticating(false);
+                await loadStatus();
+                onAuthChange?.();
+            } else if (response.authorization_url) {
+                openOAuthPopup(response.authorization_url);
+            } else {
+                onError?.(`${displayName}: Authorization URL not provided by server`);
+                setAuthenticating(false);
+            }
+        } catch (error) {
+            console.error('Failed to authorize:', error);
+            const raw = error instanceof Error
+                ? ((error as { original_message?: string }).original_message ?? error.message)
+                : 'Failed to connect';
+            const detail = raw.replace(/^[A-Za-z\s]+:\s/, '');
+            onError?.(`${displayName}: ${detail}`);
+            setAuthenticating(false);
+        }
+    };
+
+    const handleDisconnect = async () => {
+        try {
+            setDisconnecting(true);
+            await client.remoteMcpConnections.disconnect(appId, collectionId);
+            await loadStatus();
+            onAuthChange?.();
+        } catch (error) {
+            console.error('Failed to disconnect:', error);
+        } finally {
+            setDisconnecting(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center gap-2 text-sm">
+                <Spinner className="size-4" />
+            </div>
+        );
+    }
+
+    if (variant === 'full') {
+        if (!authenticated) {
+            return (
+                <div className="flex items-center gap-2 text-sm">
+                    {showLabel && <span className="font-medium text-foreground">{displayName}:</span>}
+                    <Button variant="ghost" size="sm" onClick={handleConnect} disabled={authenticating}>
+                        {authenticating ? (
+                            <>
+                                <Spinner className="size-4" />
+                                <span>{t('mcpOAuth.authenticating')}</span>
+                            </>
+                        ) : (
+                            <>
+                                <ShieldAlertIcon className="size-4" />
+                                <span>{t('mcpOAuth.authenticate')}</span>
+                            </>
+                        )}
+                    </Button>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex items-center gap-2">
+                {showLabel && <span className="font-medium text-sm text-foreground">{displayName}:</span>}
+                <div className="flex items-center gap-1 text-success text-sm">
+                    <CheckCircle2 className="size-4" />
+                    <span>{t('mcpOAuth.connected')}</span>
+                </div>
+                {showDisconnect && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleDisconnect}
+                        disabled={disconnecting}
+                    >
+                        {disconnecting ? <Spinner className="size-4" /> : t('mcpOAuth.disconnect')}
+                    </Button>
+                )}
+            </div>
+        );
+    }
+
+    if (authenticated) {
+        if (variant === 'compact') {
+            return (
+                <div className="flex items-center gap-2">
+                    {showLabel && <span className="font-medium text-xs text-foreground">{displayName}:</span>}
+                    <div className="flex items-center gap-1 text-success">
+                        <CheckCircle2 className="size-3" />
+                        <span className="text-xs">{t('mcpOAuth.connected')}</span>
+                    </div>
+                    {!readOnly && showDisconnect && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={handleDisconnect}
+                            disabled={disconnecting}
+                            className="h-6 px-2 text-xs"
+                        >
+                            {disconnecting ? <Spinner className="size-3" /> : t('mcpOAuth.disconnect')}
+                        </Button>
+                    )}
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex items-center gap-1 text-success">
+                <CheckCircle2 className="size-4" />
+                <span className="text-sm">{t('mcpOAuth.connected')}</span>
+            </div>
+        );
+    }
+
+    if (variant === 'compact') {
+        if (readOnly) {
+            return (
+                <div className="flex items-center gap-2">
+                    {showLabel && <span className="font-medium text-xs text-foreground">{collectionName}:</span>}
+                    <div className="flex items-center gap-1 text-muted">
+                        <span className="text-xs">{t('mcpOAuth.notConnected')}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex items-center gap-2">
+                {showLabel && <span className="font-medium text-xs text-foreground">{displayName}:</span>}
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleConnect}
+                    disabled={authenticating}
+                    className="h-6 px-2 text-xs"
+                >
+                    {authenticating ? (
+                        <>
+                            <Spinner className="size-3" />
+                            <span>{t('mcpOAuth.connecting')}</span>
+                        </>
+                    ) : (
+                        <>
+                            <ExternalLink className="size-3 mr-1" />
+                            <span>{t('mcpOAuth.connect')}</span>
+                        </>
+                    )}
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            onClick={handleConnect}
+            disabled={authenticating}
+        >
+            {authenticating ? (
+                <>
+                    <Spinner className="size-4" />
+                    <span>{t('mcpOAuth.connecting')}</span>
+                </>
+            ) : (
+                <>
+                    <ExternalLink className="size-4 mr-1" />
+                    <span>{t('mcpOAuth.connect')}</span>
+                </>
+            )}
+        </Button>
+    );
+}

package/src/features/oauth/index.ts

@@ -0,0 +1,3 @@
+export * from './OAuthProviderConnectButton.js';
+export * from './RemoteMcpConnectionButton.js';
+export * from './useOAuthPopup.js';

package/src/features/oauth/useOAuthPopup.ts

@@ -0,0 +1,125 @@
+import { useEffect, useRef } from 'react';
+
+export interface UseOAuthPopupOptions {
+    onComplete: () => void;
+    onError?: (error: string) => void;
+}
+
+/**
+ * OAuth message structure from callback page
+ */
+interface OAuthMessage {
+    type: 'oauth-complete';
+    success: boolean;
+    error?: string;
+}
+
+/**
+ * Type guard to validate OAuth message structure
+ */
+function isOAuthMessage(data: unknown): data is OAuthMessage {
+    return (
+        typeof data === 'object' &&
+        data !== null &&
+        'type' in data &&
+        data.type === 'oauth-complete' &&
+        'success' in data &&
+        typeof (data as OAuthMessage).success === 'boolean'
+    );
+}
+
+/**
+ * Hook to manage OAuth popup window with proper cleanup
+ * Handles window.postMessage communication and fallback polling
+ */
+export function useOAuthPopup({ onComplete, onError }: UseOAuthPopupOptions) {
+    const cleanupRef = useRef<(() => void) | null>(null);
+    const onCompleteRef = useRef(onComplete);
+    const onErrorRef = useRef(onError);
+
+    // Keep refs up to date
+    useEffect(() => {
+        onCompleteRef.current = onComplete;
+        onErrorRef.current = onError;
+    }, [onComplete, onError]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, []);
+
+    const openOAuthPopup = (authorizationUrl: string) => {
+        // Clean up any previous OAuth flow
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
+
+        // Open OAuth authorization in centered popup window.
+        const width = 600;
+        const height = 700;
+        const left = window.screenX + (window.outerWidth - width) / 2;
+        const top = window.screenY + (window.outerHeight - height) / 2;
+
+        const popup = window.open(
+            authorizationUrl,
+            'oauth_popup',
+            `width=${width},height=${height},left=${left},top=${top},popup=yes`
+        );
+
+        let messageReceived = false;
+        let intervalId: ReturnType<typeof setInterval> | null = null;
+
+        // BroadcastChannel is same-origin by spec — no origin check required.
+        const channel = new BroadcastChannel('oauth-callback');
+
+        const handleMessage = (event: MessageEvent) => {
+            if (!isOAuthMessage(event.data)) {
+                return;
+            }
+
+            messageReceived = true;
+            channel.close();
+            if (intervalId) clearInterval(intervalId);
+
+            onCompleteRef.current();
+
+            if (!event.data.success && event.data.error) {
+                onErrorRef.current?.(event.data.error);
+            }
+
+            cleanupRef.current = null;
+        };
+
+        channel.addEventListener('message', handleMessage);
+
+        // Poll for popup closure so the button resets if the user dismisses the popup early.
+        if (popup) {
+            intervalId = setInterval(() => {
+                if (popup.closed) {
+                    if (intervalId) clearInterval(intervalId);
+                    channel.close();
+
+                    if (!messageReceived) {
+                        onCompleteRef.current();
+                    }
+
+                    cleanupRef.current = null;
+                }
+            }, 1000);
+        }
+
+        // Store cleanup function
+        cleanupRef.current = () => {
+            channel.close();
+            if (intervalId) clearInterval(intervalId);
+        };
+    };
+
+    return { openOAuthPopup };
+}

package/src/features/store/collections/BrowseCollectionView.tsx

@@ -1,10 +1,10 @@
-import { Collection, getContentTypeRefId } from "@vertesia/common";
+import { Collection, getContentTypeRefId, ColumnLayout } from "@vertesia/common";
 import { useToast } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { TypeRegistry } from "../types/TypeRegistry.js";
 import { useTypeRegistry } from "../types/TypeRegistryProvider.js";
 import { DocumentSearchResults, DocumentSearchResultsWithDropZone } from "../objects/DocumentSearchResults";
-import { ColumnLayout } from "@vertesia/common";
+
 
 const collectionDefaultLayout: ColumnLayout[] = [
     { name: "ID", field: "id", type: "objectId?slice=-7" },
@@ -56,4 +56,4 @@ function getTableLayout(collection: Collection, typeRegistry?: TypeRegistry | un
     } else {
         return collectionDefaultLayout;
     }
-}
+}

package/src/features/store/collections/EditCollectionView.tsx

@@ -4,8 +4,9 @@ import { SharedPropsEditor, SyncMemberHeadsToggle, UserInfo } from "@vertesia/ui
 import { useUserSession } from "@vertesia/ui/session";
 import { MonacoEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
 import dayjs from "dayjs";
-import { useMemo, useRef, useState } from "react";
+import { useContext, useMemo, useRef, useState } from "react";
 import { useUITranslation } from '../../../i18n/index.js';
+import { SearchContext } from "../objects/search/DocumentSearchContext";
 import { SelectContentType, stringifyTableLayout } from "../types";
 
 interface UpdateData {
@@ -28,6 +29,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
     const toast = useToast();
     const { theme } = useTheme();
     const { client } = useUserSession();
+    const search = useContext(SearchContext);
     const [isUpdating, setUpdating] = useState(false);
     const [metadata, setMetadata] = useState<UpdateData>({
         name: collection.name,
@@ -103,6 +105,11 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             .update(collection.id, payload)
             .then(() => {
                 refetch();
+                // Update search query on provider if it's a dynamic collection to reflect in UI immediately
+                if (collection.dynamic && search) {
+                    search.reset();
+                    void search.search();
+                }
                 toast({
                     title: t('store.collectionUpdated'),
                     description: t('store.collectionUpdatedSuccess'),
@@ -184,6 +191,8 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         <FormItem label={t('store.query')} description={t('store.queryDescription')}>
                             <Textarea
                                 className={Styles.INPUT}
+                                minLines={1}
+                                maxLines={12}
                                 value={metadata.query}
                                 onChange={(e) => setField("query", e.target.value)}
                             />