@orchestrator-ui/orchestrator-ui-components 5.3.1 → 5.3.3

package/package.json

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

package/src/components/WfoContentHeader/WfoContentHeader.tsx

@@ -42,7 +42,10 @@ export const WfoContentHeader: FC<WfoContentHeaderProps> = ({
 
             {children && (
                 <EuiFlexItem grow={0}>
-                    <EuiFlexGroup justifyContent="flexEnd">
+                    <EuiFlexGroup
+                        justifyContent="flexEnd"
+                        alignItems="flexStart"
+                    >
                         <WfoRenderElementOrString>
                             {children}
                         </WfoRenderElementOrString>

package/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

package/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': {

package/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';
 

package/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>;
 

package/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>;
 

package/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>;
 

package/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,

package/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,

package/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'

package/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,

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

@@ -1,18 +1,15 @@
-import { tint } from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import { WfoTheme } 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,
+                color: theme.colors.textParagraph,
             },
             p: {
-                color: theme.colors.text,
+                color: theme.colors.textParagraph,
             },
             html: {
                 marginLeft: '-10px',
@@ -26,18 +23,18 @@ export const getStyles = ({ theme }: WfoTheme) => {
                 verticalAlign: 'top',
             },
             'td:not(:first-child):not(:last-child)': {
-                borderRight: `1px solid ${theme.colors.lightestShade}`,
+                borderRight: `1px solid ${theme.colors.borderBasePlain}`,
             },
             '.label': {
                 fontWeight: 'bold',
-                color: theme.colors.lightestShade,
+                color: theme.colors.backgroundBaseSubdued,
                 backgroundColor: theme.colors.primary,
-                borderRight: `2px solid ${theme.colors.lightestShade}`,
-                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+                borderRight: `2px solid ${theme.colors.borderBasePlain}`,
+                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
             },
             '.value': {
-                backgroundColor: toShadeColor(theme.colors.primary),
-                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+                backgroundColor: theme.colors.backgroundBasePrimary,
+                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
             },
         },
     });

package/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>;
 

package/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

package/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;

package/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>;
 

package/src/components/WfoForms/formFields/deprecated/SubscriptionField.tsx

@@ -219,7 +219,6 @@ function SubscriptionFieldDefinition({
                                 <EuiButtonIcon
                                     className="reload-subscriptions-icon-button"
                                     id={`refresh-icon-${id}`}
-                                    aria-label={`reload-${label}`}
                                     iconType="refresh"
                                     iconSize="l"
                                     disabled={isDisabled}

package/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';

package/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> {

package/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx

@@ -3,13 +3,18 @@ import React, { useState } from 'react';
 import { signOut } from 'next-auth/react';
 import { useTranslations } from 'next-intl';
 
-import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
 
 import { WfoLoading } from '@/components/WfoLoading';
 import { ORCHESTRATOR_UI_LIBRARY_VERSION } from '@/configuration';
 import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
-import { WfoLogoutIcon, WfoSquareStack3dStack, WfoXCircleFill } from '@/icons';
+import {
+    WfoChartBar,
+    WfoLogoutIcon,
+    WfoSquareStack3dStack,
+    WfoXCircleFill,
+} from '@/icons';
 import { WfoQuestionCircle } from '@/icons/WfoQuestionCircle';
 import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
 import { toOptionalArrayEntry } from '@/utils';
@@ -18,14 +23,24 @@ export const WfoHamburgerMenu = () => {
     const t = useTranslations('hamburgerMenu');
     const [isPopoverOpen, setPopoverIsOpen] = useState(false);
     const { theme, isDarkThemeActive } = useOrchestratorTheme();
-    const { enableSupportMenuItem, supportMenuItemUrl } =
-        useGetOrchestratorConfig();
+    const {
+        enableSupportMenuItem,
+        supportMenuItemUrl,
+        enableAoStackStatus,
+        aoStackStatusUrl,
+    } = useGetOrchestratorConfig();
     const closePopover = () => {
         setPopoverIsOpen(false);
     };
+
     const handleOpenSupport = async (): Promise<undefined> => {
         window.open(supportMenuItemUrl, '_blank');
     };
+
+    const handleOpenStatus = async (): Promise<undefined> => {
+        window.open(aoStackStatusUrl, '_blank');
+    };
+
     const {
         data,
         isFetching,
@@ -92,6 +107,12 @@ export const WfoHamburgerMenu = () => {
         onClick: handleOpenSupport,
     };
 
+    const aoStackStatusItem = {
+        name: t('aoStatusPage'),
+        icon: <WfoChartBar width={26} height={26} />,
+        onClick: handleOpenStatus,
+    };
+
     const versionItem = {
         name: t('softwareVersions'),
         icon: <WfoSquareStack3dStack width={24} height={24} />,
@@ -100,6 +121,7 @@ export const WfoHamburgerMenu = () => {
 
     const panelItems = [
         ...toOptionalArrayEntry(supportItem, enableSupportMenuItem),
+        ...toOptionalArrayEntry(aoStackStatusItem, enableAoStackStatus),
         versionItem,
         { ...logoutItem },
     ];

package/src/components/WfoPydanticForm/Footer.tsx

@@ -50,7 +50,6 @@ export const Footer = () => {
             color={'primary'}
             iconSide="right"
             aria-label={t('previous')}
-            disabled={isDisabled}
         >
             {t('previous')}
         </EuiButton>

package/src/components/WfoPydanticForm/Header.tsx

@@ -14,5 +14,8 @@ const headerStyling = css`
 export const Header = () => {
     const { pydanticFormSchema } = usePydanticFormContext();
 
-    return <h3 css={headerStyling}>{pydanticFormSchema?.title}</h3>;
+    return pydanticFormSchema?.title &&
+        pydanticFormSchema.title !== 'unknown' ? (
+        <h3 css={headerStyling}>{pydanticFormSchema?.title}</h3>
+    ) : undefined;
 };

package/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 = ({

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { AbstractIntlMessages, useMessages, useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import type {
-    ComponentMatcher,
+    ComponentMatcherExtender,
     PydanticComponentMatcher,
     PydanticFormApiProvider,
     PydanticFormLabelProvider,
@@ -15,19 +15,27 @@ 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 { Header } from './Header';
 import { Row } from './Row';
-import { Checkbox, Divider, Label, Summary, Text, TextArea } from './fields';
+import {
+    Checkbox,
+    Divider,
+    Integer,
+    Label,
+    Radio,
+    Summary,
+    Text,
+    TextArea,
+    WfoArrayField,
+    WfoObjectField,
+} from './fields';
 
 interface WfoPydanticFormProps {
     processName: string;
@@ -47,8 +55,8 @@ export const WfoPydanticForm = ({
     const [startProcess] = useStartProcessMutation();
     const router = useRouter();
     const t = useTranslations('pydanticForms.userInputForm');
-    const componentMatcher = useAppSelector(
-        (state) => state.pydanticForm?.componentMatcher,
+    const componentMatcherExtender = useAppSelector(
+        (state) => state.pydanticForm?.componentMatcherExtender,
     );
 
     const translationMessages: AbstractIntlMessages = useMessages();
@@ -82,40 +90,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>>(
@@ -145,7 +139,9 @@ export const WfoPydanticForm = ({
         });
     };
 
-    const wfoComponentMatcher: ComponentMatcher = (currentMatchers) => {
+    const wfoComponentMatcherExtender: ComponentMatcherExtender = (
+        currentMatchers,
+    ): PydanticComponentMatcher[] => {
         const wfoMatchers: PydanticComponentMatcher[] = [
             {
                 id: 'textarea',
@@ -209,7 +205,57 @@ export const WfoPydanticForm = ({
                     return field.type === PydanticFormFieldType.BOOLEAN;
                 },
             },
-            ...currentMatchers.filter((matcher) => matcher.id !== 'text'),
+            {
+                id: 'radio',
+                ElementMatch: {
+                    Element: Radio,
+                    isControlledElement: true,
+                },
+                matcher(field) {
+                    // We are looking for a single value from a set list of options. With less than 4 options, use radio buttons.
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        field.options.length > 0 &&
+                        field.options.length <= 3
+                    );
+                },
+            },
+            {
+                id: 'integerfield',
+                ElementMatch: {
+                    Element: Integer,
+                    isControlledElement: true,
+                },
+                matcher(field) {
+                    return field.type === PydanticFormFieldType.INTEGER;
+                },
+                validator: zodValidationPresets.integer,
+            },
+
+            ...currentMatchers
+                .filter((matcher) => matcher.id !== 'text')
+                .filter((matcher) => matcher.id !== 'array')
+                .filter((matcher) => matcher.id !== 'object'),
+            {
+                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: 'text',
                 ElementMatch: {
@@ -222,8 +268,9 @@ export const WfoPydanticForm = ({
                 validator: zodValidationPresets.string,
             },
         ];
-
-        return componentMatcher ? componentMatcher(wfoMatchers) : wfoMatchers;
+        return componentMatcherExtender
+            ? componentMatcherExtender(wfoMatchers)
+            : wfoMatchers;
     };
 
     const handleCancel = () => {
@@ -243,7 +290,7 @@ export const WfoPydanticForm = ({
                 footerRenderer: Footer,
                 headerRenderer: Header,
                 skipSuccessNotice: true,
-                componentMatcher: wfoComponentMatcher,
+                componentMatcherExtender: wfoComponentMatcherExtender,
                 labelProvider: pydanticLabelProvider,
                 rowRenderer: Row,
                 customTranslations: {

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiFieldNumber } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+import type { WfoTheme } from '@/hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+const getFormFieldsBaseStyle = ({ theme }: WfoTheme) => {
+    const formFieldBaseStyle = css({
+        backgroundColor: theme.colors.body,
+        color: theme.colors.text,
+        '&:focus': {
+            backgroundColor: theme.colors.emptyShade,
+        },
+    });
+
+    return {
+        formFieldBaseStyle,
+    };
+};
+
+export const Integer: PydanticFormControlledElement = ({
+    pydanticFormField,
+    onChange,
+    value,
+    disabled,
+}) => {
+    const { formFieldBaseStyle } = useWithOrchestratorTheme(
+        getFormFieldsBaseStyle,
+    );
+
+    return (
+        <EuiFieldNumber
+            css={formFieldBaseStyle}
+            name={pydanticFormField.id}
+            onChange={(event) => onChange(parseInt(event.target.value))}
+            value={value}
+            disabled={disabled}
+        />
+    );
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiRadioGroup } from '@elastic/eui';
+
+export const Radio: PydanticFormControlledElement = ({
+    pydanticFormField,
+    onChange,
+    value,
+    disabled,
+}) => {
+    const radioOptions = pydanticFormField.options.map((option) => ({
+        id: option.value,
+        label: option.label,
+    }));
+
+    return (
+        <EuiRadioGroup
+            options={radioOptions}
+            idSelected={value}
+            onChange={(id) => onChange(id)}
+            name={pydanticFormField.id}
+            disabled={disabled}
+        />
+    );
+};