Merge pull request #14252 from supabase/fix/storage-bucket-settings-self-hosted

fix: storage bucket settings in self-hosted

package-lock.json

@@ -9621,9 +9621,9 @@
       }
     },
     "node_modules/@supabase/realtime-js": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.1.tgz",
-      "integrity": "sha512-WC0yPArBF/wPXwxKWTrRSMWWnFQCbhhUsX0u42x4OqUdDJtow6rzvDIZHWFZLh85UUBYIQ2++AabSNgzd3ubQg==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
+      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
       "dependencies": {
         "@types/phoenix": "^1.5.4",
         "@types/websocket": "^1.0.3",
@@ -9636,23 +9636,23 @@
       "integrity": "sha512-qP1N39xRhi00L6g0FYJCWKAbPQbiVsMP/E3y5zdivOiL2VUFkbLKXYfvzzwhGj3eKdr7O/N/2VtZXWXm+DCx0g=="
     },
     "node_modules/@supabase/storage-js": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.3.1.tgz",
-      "integrity": "sha512-BaPIvyvjuZW1V0CnfGKUZyzpBUXnsh0XD8eqTOYd+MdiGPmIPI0vtwnT4fAoK8mipp1vpcN62EVQaqeUnWXPtQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
+      "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.14.0.tgz",
-      "integrity": "sha512-pdcYDaxTUqv5A8NqDnLn731rTP0Wm469H+0ag6Jb8YpWR95rmusfpGY7vrykWXvdnvCMxoG6eEwSF9vQtxVrow==",
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.21.0.tgz",
+      "integrity": "sha512-FW3ZzBoc4orSgfX0dXrmJoXAcI/hiekmqXTkN64vjtUF2Urp3UjyAf71UTtV9Jl6ejHoe3K++e0+Rg9zKUJh5w==",
       "dependencies": {
         "@supabase/functions-js": "^2.1.0",
-        "@supabase/gotrue-js": "^2.18.1",
+        "@supabase/gotrue-js": "^2.23.0",
         "@supabase/postgrest-js": "^1.1.1",
-        "@supabase/realtime-js": "^2.7.1",
-        "@supabase/storage-js": "^2.3.1",
+        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/storage-js": "^2.5.1",
         "cross-fetch": "^3.1.5"
       }
     },
@@ -10264,9 +10264,9 @@
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
     "node_modules/@types/phoenix": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.5.tgz",
-      "integrity": "sha512-1eWWT19k0L4ZiTvdXjAvJ9KvW0B8SdiVftQmFPJGTEx78Q4PCSIQDpz+EfkFVR1N4U9gREjlW4JXL8YCIlY0bw=="
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
+      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA=="
     },
     "node_modules/@types/prettier": {
       "version": "2.7.2",
@@ -39181,7 +39181,7 @@
         "@supabase/auth-helpers-react": "^0.3.1",
         "@supabase/react-data-grid": "^7.1.0-beta.7",
         "@supabase/shared-types": "^0.1.40",
-        "@supabase/supabase-js": "^2.13.0",
+        "@supabase/supabase-js": "^2.21.0",
         "@tanstack/react-query": "^4.22.0",
         "@tanstack/react-query-devtools": "^4.22.0",
         "@zip.js/zip.js": "^2.6.61",
@@ -46322,9 +46322,9 @@
       }
     },
     "@supabase/realtime-js": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.1.tgz",
-      "integrity": "sha512-WC0yPArBF/wPXwxKWTrRSMWWnFQCbhhUsX0u42x4OqUdDJtow6rzvDIZHWFZLh85UUBYIQ2++AabSNgzd3ubQg==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
+      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
       "requires": {
         "@types/phoenix": "^1.5.4",
         "@types/websocket": "^1.0.3",
@@ -46337,23 +46337,23 @@
       "integrity": "sha512-qP1N39xRhi00L6g0FYJCWKAbPQbiVsMP/E3y5zdivOiL2VUFkbLKXYfvzzwhGj3eKdr7O/N/2VtZXWXm+DCx0g=="
     },
     "@supabase/storage-js": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.3.1.tgz",
-      "integrity": "sha512-BaPIvyvjuZW1V0CnfGKUZyzpBUXnsh0XD8eqTOYd+MdiGPmIPI0vtwnT4fAoK8mipp1vpcN62EVQaqeUnWXPtQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
+      "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
       "requires": {
         "cross-fetch": "^3.1.5"
       }
     },
     "@supabase/supabase-js": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.14.0.tgz",
-      "integrity": "sha512-pdcYDaxTUqv5A8NqDnLn731rTP0Wm469H+0ag6Jb8YpWR95rmusfpGY7vrykWXvdnvCMxoG6eEwSF9vQtxVrow==",
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.21.0.tgz",
+      "integrity": "sha512-FW3ZzBoc4orSgfX0dXrmJoXAcI/hiekmqXTkN64vjtUF2Urp3UjyAf71UTtV9Jl6ejHoe3K++e0+Rg9zKUJh5w==",
       "requires": {
         "@supabase/functions-js": "^2.1.0",
-        "@supabase/gotrue-js": "^2.18.1",
+        "@supabase/gotrue-js": "^2.23.0",
         "@supabase/postgrest-js": "^1.1.1",
-        "@supabase/realtime-js": "^2.7.1",
-        "@supabase/storage-js": "^2.3.1",
+        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/storage-js": "^2.5.1",
         "cross-fetch": "^3.1.5"
       }
     },
@@ -46910,9 +46910,9 @@
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
     "@types/phoenix": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.5.tgz",
-      "integrity": "sha512-1eWWT19k0L4ZiTvdXjAvJ9KvW0B8SdiVftQmFPJGTEx78Q4PCSIQDpz+EfkFVR1N4U9gREjlW4JXL8YCIlY0bw=="
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
+      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA=="
     },
     "@types/prettier": {
       "version": "2.7.2",
@@ -66384,7 +66384,7 @@
         "@supabase/postgres-meta": "^0.64.4",
         "@supabase/react-data-grid": "^7.1.0-beta.7",
         "@supabase/shared-types": "^0.1.40",
-        "@supabase/supabase-js": "^2.13.0",
+        "@supabase/supabase-js": "^2.21.0",
         "@tailwindcss/typography": "^0.5.2",
         "@tanstack/react-query": "^4.22.0",
         "@tanstack/react-query-devtools": "^4.22.0",

studio/components/interfaces/Storage/CreateBucketModal.tsx

@@ -21,6 +21,7 @@ import {
 } from 'components/to-be-cleaned/Storage/StorageSettings/StorageSettings.utils'
 import { useStore } from 'hooks'
 import { useParams } from 'common'
+import { IS_PLATFORM } from 'lib/constants'
 import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
 import { useRouter } from 'next/router'
 
@@ -36,7 +37,7 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => {
   const storageExplorerStore = useStorageStore()
   const { createBucket } = storageExplorerStore
 
-  const { data } = useProjectStorageConfigQuery({ projectRef: ref })
+  const { data } = useProjectStorageConfigQuery({ projectRef: ref }, { enabled: IS_PLATFORM })
   const { value, unit } = convertFromBytes(data?.fileSizeLimit ?? 0)
   const formattedGlobalUploadLimit = `${value} ${unit}`
 
@@ -203,17 +204,19 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => {
                               ))}
                             </Listbox>
                           </div>
-                          <div className="col-span-12">
-                            <p className="text-scale-1000 text-sm">
-                              Note: The{' '}
-                              <Link href={`/project/${ref}/settings/storage`}>
-                                <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
-                                  global upload limit
-                                </a>
-                              </Link>{' '}
-                              takes precedence over this value ({formattedGlobalUploadLimit})
-                            </p>
-                          </div>
+                          {IS_PLATFORM && (
+                            <div className="col-span-12">
+                              <p className="text-scale-1000 text-sm">
+                                Note: The{' '}
+                                <Link href={`/project/${ref}/settings/storage`}>
+                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                    global upload limit
+                                  </a>
+                                </Link>{' '}
+                                takes precedence over this value ({formattedGlobalUploadLimit})
+                              </p>
+                            </div>
+                          )}
                         </div>
                       )}
                     </div>

