Connectors 01 - Connection list

v0.3.3

Generic connector/connection list page composed from List View: status, resource count, inline error, and an overflow actions menu per row.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/connectors-list-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/badge, @signalos/button, @signalos/checkbox, @signalos/dropdown-menu, @signalos/icon-button, @signalos/input, @signalos/list-view, @signalos/page-header, @signalos/select, @signalos/form-dialog) into your app - you own the copy. Requires access.

usage

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

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

Props

ConnectorListItemAction

Prop	Type	Default
label*	`string`	-
icon	`ReactNode`	-
destructive	`boolean \| undefined`	-
disabled	`boolean \| undefined`	-
onSelect*	`() => void`	-

ConnectorLike

Prop	Type	Default
id*	`string`	-
name*	`string`	-
subtitle	`ReactNode`	-
icon	`ReactNode`	-
status*	`ConnectorListItemStatus`	-
statusLabel	`string \| undefined`	-
resourceCount	`number \| undefined`	-
errorMessage	`string \| undefined`	-

ConnectorsList01Props

Prop	Type	Default	Description
title	`ReactNode`	"Data Connector Hub"
description	`ReactNode`	"Unified interface for managing ingestion streams, cloud integrations, and Enterprise Resource Planning connections."
connectors*	`readonly TConnector[]`	-
loading	`boolean \| undefined`	-
error	`boolean \| undefined`	-
errorMessage	`ReactNode`	-
selectedId	`string \| null \| undefined`	-
onSelect	`((connector: TConnector) => void) \| undefined`	-
getActions	`((connector: TConnector) => ConnectorListItemAction[]) \| undefined`	-
disabledIds	`readonly string[] \| undefined`	-
emptyTitle	`ReactNode`	-
emptyDescription	`ReactNode`	-
className	`string \| undefined`	-
onConnectNew	`(() => void) \| undefined`	-	Called when the "Connect New Source" header button is pressed. Use this when the caller owns the flow it opens (dialog, route, drawer). Fires in addition to opening the embedded dialog when `addConnection` is also set. The button renders disabled when neither this nor `addConnection` is provided.
onRefresh	`((connector: TConnector) => void) \| undefined`	-	Per-row refresh handler. When provided each row renders a refresh icon button that emits the connector; when omitted the button is not rendered.
addConnection	`(Omit<AddConnectionModalProps, "open" \| "onOpenChange"> & { onOpenChange?: ((open: boolean) => void) \| undefined; }) \| undefined`	-	When provided, enables the "Connect New Source" button and renders the embedded `AddConnectionModal`, forwarding these props verbatim. The block owns only the dialog's open/close state - all data fetching and submission logic stays with the caller.
data-testid	`string \| undefined`	-

Supporting types

export type ConnectorListItemStatus =
  "active" | "inactive" | "error" | "discovering"

More Connectors variants

Connectors 01 - Connection detail

Changelog

0.3.3

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

connectors-list-01

0.3.2

Add optional title and description overrides so consumers can replace the hardcoded page copy, and a data-testid passthrough on the page header title. Defaults preserve the previous copy exactly, so this is additive.

0.3.1

Update data-testid call sites for the renamed prop.

0.3.0

Merge the two add-connection lineages into one coherent API: onConnectNew (event only - the caller owns the flow) and addConnection (renders the embedded AddConnectionModal) now work independently or together. The header button is enabled when either is provided.
Fix the 0.1.2 release regression: restore the onRefresh(connector) signature (a duplicate onRefresh(id) declaration broke the build) and the conditional per-row refresh button with its testid and corrected "refresh" label.
Title styling now comes from page-header defaults (local override removed).
Source formatted with the repo prettier config.

0.1.2

(Mis-versioned release - should have been 0.2.1.) Add an optional addConnection prop: when provided, renders the "Connect New Source" button and an AddConnectionModal built on the reusable @signalos/form-dialog. The block owns only the dialog's open/close state - all connector data fetching and submission logic stays with the caller.
Fix AddConnectionModal to render from the currentSpec prop instead of a hardcoded FHIR connector spec, and remove leftover debug logging.

0.2.0

Add onConnectNew - the "Connect New Source" button emits a click event and renders disabled when the callback is omitted. Button gains data-testid="connect-new-source-button".
Add onRefresh(connector) - each row renders a refresh icon button that emits the connector. When omitted the refresh button is not rendered.
Fix refresh button accessible label typo ("refersh" → "refresh").

0.1.1

Content sync fix to bring source in line with published registry payload.

0.1.0

Initial release: connector list page composed from the shared list-view widget. Renders connector rows with status, resource count, inline error, and an overflow actions menu.