@orchestrator-ui/orchestrator-ui-components 1.3.0 → 1.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.3.0 build
+> @orchestrator-ui/orchestrator-ui-components@1.3.1 build
 > tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json
 
 CLI Building entry: src/index.ts
@@ -9,6 +9,6 @@
 ESM Build start
 DTS Build start
 ESM dist/index.js 2.16 MB
-ESM ⚡️ Build success in 780ms
-DTS ⚡️ Build success in 11684ms
-DTS dist/index.d.ts 123.94 KB
+ESM ⚡️ Build success in 860ms
+DTS ⚡️ Build success in 12278ms
+DTS dist/index.d.ts 125.18 KB

package/.turbo/turbo-lint.log

@@ -1,4 +1,4 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.3.0 lint
+> @orchestrator-ui/orchestrator-ui-components@1.3.1 lint
 > eslint "src/**/*.ts*"
 

package/.turbo/turbo-test.log

@@ -1,34 +1,34 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.3.0 test
+> @orchestrator-ui/orchestrator-ui-components@1.3.1 test
 > jest
 
-PASS Orchestrator UI Components Tests src/components/WfoSubscription/utils/utils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoForms/formFields/utils.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoSubscription/utils/utils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/date.spec.ts
-PASS Orchestrator UI Components Tests src/utils/getProductNamesFromProcess.spec.ts
-PASS Orchestrator UI Components Tests src/utils/string.spec.ts
 PASS Orchestrator UI Components Tests src/pages/processes/timelineUtils.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts
+PASS Orchestrator UI Components Tests src/utils/string.spec.ts
+PASS Orchestrator UI Components Tests src/utils/getProductNamesFromProcess.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTree/treeUtils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableConfigPersistence.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableUtils.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig.spec.ts
 PASS Orchestrator UI Components Tests src/messages/getTranslationMessages.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/utils/columns.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getToastMessage.spec.ts
 PASS Orchestrator UI Components Tests src/utils/sortObjectKeys.spec.ts
-PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/utils/columns.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoWorkflowSteps/stepListUtils.spec.ts
+PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
 PASS Orchestrator UI Components Tests src/utils/environmentVariables.spec.ts
 PASS Orchestrator UI Components Tests src/utils/onlyUnique.spec.ts
 PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
-PASS Orchestrator UI Components Tests src/utils/getQueryVariablesForExport.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getTypedFieldFromObject.spec.ts
+PASS Orchestrator UI Components Tests src/utils/getQueryVariablesForExport.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts
 
 Test Suites: 24 passed, 24 total
 Tests:       152 passed, 152 total
 Snapshots:   0 total
-Time:        4.532 s
+Time:        4.721 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 1.3.1
+
+### Patch Changes
+
+- 043b943: Moves processStepst query to RTK
+- b511e4a: Fixes bug that occurs in some create workflows
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1951,10 +1951,6 @@ declare const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<Subscript
 declare const GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY: graphql.DocumentNode;
 declare function getSubscriptionDropdownOptionsGraphQlQuery<QueryVariablesType = SubscriptionDropdownOption>(): TypedDocumentNode<SubscriptionDropdownOptionsResult, GraphqlQueryVariables<QueryVariablesType>>;
 
-declare const GET_PROCESS_STEPS_GRAPHQL_QUERY: TypedDocumentNode<ProcessStepsResult, {
-    processName: string;
-}>;
-
 declare const GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY: graphql.DocumentNode;
 declare const GET_PROCESS_LIST_GRAPHQL_QUERY: graphql.DocumentNode;
 declare const getProcessListGraphQlQuery: () => TypedDocumentNode<ProcessListResult, GraphqlQueryVariables<Process>>;
@@ -3067,6 +3063,24 @@ declare const useSetSubscriptionInSyncMutation: _reduxjs_toolkit_dist_query_reac
     meta?: {} | undefined;
 } | PromiseLike<_reduxjs_toolkit_dist_query_baseQueryTypes.QueryReturnValue<unknown, _rtk_query_graphql_request_base_query_dist_GraphqlBaseQueryTypes.ErrorResponse, {}>>, CacheTags, void, "orchestratorApi">>;
 
+declare const processStepsQuery = "\n    query ProcessSteps($processName: String!) {\n        workflows(filterBy: { field: \"name\", value: $processName }) {\n            page {\n                steps {\n                    name\n                    assignee\n                }\n            }\n        }\n    }\n";
+declare const useGetTimeLineItemsQuery: _reduxjs_toolkit_dist_query_react_buildHooks.UseQuery<_reduxjs_toolkit_query.QueryDefinition<string, (args: any, api: _reduxjs_toolkit_query.BaseQueryApi, extraOptions: {
+    baseQueryType?: BaseQueryTypes | undefined;
+    apiName?: string | undefined;
+}) => {
+    error: _reduxjs_toolkit_query.FetchBaseQueryError;
+    data?: undefined;
+    meta?: _reduxjs_toolkit_query.FetchBaseQueryMeta | undefined;
+} | PromiseLike<_reduxjs_toolkit_dist_query_baseQueryTypes.QueryReturnValue<unknown, _reduxjs_toolkit_query.FetchBaseQueryError, _reduxjs_toolkit_query.FetchBaseQueryMeta>> | {
+    error: _rtk_query_graphql_request_base_query_dist_GraphqlBaseQueryTypes.ErrorResponse;
+    data?: undefined;
+    meta?: {} | undefined;
+} | {
+    error?: undefined;
+    data: unknown;
+    meta?: {} | undefined;
+} | PromiseLike<_reduxjs_toolkit_dist_query_baseQueryTypes.QueryReturnValue<unknown, _rtk_query_graphql_request_base_query_dist_GraphqlBaseQueryTypes.ErrorResponse, {}>>, CacheTags, TimelineItem[], "orchestratorApi">>;
+
 declare type ToastState = {
     messages: Toast[];
 };
