BigQueryFields() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationPanelFields.tsx lines 33–94

export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelSchemaType> }) => {
  return (
    <div className="flex flex-col gap-y-6 p-5">
      <p className="text-sm font-medium text-foreground">BigQuery settings</p>
      <div className="flex flex-col gap-y-4">
        <FormField_Shadcn_
          control={form.control}
          name="projectId"
          render={({ field }) => (
            <FormItemLayout
              layout="horizontal"
              label="Project ID"
              description="The Google Cloud project ID where data will be sent"
            >
              <FormControl_Shadcn_>
                <Input_Shadcn_ {...field} placeholder="my-gcp-project" />
              </FormControl_Shadcn_>
            </FormItemLayout>
          )}
        />

        <FormField_Shadcn_
          control={form.control}
          name="datasetId"
          render={({ field }) => (
            <FormItemLayout
              label="Dataset ID"
              layout="horizontal"
              description="The BigQuery dataset where replicated tables will be created"
            >
              <FormControl_Shadcn_>
                <Input_Shadcn_ {...field} placeholder="my_dataset" />
              </FormControl_Shadcn_>
            </FormItemLayout>
          )}
        />

        <FormField_Shadcn_
          control={form.control}
          name="serviceAccountKey"
          render={({ field }) => (
            <FormItemLayout
              layout="horizontal"
              label="Service Account Key"
              description="Service account credentials JSON for authenticating with BigQuery"
            >
              <FormControl_Shadcn_>
                <TextArea_Shadcn_
                  {...field}
                  rows={5}
                  maxLength={5000}
                  placeholder='{"type": "service_account", "project_id": "...", ...}'
                  className="font-mono text-xs"
                />
              </FormControl_Shadcn_>
            </FormItemLayout>
          )}
        />
      </div>
    </div>
  )
}