Add Connection Modal

v0.2.5

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).

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/addconnector-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/badge, @signalos/button, @signalos/checkbox, @signalos/dialog, @signalos/input, @signalos/label, @signalos/scroll-area, @signalos/select, @signalos/form-dialog) into your app - you own the copy. Requires access.

usage

// 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	Default
type	`string \| undefined`	-
title	`string \| undefined`	-
description	`string \| undefined`	-
default	`unknown`	-
order	`number \| undefined`	-
enum	`string[] \| undefined`	-
examples	`unknown[] \| undefined`	-
secret	`boolean \| undefined`	-

ConnectorSpecLike

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

AvailableConnectorLike

Prop	Type	Default
name*	`string`	-
url	`string \| undefined`	-
description	`string \| undefined`	-

TestConnectionResultLike

Prop	Type	Default	Description
status*	`"SUCCEEDED" \| "FAILED"`	-
message	`string \| undefined`	-

ConfigFieldProps

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

AddConnectionModalProps

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

More Reusable Components variants

Add Custom Model Dialog Create Pipeline Wizard

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.