IntegrationActions.tsx132 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { Button, cn } from 'ui'
3
4import { hasInstallError, hasUninstallError } from './stripe-sync-status'
5import { useStripeSyncStatus } from '@/components/interfaces/Integrations/templates/StripeSyncEngine/useStripeSyncStatus'
6import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
7import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
8
9export const IntegrationInstalledActions = ({
10 className,
11 disabled,
12 upgradeAvailable,
13 installing,
14 uninstalling,
15 setShowUninstallModal,
16 setShouldShowInstallSheet,
17}: {
18 className?: string
19 disabled?: boolean
20 upgradeAvailable: boolean
21 installing: boolean
22 uninstalling: boolean
23 isUninstallRequested: boolean
24 setShowUninstallModal: (value: boolean) => void
25 setShouldShowInstallSheet: (value: boolean) => void
26}) => {
27 const { can: canManageSecrets } = useAsyncCheckPermissions(
28 PermissionAction.FUNCTIONS_SECRET_WRITE,
29 '*'
30 )
31
32 const {
33 schemaComment: { status: installationStatus },
34 } = useStripeSyncStatus()
35 const uninstallError = hasUninstallError(installationStatus)
36
37 return (
38 <>
39 <div className={cn('flex gap-x-2 justify-end', className)}>
40 {upgradeAvailable && !uninstallError && !uninstalling && (
41 <ButtonTooltip
42 type="primary"
43 onClick={() => setShouldShowInstallSheet(true)}
44 disabled={disabled}
45 loading={installing}
46 tooltip={{
47 content: {
48 text: !canManageSecrets
49 ? 'You need additional permissions to upgrade the Stripe Sync Engine.'
50 : undefined,
51 },
52 }}
53 >
54 Upgrade integration
55 </ButtonTooltip>
56 )}
57 <ButtonTooltip
58 type="default"
59 onClick={() => setShowUninstallModal(true)}
60 disabled={disabled}
61 loading={uninstalling}
62 tooltip={{
63 content: {
64 text: !canManageSecrets
65 ? 'You need additional permissions to uninstall the Stripe Sync Engine.'
66 : undefined,
67 },
68 }}
69 >
70 {uninstallError ? 'Retry uninstallation' : 'Uninstall integration'}
71 </ButtonTooltip>
72 </div>
73 </>
74 )
75}
76
77export const IntegrationNotInstalledActions = ({
78 className,
79 installing,
80 canInstall,
81 isUninstallRequested,
82 hideInstallCTA = false,
83 handleUninstall,
84 setShouldShowInstallSheet,
85}: {
86 className?: string
87 installing: boolean
88 canInstall: boolean
89 isUninstallRequested: boolean
90 hideInstallCTA?: boolean
91 handleUninstall: () => void
92 setShouldShowInstallSheet: (value: boolean) => void
93}) => {
94 const { can: canManageSecrets } = useAsyncCheckPermissions(
95 PermissionAction.FUNCTIONS_SECRET_WRITE,
96 '*'
97 )
98
99 const {
100 schemaComment: { status: installationStatus },
101 } = useStripeSyncStatus()
102 const installError = hasInstallError(installationStatus)
103
104 return (
105 <div className={cn('flex gap-x-2 justify-end', className)}>
106 {!hideInstallCTA && (
107 <ButtonTooltip
108 type="primary"
109 onClick={() => setShouldShowInstallSheet(true)}
110 disabled={!canInstall || !canManageSecrets}
111 loading={installing}
112 tooltip={{
113 content: {
114 text: !canInstall
115 ? 'Your database already uses a schema named "stripe"'
116 : !canManageSecrets
117 ? 'You need additional permissions to install the Stripe Sync Engine.'
118 : undefined,
119 },
120 }}
121 >
122 {installError ? 'Retry installation' : 'Install integration'}
123 </ButtonTooltip>
124 )}
125 {installError && (
126 <Button type="default" loading={isUninstallRequested} onClick={handleUninstall}>
127 Uninstall
128 </Button>
129 )}
130 </div>
131 )
132}