chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/procedural-editor/StepEditor.tsx
View File

@@ -6,7 +6,7 @@ import { FallbackSteps } from '@/components/procedural/FallbackSteps'
const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
{ value: 'action', label: 'Action', color: 'text-blue-400' },
{ value: 'informational', label: 'Info', color: 'text-muted-foreground' },
{ value: 'informational', label: 'Info', color: 'text-[#848b9b]' },
{ value: 'verification', label: 'Verify', color: 'text-emerald-400' },
{ value: 'warning', label: 'Warning', color: 'text-yellow-400' },
]
@@ -25,24 +25,24 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
// Section header steps get a minimal editor
if (step.type === 'section_header') {
return (
<div className="bg-card border border-border rounded-xl p-4">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
<div className="mb-4 flex items-center justify-between">
<span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
<span className="text-sm font-medium text-[#848b9b]">Edit Section Header</span>
<button
onClick={onCollapse}
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<ChevronUp className="h-4 w-4" />
</button>
</div>
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Title</label>
<input
type="text"
value={step.title}
onChange={(e) => onUpdate({ title: e.target.value })}
placeholder="Section title"
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
</div>
@@ -50,18 +50,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
}
return (
<div className="bg-card border border-border rounded-xl p-4">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
{/* Header */}
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground">
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-[#e2e5eb]">
{stepNumber}
</span>
<span className="text-sm font-medium text-foreground">Edit Step</span>
<span className="text-sm font-medium text-[#e2e5eb]">Edit Step</span>
</div>
<button
onClick={onCollapse}
className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<ChevronUp className="h-4 w-4" />
</button>
@@ -70,18 +70,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
<div className="space-y-4">
{/* Title */}
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Title</label>
<input
type="text"
value={step.title}
onChange={(e) => onUpdate({ title: e.target.value })}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
{/* Est. Minutes */}
<div className="w-40">
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
<Clock className="h-3 w-3" />
Est. Minutes
</label>
@@ -91,28 +91,28 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
placeholder="—"
min={1}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
{/* Description */}
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Description / Instructions</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Description / Instructions</label>
<textarea
value={step.description || ''}
onChange={(e) => onUpdate({ description: e.target.value })}
placeholder="Step instructions. Use [VAR:name] for variables."
rows={4}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
{availableVariables.length > 0 && (
<div className="mt-1 flex flex-wrap gap-1">
<span className="text-[10px] text-muted-foreground">Variables:</span>
<span className="text-[10px] text-[#848b9b]">Variables:</span>
{availableVariables.map((v) => (
<button
key={v.variable_name}
onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground"
className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
>
{v.variable_name}
</button>
@@ -123,7 +123,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
{/* Commands */}
<div>
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
<Terminal className="h-3 w-3" />
Commands (optional)
</label>
@@ -132,7 +132,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
rows={3}
className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 font-mono text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
@@ -140,7 +140,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
<button
type="button"
onClick={() => setShowMore(!showMore)}
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground"
className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#848b9b]"
>
<Settings2 className="h-3 w-3" />
More Options
@@ -148,10 +148,10 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
</button>
{showMore && (
<div className="space-y-4 border-t border-border pt-4">
<div className="space-y-4 border-t border-[#1e2130] pt-4">
{/* Content Type */}
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Content Type</label>
<div className="flex gap-1">
{CONTENT_TYPE_OPTIONS.map((opt) => (
<button
@@ -161,7 +161,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
'rounded px-2 py-1 text-xs font-medium transition-colors',
step.content_type === opt.value
? 'bg-white/15 ' + opt.color
: 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
: 'text-[#848b9b] hover:bg-accent hover:text-[#848b9b]'
)}
>
{opt.label}
@@ -182,27 +182,27 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
placeholder="Caution: This will restart the service..."
rows={2}
className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
/>
</div>
)}
{/* Expected Outcome */}
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Expected Outcome (optional)</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Expected Outcome (optional)</label>
<input
type="text"
value={step.expected_outcome || ''}
onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
placeholder="Server should respond with..."
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
{/* Verification */}
<div className="grid grid-cols-2 gap-3">
<div>
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
<CheckSquare className="h-3 w-3" />
Verification Prompt (optional)
</label>
@@ -211,15 +211,15 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
value={step.verification_prompt || ''}
onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
placeholder="Confirm the role was installed"
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
<div>
<label className="mb-1 block text-xs font-medium text-muted-foreground">Verification Type</label>
<label className="mb-1 block text-xs font-medium text-[#848b9b]">Verification Type</label>
<select
value={step.verification_type || ''}
onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
>
<option value="">None</option>
<option value="checkbox">Checkbox (confirm done)</option>
@@ -231,7 +231,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
{/* Reference URL + Notes toggle */}
<div className="grid grid-cols-2 gap-3">
<div>
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
<label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
<ExternalLink className="h-3 w-3" />
Reference URL (optional)
</label>
@@ -240,16 +240,16 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
value={step.reference_url || ''}
onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
placeholder="https://learn.microsoft.com/..."
className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
/>
</div>
<div className="flex items-end pb-1">
<label className="flex items-center gap-2 text-sm text-muted-foreground">
<label className="flex items-center gap-2 text-sm text-[#848b9b]">
<input
type="checkbox"
checked={step.notes_enabled !== false}
onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
className="rounded border-border"
className="rounded border-[#1e2130]"
/>
Allow tech notes
</label>
@@ -258,7 +258,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
{/* Library Visibility — procedure_step nodes only */}
{step.type === 'procedure_step' && <div>
<label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-muted-foreground">
<label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
Library Visibility
</label>
<select
@@ -267,13 +267,13 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
onChange={(e) => onUpdate({
library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
})}
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
>
<option value="">Inherit from flow</option>
<option value="team">Team only</option>
<option value="public">Public</option>
</select>
<p className="mt-1 text-[10px] text-muted-foreground">
<p className="mt-1 text-[10px] text-[#848b9b]">
Controls visibility in the step library. Defaults to the flow's own visibility setting.
</p>
</div>}