DisableRuleModal.tsx90 lines · main
1import { useParams } from 'common'
2import { useRouter } from 'next/router'
3import { useState } from 'react'
4import { toast } from 'sonner'
5import {
6 Button,
7 Dialog,
8 DialogContent,
9 DialogFooter,
10 DialogHeader,
11 DialogSection,
12 DialogSectionSeparator,
13 DialogTitle,
14 DialogTrigger,
15} from 'ui'
16
17import { LintInfo } from '../Linter/Linter.constants'
18import { lintInfoMap } from '../Linter/Linter.utils'
19import { useLintRuleCreateMutation } from '@/data/lint/create-lint-rule-mutation'
20
21interface DisableRuleModalProps {
22 lint: LintInfo
23}
24
25export const DisableRuleModal = ({ lint }: DisableRuleModalProps) => {
26 const { ref } = useParams()
27 const router = useRouter()
28 const routeCategory = router.pathname.split('/').pop()
29
30 const [open, setOpen] = useState(false)
31
32 const { mutate: createRule, isPending: isCreating } = useLintRuleCreateMutation({
33 onSuccess: (_, vars) => {
34 const ruleLint = vars.exception.lint_name
35 const ruleLintMeta = lintInfoMap.find((x) => x.name === ruleLint)
36 toast.success(`Successfully disabled the "${ruleLintMeta?.title}" rule`)
37
38 if (ruleLintMeta) {
39 if (!!routeCategory && routeCategory !== ruleLintMeta.category) {
40 router.push(
41 `/project/${ref}/advisors/rules/${ruleLintMeta.category}?lint=${ruleLintMeta.name}`
42 )
43 }
44 }
45 setOpen(false)
46 },
47 })
48
49 const onCreateRule = () => {
50 if (!ref) return console.error('Project ref is required')
51
52 createRule({
53 projectRef: ref,
54 exception: {
55 is_disabled: true,
56 lint_category: undefined,
57 lint_name: lint.name,
58 assigned_to: undefined,
59 },
60 })
61 }
62
63 return (
64 <Dialog open={open} onOpenChange={setOpen}>
65 <DialogTrigger asChild>
66 <Button type="default">Disable rule</Button>
67 </DialogTrigger>
68 <DialogContent size="small">
69 <DialogHeader>
70 <DialogTitle>Confirm to disable rule</DialogTitle>
71 </DialogHeader>
72 <DialogSectionSeparator />
73 <DialogSection>
74 <p className="text-sm">
75 This will silence the "{lint.title}" by hiding this rule in the Advisor reports, as well
76 omitting this rule from email notifications for this project.
77 </p>
78 </DialogSection>
79 <DialogFooter>
80 <Button disabled={isCreating} type="default" onClick={() => setOpen(false)}>
81 Cancel
82 </Button>
83 <Button loading={isCreating} type="primary" onClick={onCreateRule}>
84 Disable
85 </Button>
86 </DialogFooter>
87 </DialogContent>
88 </Dialog>
89 )
90}