Implementation:ArroyoSystems Arroyo Create Connection Page

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

Overview

A multi-step connection creation wizard page that orchestrates profile configuration, table configuration, schema definition, and connection testing through a stepper interface.

Description

This module exports two components:

ConnectionCreator -- The stepper wizard that dynamically assembles steps based on connector capabilities:

Configure profile (optional) -- Shown only if the connector has a connection_config. Renders ConfigureProfile.
Configure table -- Always shown. Renders ConfigureConnection for table-specific settings.
Define schema (optional) -- Shown only if connector.custom_schemas === true. Renders DefineSchema.
Create -- Always the final step. Renders ConnectionTester for naming, testing, and submitting.

The stepper uses Chakra UI's Stepper component with clickable back-navigation (can click completed steps). State is managed in a CreateConnectionState object containing name, connectionProfileId, table config, and schema.

CreateConnection -- The route-level wrapper that reads the :connectorId URL param, resolves the connector from useConnectors, and renders ConnectionCreator with breadcrumb navigation. Redirects to /connections/new if the connector is not found.

Usage

Rendered at the /connections/new/:connectorId route.

Code Reference

Source Location

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

Signature

export type CreateConnectionState = {
  name: string | undefined;
  connectionProfileId: string | null;
  table: any;
  schema: ConnectionSchema | null;
};

export const ConnectionCreator: React.FC<{ connector: Connector }>;
export const CreateConnection: React.FC;

Import

import { CreateConnection, CreateConnectionState } from './CreateConnection';

I/O Contract

Inputs

Name	Type	Required	Description
URL param :connectorId	string	Yes	Connector ID from route parameters

Outputs

Name	Type	Description
Wizard	React element	Multi-step connection creation stepper
Navigation	Side effect	Redirects to /connections/new if connector not found

Usage Examples

<Route path="/connections/new/:connectorId" element={<CreateConnection />} />

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment