mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
df52ea7ee0
* Update the design of the sonner toasts. Add the close button by default. * Migrate studio and www apps to use the SonnerToaster. * Migrate all toasts from studio. * Migrate all leftover toasts in studio. * Add a new toast component with progress. Use it in studio. * Migrate the design-system app. * Refactor the consent toast to use sonner. * Switch docs to use the new sonner toasts. * Remove toast examples from the design-system app. * Remove all toast-related components and old code. * Fix the progress bar in the toast progress component. Also make the bottom components vertically centered. * Fix the width of the toast progress. * Use text-foreground-lighter instead of muted for ToastProgress text * Rename ToastProgress to SonnerProgress. * Shorten the text in sonner progress. * Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner. * Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity). * Fix the playwright tests. * Refactor imports to use ui instead of @ui. * Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch. * Remove react-hot-toast lib. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import { useParams } from 'common'
|
|
import { toast } from 'sonner'
|
|
import { Alert, Button, Modal } from 'ui'
|
|
|
|
import { useNetworkRestrictionsQuery } from 'data/network-restrictions/network-restrictions-query'
|
|
import { useNetworkRestrictionsApplyMutation } from 'data/network-restrictions/network-retrictions-apply-mutation'
|
|
|
|
interface RemoveRestrictionModalProps {
|
|
visible: boolean
|
|
selectedRestriction?: string
|
|
onClose: () => void
|
|
}
|
|
|
|
const RemoveRestrictionModal = ({
|
|
visible,
|
|
selectedRestriction,
|
|
onClose,
|
|
}: RemoveRestrictionModalProps) => {
|
|
const { ref } = useParams()
|
|
|
|
const { data } = useNetworkRestrictionsQuery({ projectRef: ref })
|
|
const ipv4Restrictions = data?.config?.dbAllowedCidrs ?? []
|
|
// @ts-ignore [Joshen] API typing issue
|
|
const ipv6Restrictions: string[] = data?.config?.dbAllowedCidrsV6 ?? []
|
|
const restrictedIps = ipv4Restrictions.concat(ipv6Restrictions)
|
|
|
|
const { mutate: applyNetworkRestrictions, isLoading: isApplying } =
|
|
useNetworkRestrictionsApplyMutation({
|
|
onSuccess: () => onClose(),
|
|
onError: (error) => {
|
|
toast.error(`Failed to remove restriction: ${error.message}`)
|
|
},
|
|
})
|
|
|
|
const isRemovingOnlyRestriction =
|
|
restrictedIps.length === 1 && restrictedIps[0] === selectedRestriction
|
|
|
|
const onSubmit = async () => {
|
|
if (!ref) return console.error('Project ref is required')
|
|
if (!selectedRestriction) return console.error('Missing selected restriction')
|
|
|
|
const dbAllowedCidrs = ipv4Restrictions.includes(selectedRestriction)
|
|
? ipv4Restrictions.filter((ip) => ip !== selectedRestriction)
|
|
: ipv4Restrictions
|
|
const dbAllowedCidrsV6 = ipv6Restrictions.includes(selectedRestriction)
|
|
? ipv6Restrictions.filter((ip) => ip !== selectedRestriction)
|
|
: ipv6Restrictions
|
|
|
|
if (dbAllowedCidrs.length === 0 && dbAllowedCidrsV6.length === 0) {
|
|
applyNetworkRestrictions({
|
|
projectRef: ref,
|
|
dbAllowedCidrs: ['0.0.0.0/0'],
|
|
dbAllowedCidrsV6: ['::/0'],
|
|
})
|
|
} else {
|
|
applyNetworkRestrictions({ projectRef: ref, dbAllowedCidrs, dbAllowedCidrsV6 })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
closable
|
|
hideFooter
|
|
size="medium"
|
|
visible={visible}
|
|
onCancel={onClose}
|
|
header="Confirm to remove restriction"
|
|
>
|
|
<Modal.Content className="space-y-4">
|
|
<p className="text-sm text-foreground-light">
|
|
The IPv4 address <code className="text-xs">{selectedRestriction}</code> will be removed
|
|
from your list of network restrictions
|
|
{isRemovingOnlyRestriction
|
|
? '.'
|
|
: ", and no longer have access to your project's database."}
|
|
</p>
|
|
{isRemovingOnlyRestriction && (
|
|
<Alert withIcon variant="warning" title="Database access will no longer be restricted">
|
|
Removing all network restrictions will default to your database being accessible from
|
|
all IP addresses.
|
|
</Alert>
|
|
)}
|
|
</Modal.Content>
|
|
<Modal.Content className="flex items-center justify-end space-x-2">
|
|
<Button type="default" disabled={isApplying} onClick={() => onClose()}>
|
|
Cancel
|
|
</Button>
|
|
<Button loading={isApplying} disabled={isApplying} onClick={() => onSubmit()}>
|
|
Remove restriction
|
|
</Button>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default RemoveRestrictionModal
|