diff --git a/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/studio/components/interfaces/BranchManagement/BranchManagement.tsx index 0468cf0117d..4d711ef7c88 100644 --- a/studio/components/interfaces/BranchManagement/BranchManagement.tsx +++ b/studio/components/interfaces/BranchManagement/BranchManagement.tsx @@ -118,7 +118,6 @@ const BranchManagement = () => { } if (!hasBranchEnabled) { - // [Joshen] Some empty state here return (

@@ -137,16 +136,16 @@ const BranchManagement = () => { ) : (

- + - + {/* - + */}
)}
diff --git a/studio/components/layouts/AppLayout/AppHeader.tsx b/studio/components/layouts/AppLayout/AppHeader.tsx index d845b167b32..baf7ce0f6cd 100644 --- a/studio/components/layouts/AppLayout/AppHeader.tsx +++ b/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 = () => { {ref !== undefined && } - {ref !== undefined && isBranchingSupported && enableBranchManagement && ( + {ref !== undefined && enableBranchManagement && ( <>{isBranchingEnabled ? : } )} diff --git a/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx b/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx index 70e326e1302..cf7ea9534f3 100644 --- a/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx +++ b/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx @@ -39,16 +39,16 @@ const BranchingWaitlistPopover = ({ alt = false }: BranchingWaitlistPopoverProps enrolled in database branching.

- + - + {/* - + */}
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx index fb23066029b..f21ca568fd7 100644 --- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx +++ b/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 = <> - {selectedProject && ( + {ref && ( <> )} - {hasAccessToBranching && ( + {selectedProject && enableBranchManagement && ( <> )} + {/* Additional breadcrumbs are supplied */} diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx index 8d9ca83423e..ab1c78e7e74 100644 --- a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx +++ b/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 = () => { } > {selectedProject?.name} + {selectedProjectName} ) : ( ) }