@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -13,111 +13,95 @@ import { HttpStatus, isFetchBaseQueryError, isRecord } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 
 interface WfoPydanticFormProps {
-    processName: string;
-    startProcessPayload?: StartWorkflowPayload;
-    isTask?: boolean;
+  processName: string;
+  startProcessPayload?: StartWorkflowPayload;
+  isTask?: boolean;
 }
 
 interface StartProcessResponse {
-    id: string;
+  id: string;
 }
 
-export const WfoPydanticForm = ({
-    processName,
-    startProcessPayload,
-    isTask,
-}: WfoPydanticFormProps) => {
-    const generateFormId = useMemo(() => {
-        return `${JSON.stringify(startProcessPayload)}`;
-    }, [startProcessPayload]);
+export const WfoPydanticForm = ({ processName, startProcessPayload, isTask }: WfoPydanticFormProps) => {
+  const generateFormId = useMemo(() => {
+    return `${JSON.stringify(startProcessPayload)}`;
+  }, [startProcessPayload]);
 
-    const [startProcess] = useStartProcessMutation();
-    const router = useRouter();
+  const [startProcess] = useStartProcessMutation();
+  const router = useRouter();
 
-    const onSuccess = useCallback(
-        (_fieldValues: object, req: object) => {
-            const request = req as {
-                status: HttpStatus;
-                data: StartProcessResponse;
-            };
-            if (request?.data?.id) {
-                const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-                router.replace(`${pfBasePath}/${request.data.id}`);
-            }
-        },
-        [isTask, router],
-    );
-
-    const getPydanticFormProvider = useCallback(() => {
-        const pydanticFormProvider: PydanticFormApiProvider = async ({
-            requestBody = [],
-            formKey,
-        }) => {
-            const userInputs = _.isEmpty(startProcessPayload)
-                ? [...requestBody]
-                : [{ ...startProcessPayload }, ...requestBody];
+  const onSuccess = useCallback(
+    (_fieldValues: object, req: object) => {
+      const request = req as {
+        status: HttpStatus;
+        data: StartProcessResponse;
+      };
+      if (request?.data?.id) {
+        const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
+        router.replace(`${pfBasePath}/${request.data.id}`);
+      }
+    },
+    [isTask, router],
+  );
 
-            const response = startProcess({
-                workflowName: formKey,
-                userInputs,
-            });
-            return response
-                .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,
-                                status: HttpStatus.Created,
-                            });
-                        }
+  const getPydanticFormProvider = useCallback(() => {
+    const pydanticFormProvider: PydanticFormApiProvider = async ({ requestBody = [], formKey }) => {
+      const userInputs =
+        _.isEmpty(startProcessPayload) ? [...requestBody] : [{ ...startProcessPayload }, ...requestBody];
 
-                        resolve({});
-                    });
-                })
-                .catch((error) => {
-                    return new Promise<Record<string, object>>(
-                        (resolve, reject) => {
-                            if (error.status === HttpStatus.FormNotComplete) {
-                                resolve(error.data);
-                            }
-                            reject(error);
-                        },
-                    );
+      const response = startProcess({
+        workflowName: formKey,
+        userInputs,
+      });
+      return response
+        .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,
+                status: HttpStatus.Created,
+              });
+            }
 
-        return pydanticFormProvider;
-    }, [startProcess, startProcessPayload]);
+            resolve({});
+          });
+        })
+        .catch((error) => {
+          return new Promise<Record<string, object>>((resolve, reject) => {
+            if (error.status === HttpStatus.FormNotComplete) {
+              resolve(error.data);
+            }
+            reject(error);
+          });
+        });
+    };
 
-    const config = useGetPydanticFormsConfig(
-        getPydanticFormProvider,
-        (props) => <Footer {...props} isTask={isTask} />,
-    );
+    return pydanticFormProvider;
+  }, [startProcess, startProcessPayload]);
 
-    const handleCancel = useCallback(() => {
-        const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-        router.replace(pfBasePath);
-    }, [isTask, router]);
+  const config = useGetPydanticFormsConfig(getPydanticFormProvider, (props) => <Footer {...props} isTask={isTask} />);
+
+  const handleCancel = useCallback(() => {
+    const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
+    router.replace(pfBasePath);
+  }, [isTask, router]);
 
-    return (
-        <PydanticForm
-            formKey={processName}
-            formId={generateFormId}
-            onSuccess={onSuccess}
-            onCancel={handleCancel}
-            config={config}
-        />
-    );
+  return (
+    <PydanticForm
+      formKey={processName}
+      formId={generateFormId}
+      onSuccess={onSuccess}
+      onCancel={handleCancel}
+      config={config}
+    />
+  );
 };

package/src/components/WfoPydanticForm/fields/WfoArrayField/WfoArrayField.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect } from 'react';
 import { useFieldArray } from 'react-hook-form';
 
 import {
-    PydanticFormElementProps,
-    RenderFields,
-    disableField,
-    fieldToComponentMatcher,
-    itemizeArrayItem,
-    useGetConfig,
-    useGetForm,
+  PydanticFormElementProps,
+  RenderFields,
+  disableField,
+  fieldToComponentMatcher,
+  itemizeArrayItem,
+  useGetConfig,
+  useGetForm,
 } from 'pydantic-forms';
 
 import { EuiIcon } from '@elastic/eui';
@@ -18,133 +18,98 @@ import { useOrchestratorTheme } from '@/hooks';
 import { getWfoArrayFieldStyles } from './styles';
 
 export const MinusButton = ({
-    index,
-    onRemove,
-    testId,
+  index,
+  onRemove,
+  testId,
 }: {
-    index: number;
-    onRemove: (index: number) => void;
-    testId: string;
+  index: number;
+  onRemove: (index: number) => void;
+  testId: string;
 }) => {
-    const { theme } = useOrchestratorTheme();
-    const { minusButton } = getWfoArrayFieldStyles(theme);
-
-    return (
-        <span css={minusButton} onClick={() => onRemove(index)}>
-            <EuiIcon
-                type="minus"
-                size="xxl"
-                color={theme.colors.danger}
-                data-testid={testId}
-            />
-        </span>
-    );
+  const { theme } = useOrchestratorTheme();
+  const { minusButton } = getWfoArrayFieldStyles(theme);
+
+  return (
+    <span css={minusButton} onClick={() => onRemove(index)}>
+      <EuiIcon type="minus" size="xxl" color={theme.colors.danger} data-testid={testId} />
+    </span>
+  );
 };
 
