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.3",
+        "pydantic-forms": "^0.5.2",
         "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

@@ -25,3 +25,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 = ({