@inkeep/agents-manage-ui 0.22.11 → 0.23.0

package/src/hooks/use-oauth-login.ts

@@ -1,115 +1,227 @@
+import { CredentialStoreType, generateIdFromName } from '@inkeep/agents-core/client-exports';
 import { useRouter } from 'next/navigation';
+import { useCallback, useRef } from 'react';
 import { toast } from 'sonner';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { listCredentialStores } from '@/lib/api/credentialStores';
+import { updateMCPTool } from '@/lib/api/tools';
+import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
 import { getOAuthLoginUrl } from '@/lib/utils/mcp-urls';
+import { useNangoConnect } from './use-nango-connect';
 
 interface UseOAuthLoginProps {
   tenantId: string;
   projectId: string;
   onFinish?: (toolId: string) => void;
-  onError?: (error: Error) => void;
 }
 
-export function useOAuthLogin({ tenantId, projectId, onFinish, onError }: UseOAuthLoginProps) {
+interface OAuthLoginResult {
+  handleOAuthLogin: ({
+    toolId,
+    mcpServerUrl,
+    toolName,
+  }: {
+    toolId: string;
+    mcpServerUrl: string;
+    toolName: string;
+  }) => Promise<void>;
+}
+
+export function useOAuthLogin({
+  tenantId,
+  projectId,
+  onFinish,
+}: UseOAuthLoginProps): OAuthLoginResult {
   const router = useRouter();
   const { PUBLIC_INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+  const { openNangoConnectHeadless } = useNangoConnect();
 
   // Track active OAuth attempts to prevent conflicts
-  const activeAttempts = new Map<string, () => void>();
-
-  const handleOAuthLogin = (toolId: string) => {
-    // Clean up any previous attempt for this toolId
-    const existingCleanup = activeAttempts.get(toolId);
-    if (existingCleanup) {
-      existingCleanup();
-      activeAttempts.delete(toolId);
-    }
-    try {
-      const oauthUrl = getOAuthLoginUrl({
-        PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
-        tenantId,
-        projectId,
-        id: toolId,
-      });
+  const activeAttemptsRef = useRef(new Map<string, () => void>());
 
-      const popup = window.open(
-        oauthUrl,
-        'oauth-popup',
-        'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
-      );
-
-      if (!popup) {
-        console.error(`Failed to open popup for ${toolId} - blocked by browser`);
-        return;
-      }
+  const handleOAuthLoginManually = useCallback(
+    (toolId: string): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        // Clean up any previous attempt for this toolId
+        const existingCleanup = activeAttemptsRef.current.get(toolId);
+        if (existingCleanup) {
+          existingCleanup();
+          activeAttemptsRef.current.delete(toolId);
+        }
 
-      // Track completion to prevent duplicate calls
-      let completed = false;
+        try {
+          const oauthUrl = getOAuthLoginUrl({
+            PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
+            tenantId,
+            projectId,
+            id: toolId,
+          });
 
-      // Listen for success PostMessage
-      const handleMessage = (event: MessageEvent) => {
-        if (event.data.type === 'oauth-success' && !completed) {
-          completed = true;
-          window.removeEventListener('message', handleMessage);
+          const popup = window.open(
+            oauthUrl,
+            'oauth-popup',
+            'width=600,height=700,scrollbars=yes,resizable=yes,status=yes,location=yes'
+          );
 
-          // Call custom success handler or default behavior
-          if (onFinish) {
-            onFinish(toolId);
-          } else {
-            router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          if (!popup) {
+            const error = new Error(`Failed to open popup for ${toolId} - blocked by browser`);
+            console.error(error.message);
+            reject(error);
+            return;
           }
-        }
-      };
 
-      if (popup) {
-        window.addEventListener('message', handleMessage);
-
-        // Backup: Monitor popup closure (for errors or PostMessage failures)
-        // Delay backup monitoring to give PostMessage priority
-        let checkPopupClosed: NodeJS.Timeout | null = null;
-        const backupTimeout = setTimeout(() => {
-          if (!completed) {
-            checkPopupClosed = setInterval(() => {
-              try {
-                if (popup.closed && !completed) {
-                  completed = true;
-                  if (checkPopupClosed) clearInterval(checkPopupClosed);
-                  window.removeEventListener('message', handleMessage);
-                  activeAttempts.delete(toolId);
-
-                  // Call custom success handler or default behavior
-                  if (onFinish) {
-                    onFinish(toolId);
-                  } else {
-                    router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+          // Track completion to prevent duplicate calls
+          let completed = false;
+
+          const completeFlow = (success: boolean, error?: Error) => {
+            if (completed) return;
+            completed = true;
+
+            // Cleanup
+            window.removeEventListener('message', handleMessage);
+            if (checkPopupClosed) clearInterval(checkPopupClosed);
+            clearTimeout(backupTimeout);
+            activeAttemptsRef.current.delete(toolId);
+
+            if (success) {
+              // Call custom success handler or default behavior
+              if (onFinish) {
+                onFinish(toolId);
+              } else {
+                router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
+              }
+              resolve();
+            } else {
+              reject(error || new Error('OAuth login failed'));
+            }
+          };
+
+          // Listen for success PostMessage
+          const handleMessage = (event: MessageEvent) => {
+            if (event.data.type === 'oauth-success') {
+              completeFlow(true);
+            } else if (event.data.type === 'oauth-error') {
+              completeFlow(false, new Error(event.data.error || 'OAuth login failed'));
+            }
+          };
+
+          window.addEventListener('message', handleMessage);
+
+          // Backup: Monitor popup closure (for errors or PostMessage failures)
+          let checkPopupClosed: NodeJS.Timeout | null = null;
+          const backupTimeout = setTimeout(() => {
+            if (!completed) {
+              checkPopupClosed = setInterval(() => {
+                try {
+                  if (popup.closed) {
+                    // Assume success if popup closed without error message
+                    completeFlow(true);
                   }
+                } catch {
+                  // Cross-origin errors are expected during OAuth redirects
                 }
-              } catch {
-                // Cross-origin errors are expected during OAuth redirects
-              }
-            }, 1000); // Check every second
-          }
-        }, 3000); // Wait 3 seconds before starting backup monitoring
-
-        // Register cleanup function for this attempt
-        const cleanup = () => {
-          clearTimeout(backupTimeout);
-          if (checkPopupClosed) clearInterval(checkPopupClosed);
-          window.removeEventListener('message', handleMessage);
-          completed = true;
-        };
-        activeAttempts.set(toolId, cleanup);
-      }
-    } catch (error) {
-      const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+              }, 1000);
+            }
+          }, 3000);
 
-      if (onError) {
-        onError(errorObj);
+          // Register cleanup function for this attempt
+          const cleanup = () => {
+            completeFlow(false, new Error('OAuth login cancelled'));
+          };
+          activeAttemptsRef.current.set(toolId, cleanup);
+        } catch (error) {
+          const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+          reject(errorObj);
+        }
+      });
+    },
+    [PUBLIC_INKEEP_AGENTS_MANAGE_API_URL, tenantId, projectId, onFinish, router]
+  );
+
+  const handleOAuthLoginWithNangoMCPGeneric = useCallback(
+    async ({
+      toolId,
+      mcpServerUrl,
+      toolName,
+    }: {
+      toolId: string;
+      mcpServerUrl: string;
+      toolName: string;
+    }): Promise<void> => {
+      const authResult = await openNangoConnectHeadless({
+        mcpServerUrl,
+        providerUniqueKey: `${generateIdFromName(toolName)}_${toolId}`,
+        providerDisplayName: toolName,
+      });
+
+      const newCredentialData = {
+        id: generateIdFromName(toolName),
+        type: CredentialStoreType.nango,
+        credentialStoreId: 'nango-default',
+        retrievalParams: {
+          connectionId: authResult.connectionId,
+          providerConfigKey: authResult.providerConfigKey,
+          provider: 'mcp-generic',
+          authMode: 'OAUTH2',
+        },
+      };
+
+      const newCredential = await findOrCreateCredential(tenantId, projectId, newCredentialData);
+
+      await updateMCPTool(tenantId, projectId, toolId, {
+        credentialReferenceId: newCredential.id,
+      });
+
+      // Call custom success handler or default behavior
+      if (onFinish) {
+        onFinish(toolId);
       } else {
-        toast.error('OAuth login failed. Please try again.');
+        router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${toolId}`);
       }
-    }
-  };
+    },
+    [openNangoConnectHeadless, onFinish, router, tenantId, projectId]
+  );
+
+  const handleOAuthLogin = useCallback(
+    async ({
+      toolId,
+      mcpServerUrl,
+      toolName,
+    }: {
+      toolId: string;
+      mcpServerUrl: string;
+      toolName: string;
+    }): Promise<void> => {
+      try {
+        // Check credential stores availability
+        const credentialStoresStatus = await listCredentialStores(tenantId, projectId);
+
+        const isNangoReady = credentialStoresStatus.some(
+          (store) => store.type === CredentialStoreType.nango && store.available
+        );
+
+        const isKeychainReady = credentialStoresStatus.some(
+          (store) => store.type === CredentialStoreType.keychain && store.available
+        );
 
-  return { handleOAuthLogin };
+        // Choose authentication method based on availability
+        if (isNangoReady) {
+          await handleOAuthLoginWithNangoMCPGeneric({ toolId, mcpServerUrl, toolName });
+        } else if (isKeychainReady) {
+          await handleOAuthLoginManually(toolId);
+        } else {
+          throw new Error('No credential store available. Please configure Nango or Keychain.');
+        }
+      } catch (error) {
+        const errorObj = error instanceof Error ? error : new Error('OAuth login failed');
+        toast.error(errorObj.message);
+        throw errorObj;
+      }
+    },
+    [tenantId, projectId, handleOAuthLoginWithNangoMCPGeneric, handleOAuthLoginManually]
+  );
+
+  return {
+    handleOAuthLogin,
+  };
 }

package/src/lib/__tests__/provider-icons-sync.test.ts

@@ -0,0 +1,47 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { getAllProviderIcons } from '../provider-icons';
+
+describe('provider-icons-sync', () => {
+  it('should have COMMON_PROVIDER_ICONS in sync with actual files in public/assets/provider-icons', () => {
+    // Read actual files from the filesystem
+    const iconsDir = path.join(process.cwd(), 'public/assets/provider-icons');
+    const actualFiles = fs.readdirSync(iconsDir);
+    const actualIcons = actualFiles
+      .filter(file => file.endsWith('.svg'))
+      .map(file => file.replace('.svg', ''))
+      .sort();
+
+    // Get the icons from our COMMON_PROVIDER_ICONS
+    const commonIcons = getAllProviderIcons();
+
+    // Compare the two lists
+    const missingInCommon = actualIcons.filter(icon => !commonIcons.includes(icon));
+    const extraInCommon = commonIcons.filter(icon => !actualIcons.includes(icon));
+
+    // Create helpful error messages
+    let errorMessage = '';
+    
+    if (missingInCommon.length > 0) {
+      errorMessage += `\nMissing in COMMON_PROVIDER_ICONS (found in filesystem but not in code):\n`;
+      errorMessage += missingInCommon.map(icon => `  - '${icon}',`).join('\n');
+    }
+    
+    if (extraInCommon.length > 0) {
+      errorMessage += `\nExtra in COMMON_PROVIDER_ICONS (found in code but not in filesystem):\n`;
+      errorMessage += extraInCommon.map(icon => `  - '${icon}' (should be removed)`).join('\n');
+    }
+
+    if (errorMessage) {
+      errorMessage = `COMMON_PROVIDER_ICONS is out of sync with public/assets/provider-icons/\n${errorMessage}\n\nPlease update the COMMON_PROVIDER_ICONS set in src/lib/provider-icons.ts`;
+    }
+
+    // The test passes only if both lists are identical
+    expect(missingInCommon).toEqual([]);
+    expect(extraInCommon).toEqual([]);
+    
+    // Also verify the counts match
+    expect(commonIcons.length).toBe(actualIcons.length);
+  });
+});

package/src/lib/mcp-tools/nango.ts

@@ -349,9 +349,13 @@ export async function createNangoApiKeyConnection({
  */
 export async function createProviderConnectSession({
   providerName,
+  uniqueKey,
+  displayName,
   credentials,
 }: {
   providerName: string;
+  uniqueKey: string;
+  displayName: string;
   credentials?: ApiPublicIntegrationCredentials;
 }): Promise<string> {
   try {
@@ -359,7 +363,7 @@ export async function createProviderConnectSession({
     let existingIntegration: (ApiPublicIntegration & { areCredentialsSet: boolean }) | null = null;
 
     try {
-      existingIntegration = await fetchNangoIntegration(providerName);
+      existingIntegration = await fetchNangoIntegration(uniqueKey);
     } catch (error) {
       if (error instanceof NangoError) {
         throw error;
@@ -374,8 +378,8 @@ export async function createProviderConnectSession({
       try {
         integration = await createNangoIntegration({
           provider: providerName,
-          uniqueKey: providerName,
-          displayName: providerName,
+          uniqueKey,
+          displayName,
           credentials,
         });
       } catch (error) {