mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 01:40:13 -04:00
Ivan Vasilov
308cd791a2
This PR preps the monorepo for a migration to Tailwind v4: - Bump all Tailwind dependencies and libraries to the latest possible version, while still compatible with Tailwind 3. - Cleans up obsolete Tailwind 3 specific options and configs. - Cleans up unused CSS files and fixes the CSS imports. - Migrates all `important` uses in `@apply` lines to using the `!` prefix. - Move `typography.css` to the `config` package and import it from the apps. - Migrated all occurrences of `flex-grow`, `flex-shrink`, `overflow-clip` and `overflow-ellipsis` since they're deprecated and will be removed in Tailwind 4. - Make the default theme object typesafe in the `ui` package. - Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and `divider-opacity` to the new format where they're declared as part of the property color. - Bump and unify all imports of `postcss` dependency.
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { IS_PLATFORM, useParams } from 'common'
|
|
import Link from 'next/link'
|
|
import { Badge, Menu } from 'ui'
|
|
|
|
import { BUCKET_TYPES } from './Storage.constants'
|
|
import { useStorageV2Page } from './Storage.utils'
|
|
import {
|
|
useIsAnalyticsBucketsEnabled,
|
|
useIsVectorBucketsEnabled,
|
|
} from '@/data/config/project-storage-config-query'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
|
|
export const StorageMenuV2 = () => {
|
|
const { ref } = useParams()
|
|
const page = useStorageV2Page()
|
|
|
|
const { storageAnalytics, storageVectors } = useIsFeatureEnabled([
|
|
'storage:analytics',
|
|
'storage:vectors',
|
|
])
|
|
|
|
const isAnalyticsBucketsEnabled = useIsAnalyticsBucketsEnabled({ projectRef: ref })
|
|
const isVectorBucketsEnabled = useIsVectorBucketsEnabled({ projectRef: ref })
|
|
|
|
const bucketTypes = Object.entries(BUCKET_TYPES).filter(([key]) => {
|
|
if (key === 'analytics') return IS_PLATFORM && storageAnalytics
|
|
if (key === 'vectors') return IS_PLATFORM && storageVectors
|
|
return true
|
|
})
|
|
|
|
return (
|
|
<Menu type="pills" className="my-2 md:my-4 flex grow flex-col">
|
|
<div className="space-y-4">
|
|
<div className="md:mx-3">
|
|
<Menu.Group title={<span className="uppercase font-mono">Manage</span>} />
|
|
|
|
{bucketTypes.map(([type, config]) => {
|
|
const isSelected = page === type
|
|
const isAlphaEnabled =
|
|
(type === 'analytics' && isAnalyticsBucketsEnabled) ||
|
|
(type === 'vectors' && isVectorBucketsEnabled)
|
|
|
|
return (
|
|
<Link key={type} href={`/project/${ref}/storage/${type}`}>
|
|
<Menu.Item rounded active={isSelected}>
|
|
<div className="flex items-center justify-between">
|
|
<p className="truncate">{config.displayName}</p>
|
|
{isAlphaEnabled && <Badge variant="success">New</Badge>}
|
|
</div>
|
|
</Menu.Item>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{IS_PLATFORM && (
|
|
<>
|
|
<div className="h-px w-[calc(100%-1.5rem)] mx-auto md:w-full bg-border" />
|
|
<div className="md:mx-3">
|
|
<Menu.Group title={<span className="uppercase font-mono">Configuration</span>} />
|
|
|
|
<Link href={`/project/${ref}/storage/s3`}>
|
|
<Menu.Item rounded active={page === 's3'}>
|
|
<p className="truncate">S3</p>
|
|
</Menu.Item>
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Menu>
|
|
)
|
|
}
|