Add WFO Object and Array field

.changeset/wicked-grapes-report.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+WfoArrayField, WfoObjectField, fix some import and types for the forms

packages/orchestrator-ui-components/package.json

@@ -48,7 +48,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.3.1",
+        "pydantic-forms": "^0.4.0",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

packages/orchestrator-ui-components/src/components/WfoForms/formFields/AcceptField.tsx

@@ -21,7 +21,7 @@ import { EuiCheckbox, EuiFlexItem, EuiText } from '@elastic/eui';
 
 import { useWithOrchestratorTheme } from '@/hooks';
 
-import { getStyles } from './AcceptFieldStyling';
+import { getAcceptFieldStyles } from './AcceptFieldStyling';
 import { FieldProps } from './types';
 
 type AcceptItemType =
@@ -73,7 +73,7 @@ function Accept({
     ...props
 }: AcceptFieldProps) {
     const t = useTranslations();
-    const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { acceptFieldStyle } = useWithOrchestratorTheme(getAcceptFieldStyles);
 
     const legacy = !data;
     const i18nBaseKey = data

packages/orchestrator-ui-components/src/components/WfoForms/formFields/AcceptFieldStyling.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getAcceptFieldStyles = ({ theme }: WfoTheme) => {
     const acceptFieldStyle = css({
         '.acceptField': {
             'label.warning': {

packages/orchestrator-ui-components/src/components/WfoForms/formFields/BoolField.tsx

@@ -18,9 +18,9 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiCheckbox, EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { FieldProps } from '@/types';
 
 import { boolFieldStyling } from './BoolFieldStyling';
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/DividerField.tsx

@@ -18,7 +18,7 @@ import { connectField } from 'uniforms';
 
 import { EuiHorizontalRule } from '@elastic/eui';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type DividerFieldProps = FieldProps<null, object, null, HTMLDivElement>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/ErrorField.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type ErrorFieldProps = FieldProps<null>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/LabelField.tsx

@@ -16,8 +16,8 @@ import React from 'react';
 
 import { connectField, filterDOMProps } from 'uniforms';
 
+import { FieldProps } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
-import { FieldProps } from '@/types';
 
 export type LabelFieldProps = FieldProps<null, object, null, HTMLDivElement>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/LongTextField.tsx

@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText, EuiTextArea } from '@elastic/eui';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type LongTextFieldProps = FieldProps<
     string,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/NumField.tsx

@@ -18,10 +18,10 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFieldNumber, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
-import { FieldProps } from '@/types';
 
 export type NumFieldProps = FieldProps<
     number,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/RadioField.tsx

@@ -19,7 +19,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiRadio, EuiText } from '@elastic/eui';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 const base64 =
     typeof btoa !== 'undefined'

packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubmitField.tsx

@@ -16,7 +16,7 @@ import React from 'react';
 
 import { filterDOMProps, useForm } from 'uniforms';
 
-import { FieldProps } from '@/types';
+import { FieldProps } from '@/components';
 
 export type SubmitFieldProps = FieldProps<
     null,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/TextField.tsx

@@ -18,10 +18,10 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFieldText, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
-import { FieldProps } from '@/types';
 
 export type TextFieldProps = FieldProps<string>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/ContactPersonAutocomplete.tsx

@@ -22,7 +22,7 @@ import { useWithOrchestratorTheme } from '@/hooks';
 
 import { ContactPerson } from '../types';
 import { isEmpty } from '../utils';
-import { getStyles } from './ContactPersonAutocompleteStyles';
+import { getContactPersonStyles } from './ContactPersonAutocompleteStyles';
 
 interface ContactPersonAutocompleteProps {
     query: string;
@@ -39,8 +39,9 @@ export const ContactPersonAutocomplete = ({
     itemSelected,
     suggestions,
 }: ContactPersonAutocompleteProps) => {
-    const { contactPersonAutocompleteStyling } =
-        useWithOrchestratorTheme(getStyles);
+    const { contactPersonAutocompleteStyling } = useWithOrchestratorTheme(
+        getContactPersonStyles,
+    );
 
     // Intentionally not done with state since we don't need a rerender
     // This is only to store a ref for the scroll into view part

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/ContactPersonAutocompleteStyles.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getContactPersonStyles = ({ theme }: WfoTheme) => {
     const contactPersonAutocompleteStyling = css`
         .autocomplete-container {
             position: relative;

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/FileUploadField.tsx

@@ -19,10 +19,10 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFilePicker, EuiFormRow, EuiText } from '@elastic/eui';
 
+import { FieldProps } from '@/components';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { useUploadFileMutation } from '@/rtk/endpoints/fileUpload';
-import { FieldProps } from '@/types';
 
 export type FileUploadProps = FieldProps<string>;
 

packages/orchestrator-ui-components/src/components/WfoForms/formFields/index.ts

@@ -26,3 +26,4 @@ export * from './CustomerField';
 export * from './ConnectedSelectField';
 export * from './deprecated/FileUploadField';
 export * from './commonStyles';
+export * from './types';

packages/orchestrator-ui-components/src/components/WfoForms/formFields/types.ts

@@ -33,6 +33,7 @@ export type FieldProps<
 export interface ContactPerson {
     name: string;
     email: string;
+    phone?: string;
 }
 
 export interface Option<Value = string> {

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

@@ -4,7 +4,7 @@ import type { RowRenderComponent } from 'pydantic-forms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
+import { getCommonFormFieldStyles } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 export const Row: RowRenderComponent = ({

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

@@ -15,18 +15,24 @@ import {
     zodValidationPresets,
 } from 'pydantic-forms';
 
-import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
-
 import { PATH_TASKS, PATH_WORKFLOWS, WfoLoading } from '@/components';
 import { StartWorkflowPayload } from '@/pages/processes/WfoStartProcessPage';
-import { HttpStatus } from '@/rtk';
+import { HttpStatus, isFetchBaseQueryError, isRecord } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 import { useAppSelector } from '@/rtk/hooks';
-import { FormValidationError } from '@/types';
 
 import { Footer } from './Footer';
 import { Row } from './Row';
-import { Checkbox, Divider, Label, Summary, Text, TextArea } from './fields';
+import {
+    Checkbox,
+    Divider,
+    Label,
+    Summary,
+    Text,
+    TextArea,
+    WfoArrayField,
+    WfoObjectField,
+} from './fields';
 
 interface WfoPydanticFormProps {
     processName: string;
@@ -46,7 +52,7 @@ export const WfoPydanticForm = ({
     const [startProcess] = useStartProcessMutation();
     const router = useRouter();
     const t = useTranslations('pydanticForms.userInputForm');
-    const componentMatcher = useAppSelector(
+    const componentMatcherExtender = useAppSelector(
         (state) => state.pydanticForm?.componentMatcher,
     );
 
@@ -81,40 +87,26 @@ export const WfoPydanticForm = ({
                 userInputs: [{ ...startProcessPayload }, ...requestBody],
             });
             return response
-                .then((result) => {
-                    return new Promise<Record<string, object | string>>(
-                        (resolve) => {
-                            if (result.error) {
-                                const error =
-                                    result.error as FetchBaseQueryError;
-                                if (
-                                    error.status === HttpStatus.FormNotComplete
-                                ) {
-                                    const data = error.data as Record<
-                                        string,
-                                        object | string
-                                    >;
-                                    resolve(data);
-                                } else if (
-                                    typeof error === 'object' &&
-                                    error !== null
-                                ) {
-                                    const validationError =
-                                        error as FormValidationError;
-                                    if (validationError?.status === 400) {
-                                        resolve({
-                                            ...validationError.data,
-                                            status: validationError.status.toString(),
-                                        });
-                                    }
-                                }
-                            } else if (result.data) {
-                                resolve(result.data);
+                .then(({ error, data }) => {
+                    return new Promise<Record<string, unknown>>((resolve) => {
+                        if (
+                            isFetchBaseQueryError(error) &&
+                            isRecord(error.data)
+                        ) {
+                            if (error.status === HttpStatus.FormNotComplete) {
+                                resolve(error.data);
+                            } else if (error.status === HttpStatus.BadRequest) {
+                                resolve({
+                                    ...error.data,
+                                    status: error.status,
+                                });
                             }
+                        } else if (data) {
+                            resolve(data);
+                        }
 
-                            resolve({});
-                        },
-                    );
+                        resolve({});
+                    });
                 })
                 .catch((error) => {
                     return new Promise<Record<string, object>>(
@@ -146,6 +138,10 @@ export const WfoPydanticForm = ({
 
     const wfoComponentMatcher: ComponentMatcher = (currentMatchers) => {
         const wfoMatchers: PydanticComponentMatcher[] = [
+            ...currentMatchers
+                .filter((matcher) => matcher.id !== 'text')
+                .filter((matcher) => matcher.id !== 'array')
+                .filter((matcher) => matcher.id !== 'object'),
             {
                 id: 'textarea',
                 ElementMatch: {
@@ -159,6 +155,26 @@ export const WfoPydanticForm = ({
                     );
                 },
             },
+            {
+                id: 'object',
+                ElementMatch: {
+                    isControlledElement: false,
+                    Element: WfoObjectField,
+                },
+                matcher: (field) => {
+                    return field.type === PydanticFormFieldType.OBJECT;
+                },
+            },
+            {
+                id: 'array',
+                ElementMatch: {
+                    isControlledElement: true,
+                    Element: WfoArrayField,
+                },
+                matcher: (field) => {
+                    return field.type === PydanticFormFieldType.ARRAY;
+                },
+            },
             {
                 id: 'summary',
                 ElementMatch: {
@@ -208,7 +224,6 @@ export const WfoPydanticForm = ({
                     return field.type === PydanticFormFieldType.BOOLEAN;
                 },
             },
-            ...currentMatchers.filter((matcher) => matcher.id !== 'text'),
             {
                 id: 'text',
                 ElementMatch: {
@@ -221,8 +236,9 @@ export const WfoPydanticForm = ({
                 validator: zodValidationPresets.string,
             },
         ];
-
-        return componentMatcher ? componentMatcher(wfoMatchers) : wfoMatchers;
+        return componentMatcherExtender
+            ? componentMatcherExtender(wfoMatchers)
+            : wfoMatchers;
     };
 
     const handleCancel = () => {

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

@@ -5,10 +5,9 @@ import type { PydanticFormElement } from 'pydantic-forms';
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 import { tint } from '@elastic/eui';
 import { css } from '@emotion/react';
-import type { WfoTheme } from '@orchestrator-ui/orchestrator-ui-components';
 
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
+import { getCommonFormFieldStyles } from '@/components';
+import { WfoTheme, useWithOrchestratorTheme } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoTheme) => {
     const toShadeColor = (color: string) => tint(color, 0.9);