Implementation:ArroyoSystems Arroyo Configure Profile Page

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

Overview

A connection profile selection and creation step in the connection wizard that lets users choose an existing connection profile or create a new one.

Description

ConfigureProfile manages the connection profile step of the connection creation flow. It has two modes:

Selection mode (default) -- Renders ClusterChooser which displays a list of existing connection profiles (filtered by connector type) as selectable bordered cards. Each card shows the profile name and description, with info and delete icon buttons. Users can select a profile and click Continue, or click "Create new" to switch to creation mode. The info button opens a ClusterViewerModal showing the profile configuration in a read-only JsonForm.

Creation mode -- Renders the CreateProfile component for defining a new connection profile, with a "Select existing" back button.

Profile deletion is handled inline with toast notifications for success/error feedback.

Usage

Rendered as the first step in the ConnectionCreator stepper when the connector has a connection_config.

Code Reference

Source Location

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

Signature

export const ConfigureProfile: React.FC<{
  connector: Connector;
  onSubmit: () => void;
  state: CreateConnectionState;
  setState: (s: CreateConnectionState) => void;
}>;

Import

import { ConfigureProfile } from './ConfigureProfile';

I/O Contract

Inputs

Name	Type	Required	Description
connector	Connector	Yes	Connector with connection_config JSON Schema
onSubmit	() => void	Yes	Callback to advance to next wizard step
state	CreateConnectionState	Yes	Current wizard state
setState	(s: CreateConnectionState) => void	Yes	Callback to update wizard state with selected connectionProfileId

Outputs

Name	Type	Description
Side effect	CreateConnectionState mutation	Sets state.connectionProfileId when a profile is selected or created

Usage Examples

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

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment