mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 21:59:16 +03:00
Drake Costa
ca4b3bc624
* Refactor `StorageMenu` modals to replace deprecated patterns * add test for `DeleteBucketModal` and update test setup Note: Because this component uses `useParams`, it's necessary to have the dynamic route segment passed to `next-router-mock`'s `createDynamicRouteParser`. In order not to have to manually list all of these as the application grows, I added a glob utility that uses the `pages/` directory to automatically generate an array of dynamic route paths in this case. * add test for `EmptyBucketModal` * add test for `EditBucketModal` and add `isNonNullable` utility function * add test for `CreateBucketModal` * implement requested changes * implement visual fixes
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import { useParams } from 'common'
|
|
import { toast } from 'sonner'
|
|
|
|
import { useBucketEmptyMutation } from 'data/storage/bucket-empty-mutation'
|
|
import type { Bucket } from 'data/storage/buckets-query'
|
|
import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogSection,
|
|
DialogSectionSeparator,
|
|
DialogFooter,
|
|
} from 'ui'
|
|
import { Admonition } from 'ui-patterns'
|
|
|
|
export interface EmptyBucketModalProps {
|
|
visible: boolean
|
|
bucket?: Bucket
|
|
onClose: () => void
|
|
}
|
|
|
|
export const EmptyBucketModal = ({ visible, bucket, onClose }: EmptyBucketModalProps) => {
|
|
const { ref: projectRef } = useParams()
|
|
const { fetchFolderContents } = useStorageExplorerStateSnapshot()
|
|
|
|
const { mutate: emptyBucket, isLoading } = useBucketEmptyMutation({
|
|
onSuccess: async () => {
|
|
if (bucket === undefined) return
|
|
await fetchFolderContents({
|
|
bucketId: bucket.id,
|
|
folderId: bucket.id,
|
|
folderName: bucket.name,
|
|
index: -1,
|
|
})
|
|
toast.success(`Successfully deleted bucket ${bucket!.name}`)
|
|
onClose()
|
|
},
|
|
})
|
|
|
|
const onEmptyBucket = async () => {
|
|
if (!projectRef) return console.error('Project ref is required')
|
|
if (!bucket) return console.error('No bucket is selected')
|
|
emptyBucket({ projectRef, id: bucket.id })
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
open={visible}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
onClose()
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{`Confirm to delete all contents from ${bucket?.name}`}</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogSectionSeparator />
|
|
<DialogSection className="flex flex-col gap-4">
|
|
<Admonition
|
|
type="destructive"
|
|
title="This action cannot be undone"
|
|
description="The contents of your bucket cannot be recovered once deleted."
|
|
/>
|
|
<p className="text-sm">Are you sure you want to empty the bucket "{bucket?.name}"?</p>
|
|
</DialogSection>
|
|
<DialogFooter>
|
|
<Button type="default" disabled={isLoading} onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="danger" loading={isLoading} onClick={onEmptyBucket}>
|
|
Empty Bucket
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default EmptyBucketModal
|