@orchestrator-ui/orchestrator-ui-components 4.2.0 → 5.1.0

package/package.json

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

package/src/components/WfoBadges/WfoSubscriptionStatusBadge/WfoSubscriptionStatusBadge.tsx

@@ -5,15 +5,16 @@ import { SubscriptionStatus } from '../../../types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoSubscriptionStatusBadgeProps = {
-    status: SubscriptionStatus;
+    status?: SubscriptionStatus;
 };
 
 export const WfoSubscriptionStatusBadge: FC<
     WfoSubscriptionStatusBadgeProps
 > = ({ status }) => {
     const { theme, toSecondaryColor } = useOrchestratorTheme();
+    const lowerCaseStatus = status?.toLowerCase() || '';
 
-    const getBadgeColorFromStatus = (status: string) => {
+    const getBadgeColorFromStatus = () => {
         const {
             primary,
             darkestShade,
@@ -23,7 +24,7 @@ export const WfoSubscriptionStatusBadge: FC<
             successText,
         } = theme.colors;
 
-        switch (status.toLowerCase()) {
+        switch (lowerCaseStatus) {
             case SubscriptionStatus.ACTIVE:
                 return {
                     badgeColor: toSecondaryColor(success),
@@ -43,11 +44,11 @@ export const WfoSubscriptionStatusBadge: FC<
         }
     };
 
-    const { badgeColor, textColor } = getBadgeColorFromStatus(status);
+    const { badgeColor, textColor } = getBadgeColorFromStatus();
 
     return (
         <WfoBadge textColor={textColor} color={badgeColor}>
-            {status.toLowerCase()}
+            {lowerCaseStatus}
         </WfoBadge>
     );
 };

package/src/components/WfoBadges/WfoWorkflowTargetBadge/WfoWorkflowTargetBadge.tsx

@@ -38,6 +38,7 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({
                     textColor: primaryText,
                 };
             case WorkflowTarget.SYSTEM:
+            case WorkflowTarget.VALIDATE:
                 return {
                     badgeColor: toSecondaryColor(warning),
                     textColor: warningText,

package/src/components/WfoButtonComboBox/WfoButtonComboBox.tsx

@@ -0,0 +1,79 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import {
+    EuiPopover,
+    EuiSelectable,
+    EuiSelectableOption,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { getWfoButtonComboBoxStyles } from '@/components/WfoButtonComboBox/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export type WfoStartButtonComboBoxProps = {
+    options: EuiSelectableOption[];
+    onOptionChange: (selectedOption: EuiSelectableOption) => void;
+    title?: string;
+    children: (togglePopover: () => void) => React.ReactElement;
+    className?: string;
+};
+
+export const WfoButtonComboBox: FC<WfoStartButtonComboBoxProps> = ({
+    options,
+    onOptionChange,
+    title,
+    children,
+    className,
+}) => {
+    const [isPopoverOpen, setPopoverOpen] = useState(false);
+    const [optionsState, setOptionsState] =
+        useState<EuiSelectableOption[]>(options);
+
+    const { selectableStyle, titleStyle } = useWithOrchestratorTheme(
+        getWfoButtonComboBoxStyles,
+    );
+
+    useEffect(() => {
+        if (!isPopoverOpen) {
+            setOptionsState(options);
+        }
+    }, [isPopoverOpen, options]);
+
+    return (
+        <EuiPopover
+            initialFocus={`.euiSelectable .euiFieldSearch`}
+            button={children(() => setPopoverOpen(!isPopoverOpen))}
+            isOpen={isPopoverOpen}
+            closePopover={() => setPopoverOpen(false)}
+        >
+            {title && (
+                <>
+                    <EuiText size="s" css={titleStyle}>
+                        {title}
+                    </EuiText>
+                    <EuiSpacer size="s"></EuiSpacer>
+                </>
+            )}
+            <EuiSelectable
+                className={className}
+                css={selectableStyle}
+                options={optionsState}
+                searchable
+                onChange={(options, _, changedOption) => {
+                    onOptionChange(changedOption);
+                    setOptionsState(options);
+                }}
+                height={200}
+            >
+                {(list, search) => (
+                    <>
+                        {search}
+                        <EuiSpacer size="s" />
+                        {list}
+                    </>
+                )}
+            </EuiSelectable>
+        </EuiPopover>
+    );
+};

package/src/components/WfoButtonComboBox/index.ts

@@ -0,0 +1 @@
+export * from './WfoButtonComboBox';

package/src/components/WfoButtonComboBox/styles.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getWfoButtonComboBoxStyles = ({ theme }: WfoTheme) => {
+    const selectableStyle = css({
+        '.euiFieldSearch': {
+            backgroundColor: theme.colors.body,
+            color: theme.colors.text,
+            '&:focus': {
+                backgroundColor: theme.colors.emptyShade,
+            },
+        },
+
+        '.euiSelectableList .euiSelectableListItem': {
+            borderColor: theme.colors.lightShade,
+        },
+    });
+
+    const titleStyle = css({
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    return {
+        selectableStyle,
+        titleStyle,
+    };
+};

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

@@ -29,7 +29,7 @@ interface SubscriptionSummaryDisplayProps {
     subscriptionId: string;
 }
 
-const SubscriptionSummaryDisplay = ({
+export const SubscriptionSummaryDisplay = ({
     subscriptionId,
 }: SubscriptionSummaryDisplayProps) => {
     const { data } = useGetSubscriptionDetailQuery({

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

@@ -4,6 +4,8 @@ import { WfoTheme } from '@/hooks';
 
 export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
     const formRowStyle = css({
+        marginBottom: theme.base * 2,
+
         '.euiText': {
             color: theme.colors.text,
         },

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

@@ -25,3 +25,4 @@ export * from './SummaryField';
 export * from './CustomerField';
 export * from './ConnectedSelectField';
 export * from './deprecated/FileUploadField';
+export * from './commonStyles';

package/src/components/WfoPydanticForm/Footer.tsx

@@ -11,13 +11,19 @@ import { usePydanticFormContext } from 'pydantic-forms';
 import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoPlayFill } from '@/icons';
 
 export const Footer = () => {
+    const {
+        rhf,
+        onCancel,
+        onPrevious,
+        allowUntouchedSubmit,
+        hasNext,
+        formInputData,
+    } = usePydanticFormContext();
+
     const { theme } = useOrchestratorTheme();
-    const t = useTranslations();
-    const { rhf, onCancel, allowUntouchedSubmit, isLoading } =
-        usePydanticFormContext();
+    const t = useTranslations('pydanticForms.userInputForm');
 
     const isDisabled: boolean =
         !rhf.formState.isValid ||
@@ -25,42 +31,77 @@ export const Footer = () => {
             !rhf.formState.isDirty &&
             !rhf.formState.isSubmitting);
 
+    const handlePrevious = () => {
+        if (onCancel) {
+            onCancel();
+        }
+    };
+
+    const PreviousButton = () => (
+        <EuiButton
+            id="button-submit-form-submit"
+            tabIndex={0}
+            fill
+            onClick={() => {
+                if (onPrevious) {
+                    onPrevious();
+                }
+            }}
+            color={'primary'}
+            iconSide="right"
+            aria-label={t('previous')}
+            disabled={isDisabled}
+        >
+            {t('previous')}
+        </EuiButton>
+    );
+
+    const CancelButton = () => (
+        <div
+            onClick={handlePrevious}
+            css={{
+                cursor: 'pointer',
+                color: theme.colors.link,
+                fontWeight: theme.font.weight.bold,
+                marginLeft: theme.base / 2,
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            {t('cancel')}
+        </div>
+    );
+
+    const SubmitButton = () => {
+        const submitButtonLabel = hasNext ? t('next') : t('startWorkflow');
+
+        return (
+            <EuiButton
+                id="button-submit-form-submit"
+                tabIndex={0}
+                fill
+                color={'primary'}
+                type="submit"
+                iconSide="right"
+                aria-label={submitButtonLabel}
+                disabled={isDisabled}
+            >
+                {submitButtonLabel}
+            </EuiButton>
+        );
+    };
+
     return (
         <div>
             <EuiHorizontalRule />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <div
-                    onClick={() => {
-                        if (onCancel) {
-                            onCancel();
-                        }
-                    }}
-                    css={{
-                        cursor: 'pointer',
-                        color: theme.colors.link,
-                        fontWeight: theme.font.weight.bold,
-                        marginLeft: theme.base / 2,
-                        display: 'flex',
-                        alignItems: 'center',
-                    }}
-                >
-                    {t('cancel')}
+                <div>
+                    {(formInputData && formInputData.length > 0 && (
+                        <PreviousButton />
+                    )) || <CancelButton />}
                 </div>
 
-                <EuiButton
-                    id="button-submit-form-submit"
-                    tabIndex={0}
-                    fill
-                    color={'primary'}
-                    isLoading={isLoading}
-                    type="submit"
-                    iconType={() => <WfoPlayFill color="#FFF" />}
-                    iconSide="right"
-                    aria-label={t('startWorkflow')}
-                    disabled={isDisabled}
-                >
-                    {t('startWorkflow')}
-                </EuiButton>
+                <SubmitButton />
             </div>
         </div>
     );

package/src/components/WfoPydanticForm/Row.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import type { RowRenderer } from 'pydantic-forms';
+import type { RowRenderComponent } from 'pydantic-forms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
-export const Row: RowRenderer = ({
+export const Row: RowRenderComponent = ({
     title,
     description,
     error,

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 
 import { AbstractIntlMessages, useMessages, useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
-import {
-    PydanticForm,
-    PydanticFormFieldFormat,
-    PydanticFormFieldType,
-} from 'pydantic-forms';
 import type {
     ComponentMatcher,
     PydanticComponentMatcher,
     PydanticFormApiProvider,
     PydanticFormLabelProvider,
 } from 'pydantic-forms';
+import {
+    PydanticForm,
+    PydanticFormFieldFormat,
+    PydanticFormFieldType,
+    zodValidationPresets,
+} from 'pydantic-forms';
 
 import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 
@@ -21,10 +22,11 @@ import { StartWorkflowPayload } from '@/pages/processes/WfoStartProcessPage';
 import { HttpStatus } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 import { useAppSelector } from '@/rtk/hooks';
+import { FormValidationError } from '@/types';
 
 import { Footer } from './Footer';
 import { Row } from './Row';
-import { TextArea } from './fields/TextArea';
+import { Checkbox, Divider, Label, Summary, Text, TextArea } from './fields';
 
 interface WfoPydanticFormProps {
     processName: string;
@@ -54,6 +56,11 @@ export const WfoPydanticForm = ({
         typeof translationMessages?.pydanticForms !== 'string'
             ? translationMessages.pydanticForms.backendTranslations
             : {};
+    const widgetsTranslations =
+        translationMessages?.pydanticForms &&
+        typeof translationMessages?.pydanticForms !== 'string'
+            ? translationMessages.pydanticForms.widgets
+            : {};
 
     const onSuccess = (_fieldValues: object, req: object) => {
         const request = req as { response: StartProcessResponse };
@@ -88,6 +95,18 @@ export const WfoPydanticForm = ({
                                         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);
@@ -112,11 +131,13 @@ export const WfoPydanticForm = ({
         return pydanticFormProvider;
     };
 
+    const orchestratorTranslations = formTranslations as unknown;
+
     const pydanticLabelProvider: PydanticFormLabelProvider = async () => {
         return new Promise((resolve) => {
             resolve({
                 labels: {
-                    ...(formTranslations as object),
+                    ...(orchestratorTranslations as object),
                 },
                 data: {},
             });
@@ -138,17 +159,83 @@ export const WfoPydanticForm = ({
                     );
                 },
             },
-            ...currentMatchers,
+            {
+                id: 'summary',
+                ElementMatch: {
+                    Element: Summary,
+                    isControlledElement: false,
+                },
+                matcher(field) {
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        (field.format as string) === 'summary'
+                    );
+                },
+            },
+            {
+                id: 'label',
+                ElementMatch: {
+                    Element: Label,
+                    isControlledElement: false,
+                },
+                matcher(field) {
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        field.format === PydanticFormFieldFormat.LABEL
+                    );
+                },
+            },
+            {
+                id: 'divider',
+                ElementMatch: {
+                    Element: Divider,
+                    isControlledElement: false,
+                },
+                matcher(field) {
+                    return (
+                        field.type === PydanticFormFieldType.STRING &&
+                        field.format === PydanticFormFieldFormat.DIVIDER
+                    );
+                },
+            },
+            {
+                id: 'checkbox',
+                ElementMatch: {
+                    Element: Checkbox,
+                    isControlledElement: true,
+                },
+                matcher(field) {
+                    return field.type === PydanticFormFieldType.BOOLEAN;
+                },
+            },
+            ...currentMatchers.filter((matcher) => matcher.id !== 'text'),
+            {
+                id: 'text',
+                ElementMatch: {
+                    Element: Text,
+                    isControlledElement: true,
+                },
+                matcher(field) {
+                    return field.type === PydanticFormFieldType.STRING;
+                },
+                validator: zodValidationPresets.string,
+            },
         ];
 
         return componentMatcher ? componentMatcher(wfoMatchers) : wfoMatchers;
     };
 
+    const handleCancel = () => {
+        const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
+        router.replace(pfBasePath);
+    };
+
     return (
         <PydanticForm
             title={''}
             id={processName}
             onSuccess={onSuccess}
+            onCancel={handleCancel}
             loadingComponent={<WfoLoading />}
             config={{
                 apiProvider: getPydanticFormProvider(),
@@ -161,6 +248,10 @@ export const WfoPydanticForm = ({
                 customTranslations: {
                     cancel: t('cancel'),
                     startWorkflow: t('startWorkflow'),
+                    widgets: {
+                        ...(widgetsTranslations as object),
+                    },
+                    ...translationMessages,
                 },
             }}
         />

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiCheckbox } from '@elastic/eui';
+
+export const Checkbox: PydanticFormControlledElement = ({
+    pydanticFormField,
+    onChange,
+    value,
+    disabled,
+}) => {
+    return (
+        <EuiCheckbox
+            checked={value || false}
+            disabled={disabled}
+            id={pydanticFormField.id}
+            label={pydanticFormField.title || <div>&nbsp;</div>}
+            onChange={() => !disabled && onChange(!value)}
+        />
+    );
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import type { PydanticFormElement } from 'pydantic-forms';
+
+import { EuiHorizontalRule } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+export const Divider: PydanticFormElement = ({ pydanticFormField }) => {
+    const { theme } = useOrchestratorTheme();
+    return (
+        <EuiHorizontalRule
+            style={{ marginTop: theme.base }}
+            id={pydanticFormField.id}
+        />
+    );
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { PydanticFormElement } from 'pydantic-forms';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+export const Label: PydanticFormElement = ({ pydanticFormField }) => {
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <div>
+            <label
+                css={{
+                    color: theme.colors.text,
+                    display: 'block',
+                }}
+                id={pydanticFormField.id}
+            >
+                {pydanticFormField.title}
+            </label>
+        </div>
+    );
+};