dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-06 01:45:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor/use text confirm modal for delete buckets (#40291)

Browse Source 
* Refactor DeleteBucketModal to use TextConfirmModal

* Refactor DeleteAnalyticsBucket to use TextConfirmModal

* Update TextConfirmModal to disable button until text match

* Refactor DeleteVectorBucketModal to use TextConfirmModal

* Remove test case - no longer valid
This commit is contained in:
Joshen Lim authored and GitHub committed 2025-11-10 15:28:08 +08:00
1 parent 5291fe3de9
commit eabfebf0f7
6 files changed
+78 -328
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx
+2
View File
@@ -23,6 +23,8 @@ export const SimpleConfigurationDetails = ({ bucketName }: { bucketName?: string
const { data: wrapperInstance } = useAnalyticsBucketWrapperInstance({ bucketId: bucketName })
const wrapperValues = convertKVStringArrayToJson(wrapperInstance?.server_options ?? [])
if (!wrapperInstance) return null
return (
<ScaffoldSection isFullWidth>
<ScaffoldHeader className="flex flex-row justify-between items-end gap-x-8">
apps/studio/components/interfaces/Storage/AnalyticsBuckets/DeleteAnalyticsBucketModal.tsx
+21 -100
View File
@@ -1,27 +1,9 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import z from 'zod'
import { useParams } from 'common'
import { useAnalyticsBucketDeleteMutation } from 'data/storage/analytics-bucket-delete-mutation'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import {
Button,
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Input_Shadcn_,
} from 'ui'
import { Admonition } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
import {
useAnalyticsBucketAssociatedEntities,
useAnalyticsBucketDeleteCleanUp,
@@ -34,10 +16,6 @@ export interface DeleteAnalyticsBucketModalProps {
onSuccess?: () => void
}
const formId = `delete-analytics-bucket-form`
// [Joshen] Can refactor to use TextConfirmModal
export const DeleteAnalyticsBucketModal = ({
visible,
bucketId,
@@ -47,16 +25,6 @@ export const DeleteAnalyticsBucketModal = ({
const { ref: projectRef } = useParams()
const { data: project } = useSelectedProjectQuery()
const schema = z.object({
confirm: z.literal(bucketId, {
errorMap: () => ({ message: `Please enter "${bucketId}" to confirm` }),
}),
})
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
})
const { icebergWrapper, icebergWrapperMeta, s3AccessKey, publication } =
useAnalyticsBucketAssociatedEntities({ projectRef, bucketId: bucketId })
@@ -83,7 +51,7 @@ export const DeleteAnalyticsBucketModal = ({
},
})
const onSubmit: SubmitHandler<z.infer<typeof schema>> = async () => {
const onConfirmDelete = async () => {
if (!projectRef) return console.error('Project ref is required')
if (!bucketId) return console.error('No bucket is selected')
deleteAnalyticsBucket({ projectRef, id: bucketId })
@@ -92,73 +60,26 @@ export const DeleteAnalyticsBucketModal = ({
const isDeleting = isDeletingAnalyticsBucket || isCleaningUpAnalyticsBucket
return (
<Dialog
open={visible}
onOpenChange={(open) => {
if (!open) onClose()
<TextConfirmModal
visible={visible}
size="medium"
variant="destructive"
title={`Confirm deletion of ${bucketId}`}
loading={isDeleting}
confirmPlaceholder="Type bucket name"
confirmString={bucketId ?? ''}
confirmLabel="Delete bucket"
onCancel={onClose}
onConfirm={onConfirmDelete}
alert={{
title: 'You cannot recover this bucket once deleted',
description: 'This action cannot be undone',
}}
>
<DialogContent aria-describedby={undefined}>
<DialogHeader>
<DialogTitle>Confirm deletion of {bucketId}</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<Admonition
type="destructive"
className="rounded-none border-x-0 border-t-0 mb-0"
title="You cannot recover this bucket once deleted."
description="All bucket data will be lost."
/>
<DialogSection>
<p className="text-sm">
Your bucket <span className="font-bold text-foreground">{bucketId}</span> and all its
contents will be permanently deleted.
</p>
</DialogSection>
<DialogSectionSeparator />
<DialogSection>
<Form_Shadcn_ {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
key="confirm"
name="confirm"
control={form.control}
render={({ field }) => (
<FormItemLayout
name="confirm"
label={
<>
Type <span className="font-bold text-foreground">{bucketId}</span> to
confirm.
</>
}
>
<FormControl_Shadcn_>
<Input_Shadcn_
id="confirm"
autoComplete="off"
{...field}
placeholder="Type bucket name"
/>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</DialogSection>
<DialogFooter>
<Button type="default" disabled={isDeleting} onClick={onClose}>
Cancel
</Button>
<Button form={formId} htmlType="submit" type="danger" loading={isDeleting}>
Delete bucket
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<p className="text-sm">
Your bucket <span className="font-bold text-foreground">{bucketId}</span> and all of its
contents will be permanently deleted.
</p>
</TextConfirmModal>
)
}
apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx
+24 -101
View File
@@ -1,58 +1,27 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { get as _get, find } from 'lodash'
import { useRouter } from 'next/router'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import z from 'zod'
import { useParams } from 'common'
import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
import { useDatabasePolicyDeleteMutation } from 'data/database-policies/database-policy-delete-mutation'
import { AnalyticsBucket } from 'data/storage/analytics-buckets-query'
import { useBucketDeleteMutation } from 'data/storage/bucket-delete-mutation'
import { Bucket, useBucketsQuery } from 'data/storage/buckets-query'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import {
Button,
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Input_Shadcn_,
} from 'ui'
import { Admonition } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { TextConfirmModal } from 'ui-patterns/Dialogs/TextConfirmModal'
import { formatPoliciesForStorage } from './Storage.utils'
export interface DeleteBucketModalProps {
visible: boolean
bucket: Bucket | AnalyticsBucket
bucket: Bucket
onClose: () => void
}
const formId = `delete-storage-bucket-form`
export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModalProps) => {
const router = useRouter()
const { ref: projectRef, bucketId } = useParams()
const { data: project } = useSelectedProjectQuery()
const schema = z.object({
confirm: z.literal(bucket.id, {
errorMap: () => ({ message: `Please enter "${bucket.id}" to confirm` }),
}),
})
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
})
const { data } = useBucketsQuery({ projectRef })
const buckets = data ?? []
@@ -62,7 +31,8 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
schema: 'storage',
})
const { mutateAsync: deletePolicy } = useDatabasePolicyDeleteMutation()
const { mutateAsync: deletePolicy, isLoading: isDeletingPolicies } =
useDatabasePolicyDeleteMutation()
const { mutate: deleteBucket, isLoading: isDeletingBucket } = useBucketDeleteMutation({
onSuccess: async () => {
@@ -102,80 +72,33 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
},
})
const onSubmit: SubmitHandler<z.infer<typeof schema>> = async () => {
const onConfirmDelete = async () => {
if (!projectRef) return console.error('Project ref is required')
if (!bucket) return console.error('No bucket is selected')
deleteBucket({ projectRef, id: bucket.id })
}
return (
<Dialog
open={visible}
onOpenChange={(open) => {
if (!open) onClose()
<TextConfirmModal
visible={visible}
size="medium"
variant="destructive"
title={`Confirm deletion of ${bucket.id}`}
loading={isDeletingBucket || isDeletingPolicies}
confirmPlaceholder="Type bucket name"
confirmString={bucket.id}
confirmLabel="Delete bucket"
onCancel={onClose}
onConfirm={onConfirmDelete}
alert={{
title: 'You cannot recover this bucket once deleted',
description: 'This action cannot be undone',
}}
>
<DialogContent aria-describedby={undefined}>
<DialogHeader>
<DialogTitle>Confirm deletion of {bucket.id}</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<Admonition
type="destructive"
className="rounded-none border-x-0 border-t-0 mb-0"
title="You cannot recover this bucket once deleted."
description="All bucket data will be lost."
/>
<DialogSection>
<p className="text-sm">
Your bucket <span className="font-bold text-foreground">{bucket.id}</span> and all its
contents will be permanently deleted.
</p>
</DialogSection>
<DialogSectionSeparator />
<DialogSection>
<Form_Shadcn_ {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
key="confirm"
name="confirm"
control={form.control}
render={({ field }) => (
<FormItemLayout
name="confirm"
label={
<>
Type <span className="font-bold text-foreground">{bucket.id}</span> to
confirm.
</>
}
>
<FormControl_Shadcn_>
<Input_Shadcn_
id="confirm"
autoComplete="off"
{...field}
placeholder="Type bucket name"
/>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</DialogSection>
<DialogFooter>
<Button type="default" disabled={isDeletingBucket} onClick={onClose}>
Cancel
</Button>
<Button form={formId} htmlType="submit" type="danger" loading={isDeletingBucket}>
Delete bucket
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<p className="text-sm">
Your bucket <span className="font-bold text-foreground">{bucket.id}</span> and all of its
contents will be permanently deleted.
</p>
</TextConfirmModal>
)
}
apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx
+27 -106
View File
@@ -1,28 +1,10 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import z from 'zod'
import { useParams } from 'common'
import { useVectorBucketDeleteMutation } from 'data/storage/vector-bucket-delete-mutation'
import { deleteVectorBucketIndex } from 'data/storage/vector-bucket-index-delete-mutation'
import { useVectorBucketsIndexesQuery } from 'data/storage/vector-buckets-indexes-query'
import {
Button,
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogSection,
DialogSectionSeparator,
DialogTitle,
Form_Shadcn_,
FormControl_Shadcn_,
FormField_Shadcn_,
Input_Shadcn_,
} from 'ui'
import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
export interface DeleteVectorBucketModalProps {
visible: boolean
@@ -31,10 +13,6 @@ export interface DeleteVectorBucketModalProps {
onSuccess: () => void
}
const formId = `delete-storage-vector-bucket-form`
// [Joshen] Can refactor to use TextConfirmModal
export const DeleteVectorBucketModal = ({
visible,
bucketName,
@@ -43,29 +21,20 @@ export const DeleteVectorBucketModal = ({
}: DeleteVectorBucketModalProps) => {
const { ref: projectRef } = useParams()
const schema = z.object({
confirm: z.literal(bucketName, {
errorMap: () => ({ message: `Please enter "${bucketName}" to confirm` }),
}),
})
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
})
const { mutate: deleteBucket, isLoading } = useVectorBucketDeleteMutation({
const { mutate: deleteBucket, isLoading: isDeletingBucket } = useVectorBucketDeleteMutation({
onSuccess: async () => {
toast.success(`Bucket "${bucketName}" deleted successfully`)
onSuccess()
},
})
const { data: { indexes = [] } = {} } = useVectorBucketsIndexesQuery({
projectRef,
vectorBucketName: bucketName,
})
const { data: { indexes = [] } = {}, isLoading: isDeletingIndexes } =
useVectorBucketsIndexesQuery({
projectRef,
vectorBucketName: bucketName,
})
const onSubmit: SubmitHandler<z.infer<typeof schema>> = async () => {
const onConfirmDelete = async () => {
if (!projectRef) return console.error('Project ref is required')
if (!bucketName) return console.error('No bucket is selected')
@@ -79,7 +48,6 @@ export const DeleteVectorBucketModal = ({
})
)
await Promise.all(promises)
deleteBucket({ projectRef, bucketName })
} catch (error) {
toast.error(
@@ -89,73 +57,26 @@ export const DeleteVectorBucketModal = ({
}
return (
<Dialog
open={visible}
onOpenChange={(open) => {
if (!open) onCancel()
<TextConfirmModal
visible={visible}
size="medium"
variant="destructive"
title={`Confirm deletion of ${bucketName}`}
loading={isDeletingBucket || isDeletingIndexes}
confirmPlaceholder="Type bucket name"
confirmString={bucketName ?? ''}
confirmLabel="Delete bucket"
onCancel={onCancel}
onConfirm={onConfirmDelete}
alert={{
title: 'You cannot recover this bucket once deleted',
description: 'This action cannot be undone',
}}
>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm deletion of {bucketName}</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<Admonition
type="destructive"
className="rounded-none border-x-0 border-t-0 mb-0"
title="You cannot recover this bucket once deleted."
description="All bucket data will be lost."
/>
<DialogSection>
<p className="text-sm">
Your bucket <span className="font-bold text-foreground">{bucketName}</span> and all its
contents will be permanently deleted.
</p>
</DialogSection>
<DialogSectionSeparator />
<DialogSection>
<Form_Shadcn_ {...form}>
<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
<FormField_Shadcn_
key="confirm"
name="confirm"
control={form.control}
render={({ field }) => (
<FormItemLayout
name="confirm"
label={
<>
Type <span className="font-bold text-foreground">{bucketName}</span> to
confirm.
</>
}
>
<FormControl_Shadcn_>
<Input_Shadcn_
id="confirm"
autoComplete="off"
{...field}
placeholder="Type bucket name"
/>
</FormControl_Shadcn_>
</FormItemLayout>
)}
/>
</form>
</Form_Shadcn_>
</DialogSection>
<DialogFooter>
<Button type="default" disabled={isLoading} onClick={onCancel}>
Cancel
</Button>
<Button form={formId} htmlType="submit" type="danger" loading={isLoading}>
Delete bucket
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<p className="text-sm">
Your bucket <span className="font-bold text-foreground">{bucketName}</span> and all of its
contents will be permanently deleted.
</p>
</TextConfirmModal>
)
}
apps/studio/components/interfaces/Storage/__tests__/DeleteBucketModal.test.tsx
-19
View File
@@ -119,23 +119,4 @@ describe(`DeleteBucketModal`, () => {
await waitFor(() => expect(onClose).toHaveBeenCalledOnce())
expect(routerMock.asPath).toStrictEqual(`/project/default/storage/files`)
})
it(`prevents submission when the input doesn't match the bucket name`, async () => {
const onClose = vi.fn()
render(<Page onClose={onClose} />)
const openButton = screen.getByRole(`button`, { name: `Open` })
await userEvent.click(openButton)
await screen.findByRole(`dialog`)
const input = screen.getByLabelText(/Type/)
await userEvent.type(input, `invalid`)
const confirmButton = screen.getByRole(`button`, { name: `Delete bucket` })
fireEvent.click(confirmButton)
await waitFor(() => {
expect(screen.getByText(/Please enter/)).toBeInTheDocument()
})
})
})
packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx
+4 -2
View File
@@ -51,7 +51,7 @@ export interface TextConfirmModalProps {
errorMessage?: string
}
const TextConfirmModal = forwardRef<
export const TextConfirmModal = forwardRef<
React.ElementRef<typeof DialogContent>,
React.ComponentPropsWithoutRef<typeof Dialog> & TextConfirmModalProps
>(
@@ -99,6 +99,8 @@ const TextConfirmModal = forwardRef<
},
})
const isFormValid = form.formState.isValid
// 2. Define a submit handler.
function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
@@ -197,7 +199,7 @@ const TextConfirmModal = forwardRef<
}
htmlType="submit"
loading={loading}
disabled={loading}
disabled={!isFormValid || loading}
className="truncate"
>
{confirmLabel}