konnosDashboard
SpamValidation.tsx66 lines · main
1import { AnimatePresence, motion } from 'framer-motion'
2import { CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
3import { Admonition } from 'ui-patterns'
4
5import { Markdown } from '@/components/interfaces/Markdown'
6import { ValidateSpamResponse } from '@/data/auth/validate-spam-mutation'
7
8interface SpamValidationProps {
9 spamRules?: ValidateSpamResponse['rules']
10}
11
12// [Joshen] According to API, we label as a spam risk as long as there are spam
13// rules identified with scores above 0. Scores are irrelevant in our context and
14// are hence not visualized in the UI
15
16export const SpamValidation = ({ spamRules = [] }: SpamValidationProps) => {
17 const rules = spamRules.filter((rule) => rule.score >= 0)
18
19 return (
20 <AnimatePresence>
21 {rules.length > 0 && (
22 <motion.div
23 className="border-b"
24 initial={{ height: 0, opacity: 0 }}
25 animate={{ height: 'auto', opacity: 1 }}
26 exit={{ height: 0, opacity: 0 }}
27 transition={{ duration: 0.2, ease: 'easeOut' }}
28 >
29 <CardContent className="py-6 flex flex-col gap-2">
30 <Admonition
31 type="destructive"
32 title="Issues to resolve"
33 description="This email is likely to be marked as spam by email servers. Please resolve the below issues before saving."
34 className="bg-destructive-300/50 dark:bg-destructive-200 border-destructive-400"
35 />
36
37 <div className="flex flex-col gap-1">
38 <div className="w-full border rounded-md overflow-hidden">
39 <Table>
40 <TableHeader>
41 <TableRow>
42 <TableHead>Warning</TableHead>
43 <TableHead>Description</TableHead>
44 </TableRow>
45 </TableHeader>
46 <TableBody>
47 {rules.map((rule) => (
48 <TableRow key={rule.name}>
49 <TableCell className="font-mono">{rule.name}</TableCell>
50 <TableCell>{rule.desc}</TableCell>
51 </TableRow>
52 ))}
53 </TableBody>
54 </Table>
55 </div>
56 <Markdown
57 className="max-w-none! text-foreground-lighter text-xs mt-2"
58 content="Spam validation is powered by [SpamAssassin](https://spamassassin.apache.org/doc.html). Full list of all available warnings can be found [here](https://gist.github.com/ychaouche/a2faff159c2a1fea16019156972c7f8b)."
59 />
60 </div>
61 </CardContent>
62 </motion.div>
63 )}
64 </AnimatePresence>
65 )
66}