@orchestrator-ui/orchestrator-ui-components 8.4.5 → 8.6.0

package/src/pages/WfoSearchPocPage.tsx

@@ -0,0 +1,528 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { RuleGroupType } from 'react-querybuilder';
+import { formatQuery } from 'react-querybuilder/formatQuery';
+import { parseCEL } from 'react-querybuilder/parseCEL';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+
+import { EuiSpacer } from '@elastic/eui';
+
+import { SearchParams, combineSearchFilters } from '@/components';
+import {
+  DEFAULT_PAGE_SIZE,
+  StoredTableConfig,
+  SubscriptionListItem,
+  WfoContentHeader,
+  WfoDataSorting,
+  WfoDateTime,
+  WfoExpandingSearchRow,
+  WfoFilterTabs,
+  WfoFirstPartUUID,
+  WfoInlineJson,
+  WfoInsyncIcon,
+  WfoJsonCodeBlock,
+  WfoStructuredSearchTable,
+  WfoStructuredSearchTableColumnConfig,
+  WfoSubscriptionActions,
+  WfoSubscriptionListTab,
+  WfoSubscriptionNoteEdit,
+  WfoSubscriptionStatusBadge,
+  WfoTableColumnConfig,
+  subscriptionListTabs,
+} from '@/components';
+import { parseCelToRuleGroup } from '@/components/WfoTable/WfoStructuredSearchTable/utils';
+import { ColumnType, WfoTableProps } from '@/components/WfoTable/WfoTable';
+import { useStoredTableConfig } from '@/hooks';
+import { SearchPayload, useLazySearchQuery, useSearchQuery } from '@/rtk';
+import {
+  EntityKind,
+  FieldToOperatorMap,
+  PaginatedSearchResults,
+  ResultColumToPropertyMap,
+  RetrieverType,
+  SortOrder,
+} from '@/types';
+import { getCsvFileNameWithDate, initiateCsvFileDownload, parseDateToLocaleDateTimeString } from '@/utils';
+
+const SEARCH_TABLE_LOCAL_STORAGE_KEY = 'SEARCH_TABLE_LOCAL_STORAGE_KEY';
+
+const getKeyByValueFromMap = <T,>(resultColumToPropertyMap: ResultColumToPropertyMap<T>, field: keyof T) => {
+  return [...resultColumToPropertyMap.entries()].find(([, v]) => v === field)?.[0] || '';
+};
+
+const getDataFromResponse = <T extends object>(
+  data: PaginatedSearchResults,
+  resultColumToPropertyMap: ResultColumToPropertyMap<T>,
+  uniqueRowId: keyof T,
+): {
+  items: T[];
+  rowExpandingConfiguration?: WfoTableProps<T>['rowExpandingConfiguration'];
+} => {
+  const searchResult = data?.data;
+  if (!searchResult)
+    return {
+      items: [],
+    };
+
+  const responseColumns: Record<string, string | number | null>[] =
+    searchResult.map(({ response_columns }) => response_columns) || [];
+
+  const rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'] = {
+    uniqueRowId: uniqueRowId as keyof WfoTableColumnConfig<T>,
+    uniqueRowIdToExpandedRowMap: searchResult.reduce(
+      (rowMap, { response_columns, score, perfect_match, matching_field }) => {
+        const idColumnInResponseColumn = getKeyByValueFromMap<T>(resultColumToPropertyMap, uniqueRowId);
+        const rowId = response_columns[idColumnInResponseColumn];
+        if (rowId) {
+          rowMap[rowId] = (
+            <WfoExpandingSearchRow score={score} matchingField={matching_field} perfectMatch={perfect_match} />
+          );
+        }
+        return rowMap;
+      },
+      {} as Record<string, ReactNode>,
+    ),
+  };
+
+  const items: T[] = responseColumns.map((responseColumn) => {
+    const item = Object.entries(responseColumn).reduce((acc, [key, value]) => {
+      const itemKey = resultColumToPropertyMap.get(key);
+      if (itemKey) {
+        acc[itemKey] = value as unknown as T[keyof T];
+      }
+      return acc;
+    }, {} as T);
+    return item;
+  });
+
+  return {
+    items,
+    rowExpandingConfiguration,
+  };
+};
+
+const getTotalItemsFromResponse = (data: PaginatedSearchResults | undefined): number | false => {
+  return data?.cursor?.total_items || false;
+};
+
+const resultColumToPropertyMap: ResultColumToPropertyMap<SubscriptionListItem> = new Map([
+  ['subscription.subscription_id', 'subscriptionId'],
+  ['subscription.description', 'description'],
+  ['subscription.status', 'status'],
+  ['subscription.insync', 'insync'],
+  ['subscription.product.name', 'productName'],
+  ['subscription.product.tag', 'tag'],
+  ['subscription.customer_name', 'customerFullname'],
+  ['subscription.customer_abbreviation', 'customerShortcode'],
+  ['subscription.start_date', 'startDate'],
+  ['subscription.end_date', 'endDate'],
+  ['subscription.note', 'note'],
+  ['subscription.metadata', 'metadata'],
+]);
+
+/* These options will be added as the first options in the field dropdown in the FieldSelector */
+const prefilledFieldOptions: FieldToOperatorMap = new Map([
+  ['subscription.subscription_id', ['eq', 'neq', 'like']],
+  ['subscription.description', ['eq', 'neq', 'like']],
+  ['subscription.status', ['eq', 'neq', 'like']],
+  ['subscription.insync', ['eq', 'neq']],
+  ['subscription.product.name', ['eq', 'neq', 'like']],
+  ['subscription.product.tag', ['eq', 'neq', 'like']],
+  ['subscription.customer_name', ['eq', 'neq', 'like']],
+  ['subscription.customer_abbreviation', ['eq', 'neq', 'like']],
+  ['subscription.start_date', ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between']],
+  ['subscription.end_date', ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'between']],
+  ['subscription.note', ['eq', 'neq', 'like']],
+]);
+
+export const WfoSearchPocPage = () => {
+  const t = useTranslations('subscriptions.index');
+  const [activeTab, setActiveTab] = useQueryParam('activeTab', withDefault(StringParam, WfoSubscriptionListTab.ACTIVE));
+  const selectedTab = subscriptionListTabs.find(({ id }) => id === activeTab)?.id ?? WfoSubscriptionListTab.ACTIVE;
+  const getStoredTableConfig = useStoredTableConfig<SubscriptionListItem>(SEARCH_TABLE_LOCAL_STORAGE_KEY);
+  const [retrieverType, setRetrieverType] = useState<RetrieverType>(RetrieverType.Auto);
+
+  // Part of the search endpoint payload that is passed in the q parameter
+  const [queryText, setQueryText] = useState<string>('');
+  // The committed query and filter live in the URL so a link reproduces the search and browser
+  // back/forward re-runs it. The filter is stored as a CEL string and parsed back to a rule group.
+  const [committedSearchQuery, setCommittedSearchQuery] = useQueryParam('queryString', withDefault(StringParam, ''));
+  const [committedFilterString, setCommittedFilterString] = useQueryParam('filterString', withDefault(StringParam, ''));
+  // Track the last value this page committed, so the URL->state sync effects below only rebuild the
+  // inputs for external changes (page load, back/forward). Rebuilding on own commits would revert
+  // characters typed right after committing (search bar) or visibly restructure builder rules the
+  // CEL round trip cannot preserve, such as 'between'. The refs hold the value as the params decode
+  // it (absent param -> ''); the setters receive undefined to remove an empty param from the URL.
+  const lastSelfCommittedFilter = useRef('');
+  const commitFilterString = (celString: string) => {
+    lastSelfCommittedFilter.current = celString;
+    setCommittedFilterString(celString || undefined);
+  };
+  const lastSelfCommittedQuery = useRef('');
+  const commitSearchQuery = (queryText: string) => {
+    lastSelfCommittedQuery.current = queryText;
+    setCommittedSearchQuery(queryText || undefined);
+  };
+
+  // String that is displayed in the filter textarea. This is transformed and if valid passed to the search endpoint in the filter parameter
+  const [filterString, setFilterString] = useState<string>('');
+  const [queryBuilderRuleGroup, setQueryBuilderRuleGroup] = useState<RuleGroupType | undefined>();
+  const committedRuleGroup = useMemo<RuleGroupType | undefined>(
+    () => parseCelToRuleGroup(committedFilterString),
+    [committedFilterString],
+  );
+  const [isValidFilterString, setIsValidFilterString] = useState<boolean>(true);
+  const [tableDefaults, setTableDefaults] = useState<StoredTableConfig<SubscriptionListItem>>();
+  const [pageSize, setPageSize] = useState<number>(tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE);
+  const [limit, setLimit] = useState<number>(pageSize);
+  const [pageCursor, setPageCursor] = useState<{ cursor: string; searchKey: string } | undefined>(undefined);
+  const [dataSorting, setDataSorting] = useState<WfoDataSorting<SubscriptionListItem>>({
+    field: 'subscriptionId',
+    sortOrder: SortOrder.DESC,
+  });
+
+  // A next-page cursor is only valid for the committed search that produced it. Binding it to a key
+  // of that search covers commits that bypass the handlers below, e.g. browser back/forward changing
+  // the queryString/filterString/activeTab URL params: the key no longer matches, so the stale
+  // cursor is not sent along with the new search.
+  const committedSearchKey = JSON.stringify([
+    committedSearchQuery,
+    committedFilterString,
+    selectedTab,
+    retrieverType,
+    dataSorting,
+  ]);
+  const cursor = pageCursor?.searchKey === committedSearchKey ? pageCursor.cursor : undefined;
+
+  // The search payload is derived entirely from the committed search state, which lives in the URL
+  // (queryString, filterString and activeTab params). Changing any of these values — whether via the
+  // UI or a browser back/forward that updates the URL — produces a new payload and RTK Query re-runs
+  // the search automatically. No imperative trigger or effect (and no eslint-disable) is needed.
+  // Cursor is stripped from the RTK cache key, so a cursor change appends to the accumulated
+  // result set instead of creating a new cache entry — see search endpoint's merge() logic.
+  const searchPayload: SearchPayload = useMemo(() => {
+    const filters = combineSearchFilters(committedRuleGroup, selectedTab);
+    const order_by = {
+      element: getKeyByValueFromMap(resultColumToPropertyMap, dataSorting.field),
+      direction: dataSorting.sortOrder.toLowerCase(),
+    };
+    return {
+      query: committedSearchQuery,
+      limit,
+      entity_type: EntityKind.SUBSCRIPTION,
+      response_columns: Array.from(resultColumToPropertyMap.keys()),
+      order_by,
+      ...(retrieverType !== RetrieverType.Auto && { retriever: retrieverType }),
+      ...(filters && { filters }),
+      ...(cursor && { cursor }),
+    };
+  }, [committedSearchQuery, committedRuleGroup, selectedTab, retrieverType, limit, dataSorting, cursor]);
+
+  const { data, isFetching } = useSearchQuery(searchPayload);
+
+  const [getSubscriptionListTrigger] = useLazySearchQuery();
+  const getSubscriptionListForExport = () => getSubscriptionListTrigger(searchPayload).unwrap();
+
+  useEffect(() => {
+    const storedConfig = getStoredTableConfig();
+    if (storedConfig) {
+      setTableDefaults(storedConfig);
+    }
+  }, [getStoredTableConfig]);
+
+  const tableColumnConfig: WfoStructuredSearchTableColumnConfig<SubscriptionListItem> = {
+    actions: {
+      columnType: ColumnType.CONTROL,
+      width: '50px',
+      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
+    },
+    subscriptionId: {
+      columnType: ColumnType.DATA,
+      label: t('id'),
+      width: '100px',
+      renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+      renderDetails: (value) => value,
+      renderTooltip: (value) => value,
+      isSortable: true,
+      isFilterable: true,
+    },
+    description: {
+      columnType: ColumnType.DATA,
+      label: t('description'),
+      width: '500px',
+      renderData: (value, record) => <Link href={`/subscriptions/${record.subscriptionId}`}>{value}</Link>,
+      renderTooltip: (value) => value,
+      isFilterable: true,
+    },
+    status: {
+      columnType: ColumnType.DATA,
+      label: t('status'),
+      width: '120px',
+      renderData: (value) => <WfoSubscriptionStatusBadge status={value} />,
+      isFilterable: true,
+    },
+    insync: {
+      columnType: ColumnType.DATA,
+      label: t('insync'),
+      width: '75px',
+      renderData: (value) => <WfoInsyncIcon inSync={value} />,
+      isFilterable: true,
+    },
+    productName: {
+      columnType: ColumnType.DATA,
+      width: '260px',
+      label: t('product'),
+      isFilterable: true,
+    },
+    tag: {
+      columnType: ColumnType.DATA,
+      label: t('tag'),
+      width: '100px',
+      isFilterable: true,
+    },
+    customerFullname: {
+      columnType: ColumnType.DATA,
+      label: t('customerFullname'),
+      isFilterable: true,
+    },
+    customerShortcode: {
+      columnType: ColumnType.DATA,
+      label: t('customerShortcode'),
+      width: '150px',
+      isFilterable: true,
+    },
+    startDate: {
+      columnType: ColumnType.DATA,
+      label: t('startDate'),
+      width: '100px',
+      renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+      renderDetails: parseDateToLocaleDateTimeString,
+      clipboardText: parseDateToLocaleDateTimeString,
+      renderTooltip: (cellValue) => cellValue?.toString(),
+      isFilterable: true,
+    },
+    endDate: {
+      columnType: ColumnType.DATA,
+      label: t('endDate'),
+      width: '100px',
+      renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+      renderDetails: parseDateToLocaleDateTimeString,
+      clipboardText: parseDateToLocaleDateTimeString,
+      renderTooltip: (cellValue) => cellValue?.toString(),
+      isFilterable: true,
+    },
+    note: {
+      columnType: ColumnType.DATA,
+      label: t('note'),
+      width: '300px',
+      renderData: (cellValue, row) => {
+        return (
+          <WfoSubscriptionNoteEdit
+            onlyShowOnHover={true}
+            endpointName={''}
+            queryVariables={{}}
+            subscriptionId={row.subscriptionId}
+            note={cellValue}
+          />
+        );
+      },
+      isFilterable: true,
+    },
+    metadata: {
+      columnType: ColumnType.DATA,
+      label: t('metadata'),
+      width: '100px',
+      renderData: (value) => <WfoInlineJson data={value} />,
+      renderDetails: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+      renderTooltip: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle={false} />,
+      isFilterable: true,
+    },
+  };
+
+  const handleApplyFilter = (searchParams?: SearchParams) => {
+    const ruleGroupParam = searchParams?.ruleGroup;
+    // Use an explicitly passed rule group when provided (e.g. a column-header search), a cleared filter
+    // when `false`, and otherwise the current query builder state (the "Apply filter" button).
+    const effectiveRuleGroup = ruleGroupParam === false ? undefined : (ruleGroupParam ?? queryBuilderRuleGroup);
+    // '' (no rule group, or only placeholder rules) commits an empty filter, clearing the URL param.
+    const celQuery =
+      effectiveRuleGroup ? formatQuery(effectiveRuleGroup, { format: 'cel', fallbackExpression: '' }) : '';
+    // A non-empty CEL string must survive the round trip through the URL: formatQuery escapes double
+    // quotes in values but parseCEL has no escape support, so such a filter would silently be dropped
+    // after committing. Refuse the commit and flag the filter instead, keeping the URL and the search
+    // results consistent.
+    if (celQuery && !parseCelToRuleGroup(celQuery)) {
+      setIsValidFilterString(false);
+      return;
+    }
+    commitFilterString(celQuery);
+    setPageCursor(undefined);
+  };
+
+  const onChangeQueryText = (queryText: string) => {
+    setQueryText(queryText);
+  };
+
+  const onSearchQueryText = (queryText: string) => {
+    setQueryText(queryText);
+    commitSearchQuery(queryText);
+    setPageCursor(undefined);
+  };
+
+  const onUpdateRetrieverType = (retrieverType: RetrieverType) => {
+    setRetrieverType(retrieverType);
+    setPageCursor(undefined);
+  };
+
+  const handleChangeTab = (updatedTab: WfoSubscriptionListTab) => {
+    setActiveTab(updatedTab);
+    setLimit(pageSize);
+    setPageCursor(undefined);
+  };
+
+  const safeCelParse = useCallback((celString: string) => {
+    try {
+      const ruleGroup = parseCEL(celString);
+      if (celString === '') {
+        setIsValidFilterString(true);
+      } else if (ruleGroup?.rules?.length > 0) {
+        // parseCEL returns a query object — check if it has any rules
+        setIsValidFilterString(true);
+        setQueryBuilderRuleGroup(ruleGroup);
+      } else {
+        // If there are no rules created based on this string then
+        // we assume the string is not valid. In any case it will not do anything
+        // to the search results
+        setIsValidFilterString(false);
+      }
+    } catch {
+      setIsValidFilterString(false);
+    }
+  }, []);
+
+  // Populate the search bar and the filter builder from the URL, both on page load and when
+  // back/forward navigation changes the committed search. Commits made by this page are skipped —
+  // see the lastSelfCommitted refs above.
+  useEffect(() => {
+    if (committedSearchQuery === lastSelfCommittedQuery.current) {
+      return;
+    }
+    lastSelfCommittedQuery.current = committedSearchQuery;
+    setQueryText(committedSearchQuery);
+  }, [committedSearchQuery]);
+
+  useEffect(() => {
+    if (committedFilterString === lastSelfCommittedFilter.current) {
+      return;
+    }
+    lastSelfCommittedFilter.current = committedFilterString;
+    setFilterString(committedFilterString);
+    if (committedFilterString) {
+      safeCelParse(committedFilterString);
+    } else {
+      setQueryBuilderRuleGroup(undefined);
+      setIsValidFilterString(true);
+    }
+  }, [committedFilterString, safeCelParse]);
+
+  const onUpdateQueryBuilder = (ruleGroup: RuleGroupType | false) => {
+    if (ruleGroup === false) {
+      setQueryBuilderRuleGroup(undefined);
+      setFilterString('');
+      setIsValidFilterString(true);
+    } else {
+      setQueryBuilderRuleGroup({ ...ruleGroup });
+      const celQuery = formatQuery({ ...ruleGroup }, { format: 'cel', fallbackExpression: '' });
+      // 1 == 1 indicates the query can't be parsed. This is a fallback to allow it to still be used as
+      // part of other queries.
+      if (!celQuery || celQuery === '1 == 1') {
+        setFilterString('');
+        setIsValidFilterString(true);
+      } else {
+        setFilterString(celQuery);
+        setIsValidFilterString(true);
+      }
+    }
+  };
+
+  const onUpdateFilterString = (filterString: string) => {
+    setFilterString(filterString);
+    safeCelParse(filterString);
+  };
+
+  const { items: subscriptionListItems, rowExpandingConfiguration } =
+    data ? getDataFromResponse<SubscriptionListItem>(data, resultColumToPropertyMap, 'subscriptionId') : { items: [] };
+
+  const totalItems = getTotalItemsFromResponse(data);
+  const hasNextPage = data?.page_info?.has_next_page ?? false;
+  const nextPageCursor = data?.page_info?.next_page_cursor ?? undefined;
+
+  const exportData = async () => {
+    const exportResult = await getSubscriptionListForExport();
+    const { items: exportItems } = getDataFromResponse<SubscriptionListItem>(
+      exportResult,
+      resultColumToPropertyMap,
+      'subscriptionId',
+    );
+    if (!exportItems.length) {
+      return;
+    }
+    initiateCsvFileDownload(exportItems, Object.keys(tableColumnConfig), getCsvFileNameWithDate('Subscriptions'));
+  };
+
+  const onShowMore = () => {
+    if (!isFetching && nextPageCursor) {
+      setPageCursor({ cursor: nextPageCursor, searchKey: committedSearchKey });
+    }
+  };
+
+  const onUpdateDataSorting = ({ field, sortOrder }: WfoDataSorting<SubscriptionListItem>) => {
+    setDataSorting({ field, sortOrder });
+    setLimit(pageSize);
+    setPageCursor(undefined);
+  };
+
+  return (
+    <>
+      <WfoContentHeader title="Subscriptions (Beta)" />
+      <WfoFilterTabs
+        tabs={subscriptionListTabs}
+        selectedTab={selectedTab}
+        translationNamespace="subscriptions.tabs"
+        onChangeTab={handleChangeTab}
+      />
+      <EuiSpacer size="l" />
+      <WfoStructuredSearchTable<SubscriptionListItem>
+        data={subscriptionListItems}
+        rowExpandingConfiguration={rowExpandingConfiguration}
+        defaultHiddenColumns={tableDefaults?.hiddenColumns}
+        filterString={filterString}
+        handleSearch={handleApplyFilter}
+        isLoading={isFetching}
+        dataSorting={[dataSorting]}
+        isValidFilterString={isValidFilterString}
+        localStorageKey={SEARCH_TABLE_LOCAL_STORAGE_KEY}
+        onUpdateFilterString={onUpdateFilterString}
+        onUpdateQueryBuilder={onUpdateQueryBuilder}
+        onChangeQueryText={onChangeQueryText}
+        onSearchQueryText={onSearchQueryText}
+        onShowMore={onShowMore}
+        onUpdateRetrieverType={onUpdateRetrieverType}
+        queryBuilderRuleGroup={queryBuilderRuleGroup}
+        queryText={queryText}
+        retrieverType={retrieverType}
+        tableColumnConfig={tableColumnConfig}
+        getColumnSearchFieldName={(field) => getKeyByValueFromMap(resultColumToPropertyMap, field)}
+        pageSize={pageSize}
+        onUpdateDataSorting={onUpdateDataSorting}
+        setPageSize={setPageSize}
+        totalItems={totalItems}
+        hasNextPage={hasNextPage}
+        prefilledFieldOptions={prefilledFieldOptions}
+        onExportData={exportData}
+      />
+    </>
+  );
+};

