mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Gildas Garcia
4f92790587
## Problem `<FormItemLayout>` does not apply item id correctly. This can be seen on https://supabase.com/design-system/docs/ui-patterns/forms: open the devtool and check the form items labels. They have no `for` attribute. This makes it harder to correctly test and is an accessibility issue. Axe devtool actually report it ## Solution When inside React Hook Form, `<FormItemLayout>` actually generate an `id` (via `<FormItem>`). However, this `id` is overridden in `<FormLayout>` and read from context by `<FormLabel>`. Ensure we use the generated id unless one was provided. Also updated the paths filters for the CI check so that any changes in either `ui` or `ui-patterns` triggers the studio unit and e2e tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved form accessibility by ensuring labels consistently connect to their corresponding input fields. - React-based forms now correctly preserve field-specific identifiers when associating labels with inputs. - Added support for explicitly specifying a label’s input target, improving compatibility with customized form layouts. - Updated Studio forms to use consistent control identifiers and labeling behavior. - **Quality Improvements** - Automated validation now also runs when shared UI components and patterns are updated. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import { ChevronRight } from 'lucide-react'
|
|
import { useMemo, useState } from 'react'
|
|
import type { UseFormReturn } from 'react-hook-form'
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
FormControl,
|
|
FormField,
|
|
Switch,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { DASHBOARD_LOG_CATEGORIES } from './dashboard-logs'
|
|
import type { SupportFormValues } from './SupportForm.schema'
|
|
|
|
interface DashboardLogsToggleProps {
|
|
form: UseFormReturn<SupportFormValues>
|
|
sanitizedLog: unknown[]
|
|
align?: 'left' | 'right'
|
|
className?: string
|
|
}
|
|
|
|
export function DashboardLogsToggle({
|
|
form,
|
|
sanitizedLog,
|
|
align = 'left',
|
|
className,
|
|
}: DashboardLogsToggleProps) {
|
|
const sanitizedLogJson = useMemo(() => JSON.stringify(sanitizedLog, null, 2), [sanitizedLog])
|
|
|
|
const [isPreviewOpen, setIsPreviewOpen] = useState(false)
|
|
|
|
if (!DASHBOARD_LOG_CATEGORIES.includes(form.getValues('category'))) return
|
|
|
|
return (
|
|
<FormField
|
|
name="attachDashboardLogs"
|
|
control={form.control}
|
|
render={({ field }) => (
|
|
<FormItemLayout
|
|
hideMessage
|
|
className={className}
|
|
layout="flex"
|
|
align={align}
|
|
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">
|
|
<span className="text-foreground-light">
|
|
Share sanitized logs of recent dashboard actions to help reproduce the issue.
|
|
</span>
|
|
<Collapsible className="mt-2" open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
|
|
<CollapsibleTrigger
|
|
className={
|
|
'group flex items-center gap-x-1 group-data-open:text-foreground hover:text-foreground transition'
|
|
}
|
|
>
|
|
<ChevronRight
|
|
size={14}
|
|
className="transition-all group-data-open:rotate-90 text-foreground-muted -ml-1"
|
|
/>
|
|
<span className="text-sm">Preview log</span>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent 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>
|
|
</Collapsible>
|
|
</div>
|
|
}
|
|
>
|
|
<FormControl>
|
|
<Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
</FormItemLayout>
|
|
)}
|
|
/>
|
|
)
|
|
}
|