From 973df3f79a25c030d4652900f077357ac7a6a565 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 1 Jul 2025 16:17:39 +1000 Subject: [PATCH] remove modal --- .../EnableBranchingModal.tsx | 410 ------------------ 1 file changed, 410 deletions(-) delete mode 100644 apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx deleted file mode 100644 index 2a94ed94a1f..00000000000 --- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx +++ /dev/null @@ -1,410 +0,0 @@ -import { zodResolver } from '@hookform/resolvers/zod' -import { last } from 'lodash' -import { Check, DollarSign, ExternalLink, FileText, GitBranch, Github, Loader2 } from 'lucide-react' -import Link from 'next/link' -import { useEffect, useState } from 'react' -import { useForm } from 'react-hook-form' -import { toast } from 'sonner' -import * as z from 'zod' - -import { useQueryClient } from '@tanstack/react-query' -import { useParams } from 'common' -import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker' -import AlertError from 'components/ui/AlertError' -import { DocsButton } from 'components/ui/DocsButton' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' -import { useBranchCreateMutation } from 'data/branches/branch-create-mutation' -import { useCheckGithubBranchValidity } from 'data/integrations/github-branch-check-query' -import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query' -import { projectKeys } from 'data/projects/keys' -import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' -import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' -import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization' -import { useSelectedProject } from 'hooks/misc/useSelectedProject' -import { useFlag } from 'hooks/ui/useFlag' -import { useRouter } from 'next/router' -import { useAppStateSnapshot } from 'state/app-state' -import { sidePanelsState } from 'state/side-panels' -import { - Badge, - Button, - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogSection, - DialogSectionSeparator, - DialogTitle, - Form_Shadcn_, - FormControl_Shadcn_, - FormField_Shadcn_, - FormItem_Shadcn_, - FormMessage_Shadcn_, - Input_Shadcn_, - Label_Shadcn_ as Label, -} from 'ui' -import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' -import { BranchingPITRNotice } from './BranchingPITRNotice' -import { BranchingPlanNotice } from './BranchingPlanNotice' -import { BranchingPostgresVersionNotice } from './BranchingPostgresVersionNotice' - -export const EnableBranchingModal = () => { - const router = useRouter() - const { ref } = useParams() - const snap = useAppStateSnapshot() - const queryClient = useQueryClient() - const project = useSelectedProject() - const selectedOrg = useSelectedOrganization() - const gitlessBranching = useFlag('gitlessBranching') - - const [isGitBranchValid, setIsGitBranchValid] = useState(false) - - const { - data: connections, - error: connectionsError, - isLoading: isLoadingConnections, - isSuccess: isSuccessConnections, - isError: isErrorConnections, - } = useGitHubConnectionsQuery( - { - organizationId: selectedOrg?.id, - }, - { enabled: snap.showEnableBranchingModal } - ) - - const hasMinimumPgVersion = - Number(last(project?.dbVersion?.split('-') ?? [])?.split('.')[0] ?? 0) >= 15 - - const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: selectedOrg?.slug }) - const isFreePlan = subscription?.plan.id === 'free' - - const { data: addons } = useProjectAddonsQuery({ projectRef: ref }) - const hasPitrEnabled = - (addons?.selected_addons ?? []).find((addon) => addon.type === 'pitr') !== undefined - - const githubConnection = connections?.find((connection) => connection.project.ref === ref) - const [repoOwner, repoName] = githubConnection?.repository.name.split('/') ?? [] - - const { mutateAsync: checkGithubBranchValidity, isLoading: isChecking } = - useCheckGithubBranchValidity({ onError: () => {} }) - - const { mutate: createBranch, isLoading: isCreating } = useBranchCreateMutation({ - onSuccess: async () => { - await Promise.all([ - queryClient.invalidateQueries(projectKeys.detail(ref)), - queryClient.invalidateQueries(projectKeys.list()), - ]) - toast.success(`Successfully enabled branching`) - snap.setShowEnableBranchingModal(false) - router.push(`/project/${ref}/branches`) - }, - onError: (error) => { - toast.error(`Failed to enable branching: ${error.message}`) - }, - }) - - const formId = 'enable-branching-form' - const FormSchema = z - .object({ - productionBranchName: z - .string() - .min(1, 'Production branch name cannot be empty') - .refine( - (val) => /^[a-zA-Z0-9\-_]+$/.test(val), - 'Branch name can only contain alphanumeric characters, hyphens, and underscores.' - ), - branchName: z.string().optional(), - }) - .superRefine(async (val, ctx) => { - if (githubConnection && (!val.branchName || val.branchName.length === 0)) { - ctx.addIssue({ - code: z.ZodIssueCode.custom, - message: 'GitHub branch is required when a repository is connected.', - path: ['branchName'], - }) - setIsGitBranchValid(false) - return - } - - if (githubConnection && val.branchName && val.branchName.length > 0) { - try { - await checkGithubBranchValidity({ - connectionId: githubConnection.id, - branchName: val.branchName, - }) - setIsGitBranchValid(true) - } catch (error) { - setIsGitBranchValid(false) - ctx.addIssue({ - code: z.ZodIssueCode.custom, - message: `Unable to find branch "${val.branchName}" in ${repoOwner}/${repoName}`, - path: ['branchName'], - }) - } - } else { - setIsGitBranchValid(true) - } - }) - - const form = useForm>({ - mode: 'onBlur', - reValidateMode: 'onChange', - resolver: zodResolver(FormSchema), - defaultValues: { productionBranchName: 'main', branchName: '' }, - }) - - const isLoading = isLoadingConnections - const isError = isErrorConnections - const isSuccess = isSuccessConnections - - const isFormValid = form.formState.isValid - const canSubmit = - isFormValid && !isCreating && !isChecking && (gitlessBranching || !!githubConnection) - - const onSubmit = (data: z.infer) => { - if (!ref) return console.error('Project ref is required') - createBranch({ - projectRef: ref, - branchName: data.productionBranchName, - ...(data.branchName && isGitBranchValid ? { gitBranch: data.branchName } : {}), - }) - } - - const openLinkerPanel = () => { - snap.setShowEnableBranchingModal(false) - sidePanelsState.setGithubConnectionsOpen(true) - } - - useEffect(() => { - if (snap.showEnableBranchingModal) { - form.reset({ productionBranchName: 'main', branchName: '' }) - setIsGitBranchValid(false) - } - }, [form, snap.showEnableBranchingModal]) - - useEffect(() => { - setIsGitBranchValid(!form.getValues('branchName') || form.getValues('branchName')?.length === 0) - }, [githubConnection?.id, form.getValues('branchName')]) - - return ( - <> - !open && snap.setShowEnableBranchingModal(false)} - > - - -
- -
-
- -
- Enable database branching - Manage environments in Supabase -
-
- -
- - - {isLoading && ( -
- - - - - -
- )} - {isError && ( -
- - - - - -
- )} - {isSuccess && ( - <> - {isFreePlan ? ( - - - - ) : !hasMinimumPgVersion ? ( - - - - ) : ( - <> - - - ( - - - - - - )} - /> - {githubConnection ? ( - <> - ( - -
- -
- - - {repoOwner}/{repoName} - - - - -
-
- - - -
- {isChecking && } - {field.value && !isChecking && isGitBranchValid && ( - - )} -
- - - )} - /> - - ) : ( -
-
-
- - {!gitlessBranching && ( - - Required - - )} -
-

- {gitlessBranching - ? 'Optionally connect to a GitHub repository to enable deploying previews on Pull Requests and manage migrations automatically.' - : 'Connect to a GitHub repository to enable database branching. This allows you to deploy previews on Pull Requests and manage migrations automatically.'} -

-
- -
- )} - - - )} - - - -

Please keep in mind the following:

- - {githubConnection && ( -
-
-
- -
-
-
-

- Migrations are applied from your GitHub repository -

-

- Migration files in your ./supabase{' '} - directory will run on both Preview Branches and Production when pushing - and merging branches. -

-
-
- )} - -
-
-
- -
-
-
-

- Preview branches are billed $0.01344 per hour -

-

- This cost will continue for as long as the branch has not been removed. -

-
-
- {!hasPitrEnabled && } - - - - )} - - - - - - -
- - - - - - ) -}