@orchestrator-ui/orchestrator-ui-components 0.2.6 → 0.3.0

package/src/components/WfoSubscription/utils/utils.ts

@@ -74,3 +74,19 @@ export const getWorkflowTargetColor = (
 
     return theme.colors.body;
 };
+
+export const getWorkflowTargetIconContent = (
+    workflowTarget: WorkflowTarget,
+) => {
+    // Data returned from graphql can't always be depended on to be lowercase
+    switch (workflowTarget.toLocaleLowerCase()) {
+        case WorkflowTarget.CREATE:
+            return 'C';
+        case WorkflowTarget.SYSTEM:
+            return 'T';
+        case WorkflowTarget.TERMINATE:
+            return 'X';
+        default:
+            return 'M';
+    }
+};

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -4,32 +4,29 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import { EuiFlexItem, Pagination } from '@elastic/eui';
+import { Pagination } from '@elastic/eui';
+
+import { WfoSubscriptionStatusBadge } from '@/components';
+import { FilterQuery, WfoDateTime, WfoLoading } from '@/components';
+import { WfoInsyncIcon } from '@/components/WfoInsyncIcon';
+import { getSubscriptionsListGraphQlQuery } from '@/graphqlQueries';
+import { DataDisplayParams, useQueryWithGraphql } from '@/hooks';
+import { SortOrder } from '@/types';
+import {
+    getTypedFieldFromObject,
+    parseDateToLocaleDateTimeString,
+} from '@/utils';
 
-import { getSubscriptionsListGraphQlQuery } from '../../graphqlQueries/subscriptionsListQuery';
-import { DataDisplayParams } from '../../hooks/useDataDisplayParams';
-import { useOrchestratorTheme } from '../../hooks/useOrchestratorTheme';
-import { useQueryWithGraphql } from '../../hooks/useQueryWithGraphql';
-import { WfoPlusCircleFill } from '../../icons';
-import { SortOrder } from '../../types';
-import { parseDateToLocaleDateTimeString } from '../../utils';
-import { getTypedFieldFromObject } from '../../utils/getTypedFieldFromObject';
-import { WfoSubscriptionStatusBadge } from '../WfoBadges/WfoSubscriptionStatusBadge';
-import { WfoDateTime } from '../WfoDateTime/WfoDateTime';
-import { FilterQuery } from '../WfoFilterTabs';
-import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
-import { WfoLoading } from '../WfoLoading';
 import {
     DEFAULT_PAGE_SIZES,
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
     TableColumnKeys,
     WfoDataSorting,
     WfoTableColumns,
-    WfoTableControlColumnConfig,
     WfoTableWithFilter,
     getDataSortHandler,
-    getEsQueryStringHandler,
     getPageChangeHandler,
+    getQueryStringHandler,
 } from '../WfoTable';
 import { WfoFirstPartUUID } from '../WfoTable/WfoFirstPartUUID';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '../WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
@@ -38,8 +35,6 @@ import {
     mapGrapghQlSubscriptionsResultToSubscriptionListItems,
 } from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
 
