Implementation:ArroyoSystems Arroyo Choose Connector Page
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, Connections |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
A connector selection page that displays available Arroyo connectors as a grid of cards, each showing the connector icon, name, type (source/sink), and a "Create" button.
Description
ChooseConnector fetches the list of available connectors via useConnectors and renders a responsive SimpleGrid of cards. Each card displays:
- A type badge at the top (source, sink, or source/sink).
- The connector's SVG icon rendered via a data URI.
- The connector name and description.
- A "Create" button that navigates to
/connections/new/{connector.id}.
Hidden connectors (where c.hidden === true) are filtered out. The page includes a breadcrumb trail (Connections > Create Connection) and clears navbar menu items on mount.
Usage
Rendered at the /connections/new route as the first step of the connection creation flow.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/routes/connections/ChooseConnector.tsx
Signature
export function ChooseConnector(): JSX.Element;
Import
import { ChooseConnector } from './ChooseConnector';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none) | N/A | N/A | Fetches connector list internally via useConnectors |
Outputs
| Name | Type | Description |
|---|---|---|
| Connector grid | React element | Responsive grid of connector cards with navigation to creation flow |
Usage Examples
<Route path="/connections/new" element={<ChooseConnector />} />
Related Pages
Page Connections
Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment