mirror of
https://github.com/supabase/supabase.git
synced 2026-06-20 22:06:04 +08:00
This PR integrates with the new marketplace db to allow Grafana (and other partners) OAuth apps to install from the integrations page. A demo of this working locally is available here: https://supabase.slack.com/archives/C01GN60J0BS/p1775551752479709. End to end flow is documented here: https://www.notion.so/supabase/Grafana-Integration-Flow-33a5004b775f80eeaf91c098beb8071f. TODO: - [ ] Make sure `NEXT_PUBLIC_MARKETPLACE_API_URL` variable is set to the new marketplace db. - [x] Test with the `marketplaceIntegrations` enabled and disabled in staging once https://github.com/supabase/platform/pull/31298 is merged and available in staging. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Add OAuth "Install integration" button that detects installed integrations and supports GET/POST install flows * Marketplace listings now include install links, installation method, partner info, and listing assets/logos * **Infrastructure** * Allow marketplace API origin for images and content in security and image config * Centralize marketplace types and switch marketplace data source for more reliable listings <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
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'
|
|
|
|
interface InstallOAuthIntegrationButtonProps {
|
|
integration: IntegrationDefinition
|
|
}
|
|
|
|
export function InstallOAuthIntegrationButton({ integration }: InstallOAuthIntegrationButtonProps) {
|
|
const { ref: projectRef } = useParams()
|
|
|
|
const { data: apiKeys, isLoading: isApiKeysLoading } = useAPIKeysQuery(
|
|
{ projectRef, reveal: false },
|
|
{ enabled: !!projectRef }
|
|
)
|
|
|
|
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.location.href = data.redirectUrl
|
|
} else {
|
|
toast.error('Failed to start integration installation')
|
|
}
|
|
},
|
|
})
|
|
|
|
const isLoading =
|
|
integration.installIdentificationMethod === 'secret_key_prefix' && isApiKeysLoading
|
|
|
|
const isIntegrationInstalled = useMemo(() => {
|
|
if (!integration) return false
|
|
|
|
const prefix = integration.secretKeyPrefix
|
|
|
|
if (integration.installIdentificationMethod !== 'secret_key_prefix' || !prefix) return false
|
|
if (isApiKeysLoading || !apiKeys) return false
|
|
|
|
return apiKeys.some((k) => k.type === 'secret' && k.name.startsWith(prefix))
|
|
}, [apiKeys, integration, isApiKeysLoading])
|
|
|
|
const handleInstallClick = async () => {
|
|
if (!integration || !projectRef) return
|
|
|
|
if (integration.installUrlType === 'post') {
|
|
if (!integration.listingId) return toast.error('Listing ID is required')
|
|
installOAuthIntegration({ projectRef, id: integration.listingId })
|
|
} else {
|
|
window.location.href = integration.installUrl ?? '/'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isIntegrationInstalled ? (
|
|
<Button disabled type="outline" className="shrink-0">
|
|
Installed
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="primary"
|
|
className="shrink-0"
|
|
loading={isInstalling || isLoading}
|
|
disabled={isLoading}
|
|
onClick={handleInstallClick}
|
|
>
|
|
Install integration
|
|
</Button>
|
|
)}
|
|
</>
|
|
)
|
|
}
|