konnosDashboard
BranchingPITRNotice.tsx62 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { useParams } from 'common'
3import { Clock } from 'lucide-react'
4import Link from 'next/link'
5import { Button } from 'ui'
6
7import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
8import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
9import { useAppStateSnapshot } from '@/state/app-state'
10
11export const BranchingPITRNotice = () => {
12 const { ref } = useParams()
13 const snap = useAppStateSnapshot()
14
15 const { can: canUpdateSubscription } = useAsyncCheckPermissions(
16 PermissionAction.BILLING_WRITE,
17 'stripe.subscriptions'
18 )
19
20 return (
21 <div className="flex flex-row gap-4">
22 <div>
23 <figure className="w-10 h-10 rounded-md border flex items-center justify-center">
24 <Clock className="text-warning-700" size={20} strokeWidth={2} />
25 </figure>
26 </div>
27 <div className="flex grow items-center justify-between gap-4">
28 <div className="flex flex-col gap-y-1">
29 <p className="text-sm text-foreground">Consider enabling Point in Time Recovery (PITR)</p>
30 <p className="text-sm text-foreground-light">
31 This ensures you can recover production data if you merge a bad migration (e.g. delete a
32 column).
33 </p>
34 </div>
35 {!canUpdateSubscription ? (
36 <ButtonTooltip
37 disabled
38 size="tiny"
39 type="default"
40 tooltip={{
41 content: {
42 side: 'bottom',
43 text: 'You need additional permissions to amend subscriptions',
44 },
45 }}
46 >
47 Enable PITR add-on
48 </ButtonTooltip>
49 ) : (
50 <Button size="tiny" type="default" asChild>
51 <Link
52 href={`/project/${ref}/settings/addons?panel=pitr`}
53 onClick={() => snap.setShowCreateBranchModal(false)}
54 >
55 Enable PITR
56 </Link>
57 </Button>
58 )}
59 </div>
60 </div>
61 )
62}