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
156
frontend/src/components/scripts/ScriptParameterField.tsx
Normal file
156
frontend/src/components/scripts/ScriptParameterField.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useState } from 'react'
|
||||
import { Eye, EyeOff } from 'lucide-react'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
|
||||
import type { ScriptParameter } from '@/types'
|
||||
|
||||
interface Props {
|
||||
param: ScriptParameter
|
||||
value: string
|
||||
error: string | undefined
|
||||
disabled: boolean
|
||||
}
|
||||
|
||||
export function ScriptParameterField({ param, value, error, disabled }: Props) {
|
||||
const setParamValue = useScriptGeneratorStore(s => s.setParamValue)
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
|
||||
const id = `param-${param.key}`
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setParamValue(param.key, e.target.value)
|
||||
}
|
||||
|
||||
const handleCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setParamValue(param.key, e.target.checked ? 'true' : 'false')
|
||||
}
|
||||
|
||||
let input: React.ReactNode
|
||||
|
||||
// Track whether the shared Input/Textarea component renders the error internally
|
||||
// (so we skip the manual <p> at the bottom for these types)
|
||||
let errorRenderedByComponent = false
|
||||
|
||||
if (param.type === 'text' || param.type === 'multi_text' || param.type === 'number') {
|
||||
errorRenderedByComponent = true
|
||||
input = (
|
||||
<Input
|
||||
id={id}
|
||||
type={param.type === 'number' ? 'number' : 'text'}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={
|
||||
param.type === 'multi_text'
|
||||
? 'Comma-separated values'
|
||||
: (param.placeholder ?? undefined)
|
||||
}
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
/>
|
||||
)
|
||||
} else if (param.type === 'password') {
|
||||
errorRenderedByComponent = true
|
||||
input = (
|
||||
<div className="relative">
|
||||
<Input
|
||||
id={id}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={param.placeholder ?? undefined}
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(v => !v)}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
tabIndex={-1}
|
||||
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||
>
|
||||
{showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
} else if (param.type === 'textarea') {
|
||||
errorRenderedByComponent = true
|
||||
input = (
|
||||
<Textarea
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder={param.placeholder ?? undefined}
|
||||
disabled={disabled}
|
||||
rows={4}
|
||||
error={error}
|
||||
/>
|
||||
)
|
||||
} else if (param.type === 'select') {
|
||||
input = (
|
||||
<select
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
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"
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{(param.options ?? []).map(opt => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
} else if (param.type === 'boolean') {
|
||||
input = (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
checked={value === 'true'}
|
||||
onChange={handleCheckbox}
|
||||
disabled={disabled}
|
||||
className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50"
|
||||
/>
|
||||
<label htmlFor={id} className="text-sm text-foreground">
|
||||
{param.label}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
// Fallback for unknown types
|
||||
errorRenderedByComponent = true
|
||||
input = (
|
||||
<Input
|
||||
id={id}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// Boolean renders its own label inline; all others show the label above
|
||||
const showTopLabel = param.type !== 'boolean'
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
{showTopLabel && (
|
||||
<label htmlFor={id} className="text-sm font-medium text-foreground">
|
||||
{param.label}
|
||||
{param.required && <span className="text-red-400 ml-0.5">*</span>}
|
||||
</label>
|
||||
)}
|
||||
{input}
|
||||
{param.help_text && (
|
||||
<p className="text-xs text-muted-foreground mt-1">{param.help_text}</p>
|
||||
)}
|
||||
{!errorRenderedByComponent && error && (
|
||||
<p className="mt-1.5 text-xs text-red-400">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user