From 8467b847c56a9c0ea07b2ff96bcd60e1dbd94fec Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Fri, 1 Dec 2023 15:57:26 +0800 Subject: [PATCH] Enforce pg 15 to enable branching (#19354) --- .../BranchingPITRNotice.tsx | 56 ++++++ .../BranchingPostgresVersionNotice.tsx | 36 ++++ .../EnableBranchingModal.tsx | 171 ++++++++---------- 3 files changed, 163 insertions(+), 100 deletions(-) create mode 100644 apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx create mode 100644 apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx new file mode 100644 index 00000000000..c0a5362f5a8 --- /dev/null +++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx @@ -0,0 +1,56 @@ +import { useParams } from 'common' +import Link from 'next/link' +import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' + +import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' +import { useSelectedOrganization } from 'hooks' +import { useAppStateSnapshot } from 'state/app-state' + +const BranchingPITRNotice = () => { + const { ref } = useParams() + const snap = useAppStateSnapshot() + const org = useSelectedOrganization() + + const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: org?.slug }) + const isFreePlan = subscription?.plan.id === 'free' + + return ( + + + We strongly encourage enabling Point in Time Recovery (PITR) + + + 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{' '} + snap.setShowEnableBranchingModal(false)} + > + project settings + + . + + )} + + + ) +} + +export default BranchingPITRNotice diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx new file mode 100644 index 00000000000..cc70fbd08cf --- /dev/null +++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx @@ -0,0 +1,36 @@ +import { useParams } from 'common' +import Link from 'next/link' +import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' + +import { AlertCircleIcon } from 'lucide-react' +import { useAppStateSnapshot } from 'state/app-state' + +const BranchingPostgresVersionNotice = () => { + const { ref } = useParams() + const snap = useAppStateSnapshot() + + return ( + + + + Your project needs to be on Postgres 15 to enable branching + + + Head over to your project's infrastructure settings to upgrade to the latest version of + Postgres before enabling branching. + + + + + + ) +} + +export default BranchingPostgresVersionNotice diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx index 45c0078ffa0..4298b2bbd82 100644 --- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx +++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx @@ -1,32 +1,24 @@ import { zodResolver } from '@hookform/resolvers/zod' import { useParams } from 'common' +import { last } from 'lodash' import { useEffect, useState } from 'react' import { useForm } from 'react-hook-form' -import { - AlertDescription_Shadcn_, - AlertTitle_Shadcn_, - Alert_Shadcn_, - Button, - Form_Shadcn_, - IconFileText, - IconGitBranch, - Modal, -} from 'ui' +import { Button, Form_Shadcn_, IconFileText, IconGitBranch, Modal } from 'ui' import * as z from 'zod' import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker' import AlertError from 'components/ui/AlertError' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useBranchCreateMutation } from 'data/branches/branch-create-mutation' +import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-eligibility-query' import { useCheckGithubBranchValidity } from 'data/integrations/integrations-github-branch-check' import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only' +import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import { useSelectedOrganization, useStore } from 'hooks' import { useAppStateSnapshot } from 'state/app-state' +import BranchingPITRNotice from './BranchingPITRNotice' +import BranchingPostgresVersionNotice from './BranchingPostgresVersionNotice' 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() @@ -49,15 +41,19 @@ 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 }) + data, + error: upgradeEligibilityError, + isLoading: isLoadingUpgradeEligibility, + isError: isErrorUpgradeEligibility, + isSuccess: isSuccessUpgradeEligibility, + } = useProjectUpgradeEligibilityQuery({ + projectRef: ref, + }) + const hasMinimumPgVersion = + Number(last(data?.current_app_version.split('-') ?? [])?.split('.')[0] ?? 0) >= 15 + + const { data: addons } = useProjectAddonsQuery({ projectRef: ref }) const hasPitrEnabled = (addons?.selected_addons ?? []).find((addon) => addon.type === 'pitr') !== undefined @@ -113,6 +109,10 @@ const EnableBranchingModal = () => { defaultValues: { branchName: '' }, }) + const isLoading = isLoadingIntegrations || isLoadingUpgradeEligibility + const isError = isErrorIntegrations || isErrorUpgradeEligibility + const isSuccess = isSuccessIntegrations && isSuccessUpgradeEligibility + const canSubmit = form.getValues('branchName').length > 0 && !isChecking && isValid const onSubmit = (data: z.infer) => { if (!ref) return console.error('Project ref is required') @@ -149,7 +149,7 @@ const EnableBranchingModal = () => { - {(isLoadingIntegrations || isLoadingAddons) && ( + {isLoading && ( <> @@ -159,94 +159,65 @@ const EnableBranchingModal = () => { )} - {isErrorAddons && ( + {isError && ( <> - + {isErrorIntegrations ? ( + + ) : isErrorUpgradeEligibility ? ( + + ) : null} )} - {isErrorIntegrations && ( + {isSuccess && ( <> - - - - - - - )} - - {isSuccessIntegrations && ( - - )} - - {!hasPitrEnabled && ( - - {/* */} - - We strongly encourage enabling Point in Time Recovery (PITR) - - - 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{' '} - snap.setShowEnableBranchingModal(false)} - > - project settings - - . - + {hasMinimumPgVersion ? ( + <> + + {!hasPitrEnabled && } + + ) : ( + )} - - - )} - - -

Please keep in mind the following:

-
-
-
- -
-
-
-

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

+

- Schema changes for database Preview Branches must be made using Git. Dashboard - changes to Preview Branches are coming soon. + Please keep in mind the following:

-
-
- +
+
+
+ +
+
+
+

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

+

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

+
+
+ + + )} @@ -265,7 +236,7 @@ const EnableBranchingModal = () => { block size="medium" form={formId} - disabled={isCreating || !canSubmit} + disabled={!isSuccess || isCreating || !canSubmit} loading={isCreating} type="primary" htmlType="submit"