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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "7.6.0",
+  "version": "7.7.1",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {

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/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');
 
@@ -98,62 +100,90 @@ export const WfoStep = React.forwardRef(
       );
     };
 
-    const handle = useCallback(
-      (newCodeView: string) => {
-        setCodeView(newCodeView as CodeView);
+    const handleCodeViewChange = useCallback(
+      (newCodeView: CodeView) => {
+        setCodeView(newCodeView);
       },
       [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 && !userInputForm && !hasHtmlMail && (
+                    <>
+                      {isExpanded && (
+                        <WfoCodeViewSelector codeView={codeView} handleCodeViewChange={handleCodeViewChange} />
+                      )}
+                      <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} />)}
+          {shouldExpand && !hasHtmlMail && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem>
+                {codeView === CodeView.TABLE ?
+                  <WfoTableCodeBlock stepState={stepContent} />
+                : codeView === CodeView.RAW ?
+                  <WfoJsonCodeBlock data={stepContent} />
+                : <WfoMonacoCodeBlock data={stepContent} />}
+              </EuiFlexItem>
+              <EuiFlexItem grow={1}>
+                {!(step.status === StepStatus.SUSPEND && userInputForm) && overrideStepDetail?.stepBody && (
+                  <overrideStepDetail.stepBody step={step} />
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+          {step.status === StepStatus.SUSPEND && userInputForm && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={1}>
+                <WfoStepForm
+                  userInputForm={userInputForm}
+                  isTask={isTask}
+                  processId={processId ?? ''}
+                  userPermissions={userPermissions}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={1}>
+                {overrideStepDetail?.stepBody && <overrideStepDetail.stepBody step={step} />}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
           {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}
-            />
-          )}
         </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 = '7.7.1';

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) => ({

package/src/rtk/endpoints/metadata/scheduledTasks.ts

@@ -7,7 +7,6 @@ import {
   GraphqlQueryVariables,
   ScheduledTaskDefinition,
   ScheduledTasksDefinitionsResult,
-  TaskType,
 } from '@/types';
 
 export const scheduledTasks = `
@@ -41,7 +40,7 @@ export type ScheduledTasksResponse = {
   schedules: ScheduledTaskDefinition[];
 } & BaseGraphQlResult;
 
-/* 
+/*
 https://apscheduler.readthedocs.io/en/3.x/modules/triggers/interval.html#module-apscheduler.triggers.interval
 Possible parameters:
 weeks (int) – number of weeks to wait
@@ -105,11 +104,13 @@ export type CronKwargs = {
 type Kwargs = DateKwargs | InterValKwargs | CronKwargs;
 
 export type ScheduledTaskPostPayload = {
-  workflowId: string;
-  workflowName: string;
-  workflowDescription: string;
-  type: TaskType;
-  kwargs: Kwargs;
+  workflow_id: string;
+  workflow_name: string;
+  name: string;
+  trigger: string;
+  trigger_kwargs: Kwargs;
+  scheduled_type: string;
+  user_inputs: object[];
 };
 
 const scheduledTasksApi = orchestratorApi.injectEndpoints({
@@ -149,22 +150,13 @@ const scheduledTasksApi = orchestratorApi.injectEndpoints({
     }),
     createScheduledTask: builder.mutation<unknown, ScheduledTaskPostPayload>({
       query: (payload) => {
-        const scheduleTaskPayload = {
-          scheduled_type: 'create',
-          name: payload.workflowDescription,
-          workflow_name: payload.workflowName,
-          workflow_id: payload.workflowId,
-          trigger: payload.type,
-          trigger_kwargs: payload.kwargs,
-        };
-
         return {
           url: METADATA_SCHEDULES_ENDPOINT,
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
-          body: scheduleTaskPayload,
+          body: payload,
         };
       },
       extraOptions: {