Minor nits

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 (
     <div className="text-sm text-foreground-light">
       <p className=" mb-4">
-        Experience our enhanced Storage interface with support for analytics and vector bucket
-        types.
+        Experience our enhanced{' '}
+        <InlineLink href={`/project/${ref ?? '_'}/storage/${isStorageV2 ? 'files' : 'buckets'}`}>
+          Storage interface
+        </InlineLink>{' '}
+        with support for analytics and vector bucket types.
       </p>
       <Image
         alt="new-storage-preview"
@@ -16,7 +26,7 @@ export const NewStorageUIPreview = () => {
         className="rounded border mb-4"
       />
       <div className="space-y-2 !mt-4">
-        <p>Enabling this preview will:</p>
+        <p className="text-foreground">Enabling this preview will:</p>
         <ul className="list-disc pl-6  space-y-1">
           <li>Move Storage buckets from the sidebar into the main content area</li>
           <li>Change the role of the sidebar to a bucket type selector</li>

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,

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: <Storage size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
-            link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/storage/buckets`),
+            link:
+              ref &&
+              (isProjectBuilding
+                ? buildingUrl
+                : `/project/${ref}/storage/${isStorageV2 ? 'files' : 'buckets'}`),
           },
         ]
       : []),

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 = [<DocsButton key="docs" href={config.docsUrl} />]
 
   return (
     <DefaultLayout>
@@ -18,6 +20,7 @@ export const BucketTypeLayout = ({ children }: PropsWithChildren) => {
         <PageLayout
           title={`${config?.displayName || 'Storage'} Buckets`}
           subtitle={config?.description || 'Manage your storage buckets and files.'}
+          secondaryActions={secondaryActions}
         >
           <ScaffoldContainer>{children}</ScaffoldContainer>
         </PageLayout>

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 = () => {
     <div>
       {/* [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.*/}
       {/* <p className="text-foreground-light mb-4">{config.description}</p> */}
-      <DocsButton href={config.docsUrl} />
     </div>
   )
 }