2102: Disables descendants of disabled fields

Author: Ruben van Leeuwen

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

@@ -4,13 +4,14 @@ import { useFieldArray } from 'react-hook-form';
 import { usePydanticFormContext } from '@/core';
 import { fieldToComponentMatcher } from '@/core/helper';
 import { PydanticFormElementProps } from '@/types';
-import { itemizeArrayItem } from '@/utils';
+import { disableField, itemizeArrayItem } from '@/utils';
 
 import { RenderFields } from '../render';
 
 export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
     const { rhf, config } = usePydanticFormContext();
 
+    const disabled = pydanticFormField.attributes?.disabled || false;
     const { control } = rhf;
     const { id: arrayName, arrayItem } = pydanticFormField;
     const { fields, append, remove } = useFieldArray({
@@ -28,7 +29,12 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
     );
 
     const renderField = (field: Record<'id', string>, index: number) => {
-        const arrayItemField = itemizeArrayItem(index, arrayItem, arrayName);
+        const itemizedField = itemizeArrayItem(index, arrayItem, arrayName);
+        // We have decided - for now - on the convention that all descendants of disabled fields will be disabled as well
+        // so we will not displaying any interactive elements inside a disabled element
+        const arrayItemField = disabled
+            ? disableField(itemizedField)
+            : itemizedField;
 
         return (
             <div
@@ -49,15 +55,16 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
                     ]}
                     extraTriggerFields={[arrayName]}
                 />
-                {(!minItems || (minItems && fields.length > minItems)) && (
-                    <span
-                        onClick={() => {
-                            remove(index);
-                        }}
-                    >
-                        -
-                    </span>
-                )}
+                {(!minItems || (minItems && fields.length > minItems)) &&
+                    !disabled && (
+                        <span
+                            onClick={() => {
+                                remove(index);
+                            }}
+                        >
+                            -
+                        </span>
+                    )}
             </div>
         );
     };
@@ -66,7 +73,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
         <div
             data-testid={arrayName}
             style={{
-                border: 'thin solid green',
+                border: '1px solid #ccc',
                 padding: '1rem',
                 marginTop: '16px',
                 display: 'flex',
@@ -75,26 +82,27 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
             }}
         >
             {fields.map(renderField)}
-            {(!maxItems || (maxItems && fields.length < maxItems)) && (
-                <div
-                    onClick={() => {
-                        append({
-                            [arrayName]: arrayItem.default,
-                        });
-                    }}
-                    style={{
-                        cursor: 'pointer',
-                        fontSize: '32px',
-                        display: 'flex',
-                        justifyContent: 'end',
-                        marginTop: '8px',
-                        marginBottom: '8px',
-                        padding: '16px',
-                    }}
-                >
-                    +
-                </div>
-            )}
+            {(!maxItems || (maxItems && fields.length < maxItems)) &&
+                !disabled && (
+                    <div
+                        onClick={() => {
+                            append({
+                                [arrayName]: arrayItem.default,
+                            });
+                        }}
+                        style={{
+                            cursor: 'pointer',
+                            fontSize: '32px',
+                            display: 'flex',
+                            justifyContent: 'end',
+                            marginTop: '8px',
+                            marginBottom: '8px',
+                            padding: '16px',
+                        }}
+                    >
+                        +
+                    </div>
+                )}
         </div>
     );
 };

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

@@ -3,18 +3,30 @@ import React from 'react';
 import { usePydanticFormContext } from '@/core';
 import { getPydanticFormComponents } from '@/core/helper';
 import { PydanticFormElementProps } from '@/types';
+import { disableField } from '@/utils';
 
 import { RenderFields } from '../render';
 
 export const ObjectField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
     const { config } = usePydanticFormContext();
+    const disabled = pydanticFormField.attributes?.disabled || false;
     const components = getPydanticFormComponents(
         pydanticFormField.properties || {},
         config?.componentMatcherExtender,
     );
 
+    // We have decided - for now - on the convention that all descendants of disabled fields will be disabled as well
+    // so we will not displaying any interactive elements inside a disabled element
+    if (disabled) {
+        components.forEach((component) => {
+            component.pydanticFormField = disableField(
+                component.pydanticFormField,
+            );
+        });
+    }
+
     return (
         <div
             data-testid={pydanticFormField.id}