From 02f5889e4dac4c78afe0979b486e34fe435de973 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 20 Nov 2024 19:20:13 +0800
Subject: [PATCH] moved connect dialog to main header

---
 .../AppLayout/OrganizationDropdown.tsx        | 14 ++-
 .../layouts/AppLayout/ProjectDropdown.tsx     | 96 +++++++++----------
 .../LayoutHeader/LayoutHeader.tsx             | 18 ++--
 apps/studio/pages/project/[ref]/index.tsx     |  1 -
 4 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
index e870b080122..039c9ff5d81 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
@@ -50,14 +50,12 @@ const OrganizationDropdown = ({ isNewNav = false }: OrganizationDropdownProps) =
     <div className="flex items-center">
       <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
         <PopoverTrigger_Shadcn_ asChild>
-          <div className="flex items-center space-x-2 cursor-pointer">
-            <Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
-              <div className="flex items-center space-x-2">
-                <p className={isNewNav ? 'text-sm' : 'text-xs'}>{orgName}</p>
-                {isSuccess && <Badge variant="default">{subscription?.plan.name}</Badge>}
-              </div>
-            </Button>
-          </div>
+          <Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
+            <div className="flex items-center space-x-2">
+              <p className={isNewNav ? 'text-sm' : 'text-xs'}>{orgName}</p>
+              {isSuccess && <Badge variant="default">{subscription?.plan.name}</Badge>}
+            </div>
+          </Button>
         </PopoverTrigger_Shadcn_>
         <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
           <Command_Shadcn_>
diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index 5e477b21b4a..e2d465bcaa6 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -117,58 +117,56 @@ const ProjectDropdown = ({ isNewNav = false }: ProjectDropdownProps) => {
   }
 
   return IS_PLATFORM ? (
-    <div className="flex items-center px-2">
-      <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
-        <PopoverTrigger_Shadcn_ asChild>
-          <Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
-            <div className="flex items-center space-x-2">
-              <p className={isNewNav ? 'text-sm' : 'text-xs'}>{selectedProject?.name}</p>
-            </div>
-          </Button>
-        </PopoverTrigger_Shadcn_>
-        <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Find project..." />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
-                <ScrollArea className={(projects || []).length > 7 ? 'h-[210px]' : ''}>
-                  {projects?.map((project) => (
-                    <ProjectLink key={project.ref} project={project} setOpen={setOpen} />
-                  ))}
-                </ScrollArea>
-              </CommandGroup_Shadcn_>
-              {projectCreationEnabled && (
-                <>
-                  <CommandSeparator_Shadcn_ />
-                  <CommandGroup_Shadcn_>
-                    <CommandItem_Shadcn_
-                      className="cursor-pointer w-full"
-                      onSelect={() => {
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button type="text" className="pr-2" iconRight={<ChevronsUpDown />}>
+          <div className="flex items-center space-x-2">
+            <p className={isNewNav ? 'text-sm' : 'text-xs'}>{selectedProject?.name}</p>
+          </div>
+        </Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
+        <Command_Shadcn_>
+          <CommandInput_Shadcn_ placeholder="Find project..." />
+          <CommandList_Shadcn_>
+            <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              <ScrollArea className={(projects || []).length > 7 ? 'h-[210px]' : ''}>
+                {projects?.map((project) => (
+                  <ProjectLink key={project.ref} project={project} setOpen={setOpen} />
+                ))}
+              </ScrollArea>
+            </CommandGroup_Shadcn_>
+            {projectCreationEnabled && (
+              <>
+                <CommandSeparator_Shadcn_ />
+                <CommandGroup_Shadcn_>
+                  <CommandItem_Shadcn_
+                    className="cursor-pointer w-full"
+                    onSelect={() => {
+                      setOpen(false)
+                      router.push(`/new/${selectedOrganization?.slug}`)
+                    }}
+                    onClick={() => setOpen(false)}
+                  >
+                    <Link
+                      href={`/new/${selectedOrganization?.slug}`}
+                      onClick={() => {
                         setOpen(false)
-                        router.push(`/new/${selectedOrganization?.slug}`)
                       }}
-                      onClick={() => setOpen(false)}
+                      className="w-full flex items-center gap-2"
                     >
-                      <Link
-                        href={`/new/${selectedOrganization?.slug}`}
-                        onClick={() => {
-                          setOpen(false)
-                        }}
-                        className="w-full flex items-center gap-2"
-                      >
-                        <Plus size={14} strokeWidth={1.5} />
-                        <p>New project</p>
-                      </Link>
-                    </CommandItem_Shadcn_>
-                  </CommandGroup_Shadcn_>
-                </>
-              )}
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
-        </PopoverContent_Shadcn_>
-      </Popover_Shadcn_>
-    </div>
+                      <Plus size={14} strokeWidth={1.5} />
+                      <p>New project</p>
+                    </Link>
+                  </CommandItem_Shadcn_>
+                </CommandGroup_Shadcn_>
+              </>
+            )}
+          </CommandList_Shadcn_>
+        </Command_Shadcn_>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
   ) : (
     <Button type="text">
       <span className={isNewNav ? 'text-sm' : 'text-xs'}>{selectedProject?.name}</span>
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 0935a2ed968..ab16812692f 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -17,6 +17,7 @@ import BreadcrumbsView from './BreadcrumbsView'
 import { FeedbackDropdown } from './FeedbackDropdown'
 import HelpPopover from './HelpPopover'
 import NotificationsPopoverV2 from './NotificationsPopoverV2/NotificationsPopover'
+import Connect from 'components/interfaces/Home/Connect/Connect'
 
 const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
   const { ref: projectRef } = useParams()
@@ -48,12 +49,10 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
         headerBorder ? 'border-b border-default' : ''
       }`}
     >
-      <div className="-ml-2 flex items-center text-sm">
-        {/* Organization is selected */}
+      <div className="-ml-2 flex items-center text-sm gap-3">
         {projectRef && (
-          <>
+          <div className="flex items-center">
             <OrganizationDropdown />
-
             {projectRef && (
               <>
                 <span className="text-border-stronger">
@@ -71,9 +70,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
                     <path d="M16 3.549L7.12 20.600"></path>
                   </svg>
                 </span>
-
                 <ProjectDropdown />
-
                 {exceedingLimits && (
                   <div className="ml-2">
                     <Link href={`/org/${selectedOrganization?.slug}/usage`}>
@@ -83,8 +80,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
                 )}
               </>
             )}
-
-            {selectedProject && (
+            {selectedProject && isBranchingEnabled && (
               <>
                 <span className="text-border-stronger">
                   <svg
@@ -101,11 +97,13 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
                     <path d="M16 3.549L7.12 20.600"></path>
                   </svg>
                 </span>
-                {isBranchingEnabled ? <BranchDropdown /> : <EnableBranchingButton />}
+                {isBranchingEnabled && <BranchDropdown />}
               </>
             )}
-          </>
+          </div>
         )}
+        <Connect />
+        {!isBranchingEnabled && <EnableBranchingButton />}
 
         {/* Additional breadcrumbs are supplied */}
         <BreadcrumbsView defaultValue={breadcrumbs} />
diff --git a/apps/studio/pages/project/[ref]/index.tsx b/apps/studio/pages/project/[ref]/index.tsx
index 34669382870..f946d348294 100644
--- a/apps/studio/pages/project/[ref]/index.tsx
+++ b/apps/studio/pages/project/[ref]/index.tsx
@@ -56,7 +56,6 @@ const Home: NextPageWithLayout = () => {
         <div className="flex items-center gap-x-3">
           {project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && <SecurityStatus />}
           {IS_PLATFORM && project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && <ServiceStatus />}
-          {IS_PLATFORM && project?.status === PROJECT_STATUS.ACTIVE_HEALTHY && <Connect />}
         </div>
       </div>