studio/components/interfaces/Storage/EditBucketModal.tsx

@@ -22,6 +22,7 @@ import {
 import { useStore } from 'hooks'
 import { useParams } from 'common'
 import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
+import { IS_PLATFORM } from 'lib/constants'
 
 export interface EditBucketModalProps {
   visible: boolean
@@ -35,7 +36,7 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
   const storageExplorerStore = useStorageStore()
   const { editBucket } = storageExplorerStore
 
-  const { data } = useProjectStorageConfigQuery({ projectRef: ref })
+  const { data } = useProjectStorageConfigQuery({ projectRef: ref }, { enabled: IS_PLATFORM })
   const { value, unit } = convertFromBytes(data?.fileSizeLimit ?? 0)
   const formattedGlobalUploadLimit = `${value} ${unit}`
 
@@ -226,17 +227,19 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
                               ))}
                             </Listbox>
                           </div>
-                          <div className="col-span-12">
-                            <p className="text-scale-1000 text-sm">
-                              Note: The{' '}
-                              <Link href={`/project/${ref}/settings/storage`}>
-                                <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
-                                  global upload limit
-                                </a>
-                              </Link>{' '}
-                              takes precedence over this value ({formattedGlobalUploadLimit})
-                            </p>
-                          </div>
+                          {IS_PLATFORM && (
+                            <div className="col-span-12">
+                              <p className="text-scale-1000 text-sm">
+                                Note: The{' '}
+                                <Link href={`/project/${ref}/settings/storage`}>
+                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                    global upload limit
+                                  </a>
+                                </Link>{' '}
+                                takes precedence over this value ({formattedGlobalUploadLimit})
+                              </p>
+                            </div>
+                          )}
                         </div>
                       )}
                     </div>

studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
 import { Button, Form, IconClock, Input, Listbox } from 'ui'
 
 import { checkPermissions, useStore } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
 import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
 import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation'
 import UpgradeToPro from 'components/ui/UpgradeToPro'
@@ -15,7 +15,7 @@ export type StorageSettingsProps = {
 }
 
 const StorageSettings = ({ projectRef }: StorageSettingsProps) => {
-  const { data, error } = useProjectStorageConfigQuery({ projectRef })
+  const { data, error } = useProjectStorageConfigQuery({ projectRef }, { enabled: IS_PLATFORM })
 
   if (error || data?.error) {
     return (

studio/package.json

@@ -33,7 +33,7 @@
     "@supabase/auth-helpers-react": "^0.3.1",
     "@supabase/react-data-grid": "^7.1.0-beta.7",
     "@supabase/shared-types": "^0.1.40",
-    "@supabase/supabase-js": "^2.13.0",
+    "@supabase/supabase-js": "^2.21.0",
     "@tanstack/react-query": "^4.22.0",
     "@tanstack/react-query-devtools": "^4.22.0",
     "@zip.js/zip.js": "^2.6.61",

studio/pages/api/storage/[ref]/buckets/[id]/index.ts

@@ -22,10 +22,16 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
 const handlePatch = async (req: NextApiRequest, res: NextApiResponse) => {
   const { id } = req.query
-  const { public: isPublicBucket } = req.body
+  const {
+    public: isPublicBucket,
+    allowed_mime_types: allowedMimeTypes,
+    file_size_limit: fileSizeLimit,
+  } = req.body
 
   const { data, error } = await supabase.storage.updateBucket(id as string, {
     public: isPublicBucket,
+    allowedMimeTypes,
+    fileSizeLimit,
   })
   if (error) {
     return res.status(400).json({ error: { message: error.message } })