Scrum4Me/components/sprint/sprint-run-controls.tsx
Janpeter Visser d292e445d9
Sprint: Verbeteren debug mode (#179)
* feat(PBI-49): add debugProps helper + Vitest test

Adds lib/debug.ts with debugProps(id, component, file) that returns
data-debug-id and data-debug-label attrs in dev mode, empty object in
production. Adds __tests__/lib/debug.test.ts covering both modes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(PBI-49): add debug-id pattern doc + CLAUDE.md reference

Adds docs/patterns/debug-id.md documenting the named-component boundary
rule (6 punten), helper-voorbeeld, skip-criteria en motivatie voor
handmatige pad-argumenten. Voegt verwijzing toe aan CLAUDE.md
patterns-tabel.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor(PBI-49): migrate 17 shared/ components to debugProps helper

Replace hardcoded data-debug-id + data-debug-label attribute pairs with
{...debugProps(id, component, file)} spread in all 17 components/shared/
files. Existing debug-ids preserved unchanged.

* feat(PBI-49): add debugProps to backlog/, sprint/, solo/ components

* feat(PBI-49): add debugProps to jobs/ + ideas/ components

* feat(PBI-49): add debugProps to products/ + settings/ + notifications/ components

* feat(PBI-49): add debugProps to admin/ + dashboard/ + dialogs/ + mobile/ + split-pane/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(PBI-49): use attr(data-debug-id) for debug tooltip in globals.css

* refactor(PBI-49): remove data-debug-label from debugProps helper + test

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor(PBI-49): strip unused component/file args from debugProps in shared/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to StatusBar, NavBar, PanelNavBar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/sprint/*

- new-sprint-dialog: __submit on submit button
- sprint-backlog: __list on SprintBacklogLeft + SprintBacklogRight scroll areas
- sprint-board-client: root wrapper div (display:contents) + __drag-overlay
- sprint-header: __title on goal button, __dates on dates button, __actions on action cluster
- sprint-run-controls: root on controls div, __start/__cancel on action buttons; __blockers-dialog on dialog content
- start-sprint-button: root on trigger button, __dialog on dialog content, __submit on submit button
- sync-active-sprint-cookie: no debug-id (returns null, side-effect only), comment added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/backlog/*

* feat(PBI-49): add BEM sub-element data-debug-id to components/ideas/*

* feat(PBI-49): add BEM sub-element data-debug-id to components/dashboard/* + components/markdown.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to new-product-button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/solo/*

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-elements to nav-status-indicators

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/jobs/*

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to components/products/*

* feat(PBI-49): add BEM sub-element data-debug-id to components/notifications/*

- answer-modal: __content (scroll area), __submit (footer)
- notifications-bridge: skip comment (bridge, non-rendering wrapper)
- notifications-realtime-mount: skip comment (returns null)
- notifications-sheet: __header, __items (questions list)
- push-toggle: __switch (button), __label (button text) on subscribed/unsubscribed states

* feat(PBI-49): add BEM sub-element data-debug-id to components/settings/*

- leave-product-button: root only (single-button component)
- min-quota-editor: __input (number input), __save (save button)
- profile-editor: __username (bio/short-description input), __save (submit)
- role-manager: __roles (checkbox list), __add (save button)
- token-manager: __tokens (active tokens list), __generate (create button)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(PBI-49): add BEM sub-element data-debug-id to admin, auth, dialogs, entity-dialog, mobile, split-pane

* docs(PBI-49): add debug-labels BEM pattern doc + CLAUDE.md entry

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-09 22:46:29 +02:00

253 lines
7.6 KiB
TypeScript

'use client'
import { useState, useTransition } from 'react'
import { toast } from 'sonner'
import {
startSprintRunAction,
resumeSprintAction,
resumePausedSprintRunAction,
cancelSprintRunAction,
type PreFlightBlocker,
} from '@/actions/sprint-runs'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { type PauseContext, pauseReasonLabel } from '@/lib/pause-context'
type SprintStatusValue = 'OPEN' | 'CLOSED' | 'ARCHIVED' | 'FAILED'
type SprintRunStatusValue =
| 'QUEUED'
| 'RUNNING'
| 'PAUSED'
| 'DONE'
| 'FAILED'
| 'CANCELLED'
| null
interface Props {
sprintId: string
productId: string
sprintStatus: SprintStatusValue
activeSprintRunId: string | null
activeSprintRunStatus: SprintRunStatusValue
pauseContext: PauseContext | null
isDemo: boolean
}
const BLOCKER_LABELS: Record<PreFlightBlocker['type'], string> = {
task_no_plan: 'Task zonder implementation plan',
open_question: 'Openstaande vraag aan jou',
pbi_blocked: 'PBI is geblokkeerd of gefaald',
task_cross_repo: 'Task met afwijkende repo (niet toegestaan in SPRINT_BATCH)',
}
function blockerHref(productId: string, blocker: PreFlightBlocker): string {
switch (blocker.type) {
case 'task_no_plan':
return `/products/${productId}/sprint?editTask=${blocker.id}`
case 'open_question':
return `/products/${productId}/sprint`
case 'pbi_blocked':
return `/products/${productId}`
case 'task_cross_repo':
return `/products/${productId}/sprint?editTask=${blocker.id}`
}
}
export function SprintRunControls({
sprintId,
productId,
sprintStatus,
activeSprintRunId,
activeSprintRunStatus,
pauseContext,
isDemo,
}: Props) {
const [pending, startTransition] = useTransition()
const [blockers, setBlockers] = useState<PreFlightBlocker[] | null>(null)
const hasActiveRun =
activeSprintRunId !== null &&
(activeSprintRunStatus === 'QUEUED' ||
activeSprintRunStatus === 'RUNNING' ||
activeSprintRunStatus === 'PAUSED')
const canStart = sprintStatus === 'OPEN' && !hasActiveRun
const canResume = sprintStatus === 'FAILED'
const canResumePaused =
activeSprintRunStatus === 'PAUSED' && pauseContext !== null
const canCancel = hasActiveRun
function handleStart() {
startTransition(async () => {
const result = await startSprintRunAction({ sprint_id: sprintId })
if (result.ok) {
toast.success(`Sprint gestart (${result.jobs_count} taak(s) klaar)`)
} else if (result.error === 'PRE_FLIGHT_BLOCKED' && 'blockers' in result) {
setBlockers(result.blockers)
} else {
toast.error(result.error)
}
})
}
function handleResume() {
startTransition(async () => {
const result = await resumeSprintAction({ sprint_id: sprintId })
if (result.ok) {
toast.success(`Sprint hervat (${result.jobs_count} taak(s) klaar)`)
} else if (result.error === 'PRE_FLIGHT_BLOCKED' && 'blockers' in result) {
setBlockers(result.blockers)
} else {
toast.error(result.error)
}
})
}
function handleResumePaused() {
if (!activeSprintRunId || !pauseContext) return
if (
!confirm(
`Sprint hervatten? Bevestig dat het ${pauseReasonLabel(
pauseContext.pause_reason,
).toLowerCase()} is opgelost.`,
)
)
return
startTransition(async () => {
const result = await resumePausedSprintRunAction({
sprint_run_id: activeSprintRunId,
})
if (result.ok) toast.success('Sprint hervat')
else toast.error(result.error)
})
}
function handleCancel() {
if (!activeSprintRunId) return
if (!confirm('Sprint annuleren? Openstaande taken blijven TO_DO.')) return
startTransition(async () => {
const result = await cancelSprintRunAction({ sprint_run_id: activeSprintRunId })
if (result.ok) toast.success('Sprint geannuleerd')
else toast.error(result.error)
})
}
return (
<>
{canResumePaused && pauseContext && (
<div className="rounded-md border border-warning/40 bg-warning-container/20 p-3 mb-2">
<div className="text-xs uppercase tracking-wide text-on-warning-container">
Gepauzeerd: {pauseReasonLabel(pauseContext.pause_reason)}
</div>
<a
href={pauseContext.pr_url}
target="_blank"
rel="noreferrer"
className="text-sm text-primary hover:underline break-all"
>
{pauseContext.pr_url}
</a>
{pauseContext.conflict_files.length > 0 && (
<ul className="mt-1 text-xs text-muted-foreground">
{pauseContext.conflict_files.slice(0, 5).map((f) => (
<li key={f}>· {f}</li>
))}
{pauseContext.conflict_files.length > 5 && (
<li>· + {pauseContext.conflict_files.length - 5} meer</li>
)}
</ul>
)}
<Button
size="sm"
onClick={handleResumePaused}
disabled={pending || isDemo}
className="text-xs mt-2"
>
Hervat gepauzeerde sprint
</Button>
</div>
)}
<div className="flex items-center gap-2" data-debug-id="sprint-run-controls">
{canStart && (
<Button
size="sm"
onClick={handleStart}
disabled={pending || isDemo}
className="text-xs"
data-debug-id="sprint-run-controls__start"
>
Start Sprint
</Button>
)}
{canResume && (
<Button
size="sm"
onClick={handleResume}
disabled={pending || isDemo}
variant="default"
className="text-xs"
data-debug-id="sprint-run-controls__start"
>
Hervat sprint
</Button>
)}
{canCancel && (
<Button
size="sm"
onClick={handleCancel}
disabled={pending || isDemo}
variant="outline"
className="text-xs"
data-debug-id="sprint-run-controls__cancel"
>
Annuleer sprint-run
</Button>
)}
</div>
<Dialog open={blockers !== null} onOpenChange={(open) => { if (!open) setBlockers(null) }}>
<DialogContent className="max-w-lg" data-debug-id="sprint-run-controls__blockers-dialog">
<DialogHeader>
<DialogTitle>Sprint kan nog niet starten</DialogTitle>
<DialogDescription>
Los eerst onderstaande punten op. Klik op een item om er direct naar
te navigeren.
</DialogDescription>
</DialogHeader>
<ul className="flex flex-col gap-2 max-h-80 overflow-y-auto">
{blockers?.map((b, i) => (
<li
key={`${b.type}-${b.id}-${i}`}
className="rounded-md border border-border bg-surface-container-low px-3 py-2"
>
<div className="text-xs uppercase tracking-wide text-muted-foreground">
{BLOCKER_LABELS[b.type]}
</div>
<a
href={blockerHref(productId, b)}
className="text-sm text-primary hover:underline break-words"
>
{b.label}
</a>
</li>
))}
</ul>
<DialogFooter>
<Button variant="outline" onClick={() => setBlockers(null)}>
Sluit
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}