@orchestrator-ui/orchestrator-ui-components 5.6.0 → 5.7.0

package/package.json

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

package/src/components/WfoPydanticForm/Footer.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 import { useTranslations } from 'next-intl';
-import { usePydanticFormContext } from 'pydantic-forms';
+import type { PydanticFormFooterProps } from 'pydantic-forms';
 
 import { EuiButton, EuiHorizontalRule } from '@elastic/eui';
 
@@ -14,10 +14,12 @@ import { useOrchestratorTheme } from '@/hooks';
 
 import { RenderFormErrors } from './RenderFormErrors';
 
-export const Footer = () => {
-    const { onCancel, onPrevious, hasNext, formInputData } =
-        usePydanticFormContext();
-
+export const Footer = ({
+    onCancel,
+    onPrevious,
+    hasNext,
+    hasPrevious,
+}: PydanticFormFooterProps) => {
     const { theme } = useOrchestratorTheme();
     const t = useTranslations('pydanticForms.userInputForm');
 
@@ -97,9 +99,7 @@ export const Footer = () => {
             <EuiHorizontalRule />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <div>
-                    {(formInputData && formInputData.length > 0 && (
-                        <PreviousButton />
-                    )) || <CancelButton />}
+                    {(hasPrevious && <PreviousButton />) || <CancelButton />}
                 </div>
 
                 <SubmitButton />

package/src/components/WfoPydanticForm/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { usePydanticFormContext } from 'pydantic-forms';
+import type { PydanticFormHeaderProps } from 'pydantic-forms';
 
 import { css } from '@emotion/react';
 
@@ -11,9 +11,7 @@ const headerStyling = css`
     margin-bottom: 15px;
 `;
 
-export const Header = () => {
-    const { pydanticFormSchema } = usePydanticFormContext();
-
+export const Header = ({ pydanticFormSchema }: PydanticFormHeaderProps) => {
     return pydanticFormSchema?.title &&
         pydanticFormSchema.title !== 'unknown' ? (
         <h3 data-testid="pydantic-form-header" css={headerStyling}>

package/src/components/WfoPydanticForm/RenderFormErrors.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 import { useTranslations } from 'next-intl';
-import { usePydanticFormContext } from 'pydantic-forms';
+import { useGetValidationErrors } from 'pydantic-forms';
 
 import { getCommonFormFieldStyles } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
@@ -14,7 +14,7 @@ import { useWithOrchestratorTheme } from '@/hooks';
 export const RenderFormErrors = () => {
     const { errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
-    const { errorDetails } = usePydanticFormContext();
+    const errorDetails = useGetValidationErrors();
     const t = useTranslations('pydanticForms.userInputForm');
     if (!errorDetails) {
         return <></>;

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';
+import { getCommonFormFieldStyles, getDataTestId } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 export const Row: RowRenderComponent = ({
@@ -29,7 +29,7 @@ export const Row: RowRenderComponent = ({
 
     return (
         <EuiFormRow
-            data-testid="pydantic-form-row"
+            data-testid={getDataTestId('pydantic-form-row', title)}
             css={formRowStyle}
             label={<Label />}
             labelAppend={<EuiText size="m">{description}</EuiText>}

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -11,6 +11,7 @@ import type {
 import {
     Locale,
     PydanticForm,
+    PydanticFormConfig,
     PydanticFormFieldFormat,
     PydanticFormFieldType,
     zodValidationPresets,
@@ -262,11 +263,13 @@ export const WfoPydanticForm = ({
 
     const onSuccess = useCallback(
         (_fieldValues: object, req: object) => {
-            const request = req as { response: StartProcessResponse };
-            const response = request ? request?.response : null;
-            if (response?.id) {
+            const request = req as {
+                status: HttpStatus;
+                data: StartProcessResponse;
+            };
+            if (request?.data?.id) {
                 const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-                router.replace(`${pfBasePath}/${response.id}`);
+                router.replace(`${pfBasePath}/${request.data.id}`);
             }
         },
         [isTask, router],
@@ -277,9 +280,13 @@ export const WfoPydanticForm = ({
             requestBody = [],
             formKey,
         }) => {
+            const userInputs = isTask
+                ? [...requestBody]
+                : [{ ...startProcessPayload }, ...requestBody];
+
             const response = startProcess({
                 workflowName: formKey,
-                userInputs: [{ ...startProcessPayload }, ...requestBody],
+                userInputs,
             });
             return response
                 .then(({ error, data }) => {
@@ -297,7 +304,10 @@ export const WfoPydanticForm = ({
                                 });
                             }
                         } else if (data) {
-                            resolve(data);
+                            resolve({
+                                data,
+                                status: HttpStatus.Created,
+                            });
                         }
 
                         resolve({});
@@ -316,14 +326,14 @@ export const WfoPydanticForm = ({
         };
 
         return pydanticFormProvider;
-    }, [startProcess, startProcessPayload]);
+    }, [isTask, startProcess, startProcessPayload]);
 
     const handleCancel = useCallback(() => {
         const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
         router.replace(pfBasePath);
     }, [isTask, router]);
 
-    const config = useMemo(() => {
+    const config = useMemo((): PydanticFormConfig => {
         const getLocale = () => {
             if (router.locale) {
                 return router.locale as Locale;
@@ -333,10 +343,8 @@ export const WfoPydanticForm = ({
 
         return {
             apiProvider: getPydanticFormProvider(),
-            allowUntouchedSubmit: true,
             footerRenderer: Footer,
             headerRenderer: Header,
-            skipSuccessNotice: true,
             componentMatcherExtender: wfoComponentMatcherExtender,
             labelProvider: pydanticLabelProvider,
             rowRenderer: Row,

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

@@ -7,7 +7,8 @@ import {
     disableField,
     fieldToComponentMatcher,
     itemizeArrayItem,
-    usePydanticFormContext,
+    useGetConfig,
+    useGetForm,
 } from 'pydantic-forms';
 
 import { EuiIcon } from '@elastic/eui';
@@ -66,7 +67,9 @@ export const PlusButton = ({
 export const WfoArrayField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
-    const { config, reactHookForm } = usePydanticFormContext();
+    const config = useGetConfig();
+    const reactHookForm = useGetForm();
+
     const disabled = pydanticFormField.attributes?.disabled || false;
     const { control } = reactHookForm;
     const { id: arrayName, arrayItem } = pydanticFormField;

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

@@ -5,7 +5,7 @@ import {
     RenderFields,
     disableField,
     getPydanticFormComponents,
-    usePydanticFormContext,
+    useGetConfig,
 } from 'pydantic-forms';
 
 import { EuiFlexGroup } from '@elastic/eui';
@@ -15,7 +15,7 @@ import { getWfoObjectFieldStyles } from './styles';
 export const WfoObjectField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
-    const { config } = usePydanticFormContext();
+    const config = useGetConfig();
     const disabled = pydanticFormField.attributes?.disabled || false;
     const { wfoObjectFieldStyles } = getWfoObjectFieldStyles();
     const components = getPydanticFormComponents(

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

@@ -17,3 +17,9 @@ export const getNestedSummaryLabel = (
     }
     return String(value);
 };
+
+export const getDataTestId = (base: string, title: string) => {
+    const dataTestId = base + title.toLowerCase().replace(/\s+/g, '-');
+    const generateRandomString = Math.random().toString(36).substring(2, 7);
+    return `${dataTestId}-${generateRandomString}`;
+};

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.6.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.7.0';

package/src/pages/settings/WfoSettingsPage.tsx

@@ -120,7 +120,7 @@ export const WfoEnvSettings = () => {
                         <h2>
                             {t('noSettingsExposed')}{' '}
                             <a
-                                href="https://workfloworchestrator.org/orchestrator-core/reference-docs/app/settings_overview/"
+                                href="https://workfloworchestrator.org/orchestrator-core/reference-docs/app/settings-overview/"
                                 target="_blank"
                             >
                                 {t('settingsOverviewLink')}

package/src/rtk/api.ts

@@ -26,6 +26,7 @@ export enum HttpStatus {
     Unauthorized = 401,
     Forbidden = 403,
     Ok = 200,
+    Created = 201,
     NoContent = 204,
     MultipleChoices = 300,
 }