From 5c6719c8ea30fdadf25caae3c55d1618fbec7050 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Wed, 4 Oct 2023 08:19:52 +0200 Subject: [PATCH] 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 | 4 ++++ studio/components/layouts/StorageLayout/BucketRow.tsx | 7 ++++--- studio/components/layouts/StorageLayout/StorageMenu.tsx | 2 +- studio/pages/api/storage/[ref]/buckets/index.ts | 7 ------- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/studio/components/interfaces/Storage/CreateBucketModal.tsx b/studio/components/interfaces/Storage/CreateBucketModal.tsx index 6ca95df56e7..9768b69c866 100644 --- a/studio/components/interfaces/Storage/CreateBucketModal.tsx +++ b/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' } diff --git a/studio/components/layouts/StorageLayout/BucketRow.tsx b/studio/components/layouts/StorageLayout/BucketRow.tsx index c9309c53574..2fc2f3c8dff 100644 --- a/studio/components/layouts/StorageLayout/BucketRow.tsx +++ b/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' )} > - + {/* Even though we trim whitespaces from bucket names, there may be some existing buckets with trailing whitespaces. */} +

{

)} - {buckets.map((bucket: any, idx: number) => { + {buckets.map((bucket, idx: number) => { const isSelected = bucketId === bucket.id return ( { 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 } })