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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.0.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/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>
+    );
+};

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

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import type { PydanticFormElement } from 'pydantic-forms';
+
+import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+import { tint } from '@elastic/eui';
+import { css } from '@emotion/react';
+import type { WfoTheme } from '@orchestrator-ui/orchestrator-ui-components';
+
+import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
+import { 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,
+    };
+};
+
+export const Summary: PydanticFormElement = ({ pydanticFormField }) => {
+    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+
+    const { id, title, description } = pydanticFormField;
+    const uniforms = pydanticFormField.schema.uniforms;
+    const summaryData = uniforms?.data as unknown as {
+        headers: string[][];
+        labels: string[];
+        columns: string[][];
+    };
+
+    const headers = summaryData?.headers as string[][];
+    const labels = summaryData?.labels as string[];
+    const columns = summaryData?.columns || [];
+
+    const extraColumnsData = columns.filter((_, index) => index !== 0);
+
+    const rows = columns[0].map((row, index) => (
+        <tr key={index}>
+            {labels && <td className={`label`}>{labels[index]}</td>}
+            <td className={`value`}>
+                {typeof row === 'string' && row.includes('<!doctype html>') ? (
+                    <div
+                        className="emailMessage"
+                        dangerouslySetInnerHTML={{ __html: row }}
+                    ></div>
+                ) : (
+                    row
+                )}
+            </td>
+            {extraColumnsData &&
+                extraColumnsData.map((_, idx) => (
+                    <td className={`value`} key={idx}>
+                        {extraColumnsData[idx][index]}
+                    </td>
+                ))}
+        </tr>
+    ));
+
+    const tableHeader =
+        !headers || headers.length === 0 ? null : (
+            <tr>
+                {labels && <th />}
+                {headers.map((header, idx) => (
+                    <th key={idx}>{header}</th>
+                ))}
+            </tr>
+        );
+
+    return (
+        <EuiFlexItem css={[summaryFieldStyle, formRowStyle]}>
+            <section>
+                <EuiFormRow
+                    label={description}
+                    labelAppend={<EuiText size="m">{title}</EuiText>}
+                    id={id}
+                    fullWidth
+                >
+                    <section className="table-summary">
+                        <table id={`${id}-table`}>
+                            <thead>{tableHeader}</thead>
+                            <tbody>{rows}</tbody>
+                        </table>
+                    </section>
+                </EuiFormRow>
+            </section>
+        </EuiFlexItem>
+    );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiFieldText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import { getFormFieldsBaseStyle } from '@/theme';
+
+export const Text: PydanticFormControlledElement = ({
+    onChange,
+    value,
+    disabled,
+}) => {
+    const { formFieldBaseStyle } = useWithOrchestratorTheme(
+        getFormFieldsBaseStyle,
+    );
+
+    return (
+        <EuiFieldText
+            css={formFieldBaseStyle}
+            disabled={disabled}
+            onChange={(event) => onChange(event.target.value)}
+            value={value ?? ''}
+            fullWidth
+        />
+    );
+};

package/src/components/WfoPydanticForm/fields/index.ts

@@ -1 +1,6 @@
 export * from './TextArea';
+export * from './Text';
+export * from './Label';
+export * from './Divider';
+export * from './Checkbox';
+export * from './Summary';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.0.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.1.0';

package/src/icons/WfoExclamationTriangle.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoExclamationTriangle: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        color={color}
+    >
+        <title>icon/exclamation-circle</title>
+        <g id="Symbols" strokeWidth="1.5" fill="currentColor">
+            <g id="icon/exclamation-triangle" fill="currentColor">
+                <path
+                    fillRule="evenodd"
+                    d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+                    clipRule="evenodd"
+                />
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/index.ts

@@ -39,3 +39,4 @@ export * from './WfoActualWork';
 export * from './WfoMalfunction';
 export * from './WfoPlannedWork';
 export * from './WfoCubeFill';
+export * from './WfoExclamationTriangle';

package/src/pages/metadata/WfoTasksPage.tsx

@@ -128,33 +128,18 @@ export const WfoTasksPage = () => {
             columnType: ColumnType.DATA,
             label: t('description'),
             width: '700px',
-            renderData: (value, row) =>
-                value ? (
-                    <WfoMetadataDescriptionField
-                        onSave={(updatedNote) =>
-                            updateWorkflow({
-                                id: row.workflowId,
-                                description: updatedNote,
-                            })
-                        }
-                        description={value}
-                    />
-                ) : null,
+            renderData: (value, row) => (
+                <WfoMetadataDescriptionField
+                    onSave={(updatedNote) =>
+                        updateWorkflow({
+                            id: row.workflowId,
+                            description: updatedNote,
+                        })
+                    }
+                    description={value}
+                />
+            ),
         },
-
-        // description: {
-        //     columnType: ColumnType.DATA,
-        //     label: t('description'),
-        //     width: '450px',
-        //     renderData: (value, row) =>
-        //         value ? (
-        //             <WfoWorkflowDescriptionField
-        //                 workflow_id={row.workflowId}
-        //                 description={value}
-        //             />
-        //         ) : null,
-        // },
-
         target: {
             columnType: ColumnType.DATA,
             label: t('target'),