Implementation:ArroyoSystems Arroyo Connection Tester

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

Overview

The final step of the connection creation wizard that validates the connection name, runs a test via SSE, displays test results, and submits the connection table to the API.

Description

ConnectionTester handles naming, testing, and creating a connection table. It provides:

Name input -- Validates that the connection name is a valid SQL table name (/^[_a-zA-Z][a-zA-Z0-9_]*$/) with real-time validation feedback.
Test button -- Triggers an SSE-based connection test via useConnectionTableTest. Test progress messages are displayed as stacked alerts (info/error/success).
Create button -- Appears after testing completes. If the test had errors, a confirmation AlertDialog warns the user before creating.
API submission -- Calls POST /v1/connection_tables with the assembled ConnectionTablePost payload and navigates to /connections on success.

The component strips the __meta key from the table config before submission.

Usage

Rendered as the final step in the ConnectionCreator stepper.

Code Reference

Source Location

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

Signature

export function ConnectionTester(props: {
  connector: Connector;
  state: CreateConnectionState;
  setState: Dispatch<CreateConnectionState>;
}): JSX.Element;

Import

import { ConnectionTester } from './ConnectionTester';

I/O Contract

Inputs

Name	Type	Required	Description
connector	Connector	Yes	Connector metadata (provides connector.id)
state	CreateConnectionState	Yes	Wizard state with table config, schema, name, and connectionProfileId
setState	Dispatch<CreateConnectionState>	Yes	Callback to update wizard state (name changes)

Outputs

Name	Type	Description
Navigation	Side effect	Navigates to /connections on successful creation
API call	Side effect	POST /v1/connection_tables to create the connection table

Usage Examples

<ConnectionTester connector={connector} state={state} setState={setState} />

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment