Create branch without GitHub connection (#35983)

* allow creating branching without git * update branching modals * add account connections * edit branch * copy * update copy * enable branch modal changes * add gitless branching flag * update account connections * update pull requests empty state * Clean up * refinements to gitless branching * nit * nit --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-06-08 02:25:04 +08:00 · 2025-06-09 11:04:10 +10:00
parent 6d5f7f25b2
commit daf8b3c3fd
14 changed files with 1091 additions and 428 deletions
--- a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
@@ -0,0 +1,82 @@
+import { Github } from 'lucide-react'
+import Image from 'next/image'
+
+import Panel from 'components/ui/Panel'
+import { useGitHubAuthorizationQuery } from 'data/integrations/github-authorization-query'
+import { BASE_PATH } from 'lib/constants'
+import { openInstallGitHubIntegrationWindow } from 'lib/github'
+import { Badge, Button, cn } from 'ui'
+import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
+
+const AccountConnections = () => {
+  const {
+    data: gitHubAuthorization,
+    isLoading,
+    isSuccess,
+    isError,
+    error,
+  } = useGitHubAuthorizationQuery()
+
+  const isConnected = gitHubAuthorization !== null
+
+  const handleConnect = () => {
+    openInstallGitHubIntegrationWindow('authorize')
+  }
+
+  return (
+    <Panel
+      className="mb-4 md:mb-8"
+      title={
+        <div>
+          <h5>Connections</h5>
+          <p className="text-sm text-foreground-lighter">
+            Connect your Supabase account with other services
+          </p>
+        </div>
+      }
+    >
+      {isLoading && (
+        <Panel.Content>
+          <ShimmeringLoader />
+        </Panel.Content>
+      )}
+      {isError && (
+        <Panel.Content>
+          <p className="text-sm text-destructive">
+            Failed to load GitHub connection status: {error?.message}
+          </p>
+        </Panel.Content>
+      )}
+      {isSuccess && (
+        <Panel.Content className="flex justify-between items-center">
+          <div className="flex gap-x-4 items-center">
+            <Image
+              className={cn('dark:invert')}
+              src={`${BASE_PATH}/img/icons/github-icon.svg`}
+              width={30}
+              height={30}
+              alt={`GitHub icon`}
+            />
+            <div>
+              <p className="text-sm">GitHub</p>
+              <p className="text-sm text-foreground-lighter">
+                Sync GitHub repos to Supabase projects for automatic branch creation and merging
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-x-1">
+            {isConnected ? (
+              <Badge variant="success">Connected</Badge>
+            ) : (
+              <Button type="primary" onClick={handleConnect}>
+                Connect
+              </Button>
+            )}
+          </div>
+        </Panel.Content>
+      )}
+    </Panel>
+  )
+}
+
+export { AccountConnections }
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
@@ -19,12 +19,13 @@ import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { useFlag } from 'hooks/ui/useFlag'
 import { useUrlState } from 'hooks/ui/useUrlState'
 import { Button } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { BranchLoader, BranchManagementSection, BranchRow } from './BranchPanels'
-import CreateBranchModal from './CreateBranchModal'
+import { CreateBranchModal } from './CreateBranchModal'
 import {
  BranchingEmptyState,
  PreviewBranchesEmptyState,
@@ -39,6 +40,7 @@ const BranchManagement = () => {
  const { ref } = useParams()
  const project = useSelectedProject()
  const selectedOrg = useSelectedOrganization()
+  const gitlessBranching = useFlag('gitlessBranching')

  const hasBranchEnabled = project?.is_branch_enabled

@@ -217,7 +219,7 @@ const BranchManagement = () => {
                    />
                  )}

-                  {isSuccessConnections && (
+                  {isSuccessConnections && !gitlessBranching && (
                    <div className="border rounded-lg px-6 py-2 flex items-center justify-between">
                      <div className="flex items-center gap-x-4">
                        <div className="w-8 h-8 bg-scale-300 border rounded-md flex items-center justify-center">
@@ -305,6 +307,8 @@ const BranchManagement = () => {
                            <PullRequestsEmptyState
                              url={generateCreatePullRequestURL()}
                              hasBranches={previewBranches.length > 0}
+                              githubConnection={githubConnection}
+                              gitlessBranching={gitlessBranching}
                            />
                          )}
                        </BranchManagementSection>
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -5,8 +5,10 @@ import {
  Clock,
  ExternalLink,
  GitPullRequest,
+  Github,
  Infinity,
  MoreVertical,
+  Pencil,
  RefreshCw,
  Shield,
  Trash2,
@@ -24,6 +26,7 @@ import { useBranchResetMutation } from 'data/branches/branch-reset-mutation'
 import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
 import type { Branch } from 'data/branches/branches-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useFlag } from 'hooks/ui/useFlag'
 import {
  Badge,
  Button,
@@ -37,6 +40,7 @@ import {
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import BranchStatusBadge from './BranchStatusBadge'
+import { EditBranchModal } from './EditBranchModal'
 import WorkflowLogs from './WorkflowLogs'

 interface BranchManagementSectionProps {
@@ -104,8 +108,10 @@ export const BranchRow = ({
 }: BranchRowProps) => {
  const { ref: projectRef } = useParams()
  const isActive = projectRef === branch?.project_ref
+  const gitlessBranching = useFlag('gitlessBranching')

  const canDeleteBranches = useCheckPermissions(PermissionAction.DELETE, 'preview_branches')
+  const canUpdateBranches = useCheckPermissions(PermissionAction.UPDATE, 'preview_branches')

  const daysFromNow = dayjs().diff(dayjs(branch.updated_at), 'day')
  const formattedTimeFromNow = dayjs(branch.updated_at).fromNow()
@@ -133,6 +139,7 @@ export const BranchRow = ({

  const [showConfirmResetModal, setShowConfirmResetModal] = useState(false)
  const [showBranchModeSwitch, setShowBranchModeSwitch] = useState(false)
+  const [showEditBranchModal, setShowEditBranchModal] = useState(false)

  const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
    onSuccess() {
@@ -178,7 +185,7 @@ export const BranchRow = ({
              text: branch.persistent
                ? `${branch.name} is a persistent branch and will remain active even after the
                    underlying PR is closed`
-                : undefined,
+                : 'Switch to branch',
            },
          }}
        >
@@ -187,6 +194,8 @@ export const BranchRow = ({
          </Link>
        </ButtonTooltip>

+        {branch.git_branch && <Github size={14} className="text-foreground-light" />}
+
        {isActive && <Badge>Current</Badge>}
        <BranchStatusBadge
          status={
@@ -230,13 +239,13 @@ export const BranchRow = ({
          </div>
        ) : (
          <div className="flex items-center gap-x-2">
-            {branch.pr_number === undefined ? (
+            {branch.git_branch && branch.pr_number === undefined ? (
              <Button asChild type="default" iconRight={<ExternalLink size={14} />}>
                <Link passHref target="_blank" rel="noreferrer" href={createPullRequestURL}>
                  Create Pull Request
                </Link>
              </Button>
-            ) : (
+            ) : branch.pr_number !== undefined ? (
              <div className="flex items-center">
                <Link
                  href={`https://github.com/${repo}/pull/${branch.pr_number}`}
@@ -258,7 +267,7 @@ export const BranchRow = ({
                  </Link>
                </Button>
              </div>
-            )}
+            ) : null}
            <WorkflowLogs projectRef={branch.project_ref} />
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
@@ -285,32 +294,60 @@ export const BranchRow = ({
                  )}
                </Tooltip>

-                <Tooltip>
-                  <TooltipTrigger asChild={isBranchActiveHealthy} className="w-full">
-                    <DropdownMenuItem
-                      className="gap-x-2"
-                      onSelect={() => setShowBranchModeSwitch(true)}
-                      onClick={() => setShowBranchModeSwitch(true)}
-                      disabled={!isBranchActiveHealthy}
+                {branch.git_branch && (
+                  <Tooltip>
+                    <TooltipTrigger asChild={isBranchActiveHealthy} className="w-full">
+                      <DropdownMenuItem
+                        className="gap-x-2"
+                        onSelect={() => setShowBranchModeSwitch(true)}
+                        onClick={() => setShowBranchModeSwitch(true)}
+                        disabled={!isBranchActiveHealthy}
+                      >
+                        {branch.persistent ? (
+                          <>
+                            <Clock size={14} /> Switch to ephemeral
+                          </>
+                        ) : (
+                          <>
+                            <Infinity size={14} className="scale-110" /> Switch to persistent
+                          </>
+                        )}
+                      </DropdownMenuItem>
+                    </TooltipTrigger>
+                    {!isBranchActiveHealthy && (
+                      <TooltipContent side="left">
+                        Branch is still initializing. Please wait for the branch to become healthy
+                        before switching modes
+                      </TooltipContent>
+                    )}
+                  </Tooltip>
+                )}
+
+                {gitlessBranching && (
+                  <Tooltip>
+                    <TooltipTrigger
+                      asChild={canUpdateBranches && isBranchActiveHealthy}
+                      className="w-full"
                    >
-                      {branch.persistent ? (
-                        <>
-                          <Clock size={14} /> Switch to ephemeral
-                        </>
-                      ) : (
-                        <>
-                          <Infinity size={14} className="scale-110" /> Switch to persistent
-                        </>
-                      )}
-                    </DropdownMenuItem>
-                  </TooltipTrigger>
-                  {!isBranchActiveHealthy && (
-                    <TooltipContent side="left">
-                      Branch is still initializing. Please wait for the branch to become healthy
-                      before switching modes
-                    </TooltipContent>
-                  )}
-                </Tooltip>
+                      <DropdownMenuItem
+                        className="gap-x-2"
+                        disabled={!canUpdateBranches || !isBranchActiveHealthy || isUpdating}
+                        onSelect={() => setShowEditBranchModal(true)}
+                        onClick={() => setShowEditBranchModal(true)}
+                      >
+                        <Pencil size={14} />
+                        Edit Branch
+                      </DropdownMenuItem>
+                    </TooltipTrigger>
+                    {(!canUpdateBranches || !isBranchActiveHealthy) && (
+                      <TooltipContent side="left">
+                        {!canUpdateBranches
+                          ? 'You need additional permissions to edit branches'
+                          : 'Branch is still initializing. Please wait for the branch to become healthy before editing.'}
+                      </TooltipContent>
+                    )}
+                  </Tooltip>
+                )}

                <Tooltip>
                  <TooltipTrigger asChild={canDeleteBranches} className="w-full">
@@ -373,6 +410,12 @@ export const BranchRow = ({
          </div>
        )}
      </div>
+
+      <EditBranchModal
+        branch={branch}
+        visible={showEditBranchModal}
+        onClose={() => setShowEditBranchModal(false)}
+      />
    </div>
  )
 }
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useParams } from 'common'
-import { Check, ExternalLink, Loader2 } from 'lucide-react'
+import { Check, DollarSign, Github, Loader2 } from 'lucide-react'
+import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -15,32 +16,42 @@ import { useCheckGithubBranchValidity } from 'data/integrations/github-branch-ch
 import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { useFlag } from 'hooks/ui/useFlag'
+import { BASE_PATH } from 'lib/constants'
+import { sidePanelsState } from 'state/side-panels'
 import {
+  Badge,
  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogSectionSeparator,
+  DialogTitle,
  FormControl_Shadcn_,
  FormField_Shadcn_,
  FormItem_Shadcn_,
  FormMessage_Shadcn_,
  Form_Shadcn_,
  Input_Shadcn_,
-  Modal,
+  Label_Shadcn_ as Label,
+  cn,
 } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

 interface CreateBranchModalProps {
  visible: boolean
  onClose: () => void
 }

-const CreateBranchModal = ({ visible, onClose }: CreateBranchModalProps) => {
+export const CreateBranchModal = ({ visible, onClose }: CreateBranchModalProps) => {
  const { ref } = useParams()
  const projectDetails = useSelectedProject()
  const selectedOrg = useSelectedOrganization()
+  const gitlessBranching = useFlag('gitlessBranching')

-  // [Joshen] There's something weird with RHF that I can't figure out atm
-  // but calling form.formState.isValid somehow removes the onBlur check,
-  // and makes the validation run onChange instead. This is a workaround
-  const [isValid, setIsValid] = useState(false)
+  const [isGitBranchValid, setIsGitBranchValid] = useState(false)

  const isBranch = projectDetails?.parent_project_ref !== undefined
  const projectRef =
@@ -63,174 +74,233 @@ const CreateBranchModal = ({ visible, onClose }: CreateBranchModalProps) => {
    })

  const { mutate: createBranch, isLoading: isCreating } = useBranchCreateMutation({
-    onSuccess: () => {
-      toast.success('Successfully created new branch')
+    onSuccess: (data) => {
+      toast.success(`Successfully created preview branch "${data.name}"`)
      onClose()
    },
+    onError: (error) => {
+      toast.error(`Failed to create branch: ${error.message}`)
+    },
  })

-  const githubConnection = connections?.find(
-    (connection) => connection.project.ref === projectDetails?.parentRef
-  )
+  const githubConnection = connections?.find((connection) => connection.project.ref === projectRef)
  const [repoOwner, repoName] = githubConnection?.repository.name.split('/') ?? []

+  const isBranchingEnabled = gitlessBranching || !!githubConnection
+
  const formId = 'create-branch-form'
-  const FormSchema = z.object({
-    branchName: z.string().superRefine(async (val, ctx) => {
-      if ((branches ?? []).some((branch) => branch.git_branch === val)) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: 'This branch already has a Preview Branch',
-        })
-        return
-      }
-
-      if (val.length > 0) {
+  const FormSchema = z
+    .object({
+      branchName: z
+        .string()
+        .min(1, 'Branch name cannot be empty')
+        .refine(
+          (val) => /^[a-zA-Z0-9\-_]+$/.test(val),
+          'Branch name can only contain alphanumeric characters, hyphens, and underscores.'
+        )
+        .refine(
+          (val) => (branches ?? []).every((branch) => branch.name !== val),
+          'A branch with this name already exists'
+        ),
+      gitBranchName: z
+        .string()
+        .refine(
+          (val) => !githubConnection?.id || (val && val.length > 0),
+          'Git branch name is required when Git is connected'
+        ),
+    })
+    .superRefine(async (val, ctx) => {
+      if (val.gitBranchName && val.gitBranchName.length > 0 && githubConnection?.id) {
        try {
-          if (!githubConnection?.id) throw new Error('No GitHub connection found')
-
          await checkGithubBranchValidity({
            connectionId: githubConnection.id,
-            branchName: val,
+            branchName: val.gitBranchName,
          })
-          setIsValid(true)
+          setIsGitBranchValid(true)
        } catch (error) {
+          setIsGitBranchValid(false)
          ctx.addIssue({
            code: z.ZodIssueCode.custom,
-            message: `Unable to find branch from ${repoOwner}/${repoName}`,
+            message: `Unable to find branch "${val.gitBranchName}" in ${repoOwner}/${repoName}`,
+            path: ['gitBranchName'],
          })
-          setIsValid(false)
-          return
        }
+      } else {
+        setIsGitBranchValid(!val.gitBranchName || val.gitBranchName.length === 0)
      }
-    }),
-  })
+    })
+
  const form = useForm<z.infer<typeof FormSchema>>({
    mode: 'onBlur',
-    reValidateMode: 'onBlur',
+    reValidateMode: 'onChange',
    resolver: zodResolver(FormSchema),
-    defaultValues: { branchName: '' },
+    defaultValues: { branchName: '', gitBranchName: '' },
  })

-  const canSubmit = form.getValues('branchName').length > 0 && !isChecking && isValid
+  const isFormValid =
+    form.formState.isValid && (!form.getValues('gitBranchName') || isGitBranchValid)
+  const canSubmit = isFormValid && !isCreating && !isChecking && isBranchingEnabled
+
  const onSubmit = (data: z.infer<typeof FormSchema>) => {
    if (!projectRef) return console.error('Project ref is required')
-    createBranch({ projectRef, branchName: data.branchName, gitBranch: data.branchName })
+    createBranch({
+      projectRef,
+      branchName: data.branchName,
+      ...(data.gitBranchName && isGitBranchValid ? { gitBranch: data.gitBranchName } : {}),
+    })
  }

  useEffect(() => {
    if (form && visible) {
-      setIsValid(false)
+      setIsGitBranchValid(false)
      form.reset()
    }
  }, [form, visible])

+  useEffect(() => {
+    setIsGitBranchValid(
+      !form.getValues('gitBranchName') || form.getValues('gitBranchName')?.length === 0
+    )
+  }, [githubConnection?.id, form.getValues('gitBranchName')])
+
+  const openLinkerPanel = () => {
+    onClose()
+    sidePanelsState.setGithubConnectionsOpen(true)
+  }
+
  return (
-    <Form_Shadcn_ {...form}>
-      <form
-        id={formId}
-        className="space-y-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-        onChange={() => setIsValid(false)}
-      >
-        <Modal
-          hideFooter
-          size="medium"
-          visible={visible}
-          onCancel={onClose}
-          header="Create a new preview branch"
-          confirmText="Create Preview Branch"
-        >
-          <Modal.Content>
-            {isLoadingConnections && <GenericSkeletonLoader />}
-            {isErrorConnections && (
-              <AlertError
-                error={connectionsError}
-                subject="Failed to retrieve Github repository information"
+    <Dialog open={visible} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent size="large" hideClose>
+        <DialogHeader padding="small">
+          <DialogTitle>Create a new preview branch</DialogTitle>
+        </DialogHeader>
+        <DialogSectionSeparator />
+        <Form_Shadcn_ {...form}>
+          <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogSection padding="medium" className="space-y-4">
+              <FormField_Shadcn_
+                control={form.control}
+                name="branchName"
+                render={({ field }) => (
+                  <FormItemLayout label="Preview Branch Name">
+                    <FormControl_Shadcn_>
+                      <Input_Shadcn_
+                        {...field}
+                        placeholder="e.g. staging, dev-feature-x"
+                        autoComplete="off"
+                      />
+                    </FormControl_Shadcn_>
+                  </FormItemLayout>
+                )}
              />
-            )}
-            {isSuccessConnections && (
-              <div>
-                <p className="text-sm text-foreground-light">
-                  Your project is currently connected to the repository:
-                </p>
-                <div className="flex items-center space-x-2">
-                  <p>{githubConnection?.repository.name}</p>
-                  <Link
-                    href={`https://github.com/${repoOwner}/${repoName}`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <ExternalLink size={14} strokeWidth={1.5} />
-                  </Link>
-                </div>
-              </div>
-            )}
-          </Modal.Content>

-          <Modal.Separator />
-
-          <Modal.Content className="space-y-3">
-            <p className="text-sm">
-              Choose a Git Branch to base your Preview Branch on. Any migration changes added to
-              this Git Branch will be run on this new Preview Branch.
-            </p>
-            <FormField_Shadcn_
-              control={form.control}
-              name="branchName"
-              render={({ field }) => (
-                <FormItem_Shadcn_ className="relative flex flex-col gap-y-1">
-                  <label className="text-sm text-foreground-light">
-                    Choose your branch to create a preview from
-                  </label>
-                  <FormControl_Shadcn_>
-                    <Input_Shadcn_ {...field} placeholder="e.g feat/some-feature" />
-                  </FormControl_Shadcn_>
-                  <div className="absolute top-9 right-3">
-                    {isChecking ? (
-                      <Loader2 size={14} className="animate-spin" />
-                    ) : isValid ? (
-                      <Check size={14} className="text-brand" strokeWidth={2} />
-                    ) : null}
-                  </div>
-
-                  <FormMessage_Shadcn_ />
-                </FormItem_Shadcn_>
+              {githubConnection && (
+                <FormField_Shadcn_
+                  control={form.control}
+                  name="gitBranchName"
+                  render={({ field }) => (
+                    <FormItem_Shadcn_>
+                      <div className="flex items-center justify-between mb-2">
+                        <Label>Link to Git Branch (Optional)</Label>
+                        <div className="flex items-center gap-2 text-sm">
+                          <Image
+                            className={cn('dark:invert')}
+                            src={`${BASE_PATH}/img/icons/github-icon.svg`}
+                            width={16}
+                            height={16}
+                            alt={`GitHub icon`}
+                          />
+                          <Link
+                            href={`https://github.com/${repoOwner}/${repoName}`}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-foreground hover:underline"
+                          >
+                            {repoOwner}/{repoName}
+                          </Link>
+                        </div>
+                      </div>
+                      <div className="relative">
+                        <FormControl_Shadcn_>
+                          <Input_Shadcn_
+                            {...field}
+                            placeholder="e.g. main, feat/some-feature"
+                            autoComplete="off"
+                          />
+                        </FormControl_Shadcn_>
+                        <div className="absolute top-2 right-3 flex items-center gap-2">
+                          {isChecking && <Loader2 size={14} className="animate-spin" />}
+                          {field.value && !isChecking && isGitBranchValid && (
+                            <Check size={14} className="text-brand" strokeWidth={2} />
+                          )}
+                        </div>
+                      </div>
+                      <p className="text-sm text-foreground-light mt-2">
+                        If linked, migrations from this Git branch will be automatically deployed.
+                      </p>
+                      <FormMessage_Shadcn_ />
+                    </FormItem_Shadcn_>
+                  )}
+                />
              )}
-            />
-          </Modal.Content>
+              {isLoadingConnections && <GenericSkeletonLoader />}
+              {isErrorConnections && (
+                <AlertError
+                  error={connectionsError}
+                  subject="Failed to retrieve GitHub connection information"
+                />
+              )}
+              {isSuccessConnections && (
+                <>
+                  {!githubConnection && (
+                    <div className="flex items-center gap-2 justify-between">
+                      <div>
+                        <div className="flex items-center gap-2 mb-2">
+                          <Label>GitHub Repository</Label>
+                          {!gitlessBranching && (
+                            <Badge variant="warning" size="small">
+                              Required
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="text-sm text-foreground-light">
+                          {gitlessBranching
+                            ? 'Optionally connect to a GitHub repository to manage migrations automatically for this branch.'
+                            : 'Connect to a GitHub repository to enable branch creation. This allows you to manage migrations automatically for this branch.'}
+                        </p>
+                      </div>
+                      <Button type="default" icon={<Github />} onClick={openLinkerPanel}>
+                        Connect to GitHub
+                      </Button>
+                    </div>
+                  )}
+                </>
+              )}
+            </DialogSection>

-          <Modal.Separator />
-
-          <Modal.Content className="p-0">
-            <Admonition
-              type="warning"
-              className="rounded-none !mb-0 border-0"
-              title="Each preview branch costs $0.32 per day"
-              description="Each preview branch costs $0.32 per day until it is removed. This pricing is for Early Access and is subject to change."
-            />
-          </Modal.Content>
-
-          <Modal.Separator />
-
-          <Modal.Content className="flex items-center justify-end space-x-2">
-            <Button disabled={isCreating} type="default" onClick={() => onClose()}>
-              Cancel
-            </Button>
-            <Button
-              form={formId}
-              disabled={isCreating || !canSubmit}
-              loading={isCreating}
-              type="primary"
-              htmlType="submit"
-            >
-              Create Preview branch
-            </Button>
-          </Modal.Content>
-        </Modal>
-      </form>
-    </Form_Shadcn_>
+            <DialogFooter className="sm:justify-between gap-2" padding="medium">
+              <p className="flex items-center gap-2 text-sm text-foreground">
+                <DollarSign size={16} strokeWidth={1.5} />
+                Each preview branch costs $0.32 per day
+              </p>
+              <div className="flex items-center gap-2">
+                <Button disabled={isCreating} type="default" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  form={formId}
+                  disabled={!isSuccessConnections || isCreating || !canSubmit || isChecking}
+                  loading={isCreating}
+                  type="primary"
+                  htmlType="submit"
+                >
+                  Create branch
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </Form_Shadcn_>
+      </DialogContent>
+    </Dialog>
  )
 }
-
-export default CreateBranchModal
--- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
@@ -0,0 +1,306 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check, Github, Loader2 } from 'lucide-react'
+import Image from 'next/image'
+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 { useParams } from 'common'
+import AlertError from 'components/ui/AlertError'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
+import { Branch, useBranchesQuery } from 'data/branches/branches-query'
+import { useCheckGithubBranchValidity } from 'data/integrations/github-branch-check-query'
+import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { BASE_PATH } from 'lib/constants'
+import { sidePanelsState } from 'state/side-panels'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogSectionSeparator,
+  DialogTitle,
+  FormControl_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormMessage_Shadcn_,
+  Form_Shadcn_,
+  Input_Shadcn_,
+  Label_Shadcn_ as Label,
+  cn,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+interface EditBranchModalProps {
+  branch?: Branch
+  visible: boolean
+  onClose: () => void
+}
+
+export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalProps) => {
+  const { ref } = useParams()
+  const projectDetails = useSelectedProject()
+  const selectedOrg = useSelectedOrganization()
+
+  const [isGitBranchValid, setIsGitBranchValid] = useState(false)
+
+  const isBranch = projectDetails?.parent_project_ref !== undefined
+  const projectRef =
+    projectDetails !== undefined ? (isBranch ? projectDetails.parent_project_ref : ref) : undefined
+
+  const {
+    data: connections,
+    error: connectionsError,
+    isLoading: isLoadingConnections,
+    isSuccess: isSuccessConnections,
+    isError: isErrorConnections,
+  } = useGitHubConnectionsQuery({
+    organizationId: selectedOrg?.id,
+  })
+
+  const { data: branches } = useBranchesQuery({ projectRef })
+  const { mutateAsync: checkGithubBranchValidity, isLoading: isChecking } =
+    useCheckGithubBranchValidity({
+      onError: () => {},
+    })
+
+  const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
+    onSuccess: (data) => {
+      toast.success(`Successfully updated branch "${data.name}"`)
+      onClose()
+    },
+    onError: (error) => {
+      toast.error(`Failed to update branch: ${error.message}`)
+    },
+  })
+
+  const githubConnection = connections?.find((connection) => connection.project.ref === projectRef)
+  const [repoOwner, repoName] = githubConnection?.repository.name.split('/') ?? []
+
+  const formId = 'edit-branch-form'
+  const FormSchema = z
+    .object({
+      branchName: z
+        .string()
+        .min(1, 'Branch name cannot be empty')
+        .refine(
+          (val) => /^[a-zA-Z0-9\-_]+$/.test(val),
+          'Branch name can only contain alphanumeric characters, hyphens, and underscores.'
+        )
+        .refine(
+          (val) =>
+            // Allow the current branch name during edit
+            val === branch?.name || (branches ?? []).every((b) => b.name !== val),
+          'A branch with this name already exists'
+        ),
+      gitBranchName: z.string().optional(),
+    })
+    .superRefine(async (val, ctx) => {
+      if (val.gitBranchName && val.gitBranchName.length > 0 && githubConnection?.id) {
+        try {
+          await checkGithubBranchValidity({
+            connectionId: githubConnection.id,
+            branchName: val.gitBranchName,
+          })
+          setIsGitBranchValid(true)
+        } catch (error) {
+          setIsGitBranchValid(false)
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Unable to find branch "${val.gitBranchName}" in ${repoOwner}/${repoName}`,
+            path: ['gitBranchName'],
+          })
+        }
+      } else {
+        // If git branch is empty or removed, it's valid
+        setIsGitBranchValid(!val.gitBranchName || val.gitBranchName.length === 0)
+      }
+    })
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    mode: 'onBlur',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(FormSchema),
+    defaultValues: { branchName: '', gitBranchName: '' },
+  })
+
+  const isFormValid =
+    form.formState.isValid && (!form.getValues('gitBranchName') || isGitBranchValid)
+  const canSubmit = isFormValid && !isUpdating && !isChecking
+
+  const onSubmit = (data: z.infer<typeof FormSchema>) => {
+    if (!projectRef) return console.error('Project ref is required')
+    if (!branch?.id) return console.error('Branch ID is required')
+
+    const payload: {
+      projectRef: string
+      id: string
+      branchName: string
+      gitBranch?: string
+    } = {
+      projectRef,
+      id: branch.id,
+      branchName: data.branchName,
+    }
+
+    // Only add gitBranch to the payload if it is present and valid
+    // If gitBranchName is empty or invalid, gitBranch remains undefined in the payload
+    if (data.gitBranchName && isGitBranchValid) {
+      payload.gitBranch = data.gitBranchName
+    }
+
+    updateBranch(payload)
+  }
+
+  // Pre-fill form when the modal becomes visible and branch data is available
+  useEffect(() => {
+    if (visible && branch) {
+      setIsGitBranchValid(!!branch.git_branch) // Initial validity based on existing link
+      form.reset({
+        branchName: branch.name ?? '',
+        gitBranchName: branch.git_branch ?? '',
+      })
+    }
+  }, [branch, visible, form])
+
+  // Handle initial state and changes for git branch validity
+  useEffect(() => {
+    setIsGitBranchValid(
+      !form.getValues('gitBranchName') || form.getValues('gitBranchName')?.length === 0
+    )
+    // Trigger validation if a git branch name exists initially or is entered
+    if (form.getValues('gitBranchName')) {
+      form.trigger('gitBranchName')
+    }
+  }, [githubConnection?.id, form.getValues('gitBranchName'), form.trigger, visible, branch])
+
+  const openLinkerPanel = () => {
+    onClose()
+    sidePanelsState.setGithubConnectionsOpen(true)
+  }
+
+  return (
+    <Dialog open={visible} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent size="large" hideClose>
+        <DialogHeader padding="small">
+          <DialogTitle>Edit branch "{branch?.name}"</DialogTitle> {/* Update title */}
+        </DialogHeader>
+        <DialogSectionSeparator />
+        <Form_Shadcn_ {...form}>
+          <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogSection padding="medium" className="space-y-4">
+              <FormField_Shadcn_
+                control={form.control}
+                name="branchName"
+                render={({ field }) => (
+                  <FormItemLayout label="Preview Branch Name">
+                    <FormControl_Shadcn_>
+                      <Input_Shadcn_
+                        {...field}
+                        placeholder="e.g. staging, dev-feature-x"
+                        autoComplete="off"
+                      />
+                    </FormControl_Shadcn_>
+                  </FormItemLayout>
+                )}
+              />
+
+              {githubConnection && (
+                <FormField_Shadcn_
+                  control={form.control}
+                  name="gitBranchName"
+                  render={({ field }) => (
+                    <FormItem_Shadcn_>
+                      <div className="flex items-center justify-between mb-2">
+                        <Label>Link to Git Branch (Optional)</Label>
+                        <div className="flex items-center gap-2 text-sm">
+                          <Image
+                            className={cn('dark:invert')}
+                            src={`${BASE_PATH}/img/icons/github-icon.svg`}
+                            width={16}
+                            height={16}
+                            alt={`GitHub icon`}
+                          />
+                          <Link
+                            href={`https://github.com/${repoOwner}/${repoName}`}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-foreground hover:underline"
+                          >
+                            {repoOwner}/{repoName}
+                          </Link>
+                        </div>
+                      </div>
+                      <div className="relative">
+                        <FormControl_Shadcn_>
+                          <Input_Shadcn_
+                            {...field}
+                            placeholder="e.g. main, feat/some-feature"
+                            autoComplete="off"
+                          />
+                        </FormControl_Shadcn_>
+                        <div className="absolute top-2 right-3 flex items-center gap-2">
+                          {isChecking && <Loader2 size={14} className="animate-spin" />}
+                          {field.value && !isChecking && isGitBranchValid && (
+                            <Check size={14} className="text-brand" strokeWidth={2} />
+                          )}
+                        </div>
+                      </div>
+                      <p className="text-sm text-foreground-light mt-2">
+                        If linked, migrations from this Git branch will be automatically deployed.
+                      </p>
+                      <FormMessage_Shadcn_ />
+                    </FormItem_Shadcn_>
+                  )}
+                />
+              )}
+              {isLoadingConnections && <GenericSkeletonLoader />}
+              {isErrorConnections && (
+                <AlertError
+                  error={connectionsError}
+                  subject="Failed to retrieve GitHub connection information"
+                />
+              )}
+              {isSuccessConnections && !githubConnection && (
+                <div className="flex items-center gap-2 justify-between">
+                  <div>
+                    <Label>GitHub Repository</Label>
+                    <p className="text-sm text-foreground-light">
+                      Optionally connect to a GitHub repository to manage migrations automatically
+                      for this branch.
+                    </p>
+                  </div>
+                  <Button type="default" icon={<Github />} onClick={openLinkerPanel}>
+                    Connect to GitHub
+                  </Button>
+                </div>
+              )}
+            </DialogSection>
+
+            <DialogFooter padding="medium">
+              <Button disabled={isUpdating} type="default" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                form={formId}
+                disabled={!isSuccessConnections || isUpdating || !canSubmit || isChecking}
+                loading={isUpdating}
+                type="primary"
+                htmlType="submit"
+              >
+                Update branch
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form_Shadcn_>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
@@ -1,11 +1,12 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { ExternalLink, GitBranch, GitPullRequest } from 'lucide-react'
+import { ExternalLink, GitBranch, GitPullRequest, Github } from 'lucide-react'
 import Link from 'next/link'

 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useAppStateSnapshot } from 'state/app-state'
+import { sidePanelsState } from 'state/side-panels'
 import { Button } from 'ui'

 export const BranchingEmptyState = () => {
@@ -55,10 +56,35 @@ export const BranchingEmptyState = () => {
 export const PullRequestsEmptyState = ({
  url,
  hasBranches,
+  githubConnection,
+  gitlessBranching,
 }: {
  url: string
  hasBranches: boolean
+  githubConnection?: any
+  gitlessBranching?: boolean
 }) => {
+  // Show GitHub connection message if GitHub is not connected and gitless branching is enabled
+  if (!githubConnection && gitlessBranching) {
+    return (
+      <div className="p-16 text-center">
+        <div>
+          <h3 className="mb-1">Connect to GitHub for seamless branching</h3>
+          <p className="text-sm text-foreground-light mb-4">
+            Sync GitHub repos to Supabase projects for automatic branch creation and merging
+          </p>
+        </div>
+        <Button
+          type="default"
+          icon={<Github />}
+          onClick={() => sidePanelsState.setGithubConnectionsOpen(true)}
+        >
+          Connect to GitHub
+        </Button>
+      </div>
+    )
+  }
+
  return (
    <div className="flex items-center flex-col justify-center w-full py-10">
      <p>No pull requests made yet for this repository</p>
@@ -106,36 +132,24 @@ export const PreviewBranchesEmptyState = ({
 }) => {
  return (
    <div className="flex items-center flex-col justify-center w-full py-10">
-      <p>No database preview branches</p>
-      <p className="text-foreground-light">Database preview branches will be shown here</p>
-      <div className="w-[500px] border rounded-md mt-4">
-        <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
-          <div className="flex items-center space-x-4">
-            <GitBranch strokeWidth={2} className="text-foreground-light" />
-            <div>
-              <p>Create a preview branch</p>
-              <p className="text-foreground-light">Start developing in preview</p>
-            </div>
-          </div>
-          <Button type="default" onClick={() => onSelectCreateBranch()}>
-            Create preview branch
-          </Button>
-        </div>
-        <div className="px-5 py-3 border-t flex items-center justify-between">
-          <div>
-            <p>Not sure what to do?</p>
-            <p className="text-foreground-light">Browse our documentation</p>
-          </div>
-          <Button type="default" iconRight={<ExternalLink size={14} />}>
-            <Link
-              target="_blank"
-              rel="noreferrer"
-              href="https://supabase.com/docs/guides/platform/branching"
-            >
-              Docs
-            </Link>
-          </Button>
-        </div>
+      <p>Create your first preview branch</p>
+      <p className="text-foreground-light mb-4">
+        Preview branches are used to experiment with changes to your database schema in a safe,
+        non-destructive environment.
+      </p>
+      <div className="flex items-center space-x-2">
+        <Button type="default" iconRight={<ExternalLink size={14} />}>
+          <Link
+            target="_blank"
+            rel="noreferrer"
+            href="https://supabase.com/docs/guides/platform/branching"
+          >
+            Docs
+          </Link>
+        </Button>
+        <Button type="primary" onClick={() => onSelectCreateBranch()}>
+          Create your first branch
+        </Button>
      </div>
    </div>
  )
--- a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
@@ -154,18 +154,10 @@ const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectio
          onCancel={onCancel}
          onConfirm={onConfirm}
          loading={isDeleting}
-          alert={
-            type === 'GitHub' && isBranchingEnabled
-              ? {
-                  title: 'Branching will be disabled for this project',
-                  description: ` Deleting this GitHub connection will remove all preview branches on this project,
-                and also disable branching for ${project.name}`,
-                }
-              : undefined
-          }
        >
          <p className="text-sm text-foreground-light">
-            This action cannot be undone. Are you sure you want to delete this {type} connection?
+            Deleting this GitHub connection will stop automatic creation and merging of preview
+            branches. Existing preview branches will remain unchanged.
          </p>
        </ConfirmationModal>
      </>
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice.tsx
@@ -1,13 +1,14 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { Clock } from 'lucide-react'
 import Link from 'next/link'

 import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useAppStateSnapshot } from 'state/app-state'
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
+import { Button } from 'ui'

-const BranchingPITRNotice = () => {
+export const BranchingPITRNotice = () => {
  const { ref } = useParams()
  const snap = useAppStateSnapshot()

@@ -17,41 +18,44 @@ const BranchingPITRNotice = () => {
  )

  return (
-    <Alert_Shadcn_ className="rounded-none px-7 py-6 [&>svg]:top-6 [&>svg]:left-6 !border-t-0 !border-l-0 !border-r-0">
-      <AlertTitle_Shadcn_ className="text-base">
-        We strongly encourage enabling Point in Time Recovery (PITR)
-      </AlertTitle_Shadcn_>
-      <AlertDescription_Shadcn_>
-        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.
-      </AlertDescription_Shadcn_>
-      {!canUpdateSubscription ? (
-        <ButtonTooltip
-          disabled
-          size="tiny"
-          type="default"
-          className="mt-4"
-          tooltip={{
-            content: {
-              side: 'bottom',
-              text: 'You need additional permissions to amend subscriptions',
-            },
-          }}
-        >
-          Enable PITR add-on
-        </ButtonTooltip>
-      ) : (
-        <Button size="tiny" type="default" className="mt-4">
-          <Link
-            href={`/project/${ref}/settings/addons?panel=pitr`}
-            onClick={() => snap.setShowEnableBranchingModal(false)}
+    <div className="flex flex-row gap-4">
+      <div>
+        <figure className="w-10 h-10 rounded-md border flex items-center justify-center">
+          <Clock className="text-warning-700" size={20} strokeWidth={2} />
+        </figure>
+      </div>
+      <div className="flex grow items-center justify-between">
+        <div className="flex flex-col gap-y-1">
+          <p className="text-sm text-foreground">Consider enabling Point in Time Recovery (PITR)</p>
+          <p className="text-sm text-foreground-light">
+            This ensures you can recover data if you make a bad migration (e.g. delete a column).
+          </p>
+        </div>
+        {!canUpdateSubscription ? (
+          <ButtonTooltip
+            disabled
+            size="tiny"
+            type="default"
+            tooltip={{
+              content: {
+                side: 'bottom',
+                text: 'You need additional permissions to amend subscriptions',
+              },
+            }}
          >
            Enable PITR add-on
-          </Link>
-        </Button>
-      )}
-    </Alert_Shadcn_>
+          </ButtonTooltip>
+        ) : (
+          <Button size="tiny" type="default" asChild>
+            <Link
+              href={`/project/${ref}/settings/addons?panel=pitr`}
+              onClick={() => snap.setShowEnableBranchingModal(false)}
+            >
+              Enable PITR
+            </Link>
+          </Button>
+        )}
+      </div>
+    </div>
  )
 }
-
-export default BranchingPITRNotice
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
@@ -5,12 +5,12 @@ import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useAppStateSnapshot } from 'state/app-state'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'

-const BranchingPlanNotice = () => {
+export const BranchingPlanNotice = () => {
  const snap = useAppStateSnapshot()
  const selectedOrg = useSelectedOrganization()

  return (
-    <Alert_Shadcn_ className="rounded-none px-7 py-6 [&>svg]:top-6 [&>svg]:left-6 border-0 border-y">
+    <Alert_Shadcn_ className="rounded-none px-7 py-6 [&>svg]:top-6 [&>svg]:left-6 border-0 border-t">
      <AlertCircleIcon />
      <AlertTitle_Shadcn_>
        Database branching is only available on the Pro Plan and above
@@ -32,5 +32,3 @@ const BranchingPlanNotice = () => {
    </Alert_Shadcn_>
  )
 }
-
-export default BranchingPlanNotice
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
@@ -1,11 +1,11 @@
-import { useParams } from 'common'
+import { AlertCircleIcon } from 'lucide-react'
 import Link from 'next/link'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'

-import { AlertCircleIcon } from 'lucide-react'
+import { useParams } from 'common'
 import { useAppStateSnapshot } from 'state/app-state'

-const BranchingPostgresVersionNotice = () => {
+export const BranchingPostgresVersionNotice = () => {
  const { ref } = useParams()
  const snap = useAppStateSnapshot()

@@ -32,5 +32,3 @@ const BranchingPostgresVersionNotice = () => {
    </Alert_Shadcn_>
  )
 }
-
-export default BranchingPostgresVersionNotice
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
@@ -1,11 +1,14 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useParams } from 'common'
 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'
@@ -13,27 +16,49 @@ 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 { DollarSign, FileText, GitBranch } from 'lucide-react'
+import { useFlag } from 'hooks/ui/useFlag'
+import { useRouter } from 'next/router'
 import { useAppStateSnapshot } from 'state/app-state'
-import { Button, Form_Shadcn_, Modal } from 'ui'
-import BranchingPITRNotice from './BranchingPITRNotice'
-import BranchingPlanNotice from './BranchingPlanNotice'
-import BranchingPostgresVersionNotice from './BranchingPostgresVersionNotice'
-import GithubRepositorySelection from './GithubRepositorySelection'
+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'

-const EnableBranchingModal = () => {
+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')

-  // [Joshen] There's something weird with RHF that I can't figure out atm
-  // but calling form.formState.isValid somehow removes the onBlur check,
-  // and makes the validation run onChange instead. This is a workaround
-  const [isValid, setIsValid] = useState(false)
+  const [isGitBranchValid, setIsGitBranchValid] = useState(false)

  const {
    data: connections,
@@ -48,7 +73,6 @@ const EnableBranchingModal = () => {
    { enabled: snap.showEnableBranchingModal }
  )

-  const project = useSelectedProject()
  const hasMinimumPgVersion =
    Number(last(project?.dbVersion?.split('-') ?? [])?.split('.')[0] ?? 0) >= 15

@@ -66,195 +90,321 @@ const EnableBranchingModal = () => {
    useCheckGithubBranchValidity({ onError: () => {} })

  const { mutate: createBranch, isLoading: isCreating } = useBranchCreateMutation({
-    onSuccess: () => {
-      toast.success(`Successfully created new branch`)
+    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({
-    branchName: z
-      .string()
-      .refine((val) => val.length > 1, `Please enter a branch name from ${repoOwner}/${repoName}`)
-      .refine(async (val) => {
-        try {
-          if (val.length > 0) {
-            if (!githubConnection?.id) {
-              throw new Error('No GitHub connection found')
-            }
+  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
+      }

-            await checkGithubBranchValidity({
-              connectionId: githubConnection.id,
-              branchName: val,
-            })
-            setIsValid(true)
-          }
-          return true
+      if (githubConnection && val.branchName && val.branchName.length > 0) {
+        try {
+          await checkGithubBranchValidity({
+            connectionId: githubConnection.id,
+            branchName: val.branchName,
+          })
+          setIsGitBranchValid(true)
        } catch (error) {
-          setIsValid(false)
-          return false
+          setIsGitBranchValid(false)
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Unable to find branch "${val.branchName}" in ${repoOwner}/${repoName}`,
+            path: ['branchName'],
+          })
        }
-      }, `Unable to find branch from ${repoOwner}/${repoName}`),
-  })
+      } else {
+        setIsGitBranchValid(true)
+      }
+    })
+
  const form = useForm<z.infer<typeof FormSchema>>({
    mode: 'onBlur',
    reValidateMode: 'onChange',
    resolver: zodResolver(FormSchema),
-    defaultValues: { branchName: '' },
+    defaultValues: { productionBranchName: 'main', branchName: '' },
  })

  const isLoading = isLoadingConnections
  const isError = isErrorConnections
  const isSuccess = isSuccessConnections

-  const canSubmit = form.getValues('branchName').length > 0 && !isChecking && isValid
+  const isFormValid = form.formState.isValid
+  const canSubmit =
+    isFormValid && !isCreating && !isChecking && (gitlessBranching || !!githubConnection)
+
  const onSubmit = (data: z.infer<typeof FormSchema>) => {
    if (!ref) return console.error('Project ref is required')
-    createBranch({ projectRef: ref, branchName: data.branchName, gitBranch: data.branchName })
+    createBranch({
+      projectRef: ref,
+      branchName: data.productionBranchName,
+      ...(data.branchName && isGitBranchValid ? { gitBranch: data.branchName } : {}),
+    })
+  }
+
+  const openLinkerPanel = () => {
+    snap.setShowEnableBranchingModal(false)
+    sidePanelsState.setGithubConnectionsOpen(true)
  }

  useEffect(() => {
-    if (form && snap.showEnableBranchingModal) {
-      setIsValid(false)
-      form.reset()
+    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 (
    <>
-      <Modal
-        hideFooter
-        visible={snap.showEnableBranchingModal}
-        onCancel={() => snap.setShowEnableBranchingModal(false)}
-        className="block"
-        size="medium"
-        hideClose
+      <Dialog
+        open={snap.showEnableBranchingModal}
+        onOpenChange={(open) => !open && snap.setShowEnableBranchingModal(false)}
      >
-        <Form_Shadcn_ {...form}>
-          <form
-            id={formId}
-            onSubmit={form.handleSubmit(onSubmit)}
-            onChange={() => setIsValid(false)}
-          >
-            <Modal.Content className="flex items-center justify-between space-x-4">
-              <div className="flex items-center gap-x-4">
-                <GitBranch strokeWidth={2} size={20} />
-                <div>
-                  <p className="text-foreground">Enable database branching</p>
-                  <p className="text-sm text-foreground-light">Manage environments in Supabase</p>
+        <DialogContent size="large" hideClose>
+          <Form_Shadcn_ {...form}>
+            <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
+              <DialogHeader padding="small">
+                <div className="flex items-start justify-between gap-x-4">
+                  <div className="flex items-center gap-x-4">
+                    <GitBranch strokeWidth={2} size={20} />
+                    <div>
+                      <DialogTitle>Enable database branching</DialogTitle>
+                      <DialogDescription>Manage environments in Supabase</DialogDescription>
+                    </div>
+                  </div>
+                  <DocsButton href="https://supabase.com/docs/guides/platform/branching" />
                </div>
-              </div>
-              <DocsButton href="https://supabase.com/docs/guides/platform/branching" />
-            </Modal.Content>
+              </DialogHeader>

-            {isLoading && (
-              <>
-                <Modal.Separator />
-                <Modal.Content className="px-7 py-6">
-                  <GenericSkeletonLoader />
-                </Modal.Content>
-                <Modal.Separator />
-              </>
-            )}
-            {isError && (
-              <>
-                <Modal.Separator />
-                <Modal.Content className="px-7 py-6">
-                  {isErrorConnections ? (
+              {isLoading && (
+                <div>
+                  <DialogSectionSeparator />
+                  <DialogSection padding="medium">
+                    <GenericSkeletonLoader />
+                  </DialogSection>
+                  <DialogSectionSeparator />
+                </div>
+              )}
+              {isError && (
+                <div>
+                  <DialogSectionSeparator />
+                  <DialogSection padding="medium">
                    <AlertError error={connectionsError} subject="Failed to retrieve connections" />
-                  ) : null}
-                </Modal.Content>
-                <Modal.Separator />
-              </>
-            )}
-            {isSuccess && (
-              <>
-                {isFreePlan ? (
-                  <BranchingPlanNotice />
-                ) : !hasMinimumPgVersion ? (
-                  <BranchingPostgresVersionNotice />
-                ) : (
-                  <>
-                    <GithubRepositorySelection
-                      form={form}
-                      isChecking={isChecking}
-                      isValid={canSubmit}
-                      githubConnection={githubConnection}
-                    />
-                    {!hasPitrEnabled && <BranchingPITRNotice />}
-                  </>
-                )}
-                <Modal.Content className="py-6 flex flex-col gap-3">
-                  <p className="text-sm text-foreground-light">
-                    Please keep in mind the following:
-                  </p>
-                  <div className="flex flex-row gap-4">
-                    <div>
-                      <figure className="w-10 h-10 rounded-md bg-info-200 border border-info-400 flex items-center justify-center">
-                        <DollarSign className="text-info" size={20} strokeWidth={2} />
-                      </figure>
-                    </div>
-                    <div className="flex flex-col gap-y-1">
-                      <p className="text-sm text-foreground">
-                        Preview branches are billed <span translate="no">$0.32</span> per day
-                      </p>
-                      <p className="text-sm text-foreground-light">
-                        This cost will continue for as long as the branch has not been removed.
-                      </p>
-                    </div>
-                  </div>
-                  <div className="flex flex-row gap-4 mt-2">
-                    <div>
-                      <figure className="w-10 h-10 rounded-md bg-info-200 border border-info-400 flex items-center justify-center">
-                        <FileText className="text-info" size={20} strokeWidth={2} />
-                      </figure>
-                    </div>
-                    <div className="flex flex-col gap-y-1">
-                      <p className="text-sm text-foreground">
-                        Migrations are applied from your GitHub repository
-                      </p>
-                      <p className="text-sm text-foreground-light">
-                        Migration files in your <code className="text-xs">./supabase</code>{' '}
-                        directory will run on both Preview Branches and Production when pushing and
-                        merging branches.
-                      </p>
-                    </div>
-                  </div>
-                </Modal.Content>
-                <Modal.Separator />
-              </>
-            )}
+                  </DialogSection>
+                  <DialogSectionSeparator />
+                </div>
+              )}
+              {isSuccess && (
+                <>
+                  {isFreePlan ? (
+                    <DialogSection className="!p-0">
+                      <BranchingPlanNotice />
+                    </DialogSection>
+                  ) : !hasMinimumPgVersion ? (
+                    <DialogSection padding="medium">
+                      <BranchingPostgresVersionNotice />
+                    </DialogSection>
+                  ) : (
+                    <>
+                      <DialogSectionSeparator />
+                      <DialogSection padding="medium" className="space-y-4">
+                        <FormField_Shadcn_
+                          control={form.control}
+                          name="productionBranchName"
+                          render={({ field }) => (
+                            <FormItemLayout label="Production Branch Name">
+                              <FormControl_Shadcn_>
+                                <Input_Shadcn_
+                                  {...field}
+                                  placeholder="e.g. main, production"
+                                  autoComplete="off"
+                                />
+                              </FormControl_Shadcn_>
+                            </FormItemLayout>
+                          )}
+                        />
+                        {githubConnection ? (
+                          <>
+                            <FormField_Shadcn_
+                              control={form.control}
+                              name="branchName"
+                              render={({ field }) => (
+                                <FormItem_Shadcn_ className="relative">
+                                  <div className="flex items-center justify-between mb-2">
+                                    <Label>
+                                      Link GitHub Branch{' '}
+                                      {githubConnection && (
+                                        <span className="text-destructive">*</span>
+                                      )}
+                                    </Label>
+                                    <div className="flex items-center gap-2 text-sm">
+                                      <Github size={14} />
+                                      <Link
+                                        href={`https://github.com/${repoOwner}/${repoName}`}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        className="text-foreground hover:underline"
+                                      >
+                                        {repoOwner}/{repoName}
+                                      </Link>
+                                      <Link
+                                        href={`https://github.com/${repoOwner}/${repoName}`}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                      >
+                                        <ExternalLink size={14} strokeWidth={1.5} />
+                                      </Link>
+                                    </div>
+                                  </div>
+                                  <FormControl_Shadcn_>
+                                    <Input_Shadcn_
+                                      {...field}
+                                      placeholder="e.g. main"
+                                      autoComplete="off"
+                                    />
+                                  </FormControl_Shadcn_>
+                                  <div className="absolute top-9 right-3 flex items-center gap-2">
+                                    {isChecking && <Loader2 size={14} className="animate-spin" />}
+                                    {field.value && !isChecking && isGitBranchValid && (
+                                      <Check size={14} className="text-brand" strokeWidth={2} />
+                                    )}
+                                  </div>
+                                  <FormMessage_Shadcn_ className="mt-1" />
+                                </FormItem_Shadcn_>
+                              )}
+                            />
+                          </>
+                        ) : (
+                          <div className="flex items-center gap-2 justify-between">
+                            <div>
+                              <div className="flex items-center gap-2 mb-2">
+                                <Label>GitHub Repository</Label>
+                                {!gitlessBranching && (
+                                  <Badge variant="warning" size="small">
+                                    Required
+                                  </Badge>
+                                )}
+                              </div>
+                              <p className="text-sm text-foreground-light">
+                                {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.'}
+                              </p>
+                            </div>
+                            <Button type="default" icon={<Github />} onClick={openLinkerPanel}>
+                              Connect to GitHub
+                            </Button>
+                          </div>
+                        )}
+                      </DialogSection>
+                    </>
+                  )}
+                  <DialogSectionSeparator />

-            <Modal.Content className="flex items-center gap-3">
-              <Button
-                size="medium"
-                block
-                disabled={isCreating}
-                type="default"
-                onClick={() => snap.setShowEnableBranchingModal(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                block
-                size="medium"
-                form={formId}
-                disabled={!isSuccess || isCreating || !canSubmit}
-                loading={isCreating}
-                type="primary"
-                htmlType="submit"
-              >
-                I understand, enable branching
-              </Button>
-            </Modal.Content>
-          </form>
-        </Form_Shadcn_>
-      </Modal>
+                  <DialogSection padding="medium" className="flex flex-col gap-4">
+                    <h3 className="text-sm text-foreground">Please keep in mind the following:</h3>
+
+                    {githubConnection && (
+                      <div className="flex flex-row gap-4">
+                        <div>
+                          <figure className="w-10 h-10 rounded-md bg-info-200 border border-info-400 flex items-center justify-center">
+                            <FileText className="text-info" size={20} strokeWidth={2} />
+                          </figure>
+                        </div>
+                        <div className="flex flex-col gap-y-1">
+                          <p className="text-sm text-foreground">
+                            Migrations are applied from your GitHub repository
+                          </p>
+                          <p className="text-sm text-foreground-light">
+                            Migration files in your <code className="text-xs">./supabase</code>{' '}
+                            directory will run on both Preview Branches and Production when pushing
+                            and merging branches.
+                          </p>
+                        </div>
+                      </div>
+                    )}
+
+                    <div className="flex flex-row gap-4">
+                      <div>
+                        <figure className="w-10 h-10 rounded-md bg-info-200 border border-info-400 flex items-center justify-center">
+                          <DollarSign className="text-info" size={20} strokeWidth={2} />
+                        </figure>
+                      </div>
+                      <div className="flex flex-col gap-y-1">
+                        <p className="text-sm text-foreground">
+                          Preview branches are billed $0.32 per day
+                        </p>
+                        <p className="text-sm text-foreground-light">
+                          This cost will continue for as long as the branch has not been removed.
+                        </p>
+                      </div>
+                    </div>
+                    {!hasPitrEnabled && <BranchingPITRNotice />}
+                  </DialogSection>
+                  <DialogSectionSeparator />
+                </>
+              )}
+
+              <DialogFooter className="justify-end gap-2" padding="small">
+                <Button
+                  size="medium"
+                  disabled={isCreating}
+                  type="default"
+                  onClick={() => snap.setShowEnableBranchingModal(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  block
+                  size="medium"
+                  form={formId}
+                  disabled={!isSuccess || isCreating || !canSubmit || isChecking || isFreePlan}
+                  loading={isCreating}
+                  type="primary"
+                  htmlType="submit"
+                >
+                  I understand, enable branching
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form_Shadcn_>
+        </DialogContent>
+      </Dialog>

      <SidePanelGitHubRepoLinker projectRef={ref} />
    </>
  )
 }
-
-export default EnableBranchingModal
--- a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -23,7 +23,7 @@ import { useAppStateSnapshot } from 'state/app-state'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { cn, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
-import EnableBranchingModal from '../AppLayout/EnableBranchingButton/EnableBranchingModal'
+import { EnableBranchingModal } from '../AppLayout/EnableBranchingButton/EnableBranchingModal'
 import { useEditorType } from '../editors/EditorsLayout.hooks'
 import BuildingState from './BuildingState'
 import ConnectingState from './ConnectingState'
--- a/apps/studio/data/branches/branch-create-mutation.ts
+++ b/apps/studio/data/branches/branch-create-mutation.ts
@@ -2,7 +2,6 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
 import { toast } from 'sonner'

 import { handleError, post } from 'data/fetchers'
-import { projectKeys } from 'data/projects/keys'
 import type { ResponseError } from 'types'
 import { branchKeys } from './keys'

@@ -51,8 +50,6 @@ export const useBranchCreateMutation = ({
      async onSuccess(data, variables, context) {
        const { projectRef } = variables
        await queryClient.invalidateQueries(branchKeys.list(projectRef))
-        await queryClient.invalidateQueries(projectKeys.detail(projectRef))
-        await queryClient.invalidateQueries(projectKeys.list())
        await onSuccess?.(data, variables, context)
      },
      async onError(data, variables, context) {
--- a/apps/studio/pages/account/me.tsx
+++ b/apps/studio/pages/account/me.tsx
@@ -1,6 +1,7 @@
 import { AccountDeletion } from 'components/interfaces/Account/Preferences/AccountDeletion'
 import { AccountIdentities } from 'components/interfaces/Account/Preferences/AccountIdentities'
 import { AnalyticsSettings } from 'components/interfaces/Account/Preferences/AnalyticsSettings'
+import { AccountConnections } from 'components/interfaces/Account/Preferences/AccountConnections'
 import { ProfileInformation } from 'components/interfaces/Account/Preferences/ProfileInformation'
 import { ThemeSettings } from 'components/interfaces/Account/Preferences/ThemeSettings'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
@@ -60,6 +61,10 @@ const ProfileCard = () => {
        </>
      )}

+      <section>
+        <AccountConnections />
+      </section>
+
      <section>
        <ThemeSettings />
      </section>