Add options field type

[adamyonk]

User description

Adding the option for a array type field with options.

Also, added the labels to the EditorFields, previously they were displaying as bare inputs.

---

PR Type

Enhancement

---

Description

• Add support for array field type with dropdown options

• Improve field labels and UI consistency in editor

• Remove array from unsupported field types list

• Enhance error messaging for unsupported fields

---

Changes diagram

flowchart LR
  A["LayoutField interface"] -- "add options property" --> B["Options configuration"]
  C["EditorField component"] -- "remove array from unsupported" --> D["Array field support"]
  D -- "render as Select dropdown" --> E["Dropdown with options"]
  C -- "add labels to all fields" --> F["Improved UI consistency"]

Loading

---

Changes walkthrough 📝

Relevant files

Enhancement

types.ts Add options configuration to field interface                          src/types.ts Add options property to LayoutField interface Define structure for dropdown options with title and value +3/-0      EditorField.tsx Implement array field support with dropdown UI                      src/EditorField.tsx Remove array from UNSUPORTED_TYPES list Add Select component import for dropdown rendering Implement array field rendering with dropdown options Add consistent labels to all field types Improve error message formatting and structure +28/-16

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[qodo-merge-pro]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Issue The array field rendering assumes options are always provided but doesn't handle the case where options might be undefined or empty, which could cause runtime errors when trying to map over options.list {type === 'array' && ( <Select {...commonProps}> {options?.list.map((option) => ( <option key={option.value} value={option.value}> {option.title} </option> ))} </Select> )} Logic Error The boolean field is rendered inside a Text component which is semantically incorrect and may cause layout issues. Switch components should be rendered directly, not wrapped in Text elements {type === 'boolean' && <Switch checked={value === true} onChange={onChange} />} {type === 'text' && <TextArea {...commonProps} rows={5} />} Type Safety The options property is optional but the array field implementation expects it to exist. This mismatch could lead to runtime errors when options is undefined options?: { list: {title: string; value: string}[] }

[qodo-merge-pro]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add null check for options Add a null check for options before accessing options.list to prevent runtime errors when options is undefined. The optional chaining only protects the map call but not the array access. src/EditorField.tsx [92-100] -{type === 'array' && ( +{type === 'array' && options?.list && ( <Select {...commonProps}> - {options?.list.map((option) => ( + {options.list.map((option) => ( <option key={option.value} value={option.value}> {option.title} </option> ))} </Select> )} Apply / Chat Suggestion importance[1-10]: 8 __ Why: The code options?.list.map would cause a runtime error if options is undefined, as it would attempt to call .map on undefined. The suggestion correctly identifies and fixes this bug.	Medium
	✅ Update onChange handler type Suggestion Impact: The commit directly implemented the suggestion by adding HTMLSelectElement to the onChange handler's type parameter code diff: - (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => { + (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { The onChange handler type doesn't include HTMLSelectElement which is needed for the new Select component. This will cause TypeScript errors when the select dropdown triggers the onChange event. src/EditorField.tsx [18-37] const onChange = useCallback( - (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => { + (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { let newValue: number | string | boolean = e.currentTarget.value ... }, [name, updateData] ) [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The onChange handler is passed to the new Select component, but its event type parameter e does not include HTMLSelectElement, which would cause a TypeScript error. The suggestion correctly adds it.	Medium
Update