Implementation:ArroyoSystems Arroyo Create Profile Page

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

Overview

A connection profile creation form that validates the profile configuration against the backend, with a two-phase workflow (Validate then Create) and a confirmation dialog for invalid profiles.

Description

CreateProfile renders a JsonForm driven by the connector's connection_config JSON Schema. It implements a two-phase submit flow:

Validate phase -- On first submit, calls POST /v1/connection_profiles/test to validate the profile. On success, shows a toast and changes the button to "Create" (green). On failure, shows the error and changes button to "Create" (red).
Create phase -- On second submit, if the profile was validated successfully, directly creates via POST /v1/connection_profiles. If validation failed, shows a confirmation AlertDialog warning the user before creating.

The button text and color dynamically change: "Validate" (blue) -> "Create" (green on success, red on failure). Form changes reset the validation state. On successful creation, calls addConnectionProfile and next(id) callbacks to advance the wizard.

Usage

Rendered within ConfigureProfile when the user chooses to create a new connection profile.

Code Reference

Source Location

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

Signature

export const CreateProfile: React.FC<{
  connector: Connector;
  addConnectionProfile: (c: ConnectionProfile) => void;
  next: (id: string) => void;
}>;

Import

import { CreateProfile } from './CreateProfile';

I/O Contract

Inputs

Name	Type	Required	Description
connector	Connector	Yes	Connector with connection_config JSON Schema string
addConnectionProfile	(c: ConnectionProfile) => void	Yes	Callback to add the new profile to the list
next	(id: string) => void	Yes	Callback to advance with the new profile's ID

Outputs

Name	Type	Description
API calls	Side effect	POST /v1/connection_profiles/test and POST /v1/connection_profiles

Usage Examples

<CreateProfile
  connector={connector}
  addConnectionProfile={c => mutateConnectionProfiles()}
  next={id => {
    setState({ ...state, connectionProfileId: id });
    onSubmit();
  }}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment