Fix the bucket url to handle trailing whitespace (#17095)

* Fix the bucket url to handle trailing whitespace.

* Migrate the bucket CRUD methods to use data/fetchers.

* Revert the validation for bucket names where names with spaces are invalid.

* Revert the mutations refactors.

* Trim trailing whitespace from its name when creating a new bucket.

* Add error message for bucket names and whitespaces.

studio/components/interfaces/Storage/CreateBucketModal.tsx

@@ -67,6 +67,10 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => {
     if (!values.name) {
       errors.name = 'Please provide a name for your bucket'
     }
+    if (values.name && values.name.endsWith(' ')) {
+      errors.name = 'The name of the bucket cannot end with a whitespace'
+    }
+
     if (values.has_file_size_limit && values.formatted_size_limit < 0) {
       errors.formatted_size_limit = 'File size upload limit has to be at least 0'
     }

studio/components/layouts/StorageLayout/BucketRow.tsx

@@ -23,8 +23,8 @@ export interface BucketRowProps {
   bucket: Bucket
   projectRef?: string
   isSelected: boolean
-  onSelectDeleteBucket: (bucket: any) => void
-  onSelectEditBucket: (bucket: any) => void
+  onSelectDeleteBucket: (bucket: Bucket) => void
+  onSelectEditBucket: (bucket: Bucket) => void
 }
 
 const BucketRow = ({
@@ -44,7 +44,8 @@ const BucketRow = ({
         isSelected && 'text-foreground bg-scale-300'
       )}
     >
-      <Link href={`/project/${projectRef}/storage/buckets/${bucket.id}`}>
+      {/* Even though we trim whitespaces from bucket names, there may be some existing buckets with trailing whitespaces. */}
+      <Link href={`/project/${projectRef}/storage/buckets/${encodeURIComponent(bucket.id)}`}>
         <a className="py-1 px-3 w-full">
           <div className="flex items-center justify-between space-x-2 truncate w-full">
             <p

studio/components/layouts/StorageLayout/StorageMenu.tsx

@@ -104,7 +104,7 @@ const StorageMenu = () => {
                       </Alert>
                     </div>
                   )}
-                  {buckets.map((bucket: any, idx: number) => {
+                  {buckets.map((bucket, idx: number) => {
                     const isSelected = bucketId === bucket.id
                     return (
                       <BucketRow

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

@@ -33,13 +33,6 @@ const handleGet = async (req: NextApiRequest, res: NextApiResponse) => {
 const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
   const { id, public: isPublicBucket } = req.body
 
-  // To validate bucket name, can be removed once the issue is fixed in supabase lib
-  const regex = /^[a-z0-9.-]+$/
-  if (!regex.test(id)) {
-    return res.status(400).json({ error: { message: 'Bucket name invalid' } })
-  }
-  // Bucket name validation ends here
-
   const { data, error } = await supabase.storage.createBucket(id, { public: isPublicBucket })
   if (error) {
     return res.status(400).json({ error: { message: error.message } })