mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +03:00
CharisandJoshen Lim
d8f7cc0d57
* o11y: mirror and sanitize breadcrumbs Mirror Sentry breadcrumbs as the basis for our own support logging. Also adds more sanitization to breadcrumbs. * feat(support form): toggle for attaching dashboard logs Add a toggle to the support form when the category is "Dashboard bug", to attach recent dashboard logs. Users can preview the attached logs and opt out. * feat(support links): dedicated support link component Add a new component for support links, which: - Uses the serializer for support link params to ensure serialization/deserialization pairs correctly - Snapshots breadcrumbs so the attached log on the support form will be cut off at the support link click (otherwise we will get support form actions cluttering up the log) * tests(support form): extend timeout on flaky test * Minor clean up * fix(support form): allow url to specifically indicate no specified project * minor nits * Fix tests * Fix tests --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import { ChevronRight } from 'lucide-react'
|
|
import { useMemo, useState } from 'react'
|
|
import type { UseFormReturn } from 'react-hook-form'
|
|
|
|
import {
|
|
Collapsible_Shadcn_,
|
|
CollapsibleContent_Shadcn_,
|
|
CollapsibleTrigger_Shadcn_,
|
|
FormField_Shadcn_,
|
|
Switch,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
import type { SupportFormValues } from './SupportForm.schema'
|
|
import { DASHBOARD_LOG_CATEGORIES, getSanitizedBreadcrumbs } from './dashboard-logs'
|
|
|
|
interface DashboardLogsToggleProps {
|
|
form: UseFormReturn<SupportFormValues>
|
|
}
|
|
|
|
export function DashboardLogsToggle({ form }: DashboardLogsToggleProps) {
|
|
const sanitizedLogJson = useMemo(() => JSON.stringify(getSanitizedBreadcrumbs(), null, 2), [])
|
|
|
|
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
|
|
|
if (!DASHBOARD_LOG_CATEGORIES.includes(form.getValues('category'))) return
|
|
|
|
return (
|
|
<FormField_Shadcn_
|
|
name="attachDashboardLogs"
|
|
control={form.control}
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
hideMessage
|
|
name="attachDashboardLogs"
|
|
className="px-6"
|
|
layout="flex"
|
|
label={
|
|
<div className="flex items-center gap-x-2">
|
|
<span className="text-foreground">Include dashboard activity log</span>
|
|
</div>
|
|
}
|
|
description={
|
|
<div className="flex flex-col gap-y-2">
|
|
<span className="text-foreground-light">
|
|
Share sanitized logs of recent dashboard actions to help reproduce the issue.
|
|
</span>
|
|
<Collapsible_Shadcn_ open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
|
|
<CollapsibleTrigger_Shadcn_ className="group flex items-center gap-x-1 text-sm text-foreground-lighter hover:text-foreground transition">
|
|
<ChevronRight
|
|
size={14}
|
|
className="transition-transform group-data-[state=open]:rotate-90"
|
|
/>
|
|
<span>Preview log</span>
|
|
</CollapsibleTrigger_Shadcn_>
|
|
<CollapsibleContent_Shadcn_ className="mt-2">
|
|
<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">
|
|
{sanitizedLogJson}
|
|
</pre>
|
|
</CollapsibleContent_Shadcn_>
|
|
</Collapsible_Shadcn_>
|
|
</div>
|
|
}
|
|
>
|
|
<Switch
|
|
size="large"
|
|
id="attachDashboardLogs"
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
)
|
|
}
|