Merge pull request #16268 from supabase/fix/branch-management-ui-fixes

Fix/branch management UI fixes

studio/components/interfaces/BranchManagement/BranchManagement.tsx

@@ -1,4 +1,5 @@
-import { isError, partition } from 'lodash'
+import { useParams } from 'common'
+import { partition } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -14,7 +15,6 @@ import {
   Modal,
 } from 'ui'
 
-import { useParams } from 'common'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import AlertError from 'components/ui/AlertError'
@@ -36,16 +36,16 @@ const BranchManagement = () => {
   const { ui } = useStore()
   const router = useRouter()
   const { ref } = useParams()
-  const projectDetails = useSelectedProject()
+  const project = useSelectedProject()
   const selectedOrg = useSelectedOrganization()
 
   const hasAccessToBranching =
     selectedOrg?.opt_in_tags?.includes('PREVIEW_BRANCHES_OPT_IN') ?? false
+  const hasBranchEnabled = project?.is_branch_enabled
 
-  const isBranch = projectDetails?.parent_project_ref !== undefined
-  const hasBranchEnabled = projectDetails?.is_branch_enabled
+  const isBranch = project?.parent_project_ref !== undefined
   const projectRef =
-    projectDetails !== undefined ? (isBranch ? projectDetails.parent_project_ref : ref) : undefined
+    project !== undefined ? (isBranch ? project.parent_project_ref : ref) : undefined
 
   const snap = useAppUiStateSnapshot()
   const [showCreateBranch, setShowCreateBranch] = useState(false)
@@ -64,7 +64,7 @@ const BranchManagement = () => {
     ?.filter((integration) => integration.integration.name === 'GitHub')
     .flatMap((integration) => integration.connections)
   const githubConnection = githubConnections?.find(
-    (connection) => connection.supabase_project_ref === ref
+    (connection) => connection.supabase_project_ref === projectRef
   )
 
   const { data: branches } = useBranchesQuery({ projectRef })
@@ -162,7 +162,9 @@ const BranchManagement = () => {
               <div className="flex items-center space-x-2">
                 <Input placeholder="Search branch" size="small" icon={<IconSearch />} />
               </div>
-              <Button onClick={() => setShowCreateBranch(true)}>Create preview branch</Button>
+              <Button type="default" onClick={() => setShowCreateBranch(true)}>
+                Create preview branch
+              </Button>
             </div>
             <div className="">
               {isLoadingIntegrations && <GenericSkeletonLoader />}

studio/components/interfaces/BranchManagement/BranchPanels.tsx

@@ -163,7 +163,9 @@ const BranchPanel = ({
       <div className="flex items-center space-x-4">
         <Link passHref href={pullRequestURL}>
           <a target="_blank" rel="noreferrer">
-            <Button icon={<IconExternalLink />}>Create pull request</Button>
+            <Button type="default" icon={<IconExternalLink />}>
+              Create pull request
+            </Button>
           </a>
         </Link>
         <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>

studio/components/interfaces/BranchManagement/CreateBranchSidePanel.tsx

@@ -1,3 +1,5 @@
+import { useParams } from 'common'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import {
   AlertDescription_Shadcn_,
@@ -11,7 +13,6 @@ import {
   SidePanel,
 } from 'ui'
 
-import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
 import NoSearchResults from 'components/ui/NoSearchResults'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
@@ -20,7 +21,6 @@ import { useBranchesQuery } from 'data/branches/branches-query'
 import { useGithubBranchesQuery } from 'data/integrations/integrations-github-branches-query'
 import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
 import { useSelectedOrganization, useSelectedProject, useStore } from 'hooks'
-import Link from 'next/link'
 
 interface CreateBranchSidePanelProps {
   visible: boolean

studio/components/interfaces/BranchManagement/PreviewBranches.tsx

@@ -1,14 +1,14 @@
+import { useParams } from 'common'
+import { partition } from 'lodash'
 import { Button, IconExternalLink, IconGitBranch } from 'ui'
 
-import { Branch, useBranchesQuery } from 'data/branches/branches-query'
-import { BranchContainer, BranchHeader, BranchPanel } from './BranchPanels'
-import { useParams } from 'common'
-import { useGithubPullRequestsQuery } from 'data/integrations/integrations-github-pull-requests-query'
-import { partition } from 'lodash'
-import { useSelectedOrganization } from 'hooks'
-import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
-import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import AlertError from 'components/ui/AlertError'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { Branch, useBranchesQuery } from 'data/branches/branches-query'
+import { useGithubPullRequestsQuery } from 'data/integrations/integrations-github-pull-requests-query'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useSelectedOrganization, useSelectedProject } from 'hooks'
+import { BranchContainer, BranchHeader, BranchPanel } from './BranchPanels'
 
 interface PreviewBranchesProps {
   generateCreatePullRequestURL: (branch?: string) => string
@@ -22,8 +22,13 @@ const PreviewBranches = ({
   onSelectDeleteBranch,
 }: PreviewBranchesProps) => {
   const { ref } = useParams()
+  const project = useSelectedProject()
   const selectedOrg = useSelectedOrganization()
 
+  const isBranch = project?.parent_project_ref !== undefined
+  const projectRef =
+    project !== undefined ? (isBranch ? project.parent_project_ref : ref) : undefined
+
   const { data: integrations } = useOrgIntegrationsQuery({
     orgSlug: selectedOrg?.slug,
   })
@@ -33,7 +38,7 @@ const PreviewBranches = ({
       integration.organization.slug === selectedOrg?.slug
   )
   const githubConnection = githubIntegration?.connections.find(
-    (connection) => connection.supabase_project_ref === ref
+    (connection) => connection.supabase_project_ref === projectRef
   )
   const [repoOwner, repoName] = githubConnection?.metadata.name.split('/') || []
 
@@ -43,7 +48,7 @@ const PreviewBranches = ({
     isLoading: isLoadingBranches,
     isError: isErrorBranches,
     isSuccess: isSuccessBranches,
-  } = useBranchesQuery({ projectRef: ref })
+  } = useBranchesQuery({ projectRef })
   const [[mainBranch], previewBranches] = partition(branches, (branch) => branch.is_default)
 
   const { data: allPullRequests } = useGithubPullRequestsQuery({

studio/components/interfaces/BranchManagement/PullRequests.tsx

@@ -1,14 +1,14 @@
+import { useParams } from 'common'
 import Link from 'next/link'
 import { Button, IconExternalLink, IconGitBranch } from 'ui'
 
-import { useParams } from 'common'
+import AlertError from 'components/ui/AlertError'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { Branch, useBranchesQuery } from 'data/branches/branches-query'
 import { useGithubPullRequestsQuery } from 'data/integrations/integrations-github-pull-requests-query'
 import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
-import { useSelectedOrganization } from 'hooks'
+import { useSelectedOrganization, useSelectedProject } from 'hooks'
 import { BranchContainer, BranchHeader, PullRequestPanel } from './BranchPanels'
-import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import AlertError from 'components/ui/AlertError'
 
 interface PullRequestsProps {
   previewBranches: Branch[]
@@ -22,9 +22,14 @@ const PullRequests = ({
   onSelectDeleteBranch,
 }: PullRequestsProps) => {
   const { ref } = useParams()
+  const project = useSelectedProject()
   const selectedOrg = useSelectedOrganization()
   const pullRequestUrl = generateCreatePullRequestURL()
 
+  const isBranch = project?.parent_project_ref !== undefined
+  const projectRef =
+    project !== undefined ? (isBranch ? project.parent_project_ref : ref) : undefined
+
   const { data: integrations, isLoading: isLoadingIntegrations } = useOrgIntegrationsQuery({
     orgSlug: selectedOrg?.slug,
   })
@@ -35,11 +40,11 @@ const PullRequests = ({
   )
 
   const githubConnection = githubIntegration?.connections?.find(
-    (connection) => connection.supabase_project_ref === ref
+    (connection) => connection.supabase_project_ref === projectRef
   )
   const [repoOwner, repoName] = githubConnection?.metadata.name.split('/') || []
 
-  const { data: branches, isLoading: isLoadingBranches } = useBranchesQuery({ projectRef: ref })
+  const { data: branches, isLoading: isLoadingBranches } = useBranchesQuery({ projectRef })
   const mainBranch = branches?.find((branch) => branch.is_default)
 
   const {

studio/components/layouts/AppLayout/BranchDropdown.tsx

@@ -91,29 +91,24 @@ const BranchDropdown = () => {
 
       {isSuccess && branches.length > 0 && (
         <div className="flex items-center space-x-2 px-2">
-          <Link passHref href={`/project/${ref}`}>
-            <a ref={branchNameRef} className="flex items-center space-x-2 text-sm">
-              {selectedBranch?.name}
-            </a>
-          </Link>
-
-          <Link passHref href={`/project/${ref}/branches`}>
-            <a ref={branchNameRef} className="flex items-center space-x-2">
-              {selectedBranch?.is_default ? (
-                <Badge color="amber">Production</Badge>
-              ) : (
-                <Badge color="green">Preview Branch</Badge>
-              )}
-            </a>
-          </Link>
-
           <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
             <PopoverTrigger_Shadcn_ asChild>
               <Button
                 type="text"
-                className="px-1"
-                icon={<IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />}
-              />
+                className="pr-2"
+                iconRight={
+                  <IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />
+                }
+              >
+                <div className="flex items-center space-x-2">
+                  <p className="text-sm">{selectedBranch?.name}</p>
+                  {selectedBranch?.is_default ? (
+                    <Badge color="amber">Production</Badge>
+                  ) : (
+                    <Badge color="green">Preview Branch</Badge>
+                  )}
+                </div>
+              </Button>
             </PopoverTrigger_Shadcn_>
             <PopoverContent_Shadcn_
               className="p-0"

studio/components/layouts/AppLayout/OrganizationDropdown.tsx

@@ -51,6 +51,7 @@ const OrganizationDropdown = () => {
           <div className="flex items-center space-x-2 cursor-pointer">
             <Button
               type="text"
+              className="pr-2"
               iconRight={
                 <IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />
               }

studio/components/layouts/AppLayout/ProjectDropdown.tsx

@@ -135,6 +135,7 @@ const ProjectDropdown = () => {
         <PopoverTrigger_Shadcn_ asChild>
           <Button
             type="text"
+            className="pr-2"
             iconRight={<IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />}
           >
             <div className="flex items-center space-x-2">