konnosDashboard
DashboardLogsToggle.tsx81 lines · main
1import { ChevronRight } from 'lucide-react'
2import { useMemo, useState } from 'react'
3import type { UseFormReturn } from 'react-hook-form'
4import { Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
5import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
6
7import { DASHBOARD_LOG_CATEGORIES } from './dashboard-logs'
8import type { SupportFormValues } from './SupportForm.schema'
9
10interface DashboardLogsToggleProps {
11 form: UseFormReturn<SupportFormValues>
12 sanitizedLog: unknown[]
13 align?: 'left' | 'right'
14 className?: string
15}
16
17export function DashboardLogsToggle({
18 form,
19 sanitizedLog,
20 align = 'left',
21 className,
22}: DashboardLogsToggleProps) {
23 const sanitizedLogJson = useMemo(() => JSON.stringify(sanitizedLog, null, 2), [sanitizedLog])
24
25 const [isPreviewOpen, setIsPreviewOpen] = useState(false)
26
27 if (!DASHBOARD_LOG_CATEGORIES.includes(form.getValues('category'))) return
28
29 return (
30 <FormField
31 name="attachDashboardLogs"
32 control={form.control}
33 render={({ field }) => (
34 <FormItemLayout
35 hideMessage
36 name="attachDashboardLogs"
37 className={className}
38 layout="flex"
39 align={align}
40 label={
41 <div className="flex items-center gap-x-2">
42 <span className="text-foreground">Include dashboard activity log</span>
43 </div>
44 }
45 description={
46 <div className="flex flex-col">
47 <span className="text-foreground-light">
48 Share sanitized logs of recent dashboard actions to help reproduce the issue.
49 </span>
50 <Collapsible className="mt-2" open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
51 <CollapsibleTrigger
52 className={
53 'group flex items-center gap-x-1 group-data-open:text-foreground hover:text-foreground transition'
54 }
55 >
56 <ChevronRight
57 size={14}
58 className="transition-all group-data-open:rotate-90 text-foreground-muted -ml-1"
59 />
60 <span className="text-sm">Preview log</span>
61 </CollapsibleTrigger>
62 <CollapsibleContent className="mt-2">
63 <pre className="bg-background-surface-200 border border-strong rounded-lg p-3 max-h-60 overflow-y-auto overflow-x-auto text-xs text-foreground-light whitespace-pre-wrap">
64 {sanitizedLogJson}
65 </pre>
66 </CollapsibleContent>
67 </Collapsible>
68 </div>
69 }
70 >
71 <Switch
72 size="large"
73 id="attachDashboardLogs"
74 checked={field.value}
75 onCheckedChange={field.onChange}
76 />
77 </FormItemLayout>
78 )}
79 />
80 )
81}