@orchestrator-ui/orchestrator-ui-components 5.8.0 → 5.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.8.0",
+    "version": "5.8.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -48,7 +48,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.9.1",
+        "pydantic-forms": "^0.9.2",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
+import _ from 'lodash';
 import { AbstractIntlMessages, useMessages, useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import type {
@@ -168,7 +169,7 @@ export const useWfoPydanticFormConfig = () => {
                         // We are not using a radio button component to maintain being able to deselect options
                         return (
                             field.type === PydanticFormFieldType.STRING &&
-                            Array.isArray(field.options) &&
+                            _.isArray(field.options) &&
                             field.options.length > 0
                         );
                     },
@@ -193,6 +194,7 @@ export const useWfoPydanticFormConfig = () => {
                     matcher(field) {
                         return (
                             field.type === PydanticFormFieldType.ARRAY &&
+                            _.isArray(field.options) &&
                             field.options?.length > 0 &&
                             field.options?.length <= 5
                         );

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

@@ -9,14 +9,14 @@ export const WfoDropdown: PydanticFormControlledElement = ({
     pydanticFormField,
     value,
 }) => {
-    const dropDownOptions = pydanticFormField.options.map((option) => ({
+    const dropDownOptions = pydanticFormField.options?.map((option) => ({
         value: option.value,
         label: option.label,
     }));
 
     return (
         <WfoReactSelect
-            options={dropDownOptions}
+            options={dropDownOptions || []}
             onChange={onChange}
             id={pydanticFormField.id}
             value={value}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 
+import _ from 'lodash';
 import type { PydanticFormControlledElement } from 'pydantic-forms';
+import { getFormFieldIdWithPath } from 'pydantic-forms';
 
 import { EuiFieldNumber } from '@elastic/eui';
 import { css } from '@emotion/react';
@@ -32,13 +34,21 @@ export const WfoInteger: PydanticFormControlledElement = ({
         getFormFieldsBaseStyle,
     );
 
+    // If the field is part of an array the value is passed in as an object with the field name as key
+    // this is imposed by react-hook-form. We try to detect this and extract the actual value
+    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+    const fieldValue =
+        _.isObject(value) && _.has(value, fieldName)
+            ? _.get(value, fieldName)
+            : value;
+
     return (
         <EuiFieldNumber
             data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             name={pydanticFormField.id}
             onChange={(event) => onChange(parseInt(event.target.value))}
-            value={value}
+            value={fieldValue}
             disabled={disabled}
         />
     );

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

@@ -35,7 +35,7 @@ export const WfoMultiCheckboxField: PydanticFormControlledElement = ({
 
     const { options, id } = pydanticFormField;
 
-    const checkboxes = options.map((option, index) => ({
+    const checkboxes = options?.map((option, index) => ({
         label: option.label,
         id: option.value,
         'data-test-id': `${id}-${index}`,
@@ -59,7 +59,7 @@ export const WfoMultiCheckboxField: PydanticFormControlledElement = ({
 
     return (
         <EuiCheckboxGroup
-            options={checkboxes}
+            options={checkboxes || []}
             idToSelectedMap={checkboxIdToSelectedMap}
             onChange={(id) => handleCheckboxChange(id)}
             data-testid={id}

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

@@ -10,7 +10,7 @@ export const WfoRadio: PydanticFormControlledElement = ({
     value,
     disabled,
 }) => {
-    const radioOptions = pydanticFormField.options.map((option) => ({
+    const radioOptions = pydanticFormField.options?.map((option) => ({
         id: option.value,
         label: option.label,
     }));
@@ -18,7 +18,7 @@ export const WfoRadio: PydanticFormControlledElement = ({
     return (
         <EuiRadioGroup
             data-testid={pydanticFormField.id}
-            options={radioOptions}
+            options={radioOptions || []}
             idSelected={value}
             onChange={(id) => onChange(id)}
             name={pydanticFormField.id}

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactSelect, { components } from 'react-select';
 import type { GroupBase, InputProps } from 'react-select';
 
@@ -13,7 +13,7 @@ import { getWfoReactSelectStyles } from './styles';
 interface WfoReactSelectProps<ValueType> {
     options: Option<ValueType>[];
     id: string;
-    onChange: (value: ValueType | undefined) => void;
+    onChange: (value: ValueType | undefined | null) => void;
     value: ValueType;
     disabled?: boolean;
     isLoading?: boolean;
@@ -33,19 +33,21 @@ export const WfoReactSelect = <ValueType,>({
     hasError = false,
     refetch,
 }: WfoReactSelectProps<ValueType>) => {
-    useEffect(() => {
-        const selectedValue = options.find(
-            (option: Option<ValueType>) => option.value === value,
-        );
-        setSelectedValue(selectedValue || null);
-    }, [options, value]);
-
     const initialValue = options.find(
         (option: Option<ValueType>) => option.value === value,
     );
 
     const [selectedValue, setSelectedValue] =
-        React.useState<Option<ValueType> | null>(initialValue || null);
+        useState<Option<ValueType> | null>(initialValue || null);
+
+    useEffect(() => {
+        const preSelectedValue = options.find(
+            (option: Option<ValueType>) => option.value === value,
+        );
+        if (preSelectedValue !== selectedValue) {
+            setSelectedValue(preSelectedValue || null);
+        }
+    }, [options, selectedValue, value]);
 
     // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
     const {
@@ -89,12 +91,12 @@ export const WfoReactSelect = <ValueType,>({
                 id={id}
                 inputId={`${id}.search`}
                 onChange={(option) => {
+                    // By default reactSelect reverts to the initial option when cleared.
+                    // This is to make sure we can also deselect the value after it is
+                    // initialized from error state that sets it to the latest value.
                     if (option === null) {
-                        // By default reactSelect reverts to the initial option when cleared
-                        // this is to make sure we can also deselect the value after it is
-                        // initialized from error state for example.
                         setSelectedValue(null);
-                        onChange(undefined);
+                        onChange(null);
                     } else {
                         const selectedValue = option?.value;
                         setSelectedValue(option);

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

@@ -1,6 +1,8 @@
 import React from 'react';
 
+import _ from 'lodash';
 import type { PydanticFormControlledElement } from 'pydantic-forms';
+import { getFormFieldIdWithPath } from 'pydantic-forms';
 
 import { EuiFieldText } from '@elastic/eui';
 
@@ -16,14 +18,20 @@ export const WfoText: PydanticFormControlledElement = ({
     const { formFieldBaseStyle } = useWithOrchestratorTheme(
         getFormFieldsBaseStyle,
     );
-
+    // If the field is part of an array the value is passed in as an object with the field name as key
+    // this is imposed by react-hook-form. We try to detect this and extract the actual value
+    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+    const fieldValue =
+        _.isObject(value) && _.has(value, fieldName)
+            ? _.get(value, fieldName)
+            : value;
     return (
         <EuiFieldText
             data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             disabled={disabled}
             onChange={(event) => onChange(event.target.value)}
-            value={value ?? ''}
+            value={fieldValue}
             fullWidth
         />
     );

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.8.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.8.1';