Merge pull request supabase#14252 from supabase/fix/storage-bucket-se…

…ttings-self-hosted fix: storage bucket settings in self-hosted
ai-Ev1lC0rP · May 10, 2023 · eecc0b3 · eecc0b3
2 parents ece7143 + a22324f
commit eecc0b3
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/studio/components/interfaces/Storage/CreateBucketModal.tsx b/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>

diff --git a/studio/components/interfaces/Storage/EditBucketModal.tsx b/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>

diff --git a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/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 (

diff --git a/studio/package.json b/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",

diff --git a/studio/pages/api/storage/[ref]/buckets/[id]/index.ts b/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 } })