Files
supabase/apps/studio/components/interfaces/Integrations/Integration/useConnectedResourceMutations.ts
Matt Linkous 171ca026b5 feat(studio): Add integration settings page with connected resources (#46961)
Adds integrations settings page to each oauth integration to show
associated resources (e.g. API keys, config, oauth apps, etc)

<img width="1150" height="892" alt="Screenshot 2026-06-16 at 2 44 31 PM"
src="https://github.com/user-attachments/assets/035cc602-886d-43bc-a5a7-e14f76dd37c3"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary

* **New Features**
* Added a Marketplace “Settings” tab with a grouped **Connected
resources** view (OAuth apps, API keys, Edge Function secrets, SMTP),
including loading/empty/missing-resource states and per-kind removal
actions.
* Added a resource-group section UI plus integration-aware grouping/copy
customization and missing-kind zero-states.
* **Bug Fixes**
* Improved installed-state detection for Grafana and Doppler by
broadening conditions.
* Added an orphaned-resources warning when expected OAuth apps are
missing.
* **Refactor**
* Unified connected-resource removal into a single flow with
OAuth-specific revoke handling.
* **Tests**
* Added comprehensive UI and utility coverage for grouping, states, and
destructive removal behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-22 20:51:14 +00:00

56 lines
2.4 KiB
TypeScript

import { defaultDisabledSmtpFormValues } from '@/components/interfaces/Auth/SmtpForm/SmtpForm.constants'
import { type ConnectedResource } from '@/components/interfaces/Integrations/Landing/Landing.utils'
import { useAPIKeyDeleteMutation } from '@/data/api-keys/api-key-delete-mutation'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
import { useAuthorizedAppRevokeMutation } from '@/data/oauth/authorized-app-revoke-mutation'
import { useSecretsDeleteMutation } from '@/data/secrets/secrets-delete-mutation'
/**
* Combines the four mutations used to remove a connected resource (OAuth app, secret API key,
* Edge Function secret, custom SMTP) into a single hook. The component only needs to dispatch a
* removal and read an aggregated loading state, rather than wiring up each mutation individually.
*/
export const useConnectedResourceMutations = ({
projectRef,
orgSlug,
onSuccess,
}: {
projectRef?: string
orgSlug?: string
onSuccess?: () => void
}) => {
const { mutateAsync: revokeAuthorizedApp, isPending: isRevokingApp } =
useAuthorizedAppRevokeMutation({ onSuccess })
const { mutateAsync: deleteAPIKey, isPending: isDeletingApiKey } = useAPIKeyDeleteMutation({
onSuccess,
})
const { mutateAsync: deleteSecrets, isPending: isDeletingSecret } = useSecretsDeleteMutation({
onSuccess,
})
const { mutateAsync: updateAuthConfig, isPending: isUpdatingAuthConfig } =
useAuthConfigUpdateMutation({ onSuccess })
/** Dispatches the correct mutation for a given resource based on its kind. */
const removeResource = async (resource: ConnectedResource) => {
switch (resource.kind) {
case 'oauth_app':
if (!orgSlug) throw new Error('Organization is required')
return revokeAuthorizedApp({ orgSlug, id: resource.app.id })
case 'api_key':
if (!projectRef) throw new Error('Project is required')
return deleteAPIKey({ projectRef, id: resource.apiKey.id! })
case 'edge_function_secret':
if (!projectRef) throw new Error('Project is required')
return deleteSecrets({ projectRef, secrets: [resource.secret.name] })
case 'smtp':
if (!projectRef) throw new Error('Project is required')
return updateAuthConfig({ projectRef, config: defaultDisabledSmtpFormValues })
}
}
return {
removeResource,
isRemoving: isRevokingApp || isDeletingApiKey || isDeletingSecret || isUpdatingAuthConfig,
}
}