Small fixes on logic to show branching buttons

studio/components/interfaces/BranchManagement/BranchManagement.tsx

@@ -118,7 +118,6 @@ const BranchManagement = () => {
   }
 
   if (!hasBranchEnabled) {
-    // [Joshen] Some empty state here
     return (
       <ProductEmptyState title="Database Branching">
         <p className="text-sm text-light">
@@ -137,16 +136,16 @@ const BranchManagement = () => {
           </div>
         ) : (
           <div className="flex items-center space-x-2 !mt-4">
-            <Link passHref href={'/'}>
+            <Link passHref href="https://forms.supabase.com/branching-request">
               <a rel="noreferrer" target="_blank">
                 <Button>Join waitlist</Button>
               </a>
             </Link>
-            <Link passHref href={'/'}>
+            {/* <Link passHref href={'/'}>
               <a rel="noreferrer" target="_blank">
                 <Button type="default">View the docs</Button>
               </a>
-            </Link>
+            </Link> */}
           </div>
         )}
       </ProductEmptyState>

studio/components/layouts/AppLayout/AppHeader.tsx

@@ -20,7 +20,6 @@ const AppHeader = () => {
   const organization = useSelectedOrganization()
   const enableBranchManagement = useFlag('branchManagement')
 
-  const isBranchingSupported = project?.cloud_provider === 'FLY'
   const isBranchingEnabled =
     project?.is_branch_enabled === true || project?.parent_project_ref !== undefined
 
@@ -38,7 +37,7 @@ const AppHeader = () => {
         </Link>
         <OrganizationDropdown />
         {ref !== undefined && <ProjectDropdown />}
-        {ref !== undefined && isBranchingSupported && enableBranchManagement && (
+        {ref !== undefined && enableBranchManagement && (
           <>{isBranchingEnabled ? <BranchDropdown /> : <EnableBranchingButton />}</>
         )}
       </div>

studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx

@@ -39,16 +39,16 @@ const BranchingWaitlistPopover = ({ alt = false }: BranchingWaitlistPopoverProps
           enrolled in database branching.
         </p>
         <div className="flex items-center space-x-2">
-          <Link passHref href={'/'}>
+          <Link passHref href="https://forms.supabase.com/branching-request">
             <a rel="noreferrer" target="_blank">
               <Button>Join waitlist</Button>
             </a>
           </Link>
-          <Link passHref href={'/'}>
+          {/* <Link passHref href={'/'}>
             <a rel="noreferrer" target="_blank">
               <Button type="default">View the docs</Button>
             </a>
-          </Link>
+          </Link> */}
         </div>
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>

studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx

@@ -2,8 +2,11 @@ import { useParams } from 'common'
 import Link from 'next/link'
 import { Badge } from 'ui'
 
+import BranchDropdown from 'components/layouts/AppLayout/BranchDropdown'
+import EnableBranchingButton from 'components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton'
 import { getResourcesExceededLimits } from 'components/ui/OveragesBanner/OveragesBanner.utils'
 import { useProjectReadOnlyQuery } from 'data/config/project-read-only-query'
+import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
 import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 import { useFlag, useSelectedOrganization, useSelectedProject } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
@@ -13,15 +16,13 @@ import HelpPopover from './HelpPopover'
 import NotificationsPopover from './NotificationsPopover'
 import OrgDropdown from './OrgDropdown'
 import ProjectDropdown from './ProjectDropdown'
-import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
-import BranchDropdown from 'components/layouts/AppLayout/BranchDropdown'
-import EnableBranchingButton from 'components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton'
 
 const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
+  const { ref } = useParams()
   const selectedProject = useSelectedProject()
   const selectedOrganization = useSelectedOrganization()
-  const hasAccessToBranching =
-    selectedOrganization?.opt_in_tags?.includes('PREVIEW_BRANCHES_OPT_IN') ?? false
+  const enableBranchManagement = useFlag('branchManagement')
+
   const isBranchingEnabled =
     selectedProject?.is_branch_enabled === true || selectedProject?.parent_project_ref !== undefined
 
@@ -65,7 +66,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
           <>
             <OrgDropdown />
 
-            {selectedProject && (
+            {ref && (
               <>
                 <span className="text-scale-800 dark:text-scale-700">
                   <svg
@@ -108,7 +109,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
               </>
             )}
 
-            {hasAccessToBranching && (
+            {selectedProject && enableBranchManagement && (
               <>
                 <span className="text-scale-800 dark:text-scale-700">
                   <svg
@@ -138,6 +139,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
             </a>
           </Link>
         )}
+
         {/* Additional breadcrumbs are supplied */}
         <BreadcrumbsView defaultValue={breadcrumbs} />
       </div>

studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx

@@ -1,3 +1,4 @@
+import { useParams } from 'common'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
@@ -73,10 +74,12 @@ const ProjectLink = ({
 }
 
 const ProjectDropdown = () => {
-  const selectedProject = useSelectedProject()
+  const { ref } = useParams()
   const selectedOrganization = useSelectedOrganization()
-  const { data: allProjects, isLoading: isLoadingProjects } = useProjectsQuery()
   const { data: allOrganizations } = useOrganizationsQuery()
+  const { data: allProjects, isLoading: isLoadingProjects } = useProjectsQuery()
+
+  const selectedProjectName = allProjects?.find((project) => project.ref === ref)?.name
   const selectedOrganizationSlug = selectedOrganization?.slug
 
   if (isLoadingProjects) {
@@ -106,12 +109,12 @@ const ProjectDropdown = () => {
       }
     >
       <Button type="text">
-        <span className="text-xs">{selectedProject?.name}</span>
+        <span className="text-xs">{selectedProjectName}</span>
       </Button>
     </Dropdown>
   ) : (
     <Button type="text">
-      <span className="text-xs">{selectedProject?.name}</span>
+      <span className="text-xs">{selectedProjectName}</span>
     </Button>
   )
 }