Minor clean ups

apps/studio/components/interfaces/Storage/Storage.constants.ts

@@ -61,11 +61,6 @@ export const CONTEXT_MENU_KEYS = {
 }
 
 // New bucket types configuration
-export interface BucketTypeConfig {
-  displayName: string
-  description: string
-  docsUrl: string
-}
 
 export const BUCKET_TYPES = {
   media: {
@@ -83,7 +78,7 @@ export const BUCKET_TYPES = {
     description: 'Purpose-built storage for vector data.',
     docsUrl: `${DOCS_URL}/guides/storage/vectors`,
   },
-} as const satisfies Record<string, BucketTypeConfig>
+}
 
 export const BUCKET_TYPE_KEYS = Object.keys(BUCKET_TYPES) as Array<keyof typeof BUCKET_TYPES>
 export const DEFAULT_BUCKET_TYPE: keyof typeof BUCKET_TYPES = 'media'

apps/studio/components/interfaces/Storage/StorageMenu.tsx

@@ -7,6 +7,7 @@ import { CreateBucketModal } from 'components/interfaces/Storage/CreateBucketMod
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useBucketsQuery } from 'data/storage/buckets-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { IS_PLATFORM } from 'lib/constants'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Menu } from 'ui'
 import {
@@ -16,10 +17,9 @@ import {
   InnerSideBarFilterSortDropdown,
   InnerSideBarFilterSortDropdownItem,
 } from 'ui-patterns/InnerSideMenu'
-import { IS_PLATFORM } from 'lib/constants'
 import { BucketRow } from './BucketRow'
 
-const StorageMenu = () => {
+export const StorageMenu = () => {
   const router = useRouter()
   const { ref, bucketId } = useParams()
   const { data: projectDetails } = useSelectedProjectQuery()
@@ -169,5 +169,3 @@ const StorageMenu = () => {
     </>
   )
 }
-
-export default StorageMenu

apps/studio/components/interfaces/Storage/StorageMenuV2.tsx

@@ -1,9 +1,9 @@
-import Link from 'next/link'
 import { useParams } from 'common'
+import Link from 'next/link'
 import { Menu } from 'ui'
 import { BUCKET_TYPES, BUCKET_TYPE_KEYS, DEFAULT_BUCKET_TYPE } from './Storage.constants'
 
-const StorageMenuV2 = () => {
+export const StorageMenuV2 = () => {
   const { ref, bucketType } = useParams()
   const selectedBucketType = bucketType || DEFAULT_BUCKET_TYPE
 
@@ -12,12 +12,12 @@ const StorageMenuV2 = () => {
       <div className="mx-3">
         <Menu.Group title={<span className="uppercase font-mono">Bucket Types</span>} />
 
-        {BUCKET_TYPE_KEYS.map((bucketTypeKey, idx: number) => {
+        {BUCKET_TYPE_KEYS.map((bucketTypeKey) => {
           const isSelected = selectedBucketType === bucketTypeKey
           const config = BUCKET_TYPES[bucketTypeKey]
 
           return (
-            <Link key={`${idx}_${bucketTypeKey}`} href={`/project/${ref}/storage/${bucketTypeKey}`}>
+            <Link key={bucketTypeKey} href={`/project/${ref}/storage/${bucketTypeKey}`}>
               <Menu.Item rounded active={isSelected}>
                 <p className="truncate">{config.displayName}</p>
               </Menu.Item>
@@ -28,5 +28,3 @@ const StorageMenuV2 = () => {
     </Menu>
   )
 }
-
-export default StorageMenuV2

apps/studio/components/layouts/StorageLayout/BucketLayout.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react'
+
+import { useParams } from 'common'
+import { BUCKET_TYPES, DEFAULT_BUCKET_TYPE } from 'components/interfaces/Storage/Storage.constants'
+import DefaultLayout from '../DefaultLayout'
+import { PageLayout } from '../PageLayout/PageLayout'
+import { ScaffoldContainer } from '../Scaffold'
+import StorageLayout from './StorageLayout'
+
+export const BucketTypeLayout = ({ children }: PropsWithChildren) => {
+  const { bucketType } = useParams()
+  const bucketTypeKey = bucketType || DEFAULT_BUCKET_TYPE
+  const config = BUCKET_TYPES[bucketTypeKey as keyof typeof BUCKET_TYPES]
+
+  return (
+    <DefaultLayout>
+      <StorageLayout title="Storage">
+        <PageLayout
+          title={`${config?.displayName || 'Storage'} Buckets`}
+          subtitle={config?.description || 'Manage your storage buckets and files.'}
+        >
+          <ScaffoldContainer>{children}</ScaffoldContainer>
+        </PageLayout>
+      </StorageLayout>
+    </DefaultLayout>
+  )
+}

apps/studio/components/layouts/StorageLayout/StorageLayout.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react'
 
 import { useIsNewStorageUIEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import StorageMenu from 'components/interfaces/Storage/StorageMenu'
-import StorageMenuV2 from 'components/interfaces/Storage/StorageMenuV2'
+import { StorageMenu } from 'components/interfaces/Storage/StorageMenu'
+import { StorageMenuV2 } from 'components/interfaces/Storage/StorageMenuV2'
 import { withAuth } from 'hooks/misc/withAuth'
 import ProjectLayout from '../ProjectLayout/ProjectLayout'
 

apps/studio/pages/project/[ref]/storage/[bucketType]/index.tsx

@@ -1,13 +1,11 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
 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 DefaultLayout from 'components/layouts/DefaultLayout'
-import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
-import { ScaffoldContainer } from 'components/layouts/Scaffold'
-import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
+import { BucketTypeLayout } from 'components/layouts/StorageLayout/BucketLayout'
 import { DocsButton } from 'components/ui/DocsButton'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 import type { NextPageWithLayout } from 'types'
 
 const BucketTypePage: NextPageWithLayout = () => {
@@ -38,27 +36,7 @@ const BucketTypePage: NextPageWithLayout = () => {
 }
 
 BucketTypePage.getLayout = (page) => {
-  // We need to get the bucketType from the router since it's not available in page.props
-  const BucketTypeLayout = () => {
-    const { bucketType } = useParams()
-    const bucketTypeKey = bucketType || DEFAULT_BUCKET_TYPE
-    const config = BUCKET_TYPES[bucketTypeKey as keyof typeof BUCKET_TYPES]
-
-    return (
-      <DefaultLayout>
-        <StorageLayout title="Storage">
-          <PageLayout
-            title={`${config?.displayName || 'Storage'} Buckets`}
-            subtitle={config?.description || 'Manage your storage buckets and files.'}
-          >
-            <ScaffoldContainer>{page}</ScaffoldContainer>
-          </PageLayout>
-        </StorageLayout>
-      </DefaultLayout>
-    )
-  }
-
-  return <BucketTypeLayout />
+  return <BucketTypeLayout>{page}</BucketTypeLayout>
 }
 
 export default BucketTypePage

apps/studio/pages/project/[ref]/storage/index.tsx

@@ -1,10 +1,11 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
 import { useParams } from 'common'
 import { useIsNewStorageUIEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { DEFAULT_BUCKET_TYPE } from 'components/interfaces/Storage/Storage.constants'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
 import type { NextPageWithLayout } from 'types'
 
 const Storage: NextPageWithLayout = () => {