Status Checks

The CI check list on a pull request. The summary states the blocking outcome rather than the raw tally, because "3 failing" says nothing about whether you can merge.

src/components/ui/status-checks.tsx

About

From the component's own source, where it was written.

The CI check list on a pull request.

The summary line states the *blocking* outcome, not the raw tally: a failing optional check and a failing required one produce very different sentences, and "3 failing" tells you nothing about whether you can merge. required is what decides that, so the rollup reads it rather than counting statuses.

Install

npx astralyx-ui add status-checks

Usage

import { StatusChecks } from '@/components/ui/status-checks'

<StatusChecks checks={checks} />

Composer

Change the props and the source below follows.

1 required check has failed6
  • buildvite build1m 12s
  • typecheck38s
  • test3 of 412 failing2m 04s
  • Runninglint
  • bundle-sizeover budget by 12 kB
  • visual-diff
Props
tsx
<StatusChecks checks={checks} />

Examples

Checks

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

StatusChecks

Extends ComponentProps<'div'>.

PropTypeDefaultDescription
checksStatusCheck[]required{ id, name, status, description?, duration?, required?, detail? }.
defaultExpandedstring[][]—
optionalLabelReactNode'optional'Marks a non-blocking check.

Types

StatusCheck

FieldTypeDescription
idstring—
namestring—
statusCheckStatusEach carries its own icon and colour, so the outcome never depends on colour alone.
description?string—
duration?string—
required?booleanOnly required failures make the rollup say the PR is blocked; optional ones are labelled and counted but do not.
detail?ReactNodeExpandable body — a log excerpt, usually. Checks without one show no disclosure control.
TypeDefinitionDescription
CheckStatus
'success' | 'failure' | 'pending' | 'running' | 'skipped'
The CI check list on a pull request.