-export const PlusButton = ({
-    onClick,
-    testId,
-}: {
-    onClick: () => void;
-    testId: string;
-}) => {
-    const { theme } = useOrchestratorTheme();
-    const { plusButtonWrapper } = getWfoArrayFieldStyles(theme);
+export const PlusButton = ({ onClick, testId }: { onClick: () => void; testId: string }) => {
+  const { theme } = useOrchestratorTheme();
+  const { plusButtonWrapper } = getWfoArrayFieldStyles(theme);
 
-    return (
-        <div css={plusButtonWrapper}>
-            <EuiIcon
-                onClick={onClick}
-                type="plus"
-                size="xxl"
-                color={theme.colors.success}
-                data-testid={testId}
-            />
-        </div>
-    );
+  return (
+    <div css={plusButtonWrapper}>
+      <EuiIcon onClick={onClick} type="plus" size="xxl" color={theme.colors.success} data-testid={testId} />
+    </div>
+  );
 };
 
-export const WfoArrayField = ({
-    pydanticFormField,
-}: PydanticFormElementProps) => {
-    const config = useGetConfig();
-    const reactHookForm = useGetForm();
-
-    const disabled = pydanticFormField.attributes?.disabled || false;
-    const { control } = reactHookForm;
-    const { id: arrayName, arrayItem } = pydanticFormField;
-    const { minItems, maxItems } = pydanticFormField.validations;
-    const { theme } = useOrchestratorTheme();
-    const { container, fieldWrapper } = getWfoArrayFieldStyles(theme);
-
-    const { fields, append, remove } = useFieldArray({
-        control,
-        name: arrayName,
+export const WfoArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
+  const config = useGetConfig();
+  const reactHookForm = useGetForm();
+
+  const disabled = pydanticFormField.attributes?.disabled || false;
+  const { control } = reactHookForm;
+  const { id: arrayName, arrayItem } = pydanticFormField;
+  const { minItems, maxItems } = pydanticFormField.validations;
+  const { theme } = useOrchestratorTheme();
+  const { container, fieldWrapper } = getWfoArrayFieldStyles(theme);
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: arrayName,
+  });
+
+  const appendDefault = useCallback(() => {
+    append({
+      [arrayName]: arrayItem?.default ?? undefined,
     });
+  }, [append, arrayItem?.default, arrayName]);
 
-    const appendDefault = useCallback(() => {
-        append({
-            [arrayName]: arrayItem?.default ?? undefined,
-        });
-    }, [append, arrayItem?.default, arrayName]);
-
-    useEffect(() => {
-        if (arrayName && arrayItem && minItems && fields) {
-            const missingCount = Math.max(0, minItems - fields.length);
-            Array.from({ length: missingCount }).forEach(() => appendDefault());
-        }
-    }, [minItems, append, remove, arrayItem, arrayName, fields, appendDefault]);
+  useEffect(() => {
+    if (arrayName && arrayItem && minItems && fields) {
+      const missingCount = Math.max(0, minItems - fields.length);
+      Array.from({ length: missingCount }).forEach(() => appendDefault());
+    }
+  }, [minItems, append, remove, arrayItem, arrayName, fields, appendDefault]);
 
-    const showMinus = (!minItems || fields.length > minItems) && !disabled;
-    const showPlus = (!maxItems || fields.length < maxItems) && !disabled;
+  const showMinus = (!minItems || fields.length > minItems) && !disabled;
+  const showPlus = (!maxItems || fields.length < maxItems) && !disabled;
 
-    if (!arrayItem) return null;
+  if (!arrayItem) return null;
 
-    const component = fieldToComponentMatcher(
-        arrayItem,
-        config?.componentMatcherExtender,
-    );
+  const component = fieldToComponentMatcher(arrayItem, config?.componentMatcherExtender);
 
-    const renderField = (field: Record<'id', string>, index: number) => {
-        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 key={field.id} css={fieldWrapper}>
-                <RenderFields
-                    pydanticFormComponents={[
-                        {
-                            Element: component.Element,
-                            pydanticFormField: arrayItemField,
-                        },
-                    ]}
-                    extraTriggerFields={[arrayName]}
-                />
-                {showMinus && (
-                    <MinusButton
-                        index={index}
-                        onRemove={remove}
-                        testId={`${arrayName}-minus-button-${index}`}
-                    />
-                )}
-            </div>
-        );
-    };
+  const renderField = (field: Record<'id', string>, index: number) => {
+    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 data-testid={arrayName} css={container}>
-            {fields.map(renderField)}
-
-            {showPlus && (
-                <PlusButton
-                    onClick={appendDefault}
-                    testId={`${arrayName}-plus-button`}
-                />
-            )}
-        </div>
+      <div key={field.id} css={fieldWrapper}>
+        <RenderFields
+          pydanticFormComponents={[
+            {
+              Element: component.Element,
+              pydanticFormField: arrayItemField,
+            },
+          ]}
+          extraTriggerFields={[arrayName]}
+        />
+        {showMinus && <MinusButton index={index} onRemove={remove} testId={`${arrayName}-minus-button-${index}`} />}
+      </div>
     );
+  };
+
+  return (
+    <div data-testid={arrayName} css={container}>
+      {fields.map(renderField)}
+
+      {showPlus && <PlusButton onClick={appendDefault} testId={`${arrayName}-plus-button`} />}
+    </div>
+  );
 };

package/src/components/WfoPydanticForm/fields/WfoArrayField/styles.ts

@@ -3,36 +3,36 @@ import { css } from '@emotion/react';
 import { WfoComputedTheme } from '@/theme';
 
 export const getWfoArrayFieldStyles = (theme: WfoComputedTheme) => {
-    const container = css({
-        border: 'thin solid ' + theme.colors.borderBaseSubdued,
-        padding: '1rem',
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: 1,
-    });
+  const container = css({
+    border: 'thin solid ' + theme.colors.borderBaseSubdued,
+    padding: '1rem',
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+  });
 
-    const fieldWrapper = css({
-        display: 'flex',
-        gap: '10px',
-        alignItems: 'center',
-    });
+  const fieldWrapper = css({
+    display: 'flex',
+    gap: '10px',
+    alignItems: 'center',
+  });
 
-    const minusButton = css({
-        width: '40px',
-        cursor: 'pointer',
-        marginBottom: '12px',
-    });
+  const minusButton = css({
+    width: '40px',
+    cursor: 'pointer',
+    marginBottom: '12px',
+  });
 
-    const plusButtonWrapper = css({
-        display: 'flex',
-        cursor: 'pointer',
-        justifyContent: 'end',
-    });
+  const plusButtonWrapper = css({
+    display: 'flex',
+    cursor: 'pointer',
+    justifyContent: 'end',
+  });
 
-    return {
-        container,
-        fieldWrapper,
-        minusButton,
-        plusButtonWrapper,
-    };
+  return {
+    container,
+    fieldWrapper,
+    minusButton,
+    plusButtonWrapper,
+  };
 };

