diff --git a/apps/studio/components/interfaces/App/FeaturePreview/NewStorageUIPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/NewStorageUIPreview.tsx
index 3e745197eee..6225b04d523 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/NewStorageUIPreview.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/NewStorageUIPreview.tsx
@@ -1,12 +1,22 @@
-import { BASE_PATH } from 'lib/constants'
import Image from 'next/image'
+import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
+import { BASE_PATH } from 'lib/constants'
+import { useIsNewStorageUIEnabled } from './FeaturePreviewContext'
+
export const NewStorageUIPreview = () => {
+ const { ref } = useParams()
+ const isStorageV2 = useIsNewStorageUIEnabled()
+
return (
- Experience our enhanced Storage interface with support for analytics and vector bucket
- types.
+ Experience our enhanced{' '}
+
+ Storage interface
+ {' '}
+ with support for analytics and vector bucket types.
{
className="rounded border mb-4"
/>
-
Enabling this preview will:
+
Enabling this preview will:
- Move Storage buckets from the sidebar into the main content area
- Change the role of the sidebar to a bucket type selector
diff --git a/apps/studio/components/interfaces/Sidebar.tsx b/apps/studio/components/interfaces/Sidebar.tsx
index a4a7b9b4ea5..63c0ee2600e 100644
--- a/apps/studio/components/interfaces/Sidebar.tsx
+++ b/apps/studio/components/interfaces/Sidebar.tsx
@@ -43,6 +43,7 @@ import {
} from 'ui'
import {
useIsAPIDocsSidePanelEnabled,
+ useIsNewStorageUIEnabled,
useUnifiedLogsPreview,
} from './App/FeaturePreview/FeaturePreviewContext'
@@ -222,10 +223,13 @@ const ProjectLinks = () => {
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
const snap = useAppStateSnapshot()
- const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
const { securityLints, errorLints } = useLints()
const showReports = useIsFeatureEnabled('reports:all')
+ const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
+ const isStorageV2 = useIsNewStorageUIEnabled()
+ const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
+
const activeRoute = router.pathname.split('/')[3]
const {
@@ -246,10 +250,8 @@ const ProjectLinks = () => {
edgeFunctions: edgeFunctionsEnabled,
storage: storageEnabled,
realtime: realtimeEnabled,
+ isStorageV2,
})
-
- const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
-
const otherRoutes = generateOtherRoutes(ref, project, {
unifiedLogs: isUnifiedLogsEnabled,
showReports,
diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
index c08feee6cd6..2f0b698771c 100644
--- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -41,10 +41,17 @@ export const generateToolRoutes = (ref?: string, project?: Project, features?: {
},
]
}
+
export const generateProductRoutes = (
ref?: string,
project?: Project,
- features?: { auth?: boolean; edgeFunctions?: boolean; storage?: boolean; realtime?: boolean }
+ features?: {
+ auth?: boolean
+ edgeFunctions?: boolean
+ storage?: boolean
+ realtime?: boolean
+ isStorageV2?: boolean
+ }
): Route[] => {
const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
@@ -54,6 +61,7 @@ export const generateProductRoutes = (
const edgeFunctionsEnabled = features?.edgeFunctions ?? true
const storageEnabled = features?.storage ?? true
const realtimeEnabled = features?.realtime ?? true
+ const isStorageV2 = features?.isStorageV2 ?? false
const databaseMenu = generateDatabaseMenu(project)
const authMenu = generateAuthMenu(ref as string)
@@ -89,7 +97,11 @@ export const generateProductRoutes = (
key: 'storage',
label: 'Storage',
icon: ,
- link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/storage/buckets`),
+ link:
+ ref &&
+ (isProjectBuilding
+ ? buildingUrl
+ : `/project/${ref}/storage/${isStorageV2 ? 'files' : 'buckets'}`),
},
]
: []),
diff --git a/apps/studio/components/layouts/StorageLayout/BucketLayout.tsx b/apps/studio/components/layouts/StorageLayout/BucketLayout.tsx
index 98c1249e3dc..53d2a252e6f 100644
--- a/apps/studio/components/layouts/StorageLayout/BucketLayout.tsx
+++ b/apps/studio/components/layouts/StorageLayout/BucketLayout.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'
import { useParams } from 'common'
import { BUCKET_TYPES, DEFAULT_BUCKET_TYPE } from 'components/interfaces/Storage/Storage.constants'
+import { DocsButton } from 'components/ui/DocsButton'
import DefaultLayout from '../DefaultLayout'
import { PageLayout } from '../PageLayout/PageLayout'
import { ScaffoldContainer } from '../Scaffold'
@@ -11,6 +12,7 @@ export const BucketTypeLayout = ({ children }: PropsWithChildren) => {
const { bucketType } = useParams()
const bucketTypeKey = bucketType || DEFAULT_BUCKET_TYPE
const config = BUCKET_TYPES[bucketTypeKey as keyof typeof BUCKET_TYPES]
+ const secondaryActions = []
return (
@@ -18,6 +20,7 @@ export const BucketTypeLayout = ({ children }: PropsWithChildren) => {
{children}
diff --git a/apps/studio/pages/project/[ref]/storage/[bucketType]/index.tsx b/apps/studio/pages/project/[ref]/storage/[bucketType]/index.tsx
index 752f976aaee..c762752bc47 100644
--- a/apps/studio/pages/project/[ref]/storage/[bucketType]/index.tsx
+++ b/apps/studio/pages/project/[ref]/storage/[bucketType]/index.tsx
@@ -5,7 +5,6 @@ import { useParams } from 'common'
import { useIsNewStorageUIEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { BUCKET_TYPES, DEFAULT_BUCKET_TYPE } from 'components/interfaces/Storage/Storage.constants'
import { BucketTypeLayout } from 'components/layouts/StorageLayout/BucketLayout'
-import { DocsButton } from 'components/ui/DocsButton'
import type { NextPageWithLayout } from 'types'
const BucketTypePage: NextPageWithLayout = () => {
@@ -30,7 +29,6 @@ const BucketTypePage: NextPageWithLayout = () => {
{/* [Danny] Purposefully duplicated directly below StorageLayout's config.description for now. Will be placed in a conditional empty state in next PR. TODO: consider reusing FormHeader for non-empty state.*/}
{/*
{config.description}
*/}
-
)
}