ui: full IdeaRowActions with disabled-rules + tooltips (M12 T-508)
components/ideas/idea-row-actions.tsx — replaces T-507 placeholder:
- Grill Me: disabled in GRILLING/PLANNING/PLANNED, requires
product-with-repo + connectedWorkers > 0; tooltip shows specific reason
("Grill loopt al", "Idee heeft een product met repo nodig", "Geen
Claude-worker actief")
- Make Plan: enabled only in GRILLED/PLAN_FAILED/PLAN_READY; same
prerequisites as Grill
- Materialiseer: enabled only in PLAN_READY (no worker needed — synchrone
server-side parser); confirm-dialog before action; navigates to product
backlog PBI anchor on success
- *_FAILED: dedicated "Probeer opnieuw" rotate-icon button
- PLANNED: replaces all three with "Bekijk {PBI-code}" link + open-detail
- Demo: every mutating button wrapped in DemoTooltip with disabled state
- connectedWorkers read directly via useSoloStore (per M12 grill-keuze 16)
Tests: 546/546 still green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
2eb0f33068
commit
a1d3a83af5
1 changed files with 247 additions and 10 deletions
|
|
@ -1,16 +1,46 @@
|
|||
'use client'
|
||||
|
||||
// IdeaRowActions — placeholder shell voor M12 T-507. De volledige
|
||||
// disabled-rules + Grill/Make-Plan/Materialiseer-knoppen komen in T-508.
|
||||
// IdeaRowActions — Grill Me / Make Plan / Materialiseer / Archive / Open.
|
||||
// Disabled-rules per M12 T-508:
|
||||
//
|
||||
// Voor nu: alleen een "Open" link en een Archive-knop, zodat de lijst
|
||||
// compileert en navigatie + archief al werken.
|
||||
// Grill Me: niet in GRILLING|PLANNING; vereist product-met-repo +
|
||||
// connectedWorkers > 0
|
||||
// Make Plan: alleen in GRILLED|PLAN_FAILED|PLAN_READY (re-plan); idem
|
||||
// voorwaarden
|
||||
// Materialiseer: alleen in PLAN_READY (geen worker nodig — synchrone parser)
|
||||
// PLANNED: alle drie disabled, "Bekijk PBI" link
|
||||
// *_FAILED: "Probeer opnieuw" knop (= start-job opnieuw)
|
||||
//
|
||||
// Demo-tooltip om elke muteer-knop. connectedWorkers wordt gelezen uit
|
||||
// useSoloStore (M12 grill-keuze 16 — geen lift voor v1).
|
||||
|
||||
import { useTransition } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Archive, ArrowRight } from 'lucide-react'
|
||||
import {
|
||||
Archive,
|
||||
ArrowRight,
|
||||
ExternalLink,
|
||||
Flame,
|
||||
Layers,
|
||||
RotateCw,
|
||||
Sparkles,
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { useSoloStore } from '@/stores/solo-store'
|
||||
import {
|
||||
startGrillJobAction,
|
||||
startMakePlanJobAction,
|
||||
materializeIdeaPlanAction,
|
||||
} from '@/actions/ideas'
|
||||
import type { IdeaDto } from '@/lib/idea-dto'
|
||||
|
||||
interface IdeaRowActionsProps {
|
||||
|
|
@ -21,23 +51,175 @@ interface IdeaRowActionsProps {
|
|||
|
||||
export function IdeaRowActions({ idea, isDemo, onArchive }: IdeaRowActionsProps) {
|
||||
const router = useRouter()
|
||||
const connectedWorkers = useSoloStore((s) => s.connectedWorkers)
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
const hasProductWithRepo = idea.product != null && idea.product.repo_url !== null
|
||||
const workerOk = connectedWorkers > 0
|
||||
const status = idea.status
|
||||
|
||||
// ---- Grill Me ----
|
||||
const grillBlockedReason = (() => {
|
||||
if (status === 'grilling' || status === 'planning') return 'Job loopt al'
|
||||
if (status === 'planned') return 'Idee is gepland — open de PBI'
|
||||
if (!hasProductWithRepo) return 'Idee heeft een product met repo nodig'
|
||||
if (!workerOk) return 'Geen Claude-worker actief'
|
||||
return null
|
||||
})()
|
||||
const grillEnabled = !grillBlockedReason && !isDemo && !pending
|
||||
|
||||
// ---- Make Plan ----
|
||||
const makePlanAllowedStates = ['grilled', 'plan_failed', 'plan_ready']
|
||||
const makePlanBlockedReason = (() => {
|
||||
if (!makePlanAllowedStates.includes(status)) {
|
||||
if (status === 'draft' || status === 'grill_failed') return 'Eerst grillen'
|
||||
if (status === 'grilling' || status === 'planning') return 'Job loopt al'
|
||||
if (status === 'planned') return 'Idee is gepland — open de PBI'
|
||||
return null
|
||||
}
|
||||
if (!hasProductWithRepo) return 'Idee heeft een product met repo nodig'
|
||||
if (!workerOk) return 'Geen Claude-worker actief'
|
||||
return null
|
||||
})()
|
||||
const makePlanEnabled = !makePlanBlockedReason && !isDemo && !pending
|
||||
|
||||
// ---- Materialiseer ----
|
||||
const materializeBlockedReason = (() => {
|
||||
if (status !== 'plan_ready') return 'Plan is niet klaar'
|
||||
return null
|
||||
})()
|
||||
const materializeEnabled = !materializeBlockedReason && !isDemo && !pending
|
||||
|
||||
// ---- Failed-states tonen "Probeer opnieuw" ----
|
||||
const isFailedState = status === 'grill_failed' || status === 'plan_failed'
|
||||
|
||||
function runStart(action: typeof startGrillJobAction | typeof startMakePlanJobAction) {
|
||||
startTransition(async () => {
|
||||
const r = await action(idea.id)
|
||||
if ('error' in r) {
|
||||
toast.error(r.error)
|
||||
return
|
||||
}
|
||||
toast.success('Job in de wachtrij — een worker pakt hem op.')
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
function handleMaterialize() {
|
||||
if (!confirm('Plan materialiseren? Dit maakt PBI + stories + taken aan.')) return
|
||||
startTransition(async () => {
|
||||
const r = await materializeIdeaPlanAction(idea.id)
|
||||
if ('error' in r) {
|
||||
toast.error(r.error)
|
||||
return
|
||||
}
|
||||
toast.success(`Gematerialiseerd als ${r.data?.pbi_code}`)
|
||||
// Navigeer naar de nieuwe PBI in de product-backlog
|
||||
if (r.data?.pbi_id && idea.product_id) {
|
||||
router.push(`/products/${idea.product_id}/backlog#pbi-${r.data.pbi_code}`)
|
||||
} else {
|
||||
router.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// PLANNED-state: kortere variant met "Bekijk PBI"-link
|
||||
if (status === 'planned' && idea.pbi && idea.product_id) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
router.push(`/products/${idea.product_id}/backlog#pbi-${idea.pbi!.code}`)
|
||||
}
|
||||
>
|
||||
Bekijk {idea.pbi.code}
|
||||
<ExternalLink className="ml-1 size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/ideas/${idea.id}`)}
|
||||
aria-label="Open idee"
|
||||
title="Open idee"
|
||||
>
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Grill Me */}
|
||||
<ActionButton
|
||||
label="Grill"
|
||||
icon={<Flame className="size-3.5" />}
|
||||
enabled={grillEnabled}
|
||||
blockedReason={grillBlockedReason}
|
||||
isDemo={isDemo}
|
||||
onClick={() => runStart(startGrillJobAction)}
|
||||
/>
|
||||
|
||||
{/* Make Plan */}
|
||||
<ActionButton
|
||||
label="Plan"
|
||||
icon={<Sparkles className="size-3.5" />}
|
||||
enabled={makePlanEnabled}
|
||||
blockedReason={makePlanBlockedReason}
|
||||
isDemo={isDemo}
|
||||
onClick={() => runStart(startMakePlanJobAction)}
|
||||
/>
|
||||
|
||||
{/* Materialiseer */}
|
||||
<ActionButton
|
||||
label="Maak PBI"
|
||||
icon={<Layers className="size-3.5" />}
|
||||
enabled={materializeEnabled}
|
||||
blockedReason={materializeBlockedReason}
|
||||
isDemo={isDemo}
|
||||
onClick={handleMaterialize}
|
||||
variant="default"
|
||||
/>
|
||||
|
||||
{/* Failed-states: kleine retry-shortcut */}
|
||||
{isFailedState && (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={isDemo || pending || !workerOk || !hasProductWithRepo}
|
||||
onClick={() =>
|
||||
runStart(
|
||||
status === 'grill_failed' ? startGrillJobAction : startMakePlanJobAction,
|
||||
)
|
||||
}
|
||||
title="Probeer opnieuw"
|
||||
>
|
||||
<RotateCw className="size-3.5" />
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
)}
|
||||
|
||||
{/* Open detail */}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/ideas/${idea.id}`)}
|
||||
aria-label="Open idee"
|
||||
title="Open idee"
|
||||
>
|
||||
Open
|
||||
<ArrowRight className="ml-1 size-3.5" />
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
|
||||
{/* Archive */}
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onArchive}
|
||||
disabled={isDemo}
|
||||
disabled={isDemo || pending}
|
||||
aria-label="Archiveer idee"
|
||||
title="Archiveer"
|
||||
>
|
||||
|
|
@ -47,3 +229,58 @@ export function IdeaRowActions({ idea, isDemo, onArchive }: IdeaRowActionsProps)
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ActionButtonProps {
|
||||
label: string
|
||||
icon: React.ReactNode
|
||||
enabled: boolean
|
||||
blockedReason: string | null
|
||||
isDemo: boolean
|
||||
onClick: () => void
|
||||
variant?: 'default' | 'outline'
|
||||
}
|
||||
|
||||
function ActionButton({
|
||||
label,
|
||||
icon,
|
||||
enabled,
|
||||
blockedReason,
|
||||
isDemo,
|
||||
onClick,
|
||||
variant = 'outline',
|
||||
}: ActionButtonProps) {
|
||||
// Bij demo: DemoTooltip toont reden. Bij niet-demo + reden: gewone tooltip.
|
||||
if (isDemo) {
|
||||
return (
|
||||
<DemoTooltip show>
|
||||
<Button size="sm" variant={variant} disabled>
|
||||
{icon}
|
||||
<span className="ml-1">{label}</span>
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
)
|
||||
}
|
||||
|
||||
if (!enabled && blockedReason) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger render={<span className="inline-flex" />}>
|
||||
<Button size="sm" variant={variant} disabled>
|
||||
{icon}
|
||||
<span className="ml-1">{label}</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{blockedReason}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Button size="sm" variant={variant} onClick={onClick}>
|
||||
{icon}
|
||||
<span className="ml-1">{label}</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue