konnosDashboard
ErrorDetailsDialog.tsx69 lines · main
1import {
2 Button,
3 cn,
4 Dialog,
5 DialogClose,
6 DialogContent,
7 DialogFooter,
8 DialogHeader,
9 DialogSection,
10 DialogSectionSeparator,
11 DialogTitle,
12} from 'ui'
13import { CodeBlock } from 'ui-patterns/CodeBlock'
14
15interface ErrorDetailsDialogProps {
16 open: boolean
17 onOpenChange: (open: boolean) => void
18 tableName: string
19 reason: string
20 solution?: string
21}
22
23export const ErrorDetailsDialog = ({
24 open,
25 onOpenChange,
26 tableName,
27 reason,
28 solution,
29}: ErrorDetailsDialogProps) => {
30 return (
31 <Dialog open={open} onOpenChange={onOpenChange}>
32 <DialogContent size="xlarge" aria-describedby={undefined}>
33 <DialogHeader>
34 <DialogTitle>
35 Replication error on <code className="text-code-inline">{tableName}</code>
36 </DialogTitle>
37 </DialogHeader>
38 <DialogSectionSeparator />
39 <DialogSection className="p-0!">
40 <div className="px-4 py-3">
41 <p className="text-sm text-foreground-light">
42 The following error occurred during replication:
43 </p>
44 </div>
45 <CodeBlock
46 hideLineNumbers
47 wrapLines={false}
48 wrapperClassName={cn(
49 '[&_pre]:px-4 [&_pre]:py-3 [&>pre]:border-x-0 [&>pre]:rounded-none'
50 )}
51 language="bash"
52 value={reason}
53 className="[&_code]:text-xs [&_code]:text-foreground [&_span]:text-foreground!"
54 />
55 {solution && (
56 <div className="px-4 py-3">
57 <p className="text-sm">{solution}</p>
58 </div>
59 )}
60 </DialogSection>
61 <DialogFooter>
62 <DialogClose>
63 <Button type="default">Close</Button>
64 </DialogClose>
65 </DialogFooter>
66 </DialogContent>
67 </Dialog>
68 )
69}