import { useParams } from 'common' import { useMemo } from 'react' import { toast } from 'sonner' import { Button } from 'ui' import type { IntegrationDefinition } from '@/components/interfaces/Integrations/Landing/Integrations.constants' import { useAPIKeysQuery } from '@/data/api-keys/api-keys-query' import { useInstallOAuthIntegrationMutation } from '@/data/marketplace/install-oauth-integration-mutation' import { useSecretsQuery } from '@/data/secrets/secrets-query' import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization' interface InstallOAuthIntegrationButtonProps { integration: IntegrationDefinition } export function InstallOAuthIntegrationButton({ integration }: InstallOAuthIntegrationButtonProps) { const { ref: projectRef } = useParams() const { data: selectedOrg } = useSelectedOrganizationQuery() const requiresApiKeysCheck = integration.installIdentificationMethod === 'secret_key_prefix' && !!integration.secretKeyPrefix const requiresEdgeFunctionSecretsCheck = integration.installIdentificationMethod === 'edge_function_secret_name' && !!integration.edgeFunctionSecretName const { data: apiKeys, isLoading: isApiKeysLoading } = useAPIKeysQuery( { projectRef, reveal: false }, { enabled: requiresApiKeysCheck } ) const { data: edgeFunctionSecrets, isPending: isEdgeFunctionSecretsLoading } = useSecretsQuery( { projectRef }, { enabled: requiresEdgeFunctionSecretsCheck } ) const { mutate: installOAuthIntegration, isPending: isInstalling } = useInstallOAuthIntegrationMutation({ onSuccess: (data) => { if ('redirectUrl' in data) { if (!data.redirectUrl) { toast.error('Failed to redirect because redirect URL is invalid') return } window.open(data.redirectUrl, '_blank', 'noreferrer') } else { toast.error('Failed to start integration installation') } }, }) const isLoading = (requiresApiKeysCheck && isApiKeysLoading) || (requiresEdgeFunctionSecretsCheck && isEdgeFunctionSecretsLoading) const isIntegrationInstalled = useMemo(() => { if (!integration) return false if (integration.installIdentificationMethod === 'secret_key_prefix') { const prefix = integration.secretKeyPrefix if (!prefix || isApiKeysLoading || !apiKeys) return false return apiKeys.some((k) => k.type === 'secret' && k.name.startsWith(prefix)) } if (integration.installIdentificationMethod === 'edge_function_secret_name') { const secretName = integration.edgeFunctionSecretName if (!secretName || isEdgeFunctionSecretsLoading || !edgeFunctionSecrets) return false return edgeFunctionSecrets.some((secret) => secret.name === secretName) } return false }, [apiKeys, edgeFunctionSecrets, integration, isApiKeysLoading, isEdgeFunctionSecretsLoading]) const handleInstallClick = async () => { if (!integration || !projectRef) return if (integration.installUrlType === 'post') { if (!integration.id) return toast.error('Listing ID is required') installOAuthIntegration({ projectRef, listingSlug: integration.id }) } else { let redirectUrl = '/' if (integration.installUrl) { const url = new URL(integration.installUrl) url.searchParams.append('organization_slug', selectedOrg?.slug ?? '') url.searchParams.append('project_id', projectRef) redirectUrl = url.href } window.open(redirectUrl, '_blank', 'noreferrer') } } return ( <> {isIntegrationInstalled ? ( ) : ( )} ) }