From 72deec839ecb95effe3588f7899a9eb186dce170 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 1 Oct 2025 10:04:10 +0800
Subject: [PATCH] Minor nits

---
 .../App/FeaturePreview/NewStorageUIPreview.tsx | 18 ++++++++++++++----
 apps/studio/components/interfaces/Sidebar.tsx  | 10 ++++++----
 .../NavigationBar/NavigationBar.utils.tsx      | 16 ++++++++++++++--
 .../layouts/StorageLayout/BucketLayout.tsx     |  3 +++
 .../[ref]/storage/[bucketType]/index.tsx       |  2 --
 5 files changed, 37 insertions(+), 12 deletions(-)

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 (
     <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>
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: <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'}`),
           },
         ]
       : []),
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 = [<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>
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 = () => {
     <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>
   )
 }