# Add Connection Modal (`addconnector-01`) - SignalOS page block

> Two-step modal for adding a data connector: select from available connectors or connect manually (step 1), then configure credentials and test the connection before saving (step 2).

- **Version:** 0.2.5
- **Kind:** block (group: reusable-components) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/addconnector-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/badge, @signalos/button, @signalos/checkbox, @signalos/dialog, @signalos/input, @signalos/label, @signalos/scroll-area, @signalos/select, @signalos/form-dialog
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/blocks/addconnector-01/AddConnectionModal.tsx`, `src/components/blocks/addconnector-01/AddConnectionModal.types.ts`, `src/components/blocks/addconnector-01/AddConnectionModal.utils.ts`, `src/components/blocks/addconnector-01/AddConnectionModal.constants.ts`, `src/components/blocks/addconnector-01/components/Step1ConnectorSelect.tsx`, `src/components/blocks/addconnector-01/components/Step2ConfigureForm.tsx`, `src/components/blocks/addconnector-01/components/Step2Footer.tsx`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
// after: npx shadcn@latest add @signalos/addconnector-01
// mount the pulled page in a route, e.g. src/app/reusable-components/page.tsx
import { AddConnectionModal } from "@/components/blocks/addconnector-01/AddConnectionModal"

export default function Page() {
  return <AddConnectionModal />
}
```

## Props

### `JSONSchemaPropertyLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `type` | `string \| undefined` | no | - |  |
| `title` | `string \| undefined` | no | - |  |
| `description` | `string \| undefined` | no | - |  |
| `default` | `unknown` | no | - |  |
| `order` | `number \| undefined` | no | - |  |
| `enum` | `string[] \| undefined` | no | - |  |
| `examples` | `unknown[] \| undefined` | no | - |  |
| `secret` | `boolean \| undefined` | no | - |  |

### `ConnectorSpecLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `metadata` | `{ name: string; version: string; description?: string \| undefined; protocol_version?: string \| undefined; }` | yes | - |  |
| `connection_specification` | `{ properties?: Record<string, JSONSchemaPropertyLike> \| undefined; required?: string[] \| undefined; } \| undefined` | no | - |  |

### `AvailableConnectorLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | yes | - |  |
| `url` | `string \| undefined` | no | - |  |
| `description` | `string \| undefined` | no | - |  |

### `TestConnectionResultLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `status` | `"SUCCEEDED" \| "FAILED"` | yes | - |  |
| `message` | `string \| undefined` | no | - |  |

### `ConfigFieldProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `fieldKey` | `string` | yes | - |  |
| `schema` | `JSONSchemaPropertyLike` | yes | - |  |
| `value` | `unknown` | yes | - |  |
| `onChange` | `(value: unknown) => void` | yes | - |  |
| `required` | `boolean \| undefined` | no | - |  |

### `AddConnectionModalProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `open` | `boolean` | yes | - |  |
| `onOpenChange` | `(open: boolean) => void` | yes | - |  |
| `step` | `1 \| 2` | yes | - |  |
| `connectorUrl` | `string` | yes | - |  |
| `connectionName` | `string` | yes | - |  |
| `purposeDetails` | `string` | yes | - |  |
| `availableConnectors` | `readonly AvailableConnectorLike[]` | yes | - |  |
| `currentSpec` | `ConnectorSpecLike \| null \| undefined` | no | - |  |
| `configValues` | `Record<string, unknown>` | yes | - |  |
| `testResult` | `TestConnectionResultLike \| null \| undefined` | no | - |  |
| `localError` | `string \| null \| undefined` | no | - |  |
| `isLoadingAvailable` | `boolean \| undefined` | no | - |  |
| `isLoadingSpec` | `boolean \| undefined` | no | - |  |
| `isTesting` | `boolean \| undefined` | no | - |  |
| `isCreating` | `boolean \| undefined` | no | - |  |
| `isLaunching` | `boolean \| undefined` | no | - |  |
| `skipPipelineLaunch` | `boolean \| undefined` | no | - |  |
| `step1Sections` | `FormSection[] \| undefined` | no | - | Override the sections rendered in step 1. When omitted the default connector-picker layout is used. |
| `step2Sections` | `FormSection[] \| undefined` | no | - | Override the sections rendered in step 2. When omitted the default config layout is used. |
| `getConnectorIcon` | `((connectorName: string) => ReactNode) \| undefined` | no | - |  |
| `onSelectConnector` | `(url: string, name: string) => void` | yes | - |  |
| `onManualConnect` | `() => void` | yes | - |  |
| `onBack` | `() => void` | yes | - |  |
| `onTestConnection` | `() => void` | yes | - |  |
| `onSaveConnection` | `() => void` | yes | - |  |
| `onConfigChange` | `(key: string, value: unknown) => void` | yes | - |  |
| `onConnectionNameChange` | `(value: string) => void` | yes | - |  |
| `onConnectorUrlChange` | `(value: string) => void` | yes | - |  |
| `onPurposeChange` | `(value: string) => void` | yes | - |  |
| `data-testid` | `string \| undefined` | no | - |  |

## Changelog

## 0.2.5

- Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

# addconnector-01
## 0.2.4
- format the code

## 0.2.3

- Refactor step 2 config field rendering to use `DynamicForm` from
  `@signalos/form-dialog`. The inline `ConfigField` component is removed;
  connector spec properties are mapped to `FieldConfig[]` via
  `schemaFieldToFieldConfig` and rendered through the shared field registry.
- Remove direct dependencies on `@signalos/checkbox` and `@signalos/select`
  (now provided transitively through `@signalos/form-dialog`).
- All existing `data-testid` attributes, behaviour, and visual output are
  unchanged.

## 0.1.1

- Post-initial content update.

## 0.1.0

- Initial release: two-step add-connection modal. Step 1 lists available connectors
  and a manual URL entry form. Step 2 renders the connector spec fields with test
  and save actions.