2175: Make options optional and dont add them to array fields with arrayItems

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/defaultComponentMatchers.ts

@@ -3,6 +3,8 @@
  *
  * We will search for the first field that returns a positive match
  */
+import _ from 'lodash';
+
 import {
     ArrayField,
     CheckboxField,
@@ -101,6 +103,7 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             // We are looking for a single value from a set list of options. With less than 4 options, use radio buttons.
             return (
                 field.type === PydanticFormFieldType.STRING &&
+                _.isArray(field.options) &&
                 field.options?.length > 0 &&
                 field.options?.length <= 3
             );
@@ -116,6 +119,7 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             // We are looking for a single value from a set list of options. With more than 3 options, use a dropdown.
             return (
                 field.type === PydanticFormFieldType.STRING &&
+                _.isArray(field.options) &&
                 field.options?.length >= 4
             );
         },
@@ -139,6 +143,7 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
         matcher(field) {
             return (
                 field.type === PydanticFormFieldType.ARRAY &&
+                _.isArray(field.options) &&
                 field.options?.length > 0 &&
                 field.options?.length <= 5
             );
@@ -153,6 +158,7 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
         },
         matcher(field) {
             return (
+                _.isArray(field.options) &&
                 field.options?.length > 0 &&
                 field.type === PydanticFormFieldType.ARRAY
             );

frontend/packages/pydantic-forms/src/components/fields/MultiCheckboxField.tsx

@@ -28,7 +28,7 @@ export const MultiCheckboxField = ({
 
     return (
         <div>
-            {options.map((option: PydanticFormFieldOption) => {
+            {options?.map((option: PydanticFormFieldOption) => {
                 // Extract the unique ID for this option
                 const optionId = `${id}-${option.value}`;
 

frontend/packages/pydantic-forms/src/components/fields/MultiSelectField.tsx

@@ -38,7 +38,7 @@ export const MultiSelectField = ({
                 }}
                 multiple
             >
-                {pydanticFormField.options.map(
+                {pydanticFormField.options?.map(
                     (option: PydanticFormFieldOption) => (
                         <option key={option.value} value={option.value}>
                             {option.label}

frontend/packages/pydantic-forms/src/components/fields/RadioField.tsx

@@ -16,7 +16,7 @@ export const RadioField = ({
 
     return (
         <div>
-            {options.map((option, key) => (
+            {options?.map((option, key) => (
                 <div key={key}>
                     <input
                         data-testid={`${id}-${option.value}`}

frontend/packages/pydantic-forms/src/core/hooks/usePydanticFormParser.tsx

@@ -74,9 +74,6 @@ const getPydanticFormField = (
           )
         : '';
 
-    const addConstValue =
-        typeof flatSchema.const === 'undefined' ? false : true;
-
     const arrayItem = flatSchema.items
         ? getPydanticFormField(
               flatSchema.items,
@@ -87,6 +84,14 @@ const getPydanticFormField = (
           )
         : undefined;
 
+    const addConstValue =
+        typeof flatSchema.const === 'undefined' ? false : true;
+
+    // Don't add options to array items if they have an arrayItem where they live
+    const addOptions = !(
+        flatSchema.type === PydanticFormFieldType.ARRAY && arrayItem
+    );
+
     //TODO: I think object properties should never be required only their properties are or aren't. Should we fix this in the backend?
     const required =
         flatSchema.type === PydanticFormFieldType.OBJECT
@@ -100,7 +105,7 @@ const getPydanticFormField = (
         arrayItem,
         format: flatSchema.format || PydanticFormFieldFormat.DEFAULT,
         type: flatSchema.type || PydanticFormFieldType.STRING,
-        options: options,
+        ...toOptionalObjectProperty({ options }, addOptions),
         default: flatSchema.default,
         attributes: attributes,
         schema: propertySchema,

frontend/packages/pydantic-forms/src/types.ts

@@ -46,7 +46,7 @@ export interface PydanticFormField {
     description?: string;
     type: PydanticFormFieldType;
     format: PydanticFormFieldFormat;
-    options: PydanticFormFieldOption[];
+    options?: PydanticFormFieldOption[];
     disabledOptions?: string[];
     default?: PydanticFormFieldValue;
     required: boolean;