Connectors 01 - Connection detail

v0.2.1

Generic connector/connection detail page composed from Split Panel, Tabs, and Status Badge: header with status and actions, a catalog tab (resource browser + schema/actions), and a config tab.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/connectors-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/confirm-dialog, @signalos/badge, @signalos/button, @signalos/card, @signalos/input, @signalos/skeleton, @signalos/table, @signalos/tabs, @signalos/split-panel, @signalos/status-badge, @signalos/data-primitives) into your app - you own the copy. Requires access.

usage

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

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

Props

ConnectorDetailField

Prop	Type	Default
id*	`string`	-
label*	`ReactNode`	-
value*	`ReactNode`	-
mono	`boolean \| undefined`	-

ConnectorResourceField

Prop	Type	Default
type*	`string`	-
format	`string \| undefined`	-
nullable	`boolean \| undefined`	-

ConnectorResourceAction

Prop	Type	Default
description	`ReactNode`	-
outputType	`string \| undefined`	-
idempotent	`boolean \| undefined`	-

ConnectorResourceLike

Prop	Type	Default
name*	`string`	-
namespace	`string \| null \| undefined`	-
type	`string \| null \| undefined`	-
description	`string \| null \| undefined`	-
schemaProperties	`Record<string, ConnectorResourceField> \| null \| undefined`	-
actions	`Record<string, ConnectorResourceAction> \| undefined`	-
metadata	`Record<string, unknown> \| null \| undefined`	-

ConnectorLike

Prop	Type	Default
id*	`string`	-
name*	`string`	-
url	`string \| null \| undefined`	-
status	`string \| undefined`	-
statusLabel	`ReactNode`	-
version	`string \| null \| undefined`	-
connectorName	`string \| null \| undefined`	-
errorMessage	`ReactNode`	-
configFields	`readonly ConnectorDetailField[] \| undefined`	-
capabilityFields	`readonly ConnectorDetailField[] \| undefined`	-

ConnectorsDetail01Tab

Prop	Type	Default
id*	`string`	-
label*	`ReactNode`	-
content*	`ReactNode`	-

ConnectorsDetail01Props

Prop	Type	Default	Description
connection*	`TConnection \| null`	-	The connection being displayed. `null` while unresolved.
resources	`readonly TResource[] \| undefined`	-	Discovered resources/catalog entries for this connection.
loading	`boolean \| undefined`	-
error	`boolean \| undefined`	-
errorMessage	`ReactNode`	-
selectedResourceName	`string \| null \| undefined`	-
onSelectResource	`((name: string) => void) \| undefined`	-
onBack	`(() => void) \| undefined`	-
onRefresh	`(() => void) \| undefined`	-
onRetry	`(() => void) \| undefined`	-
onDelete	`(() => void) \| undefined`	-
isRefreshing	`boolean \| undefined`	-
isDeleting	`boolean \| undefined`	-
extraTabs	`readonly ConnectorsDetail01Tab[] \| undefined`	-	Extra tabs appended after the built-in Catalog / Config tabs.
className	`string \| undefined`	-
data-testid	`string \| undefined`	-

More Connectors variants

Connectors 01 - Connection list

Changelog

connectors-01

0.2.1

Update data-testid call sites for the renamed prop.

0.2.0

Decompose the 618-line block: header (breadcrumb, status, actions, error banner) moves to components/DetailHeader.tsx, the catalog split view to components/CatalogTab.tsx, and the resource pane to components/ResourceDetail.tsx.
Section labels now use the shared SectionLabel from @signalos/data-primitives instead of a local re-implementation.
Status dots/badges and error surfaces move to semantic status tokens (bg-status-*, bg-bg-*, text-text-*, border-border-*); the non-token amber-* classes are gone, so client theme overrides now restyle every status color.

0.1.2

Replaced the inline AlertDialog delete-confirmation with the shared ConfirmDialog widget for consistency across blocks.
Content sync fix to bring source in line with published registry payload.

0.1.0

Initial release: connector/connection detail page composed from the shared split-panel, tabs, and status-badge widgets. Header with status/actions, a catalog tab (resource browser + schema/actions), and a config tab.