|
| 1 | +import { cn } from '@sim/emcn' |
| 2 | +import { EmptyState } from '@/components/empty-state/empty-state' |
| 3 | +import { HAIRLINE } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/hairline' |
| 4 | +import { MASK_NO_REPEAT } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/mask' |
| 5 | + |
| 6 | +/** |
| 7 | + * Skeleton ink — see the `INK` note in `tables-empty-state.tsx` for why not the surface |
| 8 | + * ramp. `mark` is the tables selection ring's opaque mix, so a status glyph reads as |
| 9 | + * drawn rather than as more placeholder. |
| 10 | + */ |
| 11 | +const INK = { |
| 12 | + title: 'color-mix(in srgb, var(--text-secondary) 30%, transparent)', |
| 13 | + detail: 'color-mix(in srgb, var(--text-secondary) 15%, transparent)', |
| 14 | + mark: 'color-mix(in srgb, var(--text-secondary) 46%, var(--bg))', |
| 15 | +} as const |
| 16 | + |
| 17 | +/** The logs feed's falloff — a run report is the same repeating structure. */ |
| 18 | +const REPORT_FADE = |
| 19 | + '[-webkit-mask-image:linear-gradient(to_bottom,#000_44%,transparent_100%)] [mask-image:linear-gradient(to_bottom,#000_44%,transparent_100%)]' |
| 20 | + |
| 21 | +type TestStatus = 'pass' | 'fail' |
| 22 | + |
| 23 | +interface ReportRow { |
| 24 | + status: TestStatus |
| 25 | + title: number |
| 26 | + detail: number |
| 27 | +} |
| 28 | + |
| 29 | +/** |
| 30 | + * The failure sits second, inside the fade's opaque head, so the one row held in a card |
| 31 | + * never dissolves mid-stroke. |
| 32 | + */ |
| 33 | +const ROWS: readonly ReportRow[] = [ |
| 34 | + { status: 'pass', title: 72, detail: 110 }, |
| 35 | + { status: 'fail', title: 64, detail: 124 }, |
| 36 | + { status: 'pass', title: 80, detail: 96 }, |
| 37 | + { status: 'pass', title: 58, detail: 116 }, |
| 38 | +] as const |
| 39 | + |
| 40 | +const ROW_PITCH = 38 |
| 41 | +const BADGE_RADIUS = 8 |
| 42 | +const GLYPH = BADGE_RADIUS * 0.42 |
| 43 | + |
| 44 | +const MARK_STROKE = { |
| 45 | + stroke: INK.mark, |
| 46 | + strokeWidth: 1.4, |
| 47 | + strokeLinecap: 'round', |
| 48 | + strokeLinejoin: 'round', |
| 49 | +} as const |
| 50 | + |
| 51 | +interface StatusBadgeProps { |
| 52 | + cx: number |
| 53 | + cy: number |
| 54 | + status: TestStatus |
| 55 | +} |
| 56 | + |
| 57 | +/** A pass ticks on a hairline ring; a fail crosses on the heavier ring it shares with its card. */ |
| 58 | +function StatusBadge({ cx, cy, status }: StatusBadgeProps) { |
| 59 | + const glyph = |
| 60 | + status === 'pass' |
| 61 | + ? `M ${cx - GLYPH} ${cy} L ${cx - GLYPH * 0.25} ${cy + GLYPH * 0.75} L ${cx + GLYPH} ${cy - GLYPH * 0.7}` |
| 62 | + : `M ${cx - GLYPH * 0.75} ${cy - GLYPH * 0.75} L ${cx + GLYPH * 0.75} ${cy + GLYPH * 0.75} M ${cx + GLYPH * 0.75} ${cy - GLYPH * 0.75} L ${cx - GLYPH * 0.75} ${cy + GLYPH * 0.75}` |
| 63 | + return ( |
| 64 | + <g> |
| 65 | + <circle |
| 66 | + cx={cx} |
| 67 | + cy={cy} |
| 68 | + r={BADGE_RADIUS} |
| 69 | + fill='var(--surface-2)' |
| 70 | + stroke={status === 'pass' ? 'var(--border)' : INK.mark} |
| 71 | + strokeWidth={status === 'pass' ? HAIRLINE.strokeWidth : 1.5} |
| 72 | + /> |
| 73 | + <path d={glyph} {...MARK_STROKE} /> |
| 74 | + </g> |
| 75 | + ) |
| 76 | +} |
| 77 | + |
| 78 | +/** A test run report: passing rows, the one failure held in a card like the logs feed's latest run. */ |
| 79 | +function TestsGraphic() { |
| 80 | + return ( |
| 81 | + <svg |
| 82 | + viewBox='0 0 286 148' |
| 83 | + width={286} |
| 84 | + height={148} |
| 85 | + fill='none' |
| 86 | + aria-hidden='true' |
| 87 | + focusable='false' |
| 88 | + className={cn('block max-w-none shrink-0', REPORT_FADE, MASK_NO_REPEAT)} |
| 89 | + > |
| 90 | + {ROWS.map((row, index) => { |
| 91 | + const y = 6 + index * ROW_PITCH |
| 92 | + return ( |
| 93 | + <g key={y}> |
| 94 | + {row.status === 'fail' ? ( |
| 95 | + <rect |
| 96 | + x='0.5' |
| 97 | + y={y - 2} |
| 98 | + width='285' |
| 99 | + height='36' |
| 100 | + rx='8' |
| 101 | + fill='var(--surface-2)' |
| 102 | + {...HAIRLINE} |
| 103 | + /> |
| 104 | + ) : null} |
| 105 | + <StatusBadge cx={22} cy={y + 16} status={row.status} /> |
| 106 | + <rect x='40' y={y + 8} width={row.title} height='6' rx='3' fill={INK.title} /> |
| 107 | + <rect x='40' y={y + 20} width={row.detail} height='4' rx='2' fill={INK.detail} /> |
| 108 | + <rect x='236' y={y + 13} width='30' height='5' rx='2.5' fill={INK.detail} /> |
| 109 | + </g> |
| 110 | + ) |
| 111 | + })} |
| 112 | + </svg> |
| 113 | + ) |
| 114 | +} |
| 115 | + |
| 116 | +/** Empty state for a workspace with no tests yet. */ |
| 117 | +export function TestsEmptyState() { |
| 118 | + return ( |
| 119 | + <EmptyState |
| 120 | + graphic={<TestsGraphic />} |
| 121 | + title='Tests' |
| 122 | + description='Write tests to check your workflows behave before you deploy.' |
| 123 | + /> |
| 124 | + ) |
| 125 | +} |
0 commit comments