konnosDashboard
OverviewTab.tsx104 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { toast } from 'sonner'
4import { Admonition } from 'ui-patterns'
5import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
6
7import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
8import { IntegrationOverviewTabV2 } from '../Integration/IntegrationOverviewTabV2'
9import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
10import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
11import NoPermission from '@/components/ui/NoPermission'
12import { useHooksEnableMutation } from '@/data/database/hooks-enable-mutation'
13import { useSchemasQuery } from '@/data/database/schemas-query'
14import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
15import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
16
17export const WebhooksOverviewTab = () => {
18 const { ref: projectRef } = useParams()
19 const { data: project } = useSelectedProjectQuery()
20
21 const isMarketplaceEnabled = useIsMarketplaceEnabled()
22
23 const {
24 data: schemas,
25 isSuccess: isSchemasLoaded,
26 refetch,
27 } = useSchemasQuery({
28 projectRef: project?.ref,
29 connectionString: project?.connectionString,
30 })
31
32 const isHooksEnabled = schemas?.some((schema) => schema.name === 'briven_functions')
33 const { can: canReadWebhooks, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
34 PermissionAction.TENANT_SQL_ADMIN_READ,
35 'triggers'
36 )
37
38 const { mutate: enableHooks, isPending: isEnablingHooks } = useHooksEnableMutation({
39 onSuccess: async () => {
40 await refetch()
41 toast.success('Successfully enabled webhooks')
42 },
43 })
44
45 const enableHooksForProject = async () => {
46 if (!projectRef) return console.error('Project ref is required')
47 enableHooks({ ref: projectRef })
48 }
49
50 if (!isSchemasLoaded || isLoadingPermissions) {
51 return (
52 <div className="p-10">
53 <GenericSkeletonLoader />
54 </div>
55 )
56 }
57
58 if (!canReadWebhooks) {
59 return (
60 <div className="p-10">
61 <NoPermission isFullPage resourceText="view database webhooks" />
62 </div>
63 )
64 }
65
66 if (isMarketplaceEnabled) {
67 return <IntegrationOverviewTabV2 />
68 } else {
69 return (
70 <IntegrationOverviewTab
71 hideRequiredExtensionsSection
72 actions={
73 isSchemasLoaded && isHooksEnabled ? null : (
74 <Admonition
75 showIcon={false}
76 type="default"
77 title="Enable database webhooks on your project"
78 >
79 <p>
80 Database Webhooks can be used to trigger serverless functions or send requests to an
81 HTTP endpoint
82 </p>
83 <ButtonTooltip
84 className="mt-2 w-fit"
85 onClick={() => enableHooksForProject()}
86 disabled={isEnablingHooks}
87 tooltip={{
88 content: {
89 side: 'bottom',
90 text: !canReadWebhooks
91 ? 'You need additional permissions to enable webhooks'
92 : undefined,
93 },
94 }}
95 >
96 Enable webhooks
97 </ButtonTooltip>
98 </Admonition>
99 )
100 }
101 />
102 )
103 }
104}