Implementation:ArroyoSystems Arroyo Define Schema Page

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, Connections
Last Updated	2026-02-08 08:00 GMT

Overview

A multi-format schema definition step in the connection creation wizard, allowing users to configure data format, framing, bad data handling, and schema type for connection tables.

Description

The DefineSchema component is the schema definition step of the connection creation wizard. It renders three form controls:

Framing -- Selects between None and Newline-delimited framing for how records are separated in input data.
Bad Data -- Selects between Fail (stop on bad data) and Drop (ignore bad data) behaviors.
Data format -- Selects from JSON, Avro, Raw String, Raw Bytes, or Protobuf.

Each data format delegates to a specialized sub-editor:

SchemaFormatEditor -- For JSON, Avro, and Protobuf. Allows selecting schema type (inferred, explicit schema, unstructured JSON, or Confluent Schema Registry when available). The Confluent option appears only when the connector is Kafka or Confluent and the connection profile has a schema registry configured.
RawStringEditor -- Sets up a single value column with string type.
RawBytesEditor -- Sets up a single value column with bytes type.

The component modifies the parent CreateConnectionState through the setState callback as the user makes selections.

Usage

Rendered as a step in the ConnectionCreator stepper component when the connector supports custom schemas (connector.custom_schemas === true).

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/connections/DefineSchema.tsx

Signature

export const DefineSchema: React.FC<{
  connector: Connector;
  state: CreateConnectionState;
  setState: Dispatch<CreateConnectionState>;
  next: () => void;
}>;

Import

import { DefineSchema } from './DefineSchema';

I/O Contract

Inputs

Name	Type	Required	Description
connector	Connector	Yes	The connector configuration including id and custom_schemas flag
state	CreateConnectionState	Yes	Current wizard state including schema, connectionProfileId, and table config
setState	Dispatch<CreateConnectionState>	Yes	Callback to update wizard state
next	() => void	Yes	Callback to advance to the next wizard step

Outputs

Name	Type	Description
Side effect	CreateConnectionState mutation	Updates state.schema with format, framing, bad_data, definition, and fields

Usage Examples

<DefineSchema
  connector={connector}
  state={state}
  setState={setState}
  next={() => setActiveStep(next)}
/>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment