From 620fcdab4e8f0568c40d045c9f02fe99f00b81b6 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Fri, 6 Jun 2025 12:35:10 +1000
Subject: [PATCH] refinements to gitless branching

---
 .../Preferences/AccountConnections.tsx        | 19 +++----
 .../BranchManagement/BranchPanels.tsx         | 56 ++++++++++---------
 .../BranchManagement/CreateBranchModal.tsx    |  4 +-
 .../BranchManagement/EditBranchModal.tsx      |  4 +-
 .../BranchManagement/EmptyStates.tsx          |  3 +-
 .../EnableBranchingModal.tsx                  | 14 ++++-
 6 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
index d0314ca218e..3e586cf972d 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
@@ -50,20 +50,17 @@ const AccountConnections = () => {
       {isSuccess && (
         <Panel.Content className="flex justify-between items-center">
           <div className="flex gap-x-4 items-center">
-            <div className="w-[30px] h-[30px] bg-alternative rounded flex items-center justify-center border">
-              <Github size={18} strokeWidth={1.5} />
-              <Image
-                className={cn('dark:invert')}
-                src={`${BASE_PATH}/img/icons/github-icon.svg`}
-                width={30}
-                height={30}
-                alt={`GitHub icon`}
-              />
-            </div>
+            <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
+                Sync GitHub repos to Supabase projects for automatic branch creation and merging
               </p>
             </div>
           </div>
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index 19067c729dc..258abac83f3 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -185,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',
             },
           }}
         >
@@ -294,32 +294,34 @@ 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.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>
+                {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>
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 7b1d46225b9..fd981309aa0 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -95,7 +95,7 @@ export const CreateBranchModal = ({ visible, onClose }: CreateBranchModalProps)
         .string()
         .min(1, 'Branch name cannot be empty')
         .refine(
-          (val) => /^[a-zA-Z0-9\-\_]+$/.test(val),
+          (val) => /^[a-zA-Z0-9\-_]+$/.test(val),
           'Branch name can only contain alphanumeric characters, hyphens, and underscores.'
         )
         .refine(
@@ -170,7 +170,7 @@ export const CreateBranchModal = ({ visible, onClose }: CreateBranchModalProps)
 
   return (
     <Dialog open={visible} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent size="large">
+      <DialogContent size="large" hideClose>
         <DialogHeader padding="small">
           <DialogTitle>Create a new preview branch</DialogTitle>
         </DialogHeader>
diff --git a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
index ce301431270..1f058c0ee99 100644
--- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx
@@ -91,7 +91,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
         .string()
         .min(1, 'Branch name cannot be empty')
         .refine(
-          (val) => /^[a-zA-Z0-9\\-\\_]+$/.test(val),
+          (val) => /^[a-zA-Z0-9\-_]+$/.test(val),
           'Branch name can only contain alphanumeric characters, hyphens, and underscores.'
         )
         .refine(
@@ -188,7 +188,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
 
   return (
     <Dialog open={visible} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent size="large">
+      <DialogContent size="large" hideClose>
         <DialogHeader padding="small">
           <DialogTitle>Edit branch "{branch?.name}"</DialogTitle> {/* Update title */}
         </DialogHeader>
diff --git a/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx b/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
index f9de9511af1..329ebaeeb70 100644
--- a/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
@@ -71,8 +71,7 @@ export const PullRequestsEmptyState = ({
         <div>
           <h3 className="mb-1">Connect to GitHub for seamless branching</h3>
           <p className="text-sm text-foreground-light mb-4">
-            Connect your GitHub repository to create preview branches that automatically track pull
-            requests.
+            Sync GitHub repos to Supabase projects for automatic branch creation and merging
           </p>
         </div>
         <Button
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
index c0dfadc8b6c..63603996fe1 100644
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
@@ -8,6 +8,7 @@ import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
+import { useRouter } from 'next/router'
 import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker'
 import AlertError from 'components/ui/AlertError'
 import { DocsButton } from 'components/ui/DocsButton'
@@ -48,6 +49,7 @@ import { BranchingPostgresVersionNotice } from './BranchingPostgresVersionNotice
 
 const EnableBranchingModal = () => {
   const { ref } = useParams()
+  const router = useRouter()
   const snap = useAppStateSnapshot()
   const selectedOrg = useSelectedOrganization()
   const project = useSelectedProject()
@@ -88,7 +90,7 @@ const EnableBranchingModal = () => {
     onSuccess: () => {
       toast.success(`Successfully enabled branching`)
       snap.setShowEnableBranchingModal(false)
-      // [TODO] Add navigation to branches page: router.push(`/project/${ref}/branches`)
+      router.push(`/project/${ref}/branches`)
     },
     onError: (error) => {
       toast.error(`Failed to enable branching: ${error.message}`)
@@ -98,7 +100,13 @@ const EnableBranchingModal = () => {
   const formId = 'enable-branching-form'
   const FormSchema = z
     .object({
-      productionBranchName: z.string().min(1, 'Production branch name cannot be empty'),
+      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) => {
@@ -178,7 +186,7 @@ const EnableBranchingModal = () => {
         open={snap.showEnableBranchingModal}
         onOpenChange={(open) => !open && snap.setShowEnableBranchingModal(false)}
       >
-        <DialogContent size="large">
+        <DialogContent size="large" hideClose>
           <Form_Shadcn_ {...form}>
             <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
               <DialogHeader padding="small">