@orchestrator-ui/orchestrator-ui-components 5.5.1 → 5.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.5.1",
+    "version": "5.5.3",
     "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.7.3",
+        "pydantic-forms": "^0.8.0",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoForms/formFields/SummaryField.tsx

@@ -18,7 +18,7 @@ import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
+import { summaryFieldStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
@@ -38,7 +38,7 @@ function Summary({
     data,
     ...props
 }: SummaryFieldProps) {
-    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
     if (!data) {

package/src/components/WfoForms/formFields/SummaryFieldStyling.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const summaryFieldStyles = ({ theme }: WfoTheme) => {
     const summaryFieldStyle = css({
         'div.emailMessage': {
             td: {

package/src/components/WfoForms/formFields/index.ts

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

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -341,6 +341,7 @@ export const WfoPydanticForm = ({
             labelProvider: pydanticLabelProvider,
             rowRenderer: Row,
             customTranslations: customTranslations,
+            loadingComponent: <WfoLoading />,
             locale: getLocale(),
         };
     }, [
@@ -353,10 +354,9 @@ export const WfoPydanticForm = ({
 
     return (
         <PydanticForm
-            id={processName}
+            formKey={processName}
             onSuccess={onSuccess}
             onCancel={handleCancel}
-            loadingComponent={<WfoLoading />}
             config={config}
         />
     );

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

@@ -66,9 +66,9 @@ export const PlusButton = ({
 export const WfoArrayField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
-    const { config, rhf } = usePydanticFormContext();
+    const { config, reactHookForm } = usePydanticFormContext();
     const disabled = pydanticFormField.attributes?.disabled || false;
-    const { control } = rhf;
+    const { control } = reactHookForm;
     const { id: arrayName, arrayItem } = pydanticFormField;
     const { minItems, maxItems } = pydanticFormField.validations;
     const { container, fieldWrapper } = getWfoArrayFieldStyles();

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 
 export const getWfoArrayFieldStyles = () => {
     const container = css({
+        border: 'thin solid #eee',
         padding: '1rem',
         display: 'flex',
         flexDirection: 'column',
@@ -17,6 +18,7 @@ export const getWfoArrayFieldStyles = () => {
     const minusButton = css({
         width: '40px',
         cursor: 'pointer',
+        marginBottom: '12px',
     });
 
     const plusButtonWrapper = css({

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactSelect, { components } from 'react-select';
 import type { GroupBase, InputProps } from 'react-select';
 
@@ -33,10 +33,20 @@ export const WfoReactSelect = <ValueType,>({
     hasError = false,
     refetch,
 }: WfoReactSelectProps<ValueType>) => {
-    const selectedValue = options.find(
+    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);
+
     // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
     const {
         reactSelectInnerComponentStyles,
@@ -79,8 +89,17 @@ export const WfoReactSelect = <ValueType,>({
                 id={id}
                 inputId={`${id}.search`}
                 onChange={(option) => {
-                    const selectedValue = option?.value;
-                    onChange(selectedValue);
+                    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);
+                    } else {
+                        const selectedValue = option?.value;
+                        setSelectedValue(option);
+                        onChange(selectedValue);
+                    }
                 }}
                 css={reactSelectStyle}
                 isLoading={isLoading}

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

@@ -1,59 +1,16 @@
 import React from 'react';
 
+import { capitalize } from 'lodash';
 import type { PydanticFormElement } from 'pydantic-forms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
-import { tint } from '@elastic/eui';
-import { css } from '@emotion/react';
 
-import { getCommonFormFieldStyles } from '@/components';
-import { WfoTheme, useWithOrchestratorTheme } from '@/hooks';
-
-export const getStyles = ({ theme }: WfoTheme) => {
-    const toShadeColor = (color: string) => tint(color, 0.9);
-
-    const summaryFieldStyle = css({
-        'div.emailMessage': {
-            td: {
-                color: theme.colors.text,
-            },
-            p: {
-                color: theme.colors.text,
-            },
-            html: {
-                marginLeft: '-10px',
-            },
-        },
-        'section.table-summary': {
-            marginTop: '20px',
-            width: '100%',
-            td: {
-                padding: '10px',
-                verticalAlign: 'top',
-            },
-            'td:not(:first-child):not(:last-child)': {
-                borderRight: `1px solid ${theme.colors.lightestShade}`,
-            },
-            '.label': {
-                fontWeight: 'bold',
-                color: theme.colors.lightestShade,
-                backgroundColor: theme.colors.primary,
-                borderRight: `2px solid ${theme.colors.lightestShade}`,
-                borderBottom: `1px solid ${theme.colors.lightestShade}`,
-            },
-            '.value': {
-                backgroundColor: toShadeColor(theme.colors.primary),
-                borderBottom: `1px solid ${theme.colors.lightestShade}`,
-            },
-        },
-    });
-    return {
-        summaryFieldStyle: summaryFieldStyle,
-    };
-};
+import { getCommonFormFieldStyles, summaryFieldStyles } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { snakeToHuman } from '@/utils';
 
 export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
-    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
     const { id, title, description } = pydanticFormField;
@@ -102,12 +59,14 @@ export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
             </tr>
         );
 
+    const formattedTitle = snakeToHuman(capitalize(title ?? ''));
+
     return (
         <EuiFlexItem data-testid={id} css={[summaryFieldStyle, formRowStyle]}>
             <section>
                 <EuiFormRow
-                    label={description}
-                    labelAppend={<EuiText size="m">{title}</EuiText>}
+                    label={<p className="label">{formattedTitle}</p>}
+                    labelAppend={<EuiText size="m">{description}</EuiText>}
                     id={id}
                     fullWidth
                 >

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.5.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.5.3';

package/src/messages/en-GB.json

@@ -388,8 +388,8 @@
     "tasks": {
         "page": {
             "taskName": "Task",
-            "rerunAll": "Rerun all",
-            "rerunAllQuestion": "Are you sure you want to rerun all failed tasks?"
+            "rerunAll": "Re-try all tasks",
+            "rerunAllQuestion": "Are you sure you want to re-try all failed tasks?"
         },
         "tabs": {
             "active": "Active",

package/src/messages/nl-NL.json

@@ -385,8 +385,8 @@
     "tasks": {
         "page": {
             "taskName": "Taak",
-            "rerunAll": "Alles opnieuw uitvoeren",
-            "rerunAllQuestion": "Weet u zeker dat u alle gefaalde taken opnieuw wilt uitvoeren?"
+            "rerunAll": "Alle taken herstarten",
+            "rerunAllQuestion": "Weet u zeker dat u alle gefaalde taken opnieuw wilt herstarten?"
         },
         "tabs": {
             "active": "Actief",
@@ -452,6 +452,7 @@
     "hamburgerMenu": {
         "support": "Support",
         "softwareVersions": "Software Versies",
-        "logout": "Logout"
+        "logout": "Logout",
+        "aoStatusPage": "A&O applicatie status pagina"
     }
 }