mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
fix project provider (#33423)
* fix project provider * Update DefaultLayout.tsx * Update DefaultLayout.tsx
This commit is contained in:
Jonathan Summers-Muir authored and GitHub committed
1 parent
f697c86c86
commit
c32baab60a
2 files changed
+131
-128
No files matched your search
@@ -4,6 +4,8 @@ import { PropsWithChildren, ReactNode } from 'react'
|
||||
import { LayoutHeader } from './ProjectLayout/LayoutHeader'
|
||||
import NavigationBar from './ProjectLayout/NavigationBar/NavigationBar'
|
||||
import MobileNavigationBar from './ProjectLayout/NavigationBar/MobileNavigationBar'
|
||||
import { ProjectContextProvider } from './ProjectLayout/ProjectContext'
|
||||
import { useParams } from 'common'
|
||||
|
||||
export interface DefaultLayoutProps {
|
||||
title?: string
|
||||
@@ -16,25 +18,28 @@ export interface DefaultLayoutProps {
|
||||
}
|
||||
|
||||
const DefaultLayout = ({ children, showProductMenu }: PropsWithChildren<DefaultLayoutProps>) => {
|
||||
const { ref } = useParams()
|
||||
return (
|
||||
<>
|
||||
<AppBannerContextProvider>
|
||||
<div className="flex flex-col h-screen w-screen">
|
||||
{/* Top Banner */}
|
||||
<AppBannerWrapper />
|
||||
<div className="flex-shrink-0">
|
||||
<MobileNavigationBar />
|
||||
<LayoutHeader showProductMenu={showProductMenu} />
|
||||
<ProjectContextProvider projectRef={ref}>
|
||||
<AppBannerContextProvider>
|
||||
<div className="flex flex-col h-screen w-screen">
|
||||
{/* Top Banner */}
|
||||
<AppBannerWrapper />
|
||||
<div className="flex-shrink-0">
|
||||
<MobileNavigationBar />
|
||||
<LayoutHeader showProductMenu={showProductMenu} />
|
||||
</div>
|
||||
{/* Main Content Area */}
|
||||
<div className="flex flex-1 w-full overflow-y-hidden">
|
||||
{/* Sidebar */}
|
||||
<NavigationBar />
|
||||
{/* Main Content */}
|
||||
<div className="flex-grow h-full overflow-y-auto">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Content Area */}
|
||||
<div className="flex flex-1 w-full overflow-y-hidden">
|
||||
{/* Sidebar */}
|
||||
<NavigationBar />
|
||||
{/* Main Content */}
|
||||
<div className="flex-grow h-full overflow-y-auto">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppBannerContextProvider>
|
||||
</AppBannerContextProvider>
|
||||
</ProjectContextProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -128,121 +128,119 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProjectContextProvider projectRef={projectRef}>
|
||||
<Head>
|
||||
<title>
|
||||
{title
|
||||
? `${title} | Supabase`
|
||||
: selectedTable
|
||||
? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
|
||||
: projectName
|
||||
? `${projectName} | ${organizationName} | Supabase`
|
||||
: organizationName
|
||||
? `${organizationName} | Supabase`
|
||||
: 'Supabase'}
|
||||
</title>
|
||||
<meta name="description" content="Supabase Studio" />
|
||||
</Head>
|
||||
<div className="flex flex-row h-full w-full">
|
||||
<ResizablePanelGroup className="" direction="horizontal" autoSaveId="project-layout">
|
||||
{showProductMenu && productMenu && (
|
||||
<ResizablePanel
|
||||
order={1}
|
||||
maxSize={33}
|
||||
defaultSize={1}
|
||||
id="panel-left"
|
||||
className={cn(
|
||||
'hidden md:block',
|
||||
'transition-all duration-[120ms]',
|
||||
sideBarIsOpen
|
||||
? resizableSidebar
|
||||
? 'min-w-64 max-w-[32rem]'
|
||||
: 'min-w-64 max-w-64'
|
||||
: 'w-0 flex-shrink-0 max-w-0'
|
||||
)}
|
||||
>
|
||||
{sideBarIsOpen && (
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
initial={{ width: 0, opacity: 0, height: '100%' }}
|
||||
animate={{ width: 'auto', opacity: 1, height: '100%' }}
|
||||
exit={{ width: 0, opacity: 0, height: '100%' }}
|
||||
className="h-full"
|
||||
transition={{ duration: 0.12 }}
|
||||
>
|
||||
<MenuBarWrapper
|
||||
isLoading={isLoading}
|
||||
isBlocking={isBlocking}
|
||||
productMenu={productMenu}
|
||||
>
|
||||
<ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
|
||||
</MenuBarWrapper>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
)}
|
||||
{showProductMenu && productMenu && sideBarIsOpen && (
|
||||
<ResizableHandle
|
||||
withHandle
|
||||
disabled={resizableSidebar ? false : true}
|
||||
className="hidden md:block"
|
||||
/>
|
||||
)}
|
||||
<ResizablePanel order={2} id="panel-right" className="h-full flex flex-col w-full">
|
||||
<ResizablePanelGroup
|
||||
className="h-full w-full overflow-x-hidden flex-1 flex flex-row gap-0"
|
||||
direction="horizontal"
|
||||
autoSaveId="project-layout-content"
|
||||
>
|
||||
<ResizablePanel
|
||||
id="panel-content"
|
||||
className={cn('w-full xl:min-w-[600px] bg-dash-sidebar')}
|
||||
>
|
||||
<main
|
||||
className="h-full flex flex-col flex-1 w-full overflow-y-auto overflow-x-hidden"
|
||||
ref={ref}
|
||||
<Head>
|
||||
<title>
|
||||
{title
|
||||
? `${title} | Supabase`
|
||||
: selectedTable
|
||||
? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
|
||||
: projectName
|
||||
? `${projectName} | ${organizationName} | Supabase`
|
||||
: organizationName
|
||||
? `${organizationName} | Supabase`
|
||||
: 'Supabase'}
|
||||
</title>
|
||||
<meta name="description" content="Supabase Studio" />
|
||||
</Head>
|
||||
<div className="flex flex-row h-full w-full">
|
||||
<ResizablePanelGroup className="" direction="horizontal" autoSaveId="project-layout">
|
||||
{showProductMenu && productMenu && (
|
||||
<ResizablePanel
|
||||
order={1}
|
||||
maxSize={33}
|
||||
defaultSize={1}
|
||||
id="panel-left"
|
||||
className={cn(
|
||||
'hidden md:block',
|
||||
'transition-all duration-[120ms]',
|
||||
sideBarIsOpen
|
||||
? resizableSidebar
|
||||
? 'min-w-64 max-w-[32rem]'
|
||||
: 'min-w-64 max-w-64'
|
||||
: 'w-0 flex-shrink-0 max-w-0'
|
||||
)}
|
||||
>
|
||||
{sideBarIsOpen && (
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
initial={{ width: 0, opacity: 0, height: '100%' }}
|
||||
animate={{ width: 'auto', opacity: 1, height: '100%' }}
|
||||
exit={{ width: 0, opacity: 0, height: '100%' }}
|
||||
className="h-full"
|
||||
transition={{ duration: 0.12 }}
|
||||
>
|
||||
{showPausedState ? (
|
||||
<div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
|
||||
<div className="w-full">
|
||||
<ProjectPausedState product={product} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ContentWrapper isLoading={isLoading} isBlocking={isBlocking}>
|
||||
<ResourceExhaustionWarningBanner />
|
||||
{children}
|
||||
</ContentWrapper>
|
||||
)}
|
||||
</main>
|
||||
</ResizablePanel>
|
||||
{isClient && aiAssistantPanel.open && (
|
||||
<>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel
|
||||
id="panel-assistant"
|
||||
className={cn(
|
||||
'border-l xl:border-l-0 bg fixed z-40 md:absolute md:z-0 right-0 top-0 md:top-[48px] bottom-0 xl:relative xl:top-0',
|
||||
'w-screen h-[100dvh] md:h-auto md:w-auto md:min-w-[400px] max-w-[500px]',
|
||||
'2xl:min-w-[500px] 2xl:max-w-[600px]'
|
||||
)}
|
||||
<MenuBarWrapper
|
||||
isLoading={isLoading}
|
||||
isBlocking={isBlocking}
|
||||
productMenu={productMenu}
|
||||
>
|
||||
<AIAssistantPanel />
|
||||
</ResizablePanel>
|
||||
</>
|
||||
)}
|
||||
</ResizablePanelGroup>
|
||||
<ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
|
||||
</MenuBarWrapper>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<EnableBranchingModal />
|
||||
<AISettingsModal />
|
||||
<ProjectAPIDocs />
|
||||
<MobileSheetNav open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
||||
{productMenu}
|
||||
</MobileSheetNav>
|
||||
</ProjectContextProvider>
|
||||
)}
|
||||
{showProductMenu && productMenu && sideBarIsOpen && (
|
||||
<ResizableHandle
|
||||
withHandle
|
||||
disabled={resizableSidebar ? false : true}
|
||||
className="hidden md:block"
|
||||
/>
|
||||
)}
|
||||
<ResizablePanel order={2} id="panel-right" className="h-full flex flex-col w-full">
|
||||
<ResizablePanelGroup
|
||||
className="h-full w-full overflow-x-hidden flex-1 flex flex-row gap-0"
|
||||
direction="horizontal"
|
||||
autoSaveId="project-layout-content"
|
||||
>
|
||||
<ResizablePanel
|
||||
id="panel-content"
|
||||
className={cn('w-full xl:min-w-[600px] bg-dash-sidebar')}
|
||||
>
|
||||
<main
|
||||
className="h-full flex flex-col flex-1 w-full overflow-y-auto overflow-x-hidden"
|
||||
ref={ref}
|
||||
>
|
||||
{showPausedState ? (
|
||||
<div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
|
||||
<div className="w-full">
|
||||
<ProjectPausedState product={product} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ContentWrapper isLoading={isLoading} isBlocking={isBlocking}>
|
||||
<ResourceExhaustionWarningBanner />
|
||||
{children}
|
||||
</ContentWrapper>
|
||||
)}
|
||||
</main>
|
||||
</ResizablePanel>
|
||||
{isClient && aiAssistantPanel.open && (
|
||||
<>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel
|
||||
id="panel-assistant"
|
||||
className={cn(
|
||||
'border-l xl:border-l-0 bg fixed z-40 md:absolute md:z-0 right-0 top-0 md:top-[48px] bottom-0 xl:relative xl:top-0',
|
||||
'w-screen h-[100dvh] md:h-auto md:w-auto md:min-w-[400px] max-w-[500px]',
|
||||
'2xl:min-w-[500px] 2xl:max-w-[600px]'
|
||||
)}
|
||||
>
|
||||
<AIAssistantPanel />
|
||||
</ResizablePanel>
|
||||
</>
|
||||
)}
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<EnableBranchingModal />
|
||||
<AISettingsModal />
|
||||
<ProjectAPIDocs />
|
||||
<MobileSheetNav open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
||||
{productMenu}
|
||||
</MobileSheetNav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user