feat: Script Generator Phase 1+2 — backend, engine, API, frontend, template editor, parameter detector
Complete Script Generator feature including: Backend: - ScriptCategory, ScriptTemplate, ScriptGeneration models - ScriptTemplateEngine with substitution, filters, sanitization - CRUD + share API endpoints with permission checks - Integration tests for permissions and sharing - Migration 057 with AD User Management seed templates Frontend — Script Library: - Browse templates with category tabs and search - Configure pane with parameter form and script generation - Script preview with live substitution and copy/download - scriptGeneratorStore Zustand store Frontend — Template Editor: - Full CRUD form with metadata, script body (Monaco Editor), parameters - ParameterSchemaBuilder with visual builder + JSON toggle - ScriptManagePage with routing and nav link Frontend — Parameter Detector: - Client-side PowerShell parameter detection engine - Detects script-level param() blocks and variable assignments - Type inference from PS type annotations and value patterns - ParameterDetectorStepper one-by-one review UI with accept/skip Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit was merged in pull request #105.
This commit is contained in:
chihlasm
317
frontend/src/components/script-editor/ParameterCard.tsx
Normal file
317
frontend/src/components/script-editor/ParameterCard.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import { useState } from 'react'
|
||||
import { ChevronDown, ChevronRight, GripVertical, Trash2, Plus, X } from 'lucide-react'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import type { ScriptParameter, ScriptParameterOption, ScriptParameterValidation } from '@/types'
|
||||
|
||||
const PARAM_TYPES = [
|
||||
{ value: 'text', label: 'Text' },
|
||||
{ value: 'password', label: 'Password' },
|
||||
{ value: 'textarea', label: 'Textarea' },
|
||||
{ value: 'number', label: 'Number' },
|
||||
{ value: 'boolean', label: 'Boolean' },
|
||||
{ value: 'select', label: 'Select' },
|
||||
{ value: 'multi_text', label: 'Multi-text' },
|
||||
] as const
|
||||
|
||||
interface Props {
|
||||
param: ScriptParameter
|
||||
index: number
|
||||
onChange: (index: number, updated: ScriptParameter) => void
|
||||
onRemove: (index: number) => void
|
||||
onMoveUp: (index: number) => void
|
||||
onMoveDown: (index: number) => void
|
||||
isFirst: boolean
|
||||
isLast: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export function ParameterCard({
|
||||
param, index, onChange, onRemove, onMoveUp, onMoveDown, isFirst, isLast, disabled,
|
||||
}: Props) {
|
||||
const [expanded, setExpanded] = useState(true)
|
||||
|
||||
const update = (patch: Partial<ScriptParameter>) => {
|
||||
onChange(index, { ...param, ...patch })
|
||||
}
|
||||
|
||||
const updateOption = (optIndex: number, patch: Partial<ScriptParameterOption>) => {
|
||||
const options = [...(param.options ?? [])]
|
||||
options[optIndex] = { ...options[optIndex], ...patch }
|
||||
update({ options })
|
||||
}
|
||||
|
||||
const addOption = () => {
|
||||
const options = [...(param.options ?? []), { value: '', label: '' }]
|
||||
update({ options })
|
||||
}
|
||||
|
||||
const removeOption = (optIndex: number) => {
|
||||
const options = (param.options ?? []).filter((_, i) => i !== optIndex)
|
||||
update({ options })
|
||||
}
|
||||
|
||||
const updateValidation = (patch: Partial<ScriptParameterValidation>) => {
|
||||
update({ validation: { ...(param.validation ?? {}), ...patch } })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border border-border rounded-xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded(v => !v)}
|
||||
className="w-full flex items-center gap-2 px-3 py-2.5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors"
|
||||
>
|
||||
<GripVertical size={14} className="text-muted-foreground/50 shrink-0" />
|
||||
{expanded ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
|
||||
<span className="text-sm font-medium text-foreground flex-1 text-left">
|
||||
{param.label || param.key || `Parameter ${index + 1}`}
|
||||
</span>
|
||||
<span className="font-label text-[0.625rem] text-muted-foreground uppercase">{param.type}</span>
|
||||
{param.required && <span className="text-red-400 text-xs">*</span>}
|
||||
</button>
|
||||
|
||||
{/* Body */}
|
||||
{expanded && (
|
||||
<div className="px-3 py-3 space-y-3 border-t border-border">
|
||||
{/* Row 1: key + label */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Key (used in {{key}})</label>
|
||||
<Input
|
||||
value={param.key}
|
||||
onChange={e => update({ key: e.target.value.replace(/[^a-zA-Z0-9_]/g, '') })}
|
||||
placeholder="param_key"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Label</label>
|
||||
<Input
|
||||
value={param.label}
|
||||
onChange={e => update({ label: e.target.value })}
|
||||
placeholder="Display Label"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: type + group */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Type</label>
|
||||
<select
|
||||
value={param.type}
|
||||
onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
|
||||
disabled={disabled}
|
||||
className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{PARAM_TYPES.map(t => (
|
||||
<option key={t.value} value={t.value}>{t.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Group (optional)</label>
|
||||
<Input
|
||||
value={param.group ?? ''}
|
||||
onChange={e => update({ group: e.target.value || null })}
|
||||
placeholder="e.g. User Identity"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: placeholder + help text */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Placeholder</label>
|
||||
<Input
|
||||
value={param.placeholder ?? ''}
|
||||
onChange={e => update({ placeholder: e.target.value || null })}
|
||||
placeholder="Placeholder text"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Help text</label>
|
||||
<Input
|
||||
value={param.help_text ?? ''}
|
||||
onChange={e => update({ help_text: e.target.value || null })}
|
||||
placeholder="Help text shown below field"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 4: toggles */}
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex items-center gap-2 text-sm text-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={param.required}
|
||||
onChange={e => update({ required: e.target.checked })}
|
||||
disabled={disabled}
|
||||
className="rounded border-border"
|
||||
/>
|
||||
Required
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={param.sensitive}
|
||||
onChange={e => update({ sensitive: e.target.checked })}
|
||||
disabled={disabled}
|
||||
className="rounded border-border"
|
||||
/>
|
||||
Sensitive (redacted in logs)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Default value */}
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Default value</label>
|
||||
<Input
|
||||
value={param.default !== null && param.default !== undefined ? String(param.default) : ''}
|
||||
onChange={e => update({ default: e.target.value || null })}
|
||||
placeholder="Default value"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Select options (only for select type) */}
|
||||
{param.type === 'select' && (
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Options</label>
|
||||
<div className="space-y-1.5">
|
||||
{(param.options ?? []).map((opt, i) => (
|
||||
<div key={i} className="flex items-center gap-2">
|
||||
<Input
|
||||
value={opt.value}
|
||||
onChange={e => updateOption(i, { value: e.target.value })}
|
||||
placeholder="value"
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Input
|
||||
value={opt.label}
|
||||
onChange={e => updateOption(i, { label: e.target.value })}
|
||||
placeholder="label"
|
||||
disabled={disabled}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeOption(i)}
|
||||
disabled={disabled}
|
||||
className="p-1 text-muted-foreground hover:text-rose-500 transition-colors"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={addOption}
|
||||
disabled={disabled}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:underline"
|
||||
>
|
||||
<Plus size={12} /> Add option
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Validation (for text/number types) */}
|
||||
{(param.type === 'text' || param.type === 'number' || param.type === 'textarea') && (
|
||||
<div>
|
||||
<label className="text-xs text-muted-foreground mb-1 block">Validation (optional)</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{param.type === 'number' ? (
|
||||
<>
|
||||
<div>
|
||||
<label className="text-[0.625rem] text-muted-foreground">Min value</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={param.validation?.min_value ?? ''}
|
||||
onChange={e => updateValidation({ min_value: e.target.value ? Number(e.target.value) : undefined })}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[0.625rem] text-muted-foreground">Max value</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={param.validation?.max_value ?? ''}
|
||||
onChange={e => updateValidation({ max_value: e.target.value ? Number(e.target.value) : undefined })}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<label className="text-[0.625rem] text-muted-foreground">Min length</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={param.validation?.min_length ?? ''}
|
||||
onChange={e => updateValidation({ min_length: e.target.value ? Number(e.target.value) : undefined })}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[0.625rem] text-muted-foreground">Max length</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={param.validation?.max_length ?? ''}
|
||||
onChange={e => updateValidation({ max_length: e.target.value ? Number(e.target.value) : undefined })}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<label className="text-[0.625rem] text-muted-foreground">Pattern (regex)</label>
|
||||
<Input
|
||||
value={param.validation?.pattern ?? ''}
|
||||
onChange={e => updateValidation({ pattern: e.target.value || undefined })}
|
||||
placeholder="^[a-z]+$"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions row */}
|
||||
<div className="flex items-center justify-between pt-1 border-t border-border">
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onMoveUp(index)}
|
||||
disabled={isFirst || disabled}
|
||||
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
|
||||
>
|
||||
↑ Up
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onMoveDown(index)}
|
||||
disabled={isLast || disabled}
|
||||
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
|
||||
>
|
||||
↓ Down
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemove(index)}
|
||||
disabled={disabled}
|
||||
className="flex items-center gap-1 text-xs text-rose-500 hover:text-rose-400 transition-colors px-1.5 py-0.5"
|
||||
>
|
||||
<Trash2 size={12} /> Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user