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

fix: help_text ordering and Input component usage in scripts components

Browse Source 
- ScriptParameterField: extract error <p> from select/boolean input blocks and remove error prop from Input/Textarea components so all types render help_text before error via unified bottom rendering
- ScriptFilterBar: replace native <input> with shared <Input> component from @/components/ui/Input, preserving search icon via absolute positioning wrapper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-13 02:18:13 -04:00
parent 43bccf9af1
commit 69404e0e12
2 changed files with 35 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/scripts/ScriptFilterBar.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { Search } from 'lucide-react' import { Search } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { Input } from '@/components/ui/Input'
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore' import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
interface Props { interface Props {
@@ -61,13 +62,13 @@ export function ScriptFilterBar({ inputValue, setInputValue }: Props) {
{/* Search input */} {/* Search input */}
<div className="relative ml-auto"> <div className="relative ml-auto">
<Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" /> <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none z-10" />
<input <Input
type="text" type="text"
value={inputValue} value={inputValue}
onChange={e => setInputValue(e.target.value)} onChange={e => setInputValue(e.target.value)}
placeholder="Search templates…" placeholder="Search templates..."
className="pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)] w-52" className="pl-8 w-52"
/> />
</div> </div>
</div> </div>

67
frontend/src/components/scripts/ScriptParameterField.tsx
View File

@@ -41,7 +41,6 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
: (param.placeholder ?? undefined) : (param.placeholder ?? undefined)
} }
disabled={disabled} disabled={disabled}
error={error}
/> />
) )
} else if (param.type === 'password') { } else if (param.type === 'password') {
@@ -54,7 +53,6 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
onChange={handleChange} onChange={handleChange}
placeholder={param.placeholder ?? undefined} placeholder={param.placeholder ?? undefined}
disabled={disabled} disabled={disabled}
error={error}
/> />
<button <button
type="button" type="button"
@@ -75,48 +73,41 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
onChange={handleChange} onChange={handleChange}
placeholder={param.placeholder ?? undefined} placeholder={param.placeholder ?? undefined}
disabled={disabled} disabled={disabled}
error={error}
rows={4} rows={4}
/> />
) )
} else if (param.type === 'select') { } else if (param.type === 'select') {
input = ( input = (
<> <select
<select id={id}
id={id} value={value}
value={value} onChange={handleChange}
onChange={handleChange} disabled={disabled}
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"
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>
<option value="">Select…</option> {(param.options ?? []).map(opt => (
{(param.options ?? []).map(opt => ( <option key={opt.value} value={opt.value}>
<option key={opt.value} value={opt.value}> {opt.label}
{opt.label} </option>
</option> ))}
))} </select>
</select>
{error && <p className="mt-1.5 text-xs text-red-400">{error}</p>}
</>
) )
} else if (param.type === 'boolean') { } else if (param.type === 'boolean') {
input = ( input = (
<> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <input
<input id={id}
id={id} type="checkbox"
type="checkbox" checked={value === 'true'}
checked={value === 'true'} onChange={handleCheckbox}
onChange={handleCheckbox} disabled={disabled}
disabled={disabled} className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50"
className="rounded border-border disabled:cursor-not-allowed disabled:opacity-50" />
/> <label htmlFor={id} className="text-sm text-foreground">
<label htmlFor={id} className="text-sm text-foreground"> {param.label}
{param.label} </label>
</label> </div>
</div>
{error && <p className="mt-1.5 text-xs text-red-400">{error}</p>}
</>
) )
} else { } else {
// Fallback for unknown types // Fallback for unknown types
@@ -126,7 +117,6 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
value={value} value={value}
onChange={handleChange} onChange={handleChange}
disabled={disabled} disabled={disabled}
error={error}
/> />
) )
} }
@@ -146,6 +136,9 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
{param.help_text && ( {param.help_text && (
<p className="text-xs text-muted-foreground mt-1">{param.help_text}</p> <p className="text-xs text-muted-foreground mt-1">{param.help_text}</p>
)} )}
{error && (
<p className="mt-1.5 text-xs text-red-400">{error}</p>
)}
</div> </div>
) )
} }