fix: unique reference for filter items

This commit is contained in:
Carlos Valente
2025-02-18 11:51:34 +01:00
committed by Carlos Valente
parent 1636745fed
commit 636f78e21e
@@ -181,7 +181,7 @@ export default function AutomationForm(props: AutomationFormProps) {
</div> </div>
<div className={style.innerSection}> <div className={style.innerSection}>
<h3>Filters</h3> <h3>Filters (optional)</h3>
<div className={style.ruleSection}> <div className={style.ruleSection}>
<label> <label>
Trigger outputs if Trigger outputs if
@@ -196,74 +196,80 @@ export default function AutomationForm(props: AutomationFormProps) {
)} )}
/> />
</label> </label>
{fieldFilters.map((field, index) => ( {fieldFilters.map((field, index) => {
<div key={field.id} className={style.filterSection}> const key = `filters.${index}.field.${field.id}`;
<label> return (
Runtime data source <div key={key} className={style.filterSection}>
<Select <label>
{...register(`filters.${index}.field`, { required: { value: true, message: 'Required field' } })} Runtime data source
size='sm' <Select
variant='ontime' {...register(`filters.${index}.field`, { required: { value: true, message: 'Required field' } })}
> size='sm'
<option selected hidden disabled value=''> variant='ontime'
Event field >
</option> <option selected hidden disabled value=''>
{fieldList.map(({ value, label }) => ( Event field
<option key={value} value={value}>
{label}
</option> </option>
))} {fieldList.map(({ value, label }, localIndex) => {
</Select> const key = `filters.${index}.field.${localIndex}`;
<Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error> return (
</label> <option key={key} value={value}>
<label> {label}
Matching condition </option>
<Select );
{...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })} })}
size='sm' </Select>
variant='ontime' <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
> </label>
<option selected hidden disabled value=''> <label>
Operator Matching condition
</option> <Select
<option value='equals'>equals</option> {...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })}
<option value='not_equals'>not equals</option> size='sm'
<option value='contains'>contains</option> variant='ontime'
{/* >
<option selected hidden disabled value=''>
Operator
</option>
<option value='equals'>equals</option>
<option value='not_equals'>not equals</option>
<option value='contains'>contains</option>
{/*
We dont currently offer a data source where these operators would make sense We dont currently offer a data source where these operators would make sense
<option value='greater_than'>greater than</option> <option value='greater_than'>greater than</option>
<option value='less_than'>less than</option> <option value='less_than'>less than</option>
*/} */}
</Select> </Select>
<Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error> <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
</label> </label>
<label> <label>
Value to match Value to match
<Input <Input
{...register(`filters.${index}.value`)} {...register(`filters.${index}.value`)}
variant='ontime-filled' variant='ontime-filled'
size='sm'
placeholder='<empty / no value>'
autoComplete='off'
/>
</label>
<div>
<span>&nbsp;</span>
<div>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm' size='sm'
color='#FA5656' // $red-500 placeholder='<empty / no value>'
onClick={() => removeFilter(index)} autoComplete='off'
isDisabled={false}
isLoading={false}
/> />
</label>
<div>
<span>&nbsp;</span>
<div>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
color='#FA5656' // $red-500
onClick={() => removeFilter(index)}
isDisabled={false}
isLoading={false}
/>
</div>
</div> </div>
</div> </div>
</div> );
))} })}
<div> <div>
<Button <Button
variant='ontime-subtle' variant='ontime-subtle'