konnosDashboard
EnableRuleModal.tsx69 lines · main
1import { useParams } from 'common'
2import { useState } from 'react'
3import { toast } from 'sonner'
4import {
5 Button,
6 Dialog,
7 DialogContent,
8 DialogFooter,
9 DialogHeader,
10 DialogSection,
11 DialogSectionSeparator,
12 DialogTitle,
13 DialogTrigger,
14} from 'ui'
15
16import { LintInfo } from '../Linter/Linter.constants'
17import { useLintRuleDeleteMutation } from '@/data/lint/delete-lint-rule-mutation'
18import { LintException } from '@/data/lint/lint-rules-query'
19
20interface EnableRuleModalProps {
21 lint: LintInfo
22 rule: LintException
23}
24
25export const EnableRuleModal = ({ lint, rule }: EnableRuleModalProps) => {
26 const { ref } = useParams()
27
28 const [open, setOpen] = useState(false)
29
30 const { mutate: deleteRule, isPending: isDeleting } = useLintRuleDeleteMutation({
31 onSuccess: () => {
32 toast.success(`Successfully enabled the "${lint.title}" rule`)
33 setOpen(false)
34 },
35 })
36
37 const onDeleteRule = () => {
38 if (!ref) return console.error('Project ref is required')
39 deleteRule({ projectRef: ref, ids: [rule.id] })
40 }
41
42 return (
43 <Dialog open={open} onOpenChange={setOpen}>
44 <DialogTrigger asChild>
45 <Button type="default">Enable rule</Button>
46 </DialogTrigger>
47 <DialogContent size="small">
48 <DialogHeader>
49 <DialogTitle>Enable rule</DialogTitle>
50 </DialogHeader>
51 <DialogSectionSeparator />
52 <DialogSection>
53 <p className="text-sm">
54 The "{lint.title}" rule will be visible in the Advisor reports, and will be included in
55 email notifications for this project.
56 </p>
57 </DialogSection>
58 <DialogFooter>
59 <Button disabled={isDeleting} type="default" onClick={() => setOpen(false)}>
60 Cancel
61 </Button>
62 <Button loading={isDeleting} type="primary" onClick={onDeleteRule}>
63 Enable
64 </Button>
65 </DialogFooter>
66 </DialogContent>
67 </Dialog>
68 )
69}