@@ -3148,4 +3162,4 @@ declare const getQueryVariablesForExport: <T extends object>(queryVariables: Gra
 
 declare const onlyUnique: (value: string, index: number, array: string[]) => boolean;
 
-export { ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY, ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY, AcceptField, type AcceptFieldProps, ApiClient, ApiClientContext, ApiClientContextProvider, type ApiClientContextProviderProps, type ApiContext, type AppDispatch, type AutoFieldsProps, BadgeType, BaseApiClient, type BaseGraphQlResult, BaseQueryTypes, BoolField, type BoolFieldProps, COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY, COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY, type CacheNames, type CacheOption, CacheTags, ColorModes, type ColumnConfig, type ConfirmDialogActions, ConfirmationDialogContext, ConfirmationDialogContextWrapper, ConfirmationDialogProvider, ConnectedSelectField, ContactPersonNameField, type ContactPersonNameFieldProps, CreateForm, type CustomApiConfig, type Customer, CustomerField, type CustomerFieldProps, type CustomersResult, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, type DataDisplayParams, type DataDisplayReturnValues, DateField, type DateFieldProps, DividerField, type DividerFieldProps, type EmailAddress, type EmailState, EngineStatus, Environment, ErrorField, type ErrorFieldProps, ErrorsField, type ErrorsFieldProps, type ExternalService, type FetchFilter, type Field, type FieldProps$1 as FieldProps, type FieldValue, type FilterQuery, type FixedInputDefinition, type Form, type FormNotCompleteResponse, GET_PROCESS_LIST_GRAPHQL_QUERY, GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY, GET_PROCESS_STEPS_GRAPHQL_QUERY, GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY, GET_PRODUCTS_GRAPHQL_QUERY, GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY, GET_RESOURCE_TYPES_GRAPHQL_QUERY, GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY, GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY, GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY, GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY, type GraphQLPageInfo, type GraphQLSort, type GraphqlFilter, type GraphqlQueryVariables, type GroupedStep, HIDDEN_KEYS, type HeaderBadgeProps, type IPvAnyNetworkFieldProps, ImsNodeIdField, type ImsNodeIdFieldProps, type ImsPortFieldProps, ImsPortIdField, type InUseByRelation, type InputForm, IpNetworkField, type KeyValue, LabelField, type LabelFieldProps, ListAddField, type ListAddFieldProps, ListDelField, type ListDelFieldProps, ListField, type ListFieldProps, ListSelectField, type ListSelectFieldProps, Locale, LocationCodeField, type LocationCodeFieldProps, LongTextField, type LongTextFieldProps, MAXIMUM_ITEMS_FOR_BULK_FETCHING, METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY, METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY, METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY, METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY, NestField, type NestFieldProps, type Nullable, NumField, type NumFieldProps, OptGroupField, type OptGroupFieldProps, type OrchestratorConfig, OrchestratorConfigContext, OrchestratorConfigProvider, type OrchestratorConfigProviderProps, PATH_METADATA, PATH_METADATA_PRODUCTS, PATH_METADATA_PRODUCT_BLOCKS, PATH_METADATA_RESOURCE_TYPES, PATH_METADATA_WORKFLOWS, PATH_SETTINGS, PATH_START, PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, PATH_SUBSCRIPTIONS, PATH_TASKS, PATH_WORKFLOWS, type Pagination, type Policy, PolicyContext, PolicyContextProvider, type PolicyProviderProps, PolicyResource, type Process, type ProcessDetail, type ProcessDetailResultRaw, ProcessDoneStatuses, type ProcessListItem, type ProcessListResponse, type ProcessListResult, ProcessStatus, type ProcessStatusCounts, type ProcessStepsResult, type ProcessesDetailResult, type ProductBlockDefinition, type ProductBlockDefinitionsResult, type ProductBlockInstance, type ProductDefinition, type ProductDefinitionsResult, ProductField, type ProductFieldProps, ProductLifecycleStatus, RENDER_ALL, RESOURCE_TYPE_FIELD_DESCRIPTION, RESOURCE_TYPE_FIELD_ID, RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS, RESOURCE_TYPE_FIELD_TYPE, RadioField, type RadioFieldProps, type RelatedSubscription, type RelatedSubscriptionsResult, RenderDirection, type ResourceTypeDefinition, type ResourceTypeDefinitionsResult, type RootState, STEP_STATE_HIDDEN_KEYS, SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY, type SelectFieldProps, type ShowConfirmDialog, type ShowConfirmDialogType, SortOrder, type StartProcessStep, type Step, type StepListItem, type StepState, StepStatus, StoreProvider, type StoreProviderProps, type StoredTableConfig, SubmitField, type SubmitFieldProps, type Subscription, type SubscriptionAction, type SubscriptionDetail, type SubscriptionDetailProcess, type SubscriptionDetailResult, SubscriptionDetailTab, type SubscriptionDropdownOption, type SubscriptionDropdownOptionsResult, SubscriptionField, type SubscriptionFieldProps, SubscriptionKeyValueBlock, SubscriptionStatus, SubscriptionSummaryField, type SubscriptionSummaryFieldProps, type SubscriptionsResult, SummaryField, type SummaryFieldProps, type TableColumnKeys, type TableConfig, TableSettingsModal, type TableSettingsModalProps, TextField, type TextFieldProps, type TimelineItem, TimelinePosition, TimestampField, type TimestampFieldProps, type ToastState, ToastTypes, type TranslationMessagesMap, type TreeBlock, TreeContext, type TreeContextType, TreeProvider, type TreeProviderProps, UnconnectedSelectField, type UserInputForm, UserInputFormWizard, type ValidationError, type ValidationErrorContext, VlanField, type VlanFieldProps, WFO_STATUS_COLOR_FIELD, WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsExpand, WfoAuth, WfoBadge, type WfoBadgeProps, WfoBasicTable, type WfoBasicTableColumns, type WfoBasicTableColumnsWithControlColumns, type WfoBasicTableProps, WfoBell, WfoBreadcrumbs, WfoCheckmarkCircleFill, WfoChevronDown, WfoChevronUp, WfoCode, WfoCogFill, WfoContactEnvelopeFill, type WfoControlColumn, WfoCubeSolid, WfoDataGridTable, type WfoDataGridTableColumns, type WfoDataGridTableProps, type WfoDataSearch, type WfoDataSorting, WfoDateTime, type WfoDateTimeProps, WfoDropdownButton, WfoEngineStatusBadge, WfoEngineStatusButton, WfoEnvironmentBadge, WfoError, WfoErrorBoundary, type WfoEuiBasicTableColumn, WfoEyeFill, WfoFailedTasksBadge, type WfoFilterTab, WfoFilterTabs, type WfoFilterTabsProps, WfoFirstPartUUID, type WfoFirstUUIDPartProps, WfoFlushSettings, WfoHeaderBadge, type WfoIconProps, WfoInSyncField, WfoInformationModal, type WfoInformationModalProps, WfoInsyncIcon, WfoIsAllowedToRender, type WfoIsAllowedToRenderProps, WfoJsonCodeBlock, type WfoJsonCodeBlockProps, WfoKeyCell, type WfoKeyCellProps, WfoKeyValueTable, type WfoKeyValueTableDataType, type WfoKeyValueTableProps, WfoLoading, WfoLogoutIcon, WfoMinusCircleFill, WfoMinusCircleOutline, WfoModifySettings, WfoPageHeader, type WfoPageHeaderProps, WfoPageTemplate, type WfoPageTemplateProps, WfoPageUnauthorized, WfoPencil, WfoPencilAlt, WfoPlayCircle, WfoPlayFill, WfoPlusCircleFill, type WfoPolicyRenderFallbackProps, WfoPolicyRenderPageFallback, WfoProcessDetailPage, WfoProcessListSubscriptionsCell, WfoProcessRawData, WfoProcessStatusBadge, type WfoProcessStatusBadgeProps, WfoProcessSubscriptionDelta, WfoProcessesList, type WfoProcessesListProps, type WfoProcessesListSubscriptionsCellProps, WfoProcessesTimeline, WfoProductBlockBadge, type WfoProductBlockBadgeProps, WfoProductBlocksPage, WfoProductStatusBadge, type WfoProductStatusBadgeProps, WfoProductsPage, WfoRefresh, WfoResourceTypesPage, WfoSearchField, type WfoSearchFieldProps, WfoSearchStrikethrough, type WfoSession, WfoSettingsModal, type WfoSettingsModalProps, WfoSettingsPage, WfoShare, WfoSideMenu, WfoSidebar, type WfoSidebarProps, WfoSortAsc, WfoSortButton, type WfoSortButtonProps, WfoSortButtons, type WfoSortButtonsProps, WfoSortDesc, WfoSortDirectionIcon, type WfoSortDirectionIconProps, WfoStartPage, WfoStartProcessPage, WfoStartTaskButtonComboBox, WfoStatistic, WfoStatus, WfoStatusColorField, type WfoStatusColorFieldProps, WfoStatusDotIcon, WfoStep, WfoStepList, WfoStepListHeader, type WfoStepListHeaderProps, type WfoStepListProps, type WfoStepListRef, type WfoStepProps, WfoStepStatusIcon, type WfoStepStatusIconProps, WfoSubmitModal, type WfoSubmitModalProps, WfoSubscription, WfoSubscriptionActions, type WfoSubscriptionActionsProps, WfoSubscriptionDetailPage, WfoSubscriptionDetailTree, WfoSubscriptionGeneral, WfoSubscriptionProductBlock, WfoSubscriptionStatusBadge, type WfoSubscriptionStatusBadgeProps, WfoSubscriptionsListPage, type WfoTableColumns, type WfoTableColumnsWithExtraNonDataFields, type WfoTableControlColumnConfig, type WfoTableDataColumnConfig, WfoTableHeaderCell, type WfoTableHeaderCellProps, WfoTableWithFilter, type WfoTableWithFilterProps, WfoTasksListPage, WfoTasksListTabType, WfoTextAnchor, WfoTimeline, type WfoTimelineProps, WfoToastsList, type WfoTreeNodeMap, type WfoUserProfile, WfoValueCell, type WfoValueCellProps, WfoViewList, WfoWarningTriangle, WfoWorkflowStepList, type WfoWorkflowStepListProps, WfoWorkflowTargetBadge, type WfoWorkflowTargetBadgeProps, WfoWorkflowsListPage, WfoWorkflowsPage, WfoXCircleFill, type WorkflowDefinition, type WorkflowDefinitionsResult, type WorkflowListItem, WorkflowTarget, addToastMessage, calculateTimeDifference, camelToHuman, clearTableConfigFromLocalStorage, defaultOrchestratorTheme, defaultTasksListTabs, determineNewSortOrder, determinePageIndex, filterDataByCriteria, flattenArrayProps, formatDate, formatDateCetWithUtc, getApiClient, getCurrentBrowserLocale, getCustomApiSlice, getDataSortHandler, getDate, getFieldFromProductBlockInstanceValues, getFirstUuidPart, getInitialColumnOrder, getLastUncompletedProcess, getLatestTaskDate, getNumberValueFromEnvironmentVariable, getOrchestratorConfigSlice, getOrchestratorStore, getPageChangeHandler, getProcessListGraphQlQuery, getProcessListSummaryGraphQlQuery, getProductBlockTitle, getProductNamesFromProcess, getProductsQuery, getProductsSummaryQuery, getQueryStringHandler, getQueryVariablesForExport, getSortDirectionFromString, getStatusBadgeColor, getStepContent, getSubscriptionDropdownOptionsGraphQlQuery, getSubscriptionsListGraphQlQuery, getSubscriptionsListSummaryGraphQlQuery, getTableConfigFromLocalStorage, getTasksListTabTypeFromString, getTypedFieldFromObject, getWfoBasicTableStyles, getWorkflowTargetColor, getWorkflowTargetIconContent, isToday, isUuid4, isValidLocalStorageTableConfig, localMomentToUtcTimestamp, mapColumnSortToEuiDataGridSorting, mapSortableAndFilterableValuesToTableColumnConfig, onlyUnique, orchestratorApi, parseDate, parseDateOrTimeRelativeToToday, parseDateRelativeToToday, parseDateToLocaleDateString, parseDateToLocaleDateTimeString, parseDateToLocaleTimeString, parseIsoString, prepareHeaders, processListQuery, removeSuffix, removeToastMessage, renderEmptyElementWhenNotAllowedByPolicy, setTableConfigToLocalStorage, snakeToHuman, snakeToKebab, stop, toastMessagesReducer, toastMessagesSlice, upperCaseFirstChar, urlPolicyMap, useCacheNames, useCheckEngineStatus, useClearCacheMutation, useDataDisplayParams, useFilterQueryWithRest, useGetCustomersQuery, useGetEngineStatusQuery, useGetProcessListQuery, useGetTranslationMessages, useMutateProcess, useOrchestratorConfig, useOrchestratorTheme, usePolicy, useProcessStatusCountsQuery, useQueryWithFetch, useQueryWithGraphql, useQueryWithGraphqlLazy, useRawProcessDetails, useSetEngineStatusMutation, useSetSubscriptionInSyncMutation, useShowToastMessage, useStoredTableConfig, useStreamMessagesQuery, useSubscriptionActions, useWfoSession, useWithOrchestratorTheme, utcTimestampToLocalMoment };
+export { ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY, ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY, AcceptField, type AcceptFieldProps, ApiClient, ApiClientContext, ApiClientContextProvider, type ApiClientContextProviderProps, type ApiContext, type AppDispatch, type AutoFieldsProps, BadgeType, BaseApiClient, type BaseGraphQlResult, BaseQueryTypes, BoolField, type BoolFieldProps, COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY, COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY, type CacheNames, type CacheOption, CacheTags, ColorModes, type ColumnConfig, type ConfirmDialogActions, ConfirmationDialogContext, ConfirmationDialogContextWrapper, ConfirmationDialogProvider, ConnectedSelectField, ContactPersonNameField, type ContactPersonNameFieldProps, CreateForm, type CustomApiConfig, type Customer, CustomerField, type CustomerFieldProps, type CustomersResult, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, type DataDisplayParams, type DataDisplayReturnValues, DateField, type DateFieldProps, DividerField, type DividerFieldProps, type EmailAddress, type EmailState, EngineStatus, Environment, ErrorField, type ErrorFieldProps, ErrorsField, type ErrorsFieldProps, type ExternalService, type FetchFilter, type Field, type FieldProps$1 as FieldProps, type FieldValue, type FilterQuery, type FixedInputDefinition, type Form, type FormNotCompleteResponse, GET_PROCESS_LIST_GRAPHQL_QUERY, GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY, GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY, GET_PRODUCTS_GRAPHQL_QUERY, GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY, GET_RESOURCE_TYPES_GRAPHQL_QUERY, GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY, GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY, GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY, GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY, type GraphQLPageInfo, type GraphQLSort, type GraphqlFilter, type GraphqlQueryVariables, type GroupedStep, HIDDEN_KEYS, type HeaderBadgeProps, type IPvAnyNetworkFieldProps, ImsNodeIdField, type ImsNodeIdFieldProps, type ImsPortFieldProps, ImsPortIdField, type InUseByRelation, type InputForm, IpNetworkField, type KeyValue, LabelField, type LabelFieldProps, ListAddField, type ListAddFieldProps, ListDelField, type ListDelFieldProps, ListField, type ListFieldProps, ListSelectField, type ListSelectFieldProps, Locale, LocationCodeField, type LocationCodeFieldProps, LongTextField, type LongTextFieldProps, MAXIMUM_ITEMS_FOR_BULK_FETCHING, METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY, METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY, METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY, METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY, NestField, type NestFieldProps, type Nullable, NumField, type NumFieldProps, OptGroupField, type OptGroupFieldProps, type OrchestratorConfig, OrchestratorConfigContext, OrchestratorConfigProvider, type OrchestratorConfigProviderProps, PATH_METADATA, PATH_METADATA_PRODUCTS, PATH_METADATA_PRODUCT_BLOCKS, PATH_METADATA_RESOURCE_TYPES, PATH_METADATA_WORKFLOWS, PATH_SETTINGS, PATH_START, PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW, PATH_SUBSCRIPTIONS, PATH_TASKS, PATH_WORKFLOWS, type Pagination, type Policy, PolicyContext, PolicyContextProvider, type PolicyProviderProps, PolicyResource, type Process, type ProcessDetail, type ProcessDetailResultRaw, ProcessDoneStatuses, type ProcessListItem, type ProcessListResponse, type ProcessListResult, ProcessStatus, type ProcessStatusCounts, type ProcessStepsResult, type ProcessesDetailResult, type ProductBlockDefinition, type ProductBlockDefinitionsResult, type ProductBlockInstance, type ProductDefinition, type ProductDefinitionsResult, ProductField, type ProductFieldProps, ProductLifecycleStatus, RENDER_ALL, RESOURCE_TYPE_FIELD_DESCRIPTION, RESOURCE_TYPE_FIELD_ID, RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS, RESOURCE_TYPE_FIELD_TYPE, RadioField, type RadioFieldProps, type RelatedSubscription, type RelatedSubscriptionsResult, RenderDirection, type ResourceTypeDefinition, type ResourceTypeDefinitionsResult, type RootState, STEP_STATE_HIDDEN_KEYS, SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY, type SelectFieldProps, type ShowConfirmDialog, type ShowConfirmDialogType, SortOrder, type StartProcessStep, type Step, type StepListItem, type StepState, StepStatus, StoreProvider, type StoreProviderProps, type StoredTableConfig, SubmitField, type SubmitFieldProps, type Subscription, type SubscriptionAction, type SubscriptionDetail, type SubscriptionDetailProcess, type SubscriptionDetailResult, SubscriptionDetailTab, type SubscriptionDropdownOption, type SubscriptionDropdownOptionsResult, SubscriptionField, type SubscriptionFieldProps, SubscriptionKeyValueBlock, SubscriptionStatus, SubscriptionSummaryField, type SubscriptionSummaryFieldProps, type SubscriptionsResult, SummaryField, type SummaryFieldProps, type TableColumnKeys, type TableConfig, TableSettingsModal, type TableSettingsModalProps, TextField, type TextFieldProps, type TimelineItem, TimelinePosition, TimestampField, type TimestampFieldProps, type ToastState, ToastTypes, type TranslationMessagesMap, type TreeBlock, TreeContext, type TreeContextType, TreeProvider, type TreeProviderProps, UnconnectedSelectField, type UserInputForm, UserInputFormWizard, type ValidationError, type ValidationErrorContext, VlanField, type VlanFieldProps, WFO_STATUS_COLOR_FIELD, WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsExpand, WfoAuth, WfoBadge, type WfoBadgeProps, WfoBasicTable, type WfoBasicTableColumns, type WfoBasicTableColumnsWithControlColumns, type WfoBasicTableProps, WfoBell, WfoBreadcrumbs, WfoCheckmarkCircleFill, WfoChevronDown, WfoChevronUp, WfoCode, WfoCogFill, WfoContactEnvelopeFill, type WfoControlColumn, WfoCubeSolid, WfoDataGridTable, type WfoDataGridTableColumns, type WfoDataGridTableProps, type WfoDataSearch, type WfoDataSorting, WfoDateTime, type WfoDateTimeProps, WfoDropdownButton, WfoEngineStatusBadge, WfoEngineStatusButton, WfoEnvironmentBadge, WfoError, WfoErrorBoundary, type WfoEuiBasicTableColumn, WfoEyeFill, WfoFailedTasksBadge, type WfoFilterTab, WfoFilterTabs, type WfoFilterTabsProps, WfoFirstPartUUID, type WfoFirstUUIDPartProps, WfoFlushSettings, WfoHeaderBadge, type WfoIconProps, WfoInSyncField, WfoInformationModal, type WfoInformationModalProps, WfoInsyncIcon, WfoIsAllowedToRender, type WfoIsAllowedToRenderProps, WfoJsonCodeBlock, type WfoJsonCodeBlockProps, WfoKeyCell, type WfoKeyCellProps, WfoKeyValueTable, type WfoKeyValueTableDataType, type WfoKeyValueTableProps, WfoLoading, WfoLogoutIcon, WfoMinusCircleFill, WfoMinusCircleOutline, WfoModifySettings, WfoPageHeader, type WfoPageHeaderProps, WfoPageTemplate, type WfoPageTemplateProps, WfoPageUnauthorized, WfoPencil, WfoPencilAlt, WfoPlayCircle, WfoPlayFill, WfoPlusCircleFill, type WfoPolicyRenderFallbackProps, WfoPolicyRenderPageFallback, WfoProcessDetailPage, WfoProcessListSubscriptionsCell, WfoProcessRawData, WfoProcessStatusBadge, type WfoProcessStatusBadgeProps, WfoProcessSubscriptionDelta, WfoProcessesList, type WfoProcessesListProps, type WfoProcessesListSubscriptionsCellProps, WfoProcessesTimeline, WfoProductBlockBadge, type WfoProductBlockBadgeProps, WfoProductBlocksPage, WfoProductStatusBadge, type WfoProductStatusBadgeProps, WfoProductsPage, WfoRefresh, WfoResourceTypesPage, WfoSearchField, type WfoSearchFieldProps, WfoSearchStrikethrough, type WfoSession, WfoSettingsModal, type WfoSettingsModalProps, WfoSettingsPage, WfoShare, WfoSideMenu, WfoSidebar, type WfoSidebarProps, WfoSortAsc, WfoSortButton, type WfoSortButtonProps, WfoSortButtons, type WfoSortButtonsProps, WfoSortDesc, WfoSortDirectionIcon, type WfoSortDirectionIconProps, WfoStartPage, WfoStartProcessPage, WfoStartTaskButtonComboBox, WfoStatistic, WfoStatus, WfoStatusColorField, type WfoStatusColorFieldProps, WfoStatusDotIcon, WfoStep, WfoStepList, WfoStepListHeader, type WfoStepListHeaderProps, type WfoStepListProps, type WfoStepListRef, type WfoStepProps, WfoStepStatusIcon, type WfoStepStatusIconProps, WfoSubmitModal, type WfoSubmitModalProps, WfoSubscription, WfoSubscriptionActions, type WfoSubscriptionActionsProps, WfoSubscriptionDetailPage, WfoSubscriptionDetailTree, WfoSubscriptionGeneral, WfoSubscriptionProductBlock, WfoSubscriptionStatusBadge, type WfoSubscriptionStatusBadgeProps, WfoSubscriptionsListPage, type WfoTableColumns, type WfoTableColumnsWithExtraNonDataFields, type WfoTableControlColumnConfig, type WfoTableDataColumnConfig, WfoTableHeaderCell, type WfoTableHeaderCellProps, WfoTableWithFilter, type WfoTableWithFilterProps, WfoTasksListPage, WfoTasksListTabType, WfoTextAnchor, WfoTimeline, type WfoTimelineProps, WfoToastsList, type WfoTreeNodeMap, type WfoUserProfile, WfoValueCell, type WfoValueCellProps, WfoViewList, WfoWarningTriangle, WfoWorkflowStepList, type WfoWorkflowStepListProps, WfoWorkflowTargetBadge, type WfoWorkflowTargetBadgeProps, WfoWorkflowsListPage, WfoWorkflowsPage, WfoXCircleFill, type WorkflowDefinition, type WorkflowDefinitionsResult, type WorkflowListItem, WorkflowTarget, addToastMessage, calculateTimeDifference, camelToHuman, clearTableConfigFromLocalStorage, defaultOrchestratorTheme, defaultTasksListTabs, determineNewSortOrder, determinePageIndex, filterDataByCriteria, flattenArrayProps, formatDate, formatDateCetWithUtc, getApiClient, getCurrentBrowserLocale, getCustomApiSlice, getDataSortHandler, getDate, getFieldFromProductBlockInstanceValues, getFirstUuidPart, getInitialColumnOrder, getLastUncompletedProcess, getLatestTaskDate, getNumberValueFromEnvironmentVariable, getOrchestratorConfigSlice, getOrchestratorStore, getPageChangeHandler, getProcessListGraphQlQuery, getProcessListSummaryGraphQlQuery, getProductBlockTitle, getProductNamesFromProcess, getProductsQuery, getProductsSummaryQuery, getQueryStringHandler, getQueryVariablesForExport, getSortDirectionFromString, getStatusBadgeColor, getStepContent, getSubscriptionDropdownOptionsGraphQlQuery, getSubscriptionsListGraphQlQuery, getSubscriptionsListSummaryGraphQlQuery, getTableConfigFromLocalStorage, getTasksListTabTypeFromString, getTypedFieldFromObject, getWfoBasicTableStyles, getWorkflowTargetColor, getWorkflowTargetIconContent, isToday, isUuid4, isValidLocalStorageTableConfig, localMomentToUtcTimestamp, mapColumnSortToEuiDataGridSorting, mapSortableAndFilterableValuesToTableColumnConfig, onlyUnique, orchestratorApi, parseDate, parseDateOrTimeRelativeToToday, parseDateRelativeToToday, parseDateToLocaleDateString, parseDateToLocaleDateTimeString, parseDateToLocaleTimeString, parseIsoString, prepareHeaders, processListQuery, processStepsQuery, removeSuffix, removeToastMessage, renderEmptyElementWhenNotAllowedByPolicy, setTableConfigToLocalStorage, snakeToHuman, snakeToKebab, stop, toastMessagesReducer, toastMessagesSlice, upperCaseFirstChar, urlPolicyMap, useCacheNames, useCheckEngineStatus, useClearCacheMutation, useDataDisplayParams, useFilterQueryWithRest, useGetCustomersQuery, useGetEngineStatusQuery, useGetProcessListQuery, useGetTimeLineItemsQuery, useGetTranslationMessages, useMutateProcess, useOrchestratorConfig, useOrchestratorTheme, usePolicy, useProcessStatusCountsQuery, useQueryWithFetch, useQueryWithGraphql, useQueryWithGraphqlLazy, useRawProcessDetails, useSetEngineStatusMutation, useSetSubscriptionInSyncMutation, useShowToastMessage, useStoredTableConfig, useStreamMessagesQuery, useSubscriptionActions, useWfoSession, useWithOrchestratorTheme, utcTimestampToLocalMoment };

package/dist/index.js

@@ -40841,6 +40841,42 @@ var inSyncApi = orchestratorApi.injectEndpoints({
 });
 var { useSetSubscriptionInSyncMutation } = inSyncApi;
 
+// src/rtk/endpoints/processSteps.ts
+var processStepsQuery = `
+    query ProcessSteps($processName: String!) {
+        workflows(filterBy: { field: "name", value: $processName }) {
+            page {
+                steps {
+                    name
+                    assignee
+                }
+            }
+        }
+    }
+`;
+var processStepApi = orchestratorApi.injectEndpoints({
+  endpoints: (build) => ({
+    getTimeLineItems: build.query({
+      query: (processName) => ({
+        document: processStepsQuery,
+        variables: { processName }
+      }),
+      transformResponse: (response) => {
+        const timeLineItems = response.workflows.page[0].steps.map(
+          ({ name }) => {
+            return {
+              processStepStatus: "pending" /* PENDING */,
+              stepDetail: name
+            };
+          }
+        );
+        return timeLineItems;
+      }
+    })
+  })
+});
+var { useGetTimeLineItemsQuery } = processStepApi;
+
 // src/hooks/useCheckEngineStatus.ts
 var useCheckEngineStatus = () => {
   const { data, isLoading, refetch } = useGetEngineStatusQuery();
@@ -48278,24 +48314,9 @@ function getSubscriptionDropdownOptionsGraphQlQuery() {
   return GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY;
 }
 
-// src/graphqlQueries/processStepsQuery.ts
-import { gql as gql8 } from "graphql-request";
-var GET_PROCESS_STEPS_GRAPHQL_QUERY = parse(gql8`
-    query ProcessSteps($processName: String!) {
-        workflows(filterBy: { field: "name", value: $processName }) {
-            page {
-                steps {
-                    name
-                    assignee
-                }
-            }
-        }
-    }
-`);
-
 // src/graphqlQueries/processListQuery.ts
-import { gql as gql9 } from "graphql-request";
-var GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql9`
+import { gql as gql8 } from "graphql-request";
+var GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql8`
     query ProcessListSummary(
         $first: Int!
         $after: Int!
@@ -48323,7 +48344,7 @@ var GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql9`
         }
     }
 `);
-var GET_PROCESS_LIST_GRAPHQL_QUERY = parse(gql9`
+var GET_PROCESS_LIST_GRAPHQL_QUERY = parse(gql8`
     query ProcessList(
         $first: Int!
         $after: Int!
@@ -48425,8 +48446,8 @@ import Link3 from "next/link";
 import { EuiFlexGroup as EuiFlexGroup10, EuiFlexItem as EuiFlexItem9, EuiSpacer as EuiSpacer13, EuiSwitch as EuiSwitch2 } from "@elastic/eui";
 
 // src/graphqlQueries/relatedSubscriptionsQuery.ts
-import { gql as gql10 } from "graphql-request";
-var GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY = parse(gql10`
+import { gql as gql9 } from "graphql-request";
+var GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY = parse(gql9`
     query RelatedSubscriptions(
         $subscriptionId: String!
         $first: Int!
@@ -53858,7 +53879,9 @@ var CustomTitleJSONSchemaBridge = class extends JSONSchemaBridge {
             for (const key in combinedPartial) {
               if (combinedPartial[key] && !_definition[key]) {
                 _definition[key] = combinedPartial[key];
-                definition[key] = combinedPartial[key];
+                if (Object.isExtensible(definition)) {
+                  definition[key] = combinedPartial[key];
+                }
               }
             }
           });
@@ -55072,8 +55095,8 @@ import { useTranslations as useTranslations45 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup5 } from "@elastic/eui";
 
 // src/graphqlQueries/workflows/workflowsQuery.ts
-import { gql as gql11 } from "graphql-request";
-var GET_WORKFLOWS_GRAPHQL_QUERY = parse(gql11`
+import { gql as gql10 } from "graphql-request";
+var GET_WORKFLOWS_GRAPHQL_QUERY = parse(gql10`
     query MetadataWorkflows(
         $first: Int!
         $after: Int!
@@ -56673,7 +56696,6 @@ var WfoStartProcessPage = ({
   processName,
   isTask = false
 }) => {
-  var _a, _b;
   const apiClient = useAxiosApiClient();
   const t = useTranslations51("processes.steps");
   const router = useRouter11();
@@ -56687,24 +56709,16 @@ var WfoStartProcessPage = ({
   );
   const { stepUserInput, hasNext } = form;
   const { getStepHeaderStyle, stepListContentBoldTextStyle } = getStyles12(theme);
-  const { data, isLoading, isError: isError3 } = useQueryWithGraphql(
-    GET_PROCESS_STEPS_GRAPHQL_QUERY,
-    {
-      processName
-    },
-    `processSteps={processName}`
-  );
+  const {
+    data: timeLineItems = [],
+    isError: isError3,
+    isLoading
+  } = useGetTimeLineItemsQuery(processName);
   if (isError3) {
     if (!hasError) {
       setHasError(true);
     }
   }
-  const timeLineItems = ((_b = (_a = data == null ? void 0 : data.workflows) == null ? void 0 : _a.page[0]) == null ? void 0 : _b.steps) && !isLoading ? data.workflows.page[0].steps.map(({ name }) => {
-    return {
-      processStepStatus: "pending" /* PENDING */,
-      stepDetail: name
-    };
-  }) : [];
   const submit = useCallback6(
     (processInput) => {
       const startProcessPromise = apiClient.startProcess(
@@ -56728,9 +56742,9 @@ var WfoStartProcessPage = ({
           throw e;
         }
       ).catch((error) => {
-        var _a2, _b2;
-        if (((_a2 = error == null ? void 0 : error.response) == null ? void 0 : _a2.status) !== 510) {
-          if (((_b2 = error == null ? void 0 : error.response) == null ? void 0 : _b2.status) === 400) {
+        var _a, _b;
+        if (((_a = error == null ? void 0 : error.response) == null ? void 0 : _a.status) !== 510) {
+          if (((_b = error == null ? void 0 : error.response) == null ? void 0 : _b.status) === 400) {
             throw error;
           }
           console.error(error);
@@ -56753,10 +56767,10 @@ var WfoStartProcessPage = ({
   useEffect23(() => {
     if (processName) {
       const clientResultCallback = (json) => {
-        var _a2;
+        var _a;
         setForm({
           stepUserInput: json.form,
-          hasNext: (_a2 = json.hasNext) != null ? _a2 : false
+          hasNext: (_a = json.hasNext) != null ? _a : false
         });
       };
       apiClient.catchErrorStatus(
@@ -56780,6 +56794,7 @@ var WfoStartProcessPage = ({
       buttonsAreDisabled: true,
       processDetail,
       timelineItems: timeLineItems,
+      isLoading,
       children: /* @__PURE__ */ jsxs92(EuiPanel6, { css: { marginTop: theme.base * 3 }, children: [
         /* @__PURE__ */ jsxs92(EuiFlexGroup22, { css: getStepHeaderStyle(false), children: [
           /* @__PURE__ */ jsx161(WfoStepStatusIcon, { stepStatus: "form" /* FORM */ }),
@@ -59446,7 +59461,6 @@ export {
   ErrorsField,
   GET_PROCESS_LIST_GRAPHQL_QUERY,
   GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY,
-  GET_PROCESS_STEPS_GRAPHQL_QUERY,
   GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
   GET_PRODUCTS_GRAPHQL_QUERY,
   GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY,
@@ -59700,6 +59714,7 @@ export {
   parseIsoString,
   prepareHeaders,
   processListQuery,
+  processStepsQuery,
   removeSuffix,
   removeToastMessage,
   renderEmptyElementWhenNotAllowedByPolicy,
@@ -59719,6 +59734,7 @@ export {
   useGetCustomersQuery,
   useGetEngineStatusQuery,
   useGetProcessListQuery,
+  useGetTimeLineItemsQuery,
   useGetTranslationMessages,
   useMutateProcess,
   useOrchestratorConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/components/WfoForms/UserInputForm.tsx

@@ -246,7 +246,13 @@ class CustomTitleJSONSchemaBridge extends JSONSchemaBridge {
                         for (const key in combinedPartial) {
                             if (combinedPartial[key] && !_definition[key]) {
                                 _definition[key] = combinedPartial[key];
-                                definition[key] = combinedPartial[key];
+
+                                // This isExtensible check is introduced to fix this bug: https://github.com/workfloworchestrator/orchestrator-ui-library/issues/878
+                                // The reason the definition object is not extensible here but is in the same place in v1 is not known but
+                                // deemed not worth to investigate further at this point.
+                                if (Object.isExtensible(definition)) {
+                                    definition[key] = combinedPartial[key];
+                                }
                             }
                         }
                     });

package/src/graphqlQueries/index.ts

@@ -4,5 +4,4 @@ export * from './productsQuery';
 export * from './resourceTypesQuery';
 export * from './subscriptionDetailQuery';
 export * from './subscriptionsDropdownOptionsQuery';
-export * from './processStepsQuery';
 export * from './processListQuery';

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -13,18 +13,17 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PATH_TASKS, TimelineItem, WfoError, WfoLoading } from '@/components';
+import { PATH_TASKS, WfoError, WfoLoading } from '@/components';
 import { PATH_WORKFLOWS } from '@/components';
 import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
 import { getStyles } from '@/components/WfoWorkflowSteps/styles';
-import { GET_PROCESS_STEPS_GRAPHQL_QUERY } from '@/graphqlQueries';
-import { useOrchestratorTheme, useQueryWithGraphql } from '@/hooks';
+import { useOrchestratorTheme } from '@/hooks';
+import { useGetTimeLineItemsQuery } from '@/rtk';
 import {
     EngineStatus,
     ProcessDetail,
     ProcessStatus,
-    StartProcessStep,
     StepStatus,
 } from '@/types';
 import { FormNotCompleteResponse } from '@/types/forms';
@@ -97,13 +96,11 @@ export const WfoStartProcessPage = ({
     const { getStepHeaderStyle, stepListContentBoldTextStyle } =
         getStyles(theme);
 
-    const { data, isLoading, isError } = useQueryWithGraphql(
-        GET_PROCESS_STEPS_GRAPHQL_QUERY,
-        {
-            processName,
-        },
-        `processSteps={processName}`,
-    );
+    const {
+        data: timeLineItems = [],
+        isError,
+        isLoading,
+    } = useGetTimeLineItemsQuery(processName);
 
     if (isError) {
         if (!hasError) {
@@ -111,16 +108,6 @@ export const WfoStartProcessPage = ({
         }
     }
 
-    const timeLineItems: TimelineItem[] =
-        data?.workflows?.page[0]?.steps && !isLoading
-            ? data.workflows.page[0].steps.map(({ name }: StartProcessStep) => {
-                  return {
-                      processStepStatus: StepStatus.PENDING,
-                      stepDetail: name,
-                  };
-              })
-            : [];
-
     const submit = useCallback(
         (processInput: object[]) => {
             const startProcessPromise = apiClient
@@ -212,6 +199,7 @@ export const WfoStartProcessPage = ({
             buttonsAreDisabled={true}
             processDetail={processDetail}
             timelineItems={timeLineItems}
+            isLoading={isLoading}
         >
             <EuiPanel css={{ marginTop: theme.base * 3 }}>
                 <EuiFlexGroup css={getStepHeaderStyle(false)}>

package/src/rtk/endpoints/index.ts

@@ -3,3 +3,4 @@ export * from './processList';
 export * from './settings';
 export * from './streamMessages';
 export * from './inSync';
+export * from './processSteps';

package/src/rtk/endpoints/processSteps.ts

@@ -0,0 +1,50 @@
+import { TimelineItem } from '@/components';
+import {
+    Process,
+    ProcessStepsResult,
+    StartProcessStep,
+    StepStatus,
+} from '@/types';
+
+import { orchestratorApi } from '../api';
+
+export const processStepsQuery = `
+    query ProcessSteps($processName: String!) {
+        workflows(filterBy: { field: "name", value: $processName }) {
+            page {
+                steps {
+                    name
+                    assignee
+                }
+            }
+        }
+    }
+`;
+
+const processStepApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getTimeLineItems: build.query<TimelineItem[], Process['workflowName']>({
+            query: (processName) => ({
+                document: processStepsQuery,
+                variables: { processName },
+            }),
+            transformResponse: (
+                response: ProcessStepsResult,
+            ): TimelineItem[] => {
+                const timeLineItems: TimelineItem[] =
+                    response.workflows.page[0].steps.map(
+                        ({ name }: StartProcessStep) => {
+                            return {
+                                processStepStatus: StepStatus.PENDING,
+                                stepDetail: name,
+                            };
+                        },
+                    );
+
+                return timeLineItems;
+            },
+        }),
+    }),
+});
+
+export const { useGetTimeLineItemsQuery } = processStepApi;

package/src/graphqlQueries/processStepsQuery.ts

@@ -1,22 +0,0 @@
-import { parse } from 'graphql';
-import { gql } from 'graphql-request';
-
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-
-import { ProcessStepsResult } from '@/types';
-
-export const GET_PROCESS_STEPS_GRAPHQL_QUERY: TypedDocumentNode<
-    ProcessStepsResult,
-    { processName: string }
-> = parse(gql`
-    query ProcessSteps($processName: String!) {
-        workflows(filterBy: { field: "name", value: $processName }) {
-            page {
-                steps {
-                    name
-                    assignee
-                }
-            }
-        }
-    }
-`);