package/src/pages/index.ts

@@ -5,3 +5,4 @@ export * from './startPage';
 export * from './subscriptions';
 export * from './tasks';
 export * from './workflows';
+export * from './WfoSearchPocPage';

package/src/pages/processes/WfoProcessDetail.tsx

@@ -11,7 +11,6 @@ import {
   TimelineItem,
   WfoIsAllowedToRender,
   WfoLoading,
-  WfoProcessListNoteEdit,
   WfoTimeline,
   WfoTitleWithWebsocketBadge,
 } from '@/components';
@@ -181,15 +180,16 @@ export const WfoProcessDetail = ({
   return (
     <>
       <WfoContentHeader
-        title={<WfoTitleWithWebsocketBadge title={pageTitle} />}
-        subtitle={
-          <>
-            <WfoProcessListNoteEdit processId={processDetail?.processId || ''} note={processDetail?.note || ''} />
-            <WfoProductInformationWithLink
-              productNames={productNames}
-              workflowName={processDetail?.workflowName ?? ''}
-            />
-          </>
+        title={
+          <WfoTitleWithWebsocketBadge
+            title={pageTitle}
+            extraElement={
+              <WfoProductInformationWithLink
+                productNames={productNames}
+                workflowName={processDetail?.workflowName ?? ''}
+              />
+            }
+          />
         }
       >
         <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -59,6 +59,7 @@ export const WfoProcessDetailPage = ({ processId }: WfoProcessDetailPageProps) =
             ref={stepListRef}
             lastStatus={processDetail.lastStatus}
             processId={processDetail.processId}
+            workflowName={processDetail.workflowName}
             steps={groupedSteps.flatMap((groupedStep) => groupedStep.steps)}
             traceBack={processDetail.traceback}
             userInputForm={processDetail.form}

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiText } from '@elastic/eui';
 
-import { WfoError, WfoLoading } from '@/components';
+import { WfoError, WfoPageWithUserGuide } from '@/components';
 import { WfoPydanticForm } from '@/components/WfoPydanticForm';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
 import { getWorkflowStepsStyles } from '@/components/WfoWorkflowSteps/styles';
@@ -140,25 +140,21 @@ export const WfoStartProcessPage = ({ processName, isTask = false }: WfoStartPro
       timelineItems={timeLineItems}
       isLoading={isLoading}
     >
-      <EuiPanel
-        css={{
-          backgroundColor: theme.colors.backgroundBaseNeutral,
-          marginTop: theme.base * 3,
-        }}
-      >
-        <EuiFlexGroup css={getStepHeaderStyle(false)}>
-          <WfoStepStatusIcon stepStatus={StepStatus.FORM} />
-
-          <EuiFlexItem grow={0}>
-            <EuiText css={stepListContentBoldTextStyle}>{t('userInput')}</EuiText>
-            <EuiText>{t(isTask ? 'submitTaskFormLabel' : 'submitWorkflowFormLabel')}</EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiHorizontalRule />
-        {(hasError && <WfoError />) || (
+      <WfoPageWithUserGuide workflowName={processName}>
+        <EuiPanel css={{ backgroundColor: theme.colors.backgroundBaseNeutral }}>
+          <EuiFlexGroup gutterSize="none" css={getStepHeaderStyle(false)}>
+            <WfoStepStatusIcon stepStatus={StepStatus.FORM} />
+            <EuiFlexItem grow={0}>
+              <EuiText css={stepListContentBoldTextStyle}>{t('userInput')}</EuiText>
+              <EuiText>{t(isTask ? 'submitTaskFormLabel' : 'submitWorkflowFormLabel')}</EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiHorizontalRule />
+          {(hasError && <WfoError />) || (
             <WfoPydanticForm processName={processName} startProcessPayload={startProcessPayload} isTask={isTask} />
-          ) || <WfoLoading />}
-      </EuiPanel>
+          )}
+        </EuiPanel>
+      </WfoPageWithUserGuide>
     </WfoProcessDetail>
   );
 };

package/src/rtk/api.ts

@@ -22,6 +22,7 @@ export enum HttpStatus {
   FormNotComplete = 510,
   BadGateway = 502,
   BadRequest = 400,
+  PreconditionFailed = 412,
   ServiceUnavailable = 503,
   Unauthorized = 401,
   Forbidden = 403,

package/src/rtk/endpoints/index.ts

@@ -20,3 +20,4 @@ export * from './forms';
 export * from './fileUpload';
 export * from './search';
 export * from './availability';
+export * from './workflowGuides';