mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
CharisandJoshen Lim
853672af18
* refactor(infinite list): use @tanstack/react-virtual for virtualization Swapping virtualization libraries from `react-window` to `@tanstack/react-virtual`. Motivation: we need a completely headless library for maximum flexibility. `react-window` injects extra DOM elements which makes it hard to customize styling and placement on elements that are very picky about their DOM structure, like tables. * refactor(table editor menu): use new infinite list * refactor(notifications): use new infinite list * cleanup(infinite list): remove old infinite list * refactor(storage menu): use new infinite list & remove react-window deps * fix(storage ui v2): virtualize files buckets table * refactor(virtualized table): make virtualized table a general ui component Make virtualized table a general UI component and refactor FilesBuckets to use VirtualizedTable. * Fix header bg color, add sort to files buckets, sort bucket list * Smol fix * nit * fix(storage buckets list): keep unvirtualized if user has <= 50 buckets * Break up FilesBuckets into smaller components * Nit --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
|
|
import { 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 { PageLayout } from '../PageLayout/PageLayout'
|
|
import { ScaffoldContainer } from '../Scaffold'
|
|
|
|
export const StorageBucketsLayout = ({
|
|
title,
|
|
hideSubtitle = false,
|
|
children,
|
|
}: PropsWithChildren<{ title?: string; hideSubtitle?: boolean }>) => {
|
|
const { ref } = useParams()
|
|
const page = useStorageV2Page()
|
|
const config = !!page && page !== 's3' ? BUCKET_TYPES[page] : undefined
|
|
|
|
const navigationItems =
|
|
page === 'files'
|
|
? [
|
|
{
|
|
label: 'Buckets',
|
|
href: `/project/${ref}/storage/files`,
|
|
},
|
|
{
|
|
label: 'Settings',
|
|
href: `/project/${ref}/storage/files/settings`,
|
|
},
|
|
{
|
|
label: 'Policies',
|
|
href: `/project/${ref}/storage/files/policies`,
|
|
},
|
|
]
|
|
: []
|
|
|
|
return (
|
|
<PageLayout
|
|
title={title || (config?.displayName ?? 'Storage')}
|
|
subtitle={
|
|
!hideSubtitle ? config?.description || 'Manage your storage buckets and files.' : null
|
|
}
|
|
navigationItems={navigationItems}
|
|
secondaryActions={config?.docsUrl ? [<DocsButton key="docs" href={config.docsUrl} />] : []}
|
|
>
|
|
<ScaffoldContainer className="min-h-0">{children}</ScaffoldContainer>
|
|
</PageLayout>
|
|
)
|
|
}
|