DataApiEnableSwitchForm.tsx70 lines · main

1	import type { UseFormReturn } from 'react-hook-form'
2	import { CardContent, CardFooter, Form, FormControl, FormField, FormItem, Switch } from 'ui'
3	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
4
5	import { DataApiDisabledAlert } from './DataApiDisabledAlert'
6	import type { DataApiFormValues } from './DataApiEnableSwitch.types'
7	import { FormActions } from '@/components/ui/Forms/FormActions'
8
9	export const DataApiEnableSwitchForm = ({
10	form,
11	formId,
12	disabled,
13	isBusy,
14	permissionsHelper,
15	onSubmit,
16	handleReset,
17	}: {
18	form: UseFormReturn<DataApiFormValues>
19	formId: string
20	disabled: boolean
21	isBusy: boolean
22	permissionsHelper: string | undefined
23	onSubmit: (values: DataApiFormValues) => void
24	handleReset: () => void
25	}) => {
26	const watchedEnabled = form.watch('enableDataApi')
27
28	return (
29	<Form {...form}>
30	<form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
31	<CardContent>
32	<FormField
33	control={form.control}
34	name="enableDataApi"
35	render={({ field }) => (
36	<FormItem className="space-y-4">
37	<FormItemLayout
38	layout="flex-row-reverse"
39	label="Enable Data API"
40	description="When enabled you will be able to use any Briven client library and PostgREST endpoints with any schema configured in the Settings tab."
41	>
42	<FormControl>
43	<Switch
44	size="large"
45	disabled={disabled}
46	checked={field.value}
47	onCheckedChange={field.onChange}
48	/>
49	</FormControl>
50	</FormItemLayout>
51
52	{!watchedEnabled && <DataApiDisabledAlert />}
53	</FormItem>
54	)}
55	/>
56	</CardContent>
57	<CardFooter>
58	<FormActions
59	form={formId}
60	isSubmitting={isBusy}
61	hasChanges={form.formState.isDirty}
62	handleReset={handleReset}
63	disabled={disabled}
64	helper={permissionsHelper}
65	/>
66	</CardFooter>
67	</form>
68	</Form>
69	)
70	}