sdxc
SearchCtrlK

  • ↑↓navigate
  • ↵open
  • escclose
sdxc

Can’t find it? Contact us

On this page

CheckRuns

The checks on a commit or pull request.

1 failing, 3 successful, and 1 skipped checks
View code
tsx
<CheckRuns
	locale="en"
	runs={[
		{ name: "test (ubuntu-latest)", workflow: "CI / pull_request", state: "failure", duration: "3m 41s", href: "/acme/delta/actions/runs/8812/job/2" },
		{ name: "lint", workflow: "CI / pull_request", state: "success", duration: "48s", href: "/acme/delta/actions/runs/8812/job/1" },
		{ name: "typecheck", workflow: "CI / pull_request", state: "success", duration: "1m 12s", href: "/acme/delta/actions/runs/8812/job/3" },
		{ name: "build (node 22)", workflow: "CI / pull_request", state: "success", duration: "2m 05s", href: "/acme/delta/actions/runs/8812/job/4" },
		{ name: "preview deploy", workflow: "Deploy / pull_request", state: "skipped", href: "/acme/delta/actions/runs/8813/job/1" },
	]}
	labels={{
		counts: {
			failure: (n) => `${n} failing`,
			pending: (n) => `${n} pending`,
			success: (n) => `${n} successful`,
			skipped: (n) => `${n} skipped`,
			cancelled: (n) => `${n} cancelled`,
		},
		summary: (list, total) => `${list} ${total === 1 ? "check" : "checks"}`,
		states: { failure: "Failed", pending: "In progress", success: "Passed", skipped: "Skipped", cancelled: "Cancelled" },
		details: "Details",
		empty: "No checks",
	}}
/>

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal
npm add @sdxc/ui remix
typescript
import "@sdxc/ui/theme.css";

Usage

typescript
import { CheckRuns } from "@sdxc/ui/app";

Renders the summary sentence as the <summary> of a <details> that lists every run, failed ones first, opening on its own when a run failed. It is complete as server HTML: the native disclosure needs no island, and it reads only the theme's shared tokens.

Examples

While checks are running

2 pending and 2 successful checks
View code
tsx
<CheckRuns
	locale="en"
	runs={[
		{ name: "lint", workflow: "CI / push", state: "success", duration: "51s", href: "…" },
		{ name: "test (ubuntu-latest)", workflow: "CI / push", state: "pending", href: "…" },
		{ name: "test (windows-latest)", workflow: "CI / push", state: "pending", href: "…" },
		{ name: "typecheck", workflow: "CI / push", state: "success", duration: "1m 09s", href: "…" },
	]}
	labels={labels}
/>

Every check passed

24 successful checks
View code
tsx
<CheckRuns runs={runs} locale="en" labels={labels} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

PropTypeRequiredDescription
runsreadonly Run[]YesEvery run in any order; the part sorts them failures first.
labelsLabelsYesThe strings the summary, icons and links show, so the part reads in any language.
localestringNoLocale the counts are joined in ("1 failing, 1 pending and 22 successful").
openbooleanNoWhether the list starts open. Unset, it opens exactly when a run failed, so the failure is on screen and a green list stays one line.

Also accepts everything in Omit<TagProps<"details">, "children" | "open">.

Types

NameValuesWhat it decides
State"success" | "failure" | "pending" | "skipped" | "cancelled"Where one run stands; failure reads danger, pending warning, success success.

Other components this module publishes.

  • sortCheckRuns
  • checkRunsSummary
  • CheckRunIcon
Use caseKeep the product upAPIs, dashboards, and background jobs.SaaS →
@sdxc/ui

Can’t find it? Contact us