diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx index c55cff23747..3ef264a1acd 100644 --- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx @@ -9,13 +9,23 @@ import { useTheme } from 'next-themes' import { useProjectAddonRemoveMutation } from 'data/subscriptions/project-addon-remove-mutation' import { useProjectAddonUpdateMutation } from 'data/subscriptions/project-addon-update-mutation' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' -import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks' +import { useCheckPermissions, useSelectedOrganization, useSelectedProject, useStore } from 'hooks' import { BASE_PATH } from 'lib/constants' import Telemetry from 'lib/telemetry' import { useSubscriptionPageStateSnapshot } from 'state/subscription-page' -import { Alert, Button, IconExternalLink, Radio, SidePanel } from 'ui' +import { + Alert, + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, + Button, + IconExternalLink, + Radio, + SidePanel, +} from 'ui' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' +import { AlertTriangleIcon } from 'lucide-react' const PITR_CATEGORY_OPTIONS: { id: 'off' | 'on' @@ -42,12 +52,15 @@ const PITRSidePanel = () => { const router = useRouter() const { ref: projectRef } = useParams() const { resolvedTheme } = useTheme() + const project = useSelectedProject() const organization = useSelectedOrganization() const [selectedCategory, setSelectedCategory] = useState<'on' | 'off'>('off') const [selectedOption, setSelectedOption] = useState('pitr_0') const canUpdatePitr = useCheckPermissions(PermissionAction.BILLING_WRITE, 'stripe.subscriptions') + const isBranchingEnabled = + project?.is_branch_enabled === true || project?.parent_project_ref !== undefined const snap = useSubscriptionPageStateSnapshot() const visible = snap.panelKey === 'pitr' @@ -225,6 +238,19 @@ const PITRSidePanel = () => { + {selectedCategory === 'off' && subscriptionPitr !== undefined && isBranchingEnabled && ( + + + + Are you sure you want to disable this while using Branching? + + + Without PITR, you might not be able to recover lost data if you accidentally merge a + branch that deletes a column or user data. We don't recommend this. + + + )} + {selectedCategory === 'on' && (
{isFreePlan ? ( diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx index ca7f49af6e3..30e15d01af8 100644 --- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx +++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx @@ -2,7 +2,16 @@ import { zodResolver } from '@hookform/resolvers/zod' import { useParams } from 'common' import { useEffect, useState } from 'react' import { useForm } from 'react-hook-form' -import { Button, Form_Shadcn_, IconFileText, IconGitBranch, Modal } from 'ui' +import { + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Alert_Shadcn_, + Button, + Form_Shadcn_, + IconFileText, + IconGitBranch, + Modal, +} from 'ui' import * as z from 'zod' import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker' @@ -14,6 +23,10 @@ import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-or import { useSelectedOrganization, useStore } from 'hooks' import { useAppStateSnapshot } from 'state/app-state' import GithubRepositorySelection from './GithubRepositorySelection' +import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' +import { AlertCircleIcon } from 'lucide-react' +import Link from 'next/link' +import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' const EnableBranchingModal = () => { const { ui } = useStore() @@ -36,6 +49,18 @@ const EnableBranchingModal = () => { orgSlug: selectedOrg?.slug, }) + const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: selectedOrg?.slug }) + const isFreePlan = subscription?.plan.id === 'free' + + const { + data: addons, + error: addonsError, + isLoading: isLoadingAddons, + isError: isErrorAddons, + } = useProjectAddonsQuery({ projectRef: ref }) + const hasPitrEnabled = + (addons?.selected_addons ?? []).find((addon) => addon.type === 'pitr') !== undefined + const hasGithubIntegrationInstalled = integrations?.some((integration) => integration.integration.name === 'GitHub') ?? false const githubIntegration = integrations?.find( @@ -124,7 +149,7 @@ const EnableBranchingModal = () => {
- {isLoadingIntegrations && ( + {(isLoadingIntegrations || isLoadingAddons) && ( <> @@ -134,73 +159,140 @@ const EnableBranchingModal = () => { )} - {isErrorIntegrations && ( + {isErrorAddons && ( <> - + )} - {isSuccessIntegrations && ( - - )} + {hasPitrEnabled ? ( + <> + {isErrorIntegrations && ( + <> + + + + + + + )} - -

Please keep in mind the following:

-
-
-
- -
-
-
-

- You will not be able to use the dashboard to make changes to the database -

+ {isSuccessIntegrations && ( + + )} + +

- Schema changes for database preview branches must be done via Git. We are - nonetheless working on allowing the dashboard to make schema changes for preview - branches. + Please keep in mind the following:

-
-
-
+
+
+
+ +
+
+
+

+ You will not be able to use the dashboard to make changes to the database +

+

+ Schema changes for database Preview Branches must be made using git. + Dashboard changes to Preview Branches are coming soon. +

+
+
+
- + - -
- - + +
+ + +
+
+ + ) : ( +
+ + + + Point in time recovery (PITR) is required for branching + + + This is to ensure that you can always recover data if you make a "bad + migration". For example, if you accidentally delete a column or some of your + production data. + + {isFreePlan && ( + + To enable PITR, you may first upgrade your organization's plan to at least + Pro, then purchase the PITR add on for your project via the{' '} + + project settings + + . + + )} + + +
+ + +
+
- + )} diff --git a/apps/studio/components/ui/AlertError.tsx b/apps/studio/components/ui/AlertError.tsx index 4002e66a0ae..32690abf06a 100644 --- a/apps/studio/components/ui/AlertError.tsx +++ b/apps/studio/components/ui/AlertError.tsx @@ -27,7 +27,7 @@ const AlertError = ({ ref, subject, error, className }: AlertErrorProps) => { return ( - + {subject}