Array field without default array item

Author: Georgi2704

packages/orchestrator-ui-components/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -23,7 +23,16 @@ import { useAppSelector } from '@/rtk/hooks';
 
 import { Footer } from './Footer';
 import { Row } from './Row';
-import { Checkbox, Divider, Label, Summary, Text, TextArea, WfoObjectField, WfoArrayField} from './fields';
+import {
+    Checkbox,
+    Divider,
+    Label,
+    Summary,
+    Text,
+    TextArea,
+    WfoArrayField,
+    WfoObjectField,
+} from './fields';
 
 interface WfoPydanticFormProps {
     processName: string;
@@ -146,21 +155,21 @@ export const WfoPydanticForm = ({
                 id: 'object',
                 ElementMatch: {
                     isControlledElement: false,
-                    Element: WfoObjectField
+                    Element: WfoObjectField,
                 },
                 matcher: (field) => {
-                    return (field.type === PydanticFormFieldType.OBJECT);
-                }
+                    return field.type === PydanticFormFieldType.OBJECT;
+                },
             },
             {
                 id: 'array',
                 ElementMatch: {
                     isControlledElement: true,
-                    Element: WfoArrayField
+                    Element: WfoArrayField,
                 },
                 matcher: (field) => {
-                    return (field.type === PydanticFormFieldType.ARRAY);
-                }
+                    return field.type === PydanticFormFieldType.ARRAY;
+                },
             },
             {
                 id: 'summary',

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { useFieldArray } from 'react-hook-form';
+
+import {
+    PydanticFormElementProps,
+    RenderFields,
+    fieldToComponentMatcher,
+    itemizeArrayItem,
+    usePydanticFormContext,
+} from 'pydantic-forms';
+
+import { EuiIcon } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+import { getWfoArrayFieldStyles } from './styles';
+
+// adjust relative path accordingly
+
+const MinusButton = ({
+    index,
+    onRemove,
+}: {
+    index: number;
+    onRemove: (index: number) => void;
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { minusButton } = getWfoArrayFieldStyles();
+
+    return (
+        <span css={minusButton} onClick={() => onRemove(index)}>
+            <EuiIcon type="minus" size="xxl" color={theme.colors.danger} />
+        </span>
+    );
+};
+
+const PlusButton = ({ onClick }: { onClick: () => void }) => {
+    const { theme } = useOrchestratorTheme();
+    const { plusButtonWrapper } = getWfoArrayFieldStyles();
+
+    return (
+        <div css={plusButtonWrapper}>
+            <EuiIcon
+                onClick={onClick}
+                type="plus"
+                size="xxl"
+                color={theme.colors.success}
+            />
+        </div>
+    );
+};
+
+export const WfoArrayField = ({
+    pydanticFormField,
+}: PydanticFormElementProps) => {
+    const { config, rhf } = usePydanticFormContext();
+    const { control } = rhf;
+    const { id: arrayName, arrayItem } = pydanticFormField;
+    const { minItems, maxItems } = pydanticFormField.validations;
+    const { container, fieldWrapper } = getWfoArrayFieldStyles();
+
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: arrayName,
+    });
+
+    const showMinus = !minItems || fields.length > minItems;
+    const showPlus = !maxItems || fields.length < maxItems;
+
+    if (!arrayItem) return null;
+
+    const component = fieldToComponentMatcher(
+        arrayItem,
+        config?.componentMatcher,
+    );
+
+    const renderField = (field: Record<'id', string>, index: number) => {
+        const arrayField = itemizeArrayItem(index, arrayItem);
+
+        return (
+            <div key={field.id} css={fieldWrapper}>
+                <RenderFields
+                    pydanticFormComponents={[
+                        {
+                            Element: component.Element,
+                            pydanticFormField: arrayField,
+                        },
+                    ]}
+                    extraTriggerFields={[arrayName]}
+                />
+                {showMinus && <MinusButton index={index} onRemove={remove} />}
+            </div>
+        );
+    };
+
+    return (
+        <div css={container}>
+            {fields.map(renderField)}
+
+            {showPlus && (
+                <PlusButton
+                    onClick={() => {
+                        append({
+                            [arrayName]: arrayItem.default ?? undefined,
+                        });
+                    }}
+                />
+            )}
+        </div>
+    );
+};

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField/WfoArrayField.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+export const getWfoArrayFieldStyles = () => {
+    const container = css({
+        padding: '1rem',
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+    });
+
+    const fieldWrapper = css({
+        display: 'flex',
+        gap: '10px',
+        alignItems: 'center',
+    });
+
+    const minusButton = css({
+        width: '40px',
+        cursor: 'pointer',
+    });
+
+    const plusButtonWrapper = css({
+        display: 'flex',
+        cursor: 'pointer',
+        justifyContent: 'end',
+    });
+
+    return {
+        container,
+        fieldWrapper,
+        minusButton,
+        plusButtonWrapper,
+    };
+};

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoArrayField/styles.ts

@@ -1,21 +1,29 @@
 import React from 'react';
+
 import {
-    getPydanticFormComponents,
     PydanticFormElementProps,
-    RenderFields, usePydanticFormContext,
+    RenderFields,
+    getPydanticFormComponents,
+    usePydanticFormContext,
 } from 'pydantic-forms';
+
 import { EuiFlexGroup } from '@elastic/eui';
+
 import { getWfoObjectFieldStyles } from '../fields/styles';
 
-export const WfoObjectField = ({pydanticFormField}: PydanticFormElementProps) => {
+export const WfoObjectField = ({
+    pydanticFormField,
+}: PydanticFormElementProps) => {
     const { config } = usePydanticFormContext();
-    const {wfoObjectFieldStyles} = getWfoObjectFieldStyles()
+    const { wfoObjectFieldStyles } = getWfoObjectFieldStyles();
     const components = getPydanticFormComponents(
         pydanticFormField.properties || {},
         config?.componentMatcher,
     );
 
-    return <EuiFlexGroup css={wfoObjectFieldStyles}>
-        <RenderFields pydanticFormComponents={components} />
-    </EuiFlexGroup>
-}
+    return (
+        <EuiFlexGroup css={wfoObjectFieldStyles}>
+            <RenderFields pydanticFormComponents={components} />
+        </EuiFlexGroup>
+    );
+};

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/WfoObjectField.tsx

@@ -5,4 +5,4 @@ export * from './Divider';
 export * from './Checkbox';
 export * from './Summary';
 export * from './WfoObjectField';
-export * from './WfoArrayField';
+export * from './WfoArrayField/WfoArrayField';

packages/orchestrator-ui-components/src/components/WfoPydanticForm/fields/index.ts

@@ -8,6 +8,6 @@ export const getWfoObjectFieldStyles = () => {
         },
     });
     return {
-        wfoObjectFieldStyles
+        wfoObjectFieldStyles,
     };
-}
+};