package/src/components/WfoPydanticForm/fields/WfoCallout.tsx

@@ -7,17 +7,14 @@ import { EuiCallOut } from '@elastic/eui';
 const CALLOUT_COLORS = ['primary', 'success', 'warning', 'danger', 'accent'];
 
 export const WfoCallout = ({ pydanticFormField }: PydanticFormElementProps) => {
-    const { header, message, icon_type, message_type } =
-        pydanticFormField.default;
-    const color = CALLOUT_COLORS.includes(message_type)
-        ? message_type
-        : 'primary';
+  const { header, message, icon_type, message_type } = pydanticFormField.default;
+  const color = CALLOUT_COLORS.includes(message_type) ? message_type : 'primary';
 
-    return (
-        <div data-testid={pydanticFormField.id} css={{ marginBottom: '2rem' }}>
-            <EuiCallOut title={header} iconType={icon_type} color={color}>
-                <p>{message}</p>
-            </EuiCallOut>
-        </div>
-    );
+  return (
+    <div data-testid={pydanticFormField.id} css={{ marginBottom: '2rem' }}>
+      <EuiCallOut title={header} iconType={icon_type} color={color}>
+        <p>{message}</p>
+      </EuiCallOut>
+    </div>
+  );
 };

package/src/components/WfoPydanticForm/fields/WfoCheckbox.tsx

@@ -4,20 +4,15 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiCheckbox } from '@elastic/eui';
 
-export const WfoCheckbox: PydanticFormControlledElement = ({
-    pydanticFormField,
-    onChange,
-    value,
-    disabled,
-}) => {
-    return (
-        <EuiCheckbox
-            data-testid={pydanticFormField.id}
-            checked={value || false}
-            disabled={disabled}
-            id={pydanticFormField.id}
-            label={pydanticFormField.title || <div>&nbsp;</div>}
-            onChange={() => !disabled && onChange(!value)}
-        />
-    );
+export const WfoCheckbox: PydanticFormControlledElement = ({ pydanticFormField, onChange, value, disabled }) => {
+  return (
+    <EuiCheckbox
+      data-testid={pydanticFormField.id}
+      checked={value || false}
+      disabled={disabled}
+      id={pydanticFormField.id}
+      label={pydanticFormField.title || <div>&nbsp;</div>}
+      onChange={() => !disabled && onChange(!value)}
+    />
+  );
 };

package/src/components/WfoPydanticForm/fields/WfoDivider.tsx

@@ -7,12 +7,8 @@ import { EuiHorizontalRule } from '@elastic/eui';
 import { useOrchestratorTheme } from '@/hooks';
 
 export const WfoDivider: PydanticFormElement = ({ pydanticFormField }) => {
-    const { theme } = useOrchestratorTheme();
-    return (
-        <EuiHorizontalRule
-            data-testid={pydanticFormField.id}
-            style={{ marginTop: theme.base }}
-            id={pydanticFormField.id}
-        />
-    );
+  const { theme } = useOrchestratorTheme();
+  return (
+    <EuiHorizontalRule data-testid={pydanticFormField.id} style={{ marginTop: theme.base }} id={pydanticFormField.id} />
+  );
 };

package/src/components/WfoPydanticForm/fields/WfoDropdown.tsx

@@ -4,22 +4,11 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { WfoReactSelect } from './WfoReactSelect';
 
-export const WfoDropdown: PydanticFormControlledElement = ({
-    onChange,
-    pydanticFormField,
-    value,
-}) => {
-    const dropDownOptions = pydanticFormField.options?.map((option) => ({
-        value: option.value,
-        label: option.label,
-    }));
+export const WfoDropdown: PydanticFormControlledElement = ({ onChange, pydanticFormField, value }) => {
+  const dropDownOptions = pydanticFormField.options?.map((option) => ({
+    value: option.value,
+    label: option.label,
+  }));
 
-    return (
-        <WfoReactSelect
-            options={dropDownOptions || []}
-            onChange={onChange}
-            id={pydanticFormField.id}
-            value={value}
-        />
-    );
+  return <WfoReactSelect options={dropDownOptions || []} onChange={onChange} id={pydanticFormField.id} value={value} />;
 };