-const FIELD_NAME_INLINE_SUBSCRIPTION_DETAILS = 'inlineSubscriptionDetails';
-
 export type WfoSubscriptionsListProps = {
     alwaysOnFilters?: FilterQuery<SubscriptionListItem>[];
     dataDisplayParams: DataDisplayParams<SubscriptionListItem>;
@@ -64,8 +59,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     const router = useRouter();
     const t = useTranslations('subscriptions.index');
 
-    const { theme } = useOrchestratorTheme();
-
     const tableColumns: WfoTableColumns<SubscriptionListItem> = {
         subscriptionId: {
             field: 'subscriptionId',
@@ -127,20 +120,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         },
     };
 
-    const leadingControlColumns: WfoTableControlColumnConfig<SubscriptionListItem> =
-        {
-            inlineSubscriptionDetails: {
-                field: FIELD_NAME_INLINE_SUBSCRIPTION_DETAILS,
-                width: '40',
-                render: () => (
-                    <EuiFlexItem>
-                        <WfoPlusCircleFill color={theme.colors.mediumShade} />
-                    </EuiFlexItem>
-                ),
-            },
-        };
-
-    const { sortBy } = dataDisplayParams;
+    const { sortBy, queryString } = dataDisplayParams;
     const { data, isFetching } = useQueryWithGraphql(
         getSubscriptionsListGraphQlQuery<SubscriptionListItem>(),
         {
@@ -148,6 +128,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
             sortBy,
             filterBy: alwaysOnFilters,
+            query: queryString || undefined,
         },
         'subscriptions',
     );
@@ -177,8 +158,8 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
 
     return (
         <WfoTableWithFilter<SubscriptionListItem>
-            esQueryString={dataDisplayParams.esQueryString}
-            onUpdateEsQueryString={getEsQueryStringHandler<SubscriptionListItem>(
+            queryString={dataDisplayParams.queryString}
+            onUpdateQueryString={getQueryStringHandler<SubscriptionListItem>(
                 setDataDisplayParam,
             )}
             data={mapGrapghQlSubscriptionsResultToSubscriptionListItems(data)}
@@ -187,7 +168,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 sortFields,
                 filterFields,
             )}
-            leadingControlColumns={leadingControlColumns}
             defaultHiddenColumns={hiddenColumns}
             dataSorting={dataSorting}
             pagination={pagination}

package/src/components/WfoTable/WfoTableWithFilter/WfoTableWithFilter.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import {
     Criteria,
     EuiButton,
@@ -39,6 +41,7 @@ import {
     clearTableConfigFromLocalStorage,
     setTableConfigToLocalStorage,
 } from '../utils/tableConfigPersistence';
+import { updateQueryString } from './updateQueryString';
 
 export type WfoTableWithFilterProps<T> = {
     data: T[];
@@ -48,12 +51,12 @@ export type WfoTableWithFilterProps<T> = {
     defaultHiddenColumns?: TableColumnKeys<T>;
     dataSorting: WfoDataSorting<T>;
     pagination: Pagination;
-    esQueryString?: string;
+    queryString?: string;
     isLoading: boolean;
     localStorageKey: string;
     detailModal?: boolean;
     detailModalTitle?: string;
-    onUpdateEsQueryString: (esQueryString: string) => void;
+    onUpdateQueryString: (queryString: string) => void;
     onUpdatePage: (criterion: Criteria<T>['page']) => void;
     onUpdateDataSort: (dataSorting: WfoDataSorting<T>) => void;
 };
@@ -66,12 +69,12 @@ export const WfoTableWithFilter = <T,>({
     defaultHiddenColumns = [],
     dataSorting,
     pagination,
-    esQueryString,
+    queryString,
     isLoading,
     localStorageKey,
     detailModal = true,
     detailModalTitle = 'Details',
-    onUpdateEsQueryString,
+    onUpdateQueryString,
     onUpdatePage,
     onUpdateDataSort,
 }: WfoTableWithFilterProps<T>) => {
@@ -83,6 +86,7 @@ export const WfoTableWithFilter = <T,>({
     const [showSettingsModal, setShowSettingsModal] = useState(false);
     const [selectedDataForDetailModal, setSelectedDataForDetailModal] =
         useState<T | undefined>(undefined);
+    const t = useTranslations('common');
 
     useEffect(() => {
         if (defaultHiddenColumns) {
@@ -189,12 +193,12 @@ export const WfoTableWithFilter = <T,>({
             <EuiFlexGroup>
                 <EuiFlexItem>
                     <WfoSearchField
-                        esQueryString={esQueryString}
-                        onUpdateEsQueryString={onUpdateEsQueryString}
+                        queryString={queryString}
+                        onUpdateQueryString={onUpdateQueryString}
                     />
                 </EuiFlexItem>
                 <EuiButton onClick={() => setShowSettingsModal(true)}>
-                    Edit columns
+                    {t('editColumns')}
                 </EuiButton>
             </EuiFlexGroup>
             <EuiSpacer size="m" />
@@ -207,18 +211,15 @@ export const WfoTableWithFilter = <T,>({
                 pagination={pagination}
                 isLoading={isLoading}
                 onCriteriaChange={onCriteriaChange}
-                onDataSearch={({ field, searchText }) => {
-                    // Todo: This is not the final implementation. Need to decide to use esquery in the frontend.
-                    // In that case, string concatenation is not the best solution
-                    // https://github.com/workfloworchestrator/orchestrator-ui/issues/81
-                    onUpdateEsQueryString(
-                        esQueryString
-                            ? esQueryString +
-                                  ' AND ' +
-                                  `${field.toString()}:"${searchText}"`
-                            : `${field.toString()}:"${searchText}"`,
-                    );
-                }}
+                onDataSearch={({ field, searchText }) =>
+                    onUpdateQueryString(
+                        updateQueryString(
+                            queryString ?? '',
+                            field.toString(),
+                            searchText,
+                        ),
+                    )
+                }
             />
 
             {showSettingsModal && (

package/src/components/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts

@@ -0,0 +1,95 @@
+import { updateQueryString } from './updateQueryString';
+
+describe('updateQueryString', () => {
+    it('adds a new field when the query string is empty', () => {
+        const queryString = '';
+        const fieldName = 'field1';
+        const value = 'value1';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:value1');
+    });
+
+    it('adds a new field when the query string does not contain the field yet', () => {
+        const queryString = 'field1:value1';
+        const fieldName = 'field2';
+        const value = 'value2';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:value1 field2:value2');
+    });
+
+    it('updates an existing field with a single value in the query string', () => {
+        const queryString = 'field1:value1 field2:value2';
+        const fieldName = 'field1';
+        const value = 'value3';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:(value1|value3) field2:value2');
+    });
+
+    it('updates an existing field with with already 2 values in the query string', () => {
+        const queryString = 'field1:(value1|value3) field2:value2';
+        const fieldName = 'field1';
+        const value = 'value4';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:(value1|value3|value4) field2:value2');
+    });
+
+    it('uses quotes when the added value contains spaces', () => {
+        const queryString = 'field1:(value1|value3) field2:value2';
+        const fieldName = 'field1';
+        const value = 'value 4';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:(value1|value3|"value 4") field2:value2');
+    });
+
+    it('adds a new value to an exising field where one existing value contains spaces', () => {
+        const queryString = 'field1:("value 1"|value3) field2:value2';
+        const fieldName = 'field1';
+        const value = 'value 4';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe(
+            'field1:("value 1"|value3|"value 4") field2:value2',
+        );
+    });
+
+    it('returns the same query string when the given field name is an empty string', () => {
+        const queryString = 'field1:value1 field2:value2';
+        const fieldName = 'field1';
+        const value = '';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:value1 field2:value2');
+    });
+
+    it('returns the same query string when the given value is an empty string', () => {
+        const queryString = 'field1:value1 field2:value2';
+        const fieldName = '';
+        const value = 'value 3';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:value1 field2:value2');
+    });
+
+    it('updates an existing field ignoring case in the field name', () => {
+        const queryString = 'field1:value1 field2:value2';
+        const fieldName = 'Field1';
+        const value = 'value3';
+
+        const result = updateQueryString(queryString, fieldName, value);
+
+        expect(result).toBe('field1:(value1|value3) field2:value2');
+    });
+});

package/src/components/WfoTable/WfoTableWithFilter/updateQueryString.ts

@@ -0,0 +1,60 @@
+// Four cases to consider when this function is called
+// 1 - fieldName or value is empty
+// 2 - queryString is empty
+// 3 - fieldName does not exist in query string
+// 4 - fieldName already exists in query string
+export const updateQueryString = (
+    queryString: string,
+    fieldName: string,
+    value: string,
+) => {
+    // 1 - Returning the exising query string when either fieldName or value is empty
+    if (fieldName === '' || value === '') {
+        return queryString;
+    }
+
+    // 2 - Empty query string returning directly fieldName:value
+    if (queryString === '') {
+        return `${fieldName}:${toQueryValue(value)}`;
+    }
+
+    // Finding fieldName with values in queryString in this order:
+    // - Value surrounded with double quotes
+    // field:"value"
+    // - Value is surrounded with brackets
+    // field:(value1|value2)
+    // field:("value1 with spaces"|value2|value3)
+    // - Value is a single word (no quotes and no brackets)
+    // field:value
+    const fieldRegex = new RegExp(
+        String.raw`(${fieldName}):(".*?"|\(.*?\)|[^()|!:<>*"\s]+\*?)`,
+        'i',
+    );
+    const match = queryString.match(fieldRegex);
+
+    // 3 - Field name does not exist in query string yet, appending fieldName:value
+    if (!match) {
+        return `${queryString} ${fieldName}:${toQueryValue(value)}`;
+    }
+
+    // 4 - Field name already exists in query string as:
+    const existingFieldName = match[1];
+    const existingValue = getValueWithoutBrackets(match[2]);
+    const updatedValue = `${existingValue}|${toQueryValue(value)}`;
+    return queryString.replace(
+        fieldRegex,
+        `${existingFieldName}:(${updatedValue})`,
+    );
+};
+
+const getValueWithoutBrackets = (value: string) => {
+    if (value.startsWith('(') && value.endsWith(')')) {
+        return value.slice(1, -1);
+    }
+    return value;
+};
+
+const hasSpaces = (value: string) => value.indexOf(' ') !== -1;
+
+const toQueryValue = (value: string) =>
+    hasSpaces(value) ? `"${value}"` : value;

package/src/components/WfoTable/utils/tableUtils.ts

@@ -44,10 +44,10 @@ export const getPageChangeHandler =
         }
     };
 
-export const getEsQueryStringHandler =
+export const getQueryStringHandler =
     <Type>(
         setDataDisplayParam: DataDisplayReturnValues<Type>['setDataDisplayParam'],
     ) =>
-    (esQueryString: string) => {
-        setDataDisplayParam('esQueryString', esQueryString);
+    (queryString: string) => {
+        setDataDisplayParam('queryString', queryString);
     };

package/src/components/WfoTextAnchor/WfoTextAnchor.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+import { WfoTextAnchor } from './WfoTextAnchor';
+
+const Story: Meta<typeof WfoTextAnchor> = {
+    component: ({ text, url }) => <WfoTextAnchor text={text} url={url} />,
+    title: 'Text/WfoTextAnchor',
+};
+export default Story;
+
+export const Primary = {
+    args: {
+        text: 'Text',
+        url: 'Url',
+    },
+};

package/src/components/WfoTextAnchor/WfoTextAnchor.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { EuiText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getStyles } from './styles';
+
+interface WfoTextAnchorProps {
+    text: string;
+    onClick: () => void;
+}
+
+export const WfoTextAnchor = ({ text, onClick }: WfoTextAnchorProps) => {
+    const { textAnchorStyle } = useWithOrchestratorTheme(getStyles);
+
+    return (
+        <EuiText onClick={onClick} css={textAnchorStyle}>
+            {text}
+        </EuiText>
+    );
+};

package/src/components/WfoTextAnchor/index.ts

@@ -0,0 +1 @@
+export { WfoTextAnchor } from './WfoTextAnchor';

package/src/components/WfoTextAnchor/styles.ts

@@ -0,0 +1,17 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const textAnchorStyle = css({
+        marginTop: theme.size.xxs,
+        marginLeft: 0,
+        fontSize: theme.size.m,
+        fontWeight: theme.font.weight.bold,
+        color: theme.colors.link,
+        cursor: 'pointer',
+    });
+
+    return {
+        textAnchorStyle,
+    };
+};

package/src/components/WfoTimeline/styles.ts

@@ -1,4 +1,3 @@
-import { makeHighContrastColor } from '@elastic/eui';
 import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
 import { css } from '@emotion/react';
 
@@ -29,6 +28,15 @@ export const getStyles = (theme: EuiThemeComputed) => {
         }
     };
 
+    const getTextColorForStepStatusIcon = (processStepStatus: StepStatus) => {
+        switch (processStepStatus) {
+            case StepStatus.SUSPEND:
+                return theme.colors.ink;
+            default:
+                return theme.colors.ghost;
+        }
+    };
+
     const timelinePanelStyle = css({
         backgroundColor: theme.colors.body,
         borderRadius: theme.border.radius.medium,
@@ -133,9 +141,7 @@ export const getStyles = (theme: EuiThemeComputed) => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            color: makeHighContrastColor(theme.colors.text)(
-                getColorForStepStatus(stepStatus),
-            ),
+            color: getTextColorForStepStatusIcon(stepStatus),
         });
     };
 

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

@@ -4,40 +4,44 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { WfoChevronDown, WfoChevronUp } from '../../../icons';
-import type { EmailState, Step, StepState } from '../../../types';
-import { formatDate } from '../../../utils';
-import { calculateTimeDifference } from '../../../utils';
-import { WfoJsonCodeBlock } from '../../WfoJsonCodeBlock/WfoJsonCodeBlock';
+import { WfoJsonCodeBlock } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoChevronDown, WfoChevronUp } from '@/icons';
+import type { EmailState } from '@/types';
+import { StepStatus } from '@/types';
+import { calculateTimeDifference, formatDate } from '@/utils';
+
 import { WfoStepStatusIcon } from '../WfoStepStatusIcon';
+import type { StepListItem } from '../WfoWorkflowStepList';
 import { getStepContent } from '../stepListUtils';
 import { getStyles } from '../styles';
+import { WfoStepForm } from './WfoStepForm';
 
 export interface WfoStepProps {
-    step: Step;
-    stepDelta: StepState;
-    stepDetailIsOpen: boolean;
+    stepListItem: StepListItem;
     startedAt: string;
     showHiddenKeys: boolean;
     onToggleStepDetail: () => void;
+    isTask: boolean;
     isStartStep?: boolean;
+    processId?: string;
 }
 
 export const WfoStep = React.forwardRef(
     (
         {
-            step,
-            stepDelta,
-            stepDetailIsOpen,
+            stepListItem,
             onToggleStepDetail,
             startedAt,
             showHiddenKeys,
             isStartStep = false,
+            isTask,
+            processId,
         }: WfoStepProps,
         ref: LegacyRef<HTMLDivElement>,
     ) => {
-        const { name, executed, status } = step;
+        const { isExpanded, step, userInputForm } = stepListItem;
+
         const { theme } = useOrchestratorTheme();
         const {
             stepEmailContainerStyle,
@@ -49,9 +53,12 @@ export const WfoStep = React.forwardRef(
             getStepToggleExpandStyle,
         } = getStyles(theme);
         const t = useTranslations('processes.steps');
-        const hasHtmlMail = stepDelta?.hasOwnProperty('confirmation_mail');
+        const hasHtmlMail =
+            step.stateDelta?.hasOwnProperty('confirmation_mail');
 
-        const stepContent = getStepContent(stepDelta, showHiddenKeys);
+        const stepContent = step.stateDelta
+            ? getStepContent(step.stateDelta, showHiddenKeys)
+            : {};
         const hasStepContent = Object.keys(stepContent).length > 0;
 
         const displayMailConfirmation = (value: EmailState) => {
@@ -103,17 +110,18 @@ export const WfoStep = React.forwardRef(
                         onClick={() => hasStepContent && onToggleStepDetail()}
                     >
                         <WfoStepStatusIcon
-                            stepStatus={status}
+                            stepStatus={step.status}
                             isStartStep={isStartStep}
                         />
 
                         <EuiFlexItem grow={0}>
                             <EuiText css={stepListContentBoldTextStyle}>
-                                {name}
+                                {step.name}
                             </EuiText>
                             <EuiText>
-                                {status}{' '}
-                                {executed && `- ${formatDate(executed)}`}
+                                {step.status}{' '}
+                                {step.executed &&
+                                    `- ${formatDate(step.executed)}`}
                             </EuiText>
                         </EuiFlexItem>
 
@@ -140,24 +148,31 @@ export const WfoStep = React.forwardRef(
                                             hasStepContent,
                                         )}
                                     >
-                                        {(stepDetailIsOpen && (
-                                            <WfoChevronUp />
-                                        )) || <WfoChevronDown />}
+                                        {(isExpanded && <WfoChevronUp />) || (
+                                            <WfoChevronDown />
+                                        )}
                                     </EuiFlexItem>
                                 </>
                             )}
                         </EuiFlexGroup>
                     </EuiFlexGroup>
-                    {hasStepContent && stepDetailIsOpen && (
+                    {hasStepContent && isExpanded && (
                         <WfoJsonCodeBlock data={stepContent} />
                     )}
-                    {stepDetailIsOpen && hasHtmlMail && (
+                    {isExpanded && hasHtmlMail && (
                         <div css={stepEmailContainerStyle}>
                             {displayMailConfirmation(
                                 step.state.confirmation_mail as EmailState,
                             )}
                         </div>
                     )}
+                    {step.status === StepStatus.SUSPEND && userInputForm && (
+                        <WfoStepForm
+                            userInputForm={userInputForm}
+                            isTask={isTask}
+                            processId={processId}
+                        />
+                    )}
                 </EuiPanel>
             </div>
         );

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

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+import { EuiFlexItem } from '@elastic/eui';
+
+import { UserInputFormWizard, WfoLoading } from '@/components';
+import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
+import { useOrchestratorTheme } from '@/hooks';
+import { InputForm } from '@/types/forms';
+
+interface WfoStepFormProps {
+    userInputForm: InputForm;
+    isTask: boolean;
+    processId?: string;
+}
+
+export const WfoStepForm = ({
+    userInputForm,
+    isTask,
+    processId,
+}: WfoStepFormProps) => {
+    const [isProcessing, setIsProcessing] = useState<boolean>(false);
+    const { theme } = useOrchestratorTheme();
+    const apiClient = useAxiosApiClient();
+
+    const submitForm = (processInput: object[]) => {
+        if (!processId) {
+            return Promise.reject();
+        }
+
+        return apiClient.resumeProcess(processId, processInput).then(() => {
+            setIsProcessing(true);
+        });
+    };
+
+    return (
+        <EuiFlexItem css={{ margin: theme.size.m }}>
+            {(isProcessing && <WfoLoading />) || (
+                <UserInputFormWizard
+                    stepUserInput={userInputForm}
+                    validSubmit={submitForm}
+                    hasNext={false}
+                    isTask={isTask}
+                    isResuming={true}
+                />
+            )}
+        </EuiFlexItem>
+    );
+};