IntegrationsGrid

Connected apps as cards: their state, one line, one action.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Input, IntegrationsGrid, Toaster } from '@weft-js/warp'import type { Integration } from '@weft-js/warp'export function Workspace() {  const items = state<readonly Integration[]>(INTEGRATIONS)  const mark = (id: string, next: Partial<Integration>) => (items.value = items.value.map(i => (i.id === id ? { ...i, ...next } : i)))  const connect = async (item: Integration) => {    mark(item.id, { state: 'pending' })    await wait(1200)    mark(item.id, { state: 'connected', detail: 'weft-dev', failure: undefined })  }  return (    <>      <IntegrationsGrid        items={items}        onConnect={item => void connect(item)}        onDisconnect={item => mark(item.id, { state: 'off' })}        onRestore={item => mark(item.id, { state: 'connected' })}        settings={item => <Input label="Channel or team" defaultValue={item.detail} />}      />      <Toaster />    </>  )}const INTEGRATIONS: Integration[] = [  { id: 'github', name: 'GitHub', summary: 'Deploy on push, status checks on pull requests.', state: 'connected', detail: 'weft-dev · 10 repositories', can: ['Read your repositories', 'Post commit statuses'] },  { id: 'slack', name: 'Slack', summary: 'Deploy and incident messages in a channel.', state: 'error', detail: 'Token expired Oct 26', failure: 'Messages to #deploys stopped on Oct 26.', can: ['Post to the channel you pick'] },  { id: 'linear', name: 'Linear', summary: 'Link deploys to the issues they close.', state: 'off', can: ['Read your issues', 'Comment on issues'] },  { id: 'datadog', name: 'Datadog', summary: 'Mark deploys on your dashboards.', state: 'off', can: ['Send events to your account'] },  { id: 'pagerduty', name: 'PagerDuty', summary: 'Page the on-call person when a deploy fails.', state: 'off', can: ['Open incidents'] },  { id: 'sentry', name: 'Sentry', summary: 'Tie new errors to the deploy that caused them.', state: 'connected', detail: 'weft · 4 projects', can: ['Read releases'] },]const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

import { IntegrationsGrid } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`items`	`readonly Integration[] \| State<readonly Integration[]>`	—	The integrations, as a state, so `state` can change.
`settings`	`((item: Integration) => unknown)`	—	The fields in the Configure drawer.

Event	Type	Default	Description
`onConnect`	`(item: Integration) => void`	—	Send people to the provider's consent page.
`onSave`	`((item: Integration) => void)`	—	Saves the drawer.
`onDisconnect`	`(item: Integration) => void`	—	Disconnects.
`onRestore`	`((item: Integration) => void)`	—	Undo for a disconnect.

RelatedWebhooks