Files
supabase/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton.tsx
Raminder Singh 0cb71a2497 feat: new marketplace db (#44574)
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>
2026-04-16 17:57:12 +08:00

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>
)}
</>
)
}