IntegrationActions.tsx132 lines · main
| 1 | import { PermissionAction } from '@supabase/shared-types/out/constants' |
| 2 | import { Button, cn } from 'ui' |
| 3 | |
| 4 | import { hasInstallError, hasUninstallError } from './stripe-sync-status' |
| 5 | import { useStripeSyncStatus } from '@/components/interfaces/Integrations/templates/StripeSyncEngine/useStripeSyncStatus' |
| 6 | import { ButtonTooltip } from '@/components/ui/ButtonTooltip' |
| 7 | import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions' |
| 8 | |
| 9 | export 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 | |
| 77 | export 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 | } |