@orchestrator-ui/orchestrator-ui-components 7.6.0 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "7.6.0",
+  "version": "8.0.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -54,7 +54,7 @@
     "next-query-params": "^5.0.0",
     "object-hash": "^3.0.0",
     "prism-themes": "^1.9.0",
-    "pydantic-forms": "^1.0.7",
+    "pydantic-forms": "^2.0.0",
     "react-diff-view": "^3.2.0",
     "react-draggable": "^4.4.6",
     "react-redux": "^9.1.2",

package/src/components/WfoBadges/WfoEngineStatusBadge/WfoEngineStatusBadge.tsx

@@ -13,10 +13,12 @@ export const WfoEngineStatusBadge = () => {
   const { data } = useGetEngineStatusQuery();
   const { engineStatus } = data || {};
   const { useWebSockets } = useGetOrchestratorConfig();
+
+  const { orchestratorWebsocketUrl } = useGetOrchestratorConfig();
   const [websocketTrigger, { isUninitialized }] = useLazyStreamMessagesQuery();
 
   if (useWebSockets && isUninitialized) {
-    websocketTrigger();
+    websocketTrigger(orchestratorWebsocketUrl);
   }
 
   const engineStatusText: string = engineStatus ? `Engine is ${engineStatus}` : 'Engine status is unavailable';

package/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx

@@ -6,7 +6,7 @@ import { useTranslations } from 'next-intl';
 import { EuiToolTip } from '@elastic/eui';
 
 import { WfoHeaderBadge } from '@/components';
-import { useWithOrchestratorTheme } from '@/hooks';
+import { useGetOrchestratorConfig, useWithOrchestratorTheme } from '@/hooks';
 import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
 import { WfoBoltFill, WfoBoltSlashFill } from '@/icons';
 import { orchestratorApi } from '@/rtk';
@@ -15,16 +15,22 @@ import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages';
 import { getStyles } from './styles';
 
 interface WfoWebsocketStatusBadgeProps {
+  wsUrl?: string;
   hideWhenConnected?: boolean;
 }
 
-export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({ hideWhenConnected = false }) => {
+export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({
+  hideWhenConnected = false,
+  wsUrl = undefined,
+}) => {
   const dispatch = useDispatch();
   const { connectedStyle, disconnectedStyle } = useWithOrchestratorTheme(getStyles);
 
   const t = useTranslations('main');
   const { theme } = useOrchestratorTheme();
-  const { data: websocketConnected } = useStreamMessagesQuery();
+
+  const { orchestratorWebsocketUrl } = useGetOrchestratorConfig();
+  const { data: websocketConnected } = useStreamMessagesQuery(wsUrl || orchestratorWebsocketUrl);
 
   const showBadge = !(websocketConnected && hideWhenConnected);
 

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

@@ -81,7 +81,7 @@ export const WfoArrayField = ({ pydanticFormField }: PydanticFormElementProps) =
 
   if (!arrayItem) return null;
 
-  const component = fieldToComponentMatcher(arrayItem, config?.componentMatcherExtender);
+  const component = fieldToComponentMatcher(arrayItem, config?.componentMatcher);
 
   const renderField = (field: Record<'id', string>, index: number) => {
     const itemizedField = itemizeArrayItem(index, arrayItem, arrayName);

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

@@ -31,20 +31,22 @@ export const WfoInteger: PydanticFormControlledElement = ({ pydanticFormField, o
   // this is imposed by react-hook-form. We try to detect this and extract the actual value
   const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
   const fieldValue = _.isObject(value) && _.has(value, fieldName) ? _.get(value, fieldName) : value;
-  const [userInput, setUserInput] = React.useState<string>();
+  const [userInput, setUserInput] = React.useState<string>('');
 
   useEffect(() => {
     if (fieldValue !== undefined && fieldValue !== null) {
       setUserInput(fieldValue);
-    } else {
-      setUserInput('');
     }
   }, [fieldValue, value]);
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    if (value === null && newValue !== value) {
-      onChange(parseInt(newValue));
+    const newValue = event.target.value || '';
+    if (value === null || newValue !== value) {
+      if (!isNaN(parseInt(newValue))) {
+        onChange(parseInt(newValue));
+      } else {
+        onChange('');
+      }
     }
     setUserInput(newValue);
   };

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

@@ -16,7 +16,7 @@ export const WfoObjectField = ({ pydanticFormField }: PydanticFormElementProps)
   const config = useGetConfig();
   const disabled = pydanticFormField.attributes?.disabled || false;
   const { wfoObjectFieldStyles } = getWfoObjectFieldStyles();
-  const components = getPydanticFormComponents(pydanticFormField.properties || {}, config?.componentMatcherExtender);
+  const components = getPydanticFormComponents(pydanticFormField.properties || {}, config?.componentMatcher);
 
   // We have decided - for now - on the convention that all descendants of disabled fields will be disabled as well
   // so we will not displaying any interactive elements inside a disabled element

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 
 import {
+  PATH_TASKS,
   SubscriptionKeyValueBlock,
   WfoCustomerDescriptionsField,
   WfoInSyncField,
   WfoSubscriptionDetailNoteEdit,
   WfoSubscriptionStatusBadge,
 } from '@/components';
-import { SubscriptionDetail } from '@/types';
+import { SubscriptionDetail, WorkflowTarget } from '@/types';
 import { formatDate } from '@/utils';
 
 interface WfoSubscriptionDetailSectionProps {
@@ -19,8 +21,17 @@ interface WfoSubscriptionDetailSectionProps {
 export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscriptionDetailSectionProps) => {
   const t = useTranslations('subscriptions.detail');
 
-  const { subscriptionId, product, description, startDate, endDate, status, customer, customerDescriptions } =
-    subscriptionDetail;
+  const {
+    subscriptionId,
+    product,
+    description,
+    startDate,
+    endDate,
+    status,
+    customer,
+    customerDescriptions,
+    processes,
+  } = subscriptionDetail;
 
   const subscriptionDetailBlockData = [
     {
@@ -52,6 +63,26 @@ export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscrip
       key: t('insync'),
       value: <WfoInSyncField subscriptionDetail={subscriptionDetail} />,
     },
+    {
+      key: t('lastRunValidation'),
+      value: (() => {
+        const lastValidate = processes?.page
+          ?.filter((process) => process.workflowTarget.toLowerCase() === WorkflowTarget.VALIDATE.toLowerCase())
+          .slice(-1)[0];
+
+        if (!lastValidate) {
+          return t('noValidateWorkflows');
+        }
+
+        const processUrl = `${PATH_TASKS}/${lastValidate.processId}`;
+
+        return (
+          <Link href={processUrl}>
+            {lastValidate.lastStatus} ({formatDate(lastValidate.startedAt)})
+          </Link>
+        );
+      })(),
+    },
     {
       key: t('customer'),
       value: subscriptionDetail && subscriptionDetail.customer ? `${customer?.fullname}` : '-',

package/src/components/WfoTitleWithWebsocketBadge/WfoTitleWithWebsocketBadge.tsx

@@ -7,15 +7,16 @@ import { useGetOrchestratorConfig } from '@/hooks';
 
 interface WfoTitleWithWebsocketBadgeProps {
   title: string;
+  wsUrl?: string;
 }
 
-export const WfoTitleWithWebsocketBadge = ({ title }: WfoTitleWithWebsocketBadgeProps) => {
+export const WfoTitleWithWebsocketBadge = ({ title, wsUrl = undefined }: WfoTitleWithWebsocketBadgeProps) => {
   const { useWebSockets } = useGetOrchestratorConfig();
 
   const pageTitle =
     useWebSockets ?
       <>
-        {title} <WfoWebsocketStatusBadge />
+        {title} <WfoWebsocketStatusBadge wsUrl={wsUrl} />
       </>
     : title;
 

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -17,6 +17,7 @@ import { getStepContent } from '../stepListUtils';
 import { getWorkflowStepsStyles } from '../styles';
 import { CodeView, WfoCodeViewSelector } from './WfoCodeViewSelector';
 import { WfoStepForm } from './WfoStepForm';
+import { useStepDetailOverride } from './useStepDetailOverride';
 
 export interface WfoStepProps {
   stepListItem: StepListItem;
@@ -58,6 +59,7 @@ export const WfoStep = React.forwardRef(
       stepRowStyle,
       getStepToggleExpandStyle,
     } = useWithOrchestratorTheme(getWorkflowStepsStyles);
+    const { overrideStepDetail } = useStepDetailOverride();
     const t = useTranslations('processes.steps');
     const hasHtmlMail = Object.prototype.hasOwnProperty.call(step?.stateDelta || {}, 'confirmation_mail');
 
@@ -104,55 +106,70 @@ export const WfoStep = React.forwardRef(
       },
       [setCodeView],
     );
-
+    const shouldExpand: boolean = isExpanded && hasStepContent;
     return (
       <div ref={ref}>
         <EuiPanel>
           <EuiFlexGroup css={getStepHeaderStyle(hasStepContent)} onClick={() => hasStepContent && onToggleStepDetail()}>
             <WfoStepStatusIcon stepStatus={step.status} isStartStep={isStartStep} />
 
-            <EuiFlexItem grow={0}>
-              <EuiText css={stepListContentBoldTextStyle}>{step.name}</EuiText>
-              <EuiText>
-                {step.status} {step.completed && `- ${formatDate(step.completed)}`}
-              </EuiText>
-            </EuiFlexItem>
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem css={{ flexDirection: 'row' }}>
+                <EuiFlexItem grow={0}>
+                  <EuiText css={stepListContentBoldTextStyle}>{step.name}</EuiText>
+                  <EuiText>
+                    {step.status} {step.completed && `- ${formatDate(step.completed)}`}
+                  </EuiText>
+                </EuiFlexItem>
 
-            <EuiFlexGroup css={stepRowStyle}>
-              {step.completed && (
-                <>
-                  {isExpanded && <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handle} />}
-                  <EuiFlexItem grow={0} css={stepHeaderRightStyle}>
-                    <EuiText css={stepDurationStyle}>{t('duration')}</EuiText>
-                    <EuiText size="m">{calculateTimeDifference(startedAt, completedAt)}</EuiText>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={0} css={getStepToggleExpandStyle(hasStepContent)}>
-                    {(isExpanded && <WfoChevronUp color={theme.colors.textParagraph} />) || (
-                      <WfoChevronDown color={theme.colors.textParagraph} />
-                    )}
-                  </EuiFlexItem>
-                </>
-              )}
+                <EuiFlexGroup css={stepRowStyle}>
+                  {step.completed && (
+                    <>
+                      {isExpanded && <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handle} />}
+                      <EuiFlexItem grow={0} css={stepHeaderRightStyle}>
+                        <EuiText css={stepDurationStyle}>{t('duration')}</EuiText>
+                        <EuiText size="m">{calculateTimeDifference(startedAt, completedAt)}</EuiText>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={0} css={getStepToggleExpandStyle(hasStepContent)}>
+                        {(isExpanded && <WfoChevronUp color={theme.colors.textParagraph} />) || (
+                          <WfoChevronDown color={theme.colors.textParagraph} />
+                        )}
+                      </EuiFlexItem>
+                    </>
+                  )}
+                </EuiFlexGroup>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                {overrideStepDetail?.stepHeader && <overrideStepDetail.stepHeader step={step} />}
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexGroup>
-          {hasStepContent
-            && !hasHtmlMail
-            && isExpanded
-            && (codeView === CodeView.TABLE ? <WfoTableCodeBlock stepState={stepContent} />
-            : codeView === CodeView.RAW ? <WfoJsonCodeBlock data={stepContent} />
-            : <WfoMonacoCodeBlock data={stepContent} />)}
-          {isExpanded && hasHtmlMail && (
-            <div css={stepEmailContainerStyle}>
-              {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
-            </div>
-          )}
-          {step.status === StepStatus.SUSPEND && userInputForm && (
-            <WfoStepForm
-              userInputForm={userInputForm}
-              isTask={isTask}
-              processId={processId ?? ''}
-              userPermissions={userPermissions}
-            />
+          {shouldExpand && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={1}>
+                {overrideStepDetail?.stepBody && <overrideStepDetail.stepBody step={step} />}
+              </EuiFlexItem>
+              <EuiFlexItem>
+                {shouldExpand
+                  && !hasHtmlMail
+                  && (codeView === CodeView.TABLE ? <WfoTableCodeBlock stepState={stepContent} />
+                  : codeView === CodeView.RAW ? <WfoJsonCodeBlock data={stepContent} />
+                  : <WfoMonacoCodeBlock data={stepContent} />)}
+                {isExpanded && hasHtmlMail && (
+                  <div css={stepEmailContainerStyle}>
+                    {displayMailConfirmation(step.stateDelta.confirmation_mail as EmailState)}
+                  </div>
+                )}
+                {step.status === StepStatus.SUSPEND && userInputForm && (
+                  <WfoStepForm
+                    userInputForm={userInputForm}
+                    isTask={isTask}
+                    processId={processId ?? ''}
+                    userPermissions={userPermissions}
+                  />
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
           )}
         </EuiPanel>
       </div>

package/src/components/WfoWorkflowSteps/WfoStep/useStepDetailOverride.ts

@@ -0,0 +1,9 @@
+import { useAppSelector } from '@/rtk/hooks';
+
+export const useStepDetailOverride = () => {
+  const overrideStepDetail = useAppSelector((state) => state.orchestratorComponentOverride?.stepDetail);
+
+  return {
+    overrideStepDetail,
+  };
+};

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx

@@ -69,7 +69,6 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
         <EuiText css={stepListContentBoldTextStyle}>{t(isTask ? 'taskSteps' : 'workflowSteps')}</EuiText>
         {!showRaw && <WfoTextAnchor text={allDetailToggleText} onClick={onToggleAllDetailsIsOpen} />}
       </EuiFlexGroup>
-
       {/* Right side: view options */}
       <EuiFlexGroup justifyContent="flexEnd" direction="row" css={stepListOptionsContainerStyle} gutterSize="s">
         {showTracebackButton && (

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.6.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.0.0';

package/src/messages/en-GB.json

@@ -390,6 +390,8 @@
       "subscriptionId": "Subscription ID",
       "description": "Description",
       "startDate": "Start date",
+      "lastRunValidation": "Most recent validate",
+      "noValidateWorkflows": "No validate workflows have been run recently",
       "insync": "In sync",
       "customer": "Customer",
       "customerUuid": "Customer UUID",

package/src/messages/nl-NL.json

@@ -389,6 +389,8 @@
       "subscriptionId": "Subscription ID",
       "description": "Beschrijving",
       "startDate": "Startdatum",
+      "lastRunValidation": "Meest recente validate",
+      "noValidateWorkflows": "Er zijn recentelijk geen validate workflows uitgevoerd",
       "insync": "In sync",
       "customer": "Klant",
       "customerUuid": "Klant UUID",

package/src/pages/metadata/WfoScheduleTaskFormPage.tsx

@@ -1,27 +1,33 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import _ from 'lodash';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
-import {
-  PydanticForm,
-  PydanticFormApiResponseType,
-  PydanticFormFieldFormat,
-  PydanticFormFieldType,
-} from 'pydantic-forms';
-import type {
-  PydanticFormApiProvider,
-  PydanticFormDefinitionResponse,
-  PydanticFormSuccessResponse,
-  RawJsonProperties,
-} from 'pydantic-forms';
-
-import { Footer, PATH_METADATA_SCHEDULED_TASKS, WfoContentHeader, WfoLoading } from '@/components';
+import { PydanticForm } from 'pydantic-forms';
+import type { PydanticFormApiProvider } from 'pydantic-forms';
+import { PydanticFormApiResponseType, PydanticFormFieldFormat, PydanticFormFieldType } from 'pydantic-forms';
+import type { PydanticFormDefinitionResponse, PydanticFormSuccessResponse, RawJsonProperties } from 'pydantic-forms';
+
+import { PATH_METADATA_SCHEDULED_TASKS } from '@/components';
+import { WfoContentHeader, WfoLoading } from '@/components';
+import { Footer } from '@/components/WfoPydanticForm/Footer';
 import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
-import { useGetPydanticFormsConfig, useShowToastMessage } from '@/hooks';
-import type { CronKwargs, ScheduledTaskPostPayload } from '@/rtk';
-import { useCreateScheduledTaskMutation, useGetTasksQuery } from '@/rtk';
-import { Intervals, TaskDefinition, TaskType, ToastTypes } from '@/types';
+import { useShowToastMessage } from '@/hooks';
+import { useGetPydanticFormsConfig } from '@/hooks/useGetPydanticFormsConfig';
+import {
+  HttpStatus,
+  ScheduledTaskPostPayload,
+  isFetchBaseQueryError,
+  isRecord,
+  useCreateScheduledTaskMutation,
+} from '@/rtk';
+import type { CronKwargs } from '@/rtk';
+import { useGetTasksQuery } from '@/rtk';
+import { useStartFormMutation } from '@/rtk/endpoints/forms';
+import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
+import { ToastTypes } from '@/types';
+import { Intervals, TaskDefinition, TaskType } from '@/types';
+import { compareVersions } from '@/utils/compareVersions';
 
 type CreateScheduleFormStep1 = {
   workflowId: TaskDefinition['workflowId'];
@@ -50,7 +56,8 @@ type CreateScheduleFormStep2 =
 
 type CreateScheduleFormInput = [CreateScheduleFormStep1, CreateScheduleFormStep2];
 
-export const WfoScheduleTaskFormPage = () => {
+// TODO: remove after 5.0.0 releases and rename WfoScheduleTaskFormPageBackend to WfoScheduleTaskFormPage
+export const WfoScheduleTaskFormPageHardCoded = () => {
   const t = useTranslations('metadata.scheduleTaskForm');
   const { showToastMessage } = useShowToastMessage();
 
@@ -256,13 +263,15 @@ export const WfoScheduleTaskFormPage = () => {
 
       if (userInputStep1.taskType === TaskType.DATE) {
         return {
-          type: userInputStep1.taskType,
-          workflowId: task.workflowId,
-          workflowDescription: task.description,
-          workflowName: task.name,
-          kwargs: {
+          scheduled_type: 'create',
+          workflow_id: task.workflowId,
+          workflow_name: task.name,
+          name: task.description,
+          trigger: userInputStep1.taskType,
+          trigger_kwargs: {
             run_date: startDate,
           },
+          user_inputs: [],
         };
       } else if (userInputStep1.taskType === TaskType.INTERVAL) {
         const step2Input = userInputStep2 as CreateScheduleFormStep2Interval;
@@ -273,24 +282,28 @@ export const WfoScheduleTaskFormPage = () => {
         }
 
         return {
-          type: userInputStep1.taskType,
-          workflowId: task.workflowId,
-          workflowDescription: task.description,
-          workflowName: task.name,
-          kwargs: {
+          scheduled_type: 'create',
+          workflow_id: task.workflowId,
+          workflow_name: task.name,
+          name: task.description,
+          trigger: userInputStep1.taskType,
+          trigger_kwargs: {
             start_date: startDate,
             ...intervalArg,
           },
+          user_inputs: [],
         };
       } else if (userInputStep1.taskType === TaskType.CRON) {
         const step2Input = userInputStep2 as CreateScheduleFormStep2Cron;
         // minute hour day month weekday
         return {
-          type: userInputStep1.taskType,
-          workflowId: task.workflowId,
-          workflowDescription: task.description,
-          workflowName: task.name,
-          kwargs: getCronKwargs(step2Input.cron, startDate),
+          scheduled_type: 'create',
+          workflow_id: task.workflowId,
+          workflow_name: task.name,
+          name: task.description,
+          trigger: userInputStep1.taskType,
+          trigger_kwargs: getCronKwargs(step2Input.cron, startDate),
+          user_inputs: [],
         };
       }
       throw new Error('Unknown or missing task type');
@@ -420,3 +433,108 @@ export const WfoScheduleTaskFormPage = () => {
     </>
   );
 };
+
+const START_SCHEDULE_PAYLOAD = {};
+
+export const WfoScheduleTaskFormPageBackend = () => {
+  const { showToastMessage } = useShowToastMessage();
+
+  const generateFormId = useMemo(() => {
+    return `${JSON.stringify(START_SCHEDULE_PAYLOAD)}`;
+  }, []);
+
+  const [startForm] = useStartFormMutation();
+  const [createScheduledTask, mutationState] = useCreateScheduledTaskMutation();
+  const router = useRouter();
+
+  const onSuccess = useCallback(
+    async (_fieldValues: object, req: object) => {
+      const request = req as {
+        status: HttpStatus;
+        data: ScheduledTaskPostPayload;
+      };
+      if (request?.data?.workflow_id) {
+        const resp = await createScheduledTask(request.data);
+        if (!resp?.error) {
+          router.replace(PATH_METADATA_SCHEDULED_TASKS);
+        }
+      }
+    },
+    [router, createScheduledTask],
+  );
+
+  const getPydanticFormProvider = useCallback(() => {
+    const pydanticFormProvider: PydanticFormApiProvider = async ({ requestBody = [], formKey }) => {
+      const userInputs =
+        _.isEmpty(START_SCHEDULE_PAYLOAD) ? [...requestBody] : [{ ...START_SCHEDULE_PAYLOAD }, ...requestBody];
+
+      const response = startForm({
+        formKey,
+        userInputs,
+      });
+      return response
+        .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,
+                status: HttpStatus.Created,
+              });
+            }
+
+            resolve({});
+          });
+        })
+        .catch((error) => {
+          return new Promise<Record<string, object>>((resolve, reject) => {
+            if (error.status === HttpStatus.FormNotComplete) {
+              resolve(error.data);
+            }
+            reject(error);
+          });
+        });
+    };
+
+    return pydanticFormProvider;
+  }, [startForm]);
+
+  const config = useGetPydanticFormsConfig(getPydanticFormProvider, (props) => <Footer {...props} />);
+
+  const handleCancel = useCallback(() => {
+    const pfBasePath = PATH_METADATA_SCHEDULED_TASKS;
+    router.replace(pfBasePath);
+  }, [router]);
+
+  if (mutationState.isError) {
+    showToastMessage(ToastTypes.ERROR, '', 'Error while saving scheduled task');
+    console.error('Error saving scheduled task', mutationState);
+    return undefined;
+  }
+
+  return (
+    <PydanticForm
+      formKey="configure_schedule"
+      formId={generateFormId}
+      onSuccess={onSuccess}
+      onCancel={handleCancel}
+      config={config}
+    />
+  );
+};
+
+export const WfoScheduleTaskFormPage = () => {
+  const { data } = useGetVersionsQuery();
+  const coreVersion = data?.version.applicationVersions[0].split(' ')[1] ?? '';
+
+  const isCompatible = compareVersions(coreVersion, '5.0.0a7') !== -1;
+  return isCompatible ? <WfoScheduleTaskFormPageBackend /> : <WfoScheduleTaskFormPageHardCoded />;
+};

package/src/rtk/endpoints/forms.ts

@@ -2,7 +2,7 @@ import { BaseQueryTypes, orchestratorApi } from '@/rtk';
 
 const PROCESS_ENDPOINT = 'processes';
 const RESUME_ENDPOINT = 'resume';
-const FORMS_ENDPOINT = 'surf/forms/'; // It is still being used by example-wfo-ui
+const FORMS_ENDPOINT = 'forms/'; // It is still being used by example-wfo-ui
 
 const formsApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({