fix: settings for storage to not show up on self hosted as they are not supported (#41936)

* fixed settings for storage to not show up

* updated tests and settings for storage bucket

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

@@ -5,7 +5,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
-import { useFlag, useParams } from 'common'
+import { IS_PLATFORM, useFlag, useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
 import { InlineLink } from 'components/ui/InlineLink'
 import NoPermission from 'components/ui/NoPermission'
@@ -36,6 +36,7 @@ import {
   Select_Shadcn_,
   Switch,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
@@ -243,7 +244,13 @@ export const StorageSettings = () => {
       <PageSection>
         <PageSectionContent className="flex flex-col gap-y-8">
           <Form_Shadcn_ {...form}>
-            {isLoading || isLoadingPermissions ? (
+            {!IS_PLATFORM ? (
+              <Admonition
+                type="default"
+                title="Storage settings are not available for self-hosted projects"
+                description="Storage settings are only available for Supabase Platform projects."
+              />
+            ) : isLoading || isLoadingPermissions ? (
               <GenericSkeletonLoader />
             ) : (
               <>

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

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'
 
-import { useParams } from 'common'
+import { IS_PLATFORM, useParams } from 'common'
 import { BUCKET_TYPES } from 'components/interfaces/Storage/Storage.constants'
 import { useStorageV2Page } from 'components/interfaces/Storage/Storage.utils'
 import { DocsButton } from 'components/ui/DocsButton'
@@ -34,10 +34,14 @@ export const StorageBucketsLayout = ({
             label: 'Buckets',
             href: `/project/${ref}/storage/files`,
           },
-          {
-            label: 'Settings',
-            href: `/project/${ref}/storage/files/settings`,
-          },
+          ...(IS_PLATFORM
+            ? [
+                {
+                  label: 'Settings',
+                  href: `/project/${ref}/storage/files/settings`,
+                },
+              ]
+            : []),
           {
             label: 'Policies',
             href: `/project/${ref}/storage/files/policies`,

e2e/studio/features/storage.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 import path from 'path'
+import { env } from '../env.config.js'
 import { test } from '../utils/test.js'
 import { waitForApiResponse } from '../utils/wait-for-response.js'
 import {
@@ -251,3 +252,44 @@ test.describe.serial('Storage', () => {
     await downloadFile(page, fileName)
   })
 })
+
+test.describe('Storage Settings - Self Hosted', () => {
+  test.skip(env.IS_PLATFORM, 'Storage settings are only disabled on self-hosted')
+
+  test('settings tab should not be visible in navigation', async ({ page, ref }) => {
+    // Navigate to storage files page
+    await page.goto(`/project/${ref}/storage/files`)
+
+    // Wait for the page to load
+    await expect(
+      page.getByRole('button', { name: 'New bucket' }),
+      'New bucket button should be visible'
+    ).toBeVisible()
+
+    // Verify Buckets and Policies tabs are visible but Settings is not
+    // Use href patterns to avoid matching other "Settings" links in the sidebar
+    await expect(
+      page.getByRole('link', { name: 'Buckets' }).filter({ hasText: /^Buckets$/ }),
+      'Buckets tab should be visible'
+    ).toBeVisible()
+    await expect(
+      page.getByRole('link', { name: 'Policies' }).filter({ hasText: /^Policies$/ }),
+      'Policies tab should be visible'
+    ).toBeVisible()
+    await expect(
+      page.locator(`a[href="/project/${ref}/storage/files/settings"]`),
+      'Settings tab should NOT be visible for self-hosted'
+    ).not.toBeVisible()
+  })
+
+  test('direct navigation to settings page should show error', async ({ page, ref }) => {
+    // Navigate directly to the settings page
+    await page.goto(`/project/${ref}/storage/files/settings`)
+
+    // Should show an error message indicating settings are not available
+    await expect(
+      page.getByText('Storage settings are not available for self-hosted projects'),
+      'Error message should be visible'
+    ).toBeVisible()
+  })
+})