mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Joshen Lim
9b0dc8d9b9
## Context Taking a slightly different approach to [this PR](https://github.com/supabase/supabase/pull/43370) Original problem was that if you opened some folders while in a bucket and then switched to a different bucket, the folder UI will persists (folders from Bucket A will render when landing on Bucket B) ## Changes involved - Shift `StorageExplorerStateContextProvider` into `[bucketId].tsx]` instead of `ProjectContext` - The valtio store here only applies for the storage explorer so having it so high in the project's context was unnecessary - This also just implies that the valtio store will automatically reset whenever the bucket changes - Simplify storage explorer valtio store by initializing the store with the bucket - We'll initialize the selected bucket with the store now (Same as previous PR) - Removes unnecessary `setSelectedBucket` method which required a separate `useEffect` in `StorageExplorer.tsx` ## To test - [ ] Verify that the original is resolved - [ ] General smoke test of the storage explorer - i've also re-added the e2e test that Gildas wrote up in his PR
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import { IS_PLATFORM, useParams } from 'common'
|
|
import { BUCKET_TYPES } from 'components/interfaces/Storage/Storage.constants'
|
|
import { useStorageV2Page } from 'components/interfaces/Storage/Storage.utils'
|
|
import { DocsButton } from 'components/ui/DocsButton'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { PropsWithChildren } from 'react'
|
|
import { NavMenu, NavMenuItem } from 'ui'
|
|
import {
|
|
PageHeader,
|
|
PageHeaderAside,
|
|
PageHeaderDescription,
|
|
PageHeaderMeta,
|
|
PageHeaderNavigationTabs,
|
|
PageHeaderSummary,
|
|
PageHeaderTitle,
|
|
} from 'ui-patterns/PageHeader'
|
|
|
|
export const StorageBucketsLayout = ({
|
|
title,
|
|
hideSubtitle = false,
|
|
children,
|
|
}: PropsWithChildren<{ title?: string; hideSubtitle?: boolean }>) => {
|
|
const { ref } = useParams()
|
|
const pathname = usePathname()
|
|
const page = useStorageV2Page()
|
|
const config = !!page && page !== 's3' ? BUCKET_TYPES[page] : undefined
|
|
|
|
const navigationItems =
|
|
page === 'files'
|
|
? [
|
|
{
|
|
label: 'Buckets',
|
|
href: `/project/${ref}/storage/files`,
|
|
},
|
|
...(IS_PLATFORM
|
|
? [
|
|
{
|
|
label: 'Settings',
|
|
href: `/project/${ref}/storage/files/settings`,
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
label: 'Policies',
|
|
href: `/project/${ref}/storage/files/policies`,
|
|
},
|
|
]
|
|
: []
|
|
|
|
return (
|
|
<>
|
|
<PageHeader>
|
|
<PageHeaderMeta>
|
|
<PageHeaderSummary>
|
|
<PageHeaderTitle>{title || (config?.displayName ?? 'Storage')}</PageHeaderTitle>
|
|
{!hideSubtitle && (
|
|
<PageHeaderDescription>
|
|
{config?.description || 'Manage your storage buckets and files.'}
|
|
</PageHeaderDescription>
|
|
)}
|
|
</PageHeaderSummary>
|
|
|
|
<PageHeaderAside>
|
|
{config?.docsUrl && <DocsButton key="docs" href={config.docsUrl} />}
|
|
</PageHeaderAside>
|
|
</PageHeaderMeta>
|
|
|
|
{navigationItems.length > 0 && (
|
|
<PageHeaderNavigationTabs>
|
|
<NavMenu>
|
|
{navigationItems.map((item) => (
|
|
<NavMenuItem key={item.label} active={pathname === item.href}>
|
|
<Link href={item.href}>{item.label}</Link>
|
|
</NavMenuItem>
|
|
))}
|
|
</NavMenu>
|
|
</PageHeaderNavigationTabs>
|
|
)}
|
|
</PageHeader>
|
|
{children}
|
|
</>
|
|
)
|
|
}
|