@orchestrator-ui/orchestrator-ui-components 0.12.0 → 0.13.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@0.12.0 build
+> @orchestrator-ui/orchestrator-ui-components@0.13.0 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.15 MB
-ESM ⚡️ Build success in 767ms
-DTS ⚡️ Build success in 11712ms
-DTS dist/index.d.ts 120.96 KB
+ESM ⚡️ Build success in 1132ms
+DTS ⚡️ Build success in 12299ms
+DTS dist/index.d.ts 120.91 KB

package/.turbo/turbo-lint.log

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

package/.turbo/turbo-test.log

@@ -1,33 +1,34 @@
 
-> @orchestrator-ui/orchestrator-ui-components@0.12.0 test
+> @orchestrator-ui/orchestrator-ui-components@0.13.0 test
 > jest
 
 PASS Orchestrator UI Components Tests src/pages/processes/timelineUtils.spec.ts
-PASS Orchestrator UI Components Tests src/utils/date.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoForms/formFields/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/components/WfoSubscription/utils/utils.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/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTree/treeUtils.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.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/components/WfoTable/utils/tableConfigPersistence.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/utils/getToastMessage.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/utils/columns.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/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/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: 23 passed, 23 total
-Tests:       141 passed, 141 total
+Test Suites: 24 passed, 24 total
+Tests:       144 passed, 144 total
 Snapshots:   0 total
-Time:        4.392 s
+Time:        4.561 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 0.13.0
+
+### Minor Changes
+
+- 89835a4: 702 - Moves processDetail to rtkquery
+
+### Patch Changes
+
+- e56c142: 760 remove duplicate product tags on metadata workflow page
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1938,10 +1938,6 @@ declare const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<Subscript
     subscriptionId: string;
 }>;
 
-declare const GET_PROCESS_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<ProcessesDetailResult, {
-    processId: string;
-}>;
-
 declare const GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY: graphql.DocumentNode;
 declare function getSubscriptionDropdownOptionsGraphQlQuery<QueryVariablesType = SubscriptionDropdownOption>(): TypedDocumentNode<SubscriptionDropdownOptionsResult, GraphqlQueryVariables<QueryVariablesType>>;
 
@@ -3084,4 +3080,6 @@ declare const getQueryVariablesForExport: <T extends object>(queryVariables: Gra
     query?: string | undefined;
 };
 
-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 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 Field, type FieldProps$1 as FieldProps, type FieldValue, type FilterQuery, type FixedInputDefinition, type Form, type FormNotCompleteResponse, GET_PROCESS_DETAIL_GRAPHQL_QUERY, 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, 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, flattenArrayProps, formatDate, formatDateCetWithUtc, getApiClient, getCurrentBrowserLocale, getDataSortHandler, getDate, getFieldFromProductBlockInstanceValues, getFirstUuidPart, getInitialColumnOrder, 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, orchestratorApi, parseDate, parseDateOrTimeRelativeToToday, parseDateRelativeToToday, parseDateToLocaleDateString, parseDateToLocaleDateTimeString, parseDateToLocaleTimeString, parseIsoString, 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, useShowToastMessage, useStoredTableConfig, useStreamMessagesQuery, useSubscriptionActions, useWfoSession, useWithOrchestratorTheme, utcTimestampToLocalMoment };
+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 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 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, 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, flattenArrayProps, formatDate, formatDateCetWithUtc, getApiClient, getCurrentBrowserLocale, getDataSortHandler, getDate, getFieldFromProductBlockInstanceValues, getFirstUuidPart, getInitialColumnOrder, 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, 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, useShowToastMessage, useStoredTableConfig, useStreamMessagesQuery, useSubscriptionActions, useWfoSession, useWithOrchestratorTheme, utcTimestampToLocalMoment };

package/dist/index.js

@@ -40512,11 +40512,11 @@ var processApi = orchestratorApi.injectEndpoints({
     getProcessList: build.query({
       query: (variables) => ({ document: processListQuery, variables }),
       transformResponse: (response) => {
-        var _a, _b;
-        const processes = ((_a = response == null ? void 0 : response.processes) == null ? void 0 : _a.page) || [];
+        var _a;
+        const processes = response.processes.page || [];
         return {
           processes,
-          pageInfo: ((_b = response.processes) == null ? void 0 : _b.pageInfo) || {}
+          pageInfo: ((_a = response.processes) == null ? void 0 : _a.pageInfo) || {}
         };
       }
     })
@@ -43317,6 +43317,11 @@ var getQueryVariablesForExport = (queryVariables) => __spreadProps(__spreadValue
   after: 0
 });
 
+// src/utils/onlyUnique.ts
+var onlyUnique = (value, index, array) => {
+  return array.indexOf(value) === index;
+};
+
 // src/components/WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx
 import { Fragment as Fragment2, jsx as jsx49, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var WfoBreadcrumbs = () => {
@@ -48114,48 +48119,9 @@ var GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY = parse(gql6`
     }
 `);
 
-// src/graphqlQueries/processDetailQuery.ts
-import { gql as gql7 } from "graphql-request";
-var GET_PROCESS_DETAIL_GRAPHQL_QUERY = parse(gql7`
-    query ProcessDetail($processId: String!) {
-        processes(filterBy: { value: $processId, field: "processId" }) {
-            page {
-                processId
-                lastStatus
-                createdBy
-                startedAt
-                lastModifiedAt
-                lastStep
-                workflowName
-                isTask
-                form
-                steps {
-                    name
-                    status
-                    stepId
-                    executed
-                    stateDelta
-                }
-                customer {
-                    fullname
-                }
-                subscriptions {
-                    page {
-                        product {
-                            name
-                        }
-                        description
-                        subscriptionId
-                    }
-                }
-            }
-        }
-    }
-`);
-
 // src/graphqlQueries/subscriptionsDropdownOptionsQuery.ts
-import { gql as gql8 } from "graphql-request";
-var GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY = parse(gql8`
+import { gql as gql7 } from "graphql-request";
+var GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY = parse(gql7`
     query SubscriptionDropdownOptions($filterBy: [GraphqlFilter!]) {
         subscriptions(filterBy: $filterBy, first: 1000000, after: 0) {
             page {
@@ -48187,8 +48153,8 @@ function getSubscriptionDropdownOptionsGraphQlQuery() {
 }
 
 // src/graphqlQueries/processStepsQuery.ts
-import { gql as gql9 } from "graphql-request";
-var GET_PROCESS_STEPS_GRAPHQL_QUERY = parse(gql9`
+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 {
@@ -48202,8 +48168,8 @@ var GET_PROCESS_STEPS_GRAPHQL_QUERY = parse(gql9`
 `);
 
 // src/graphqlQueries/processListQuery.ts
-import { gql as gql10 } from "graphql-request";
-var GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql10`
+import { gql as gql9 } from "graphql-request";
+var GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql9`
     query ProcessListSummary(
         $first: Int!
         $after: Int!
@@ -48231,7 +48197,7 @@ var GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql10`
         }
     }
 `);
-var GET_PROCESS_LIST_GRAPHQL_QUERY = parse(gql10`
+var GET_PROCESS_LIST_GRAPHQL_QUERY = parse(gql9`
     query ProcessList(
         $first: Int!
         $after: Int!
@@ -48333,8 +48299,8 @@ import Link2 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 gql11 } from "graphql-request";
-var GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY = parse(gql11`
+import { gql as gql10 } from "graphql-request";
+var GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY = parse(gql10`
     query RelatedSubscriptions(
         $subscriptionId: String!
         $first: Int!
@@ -54980,8 +54946,8 @@ import { useTranslations as useTranslations44 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup5 } from "@elastic/eui";
 
 // src/graphqlQueries/workflows/workflowsQuery.ts
-import { gql as gql12 } from "graphql-request";
-var GET_WORKFLOWS_GRAPHQL_QUERY = parse(gql12`
+import { gql as gql11 } from "graphql-request";
+var GET_WORKFLOWS_GRAPHQL_QUERY = parse(gql11`
     query MetadataWorkflows(
         $first: Int!
         $after: Int!
@@ -55093,7 +55059,7 @@ var WfoWorkflowsPage = () => {
     productTags: {
       field: "productTags",
       name: t("productTags"),
-      render: (productTags) => /* @__PURE__ */ jsx148(Fragment32, { children: productTags == null ? void 0 : productTags.map((productTag, index) => /* @__PURE__ */ jsx148(
+      render: (productTags) => /* @__PURE__ */ jsx148(Fragment32, { children: productTags == null ? void 0 : productTags.filter(onlyUnique).map((productTag, index) => /* @__PURE__ */ jsx148(
         WfoProductBlockBadge,
         {
           badgeType: "product_tag" /* PRODUCT_TAG */,
@@ -55101,7 +55067,7 @@ var WfoWorkflowsPage = () => {
         },
         index
       )) }),
-      renderDetails: (productTags) => /* @__PURE__ */ jsx148(EuiBadgeGroup5, { gutterSize: "s", children: productTags == null ? void 0 : productTags.map((productTag, index) => /* @__PURE__ */ jsx148(
+      renderDetails: (productTags) => /* @__PURE__ */ jsx148(EuiBadgeGroup5, { gutterSize: "s", children: productTags == null ? void 0 : productTags.filter(onlyUnique).map((productTag, index) => /* @__PURE__ */ jsx148(
         WfoProductBlockBadge,
         {
           badgeType: "product_tag" /* PRODUCT_TAG */,
@@ -55234,6 +55200,59 @@ var WfoProcessListSubscriptionsCell = ({
 // src/pages/processes/WfoProcessDetailPage.tsx
 import { useEffect as useEffect22, useRef as useRef7, useState as useState36 } from "react";
 
+// src/rtk/endpoints/processDetail.ts
+var processDetailQuery = `query ProcessDetail($processId: String!) {
+        processes(filterBy: { value: $processId, field: "processId" }) {
+            page {
+                processId
+                lastStatus
+                createdBy
+                startedAt
+                lastModifiedAt
+                lastStep
+                workflowName
+                isTask
+                form
+                steps {
+                    name
+                    status
+                    stepId
+                    executed
+                    stateDelta
+                }
+                customer {
+                    fullname
+                }
+                subscriptions {
+                    page {
+                        product {
+                            name
+                        }
+                        description
+                        subscriptionId
+                    }
+                }
+            }
+        }
+    }`;
+var processDetailApi = orchestratorApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getProcessDetail: builder.query({
+      query: (variables) => ({
+        document: processDetailQuery,
+        variables
+      }),
+      transformResponse: (response) => {
+        const processes = response.processes.page || [];
+        return {
+          processes
+        };
+      }
+    })
+  })
+});
+var { useGetProcessDetailQuery } = processDetailApi;
+
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
 import React43 from "react";
 import { useTranslations as useTranslations45 } from "next-intl";
@@ -56431,13 +56450,9 @@ var WfoProcessDetailPage = ({
   const stepListRef = useRef7(null);
   const [fetchInterval, setFetchInterval] = useState36();
   const [process2, setProcess] = useState36();
-  const { data, isLoading, isError: isError3 } = useQueryWithGraphql(
-    GET_PROCESS_DETAIL_GRAPHQL_QUERY,
-    {
-      processId
-    },
-    "processDetail",
-    { refetchInterval: fetchInterval, refetchOnWindowFocus: false }
+  const { data, isLoading, isError: isError3 } = useGetProcessDetailQuery(
+    { processId },
+    { pollingInterval: fetchInterval }
   );
   if (isError3) {
     if (fetchInterval) {
@@ -56445,7 +56460,7 @@ var WfoProcessDetailPage = ({
     }
   }
   useEffect22(() => {
-    const process3 = data == null ? void 0 : data.processes.page[0];
+    const process3 = data == null ? void 0 : data.processes[0];
     const lastStatus = process3 == null ? void 0 : process3.lastStatus.toLocaleLowerCase();
     const isInProgress = !(lastStatus && ProcessDoneStatuses.includes(lastStatus));
     setFetchInterval(
@@ -56453,7 +56468,7 @@ var WfoProcessDetailPage = ({
     );
   }, [data, processDetailRefetchInterval]);
   useEffect22(() => {
-    const fetchedProcessDetails = data == null ? void 0 : data.processes.page[0];
+    const fetchedProcessDetails = data == null ? void 0 : data.processes[0];
     if (!process2) {
       setProcess(fetchedProcessDetails);
       return;
@@ -59281,7 +59296,6 @@ export {
   Environment,
   ErrorField,
   ErrorsField,
-  GET_PROCESS_DETAIL_GRAPHQL_QUERY,
   GET_PROCESS_LIST_GRAPHQL_QUERY,
   GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY,
   GET_PROCESS_STEPS_GRAPHQL_QUERY,
@@ -59522,6 +59536,7 @@ export {
   localMomentToUtcTimestamp,
   mapColumnSortToEuiDataGridSorting,
   mapSortableAndFilterableValuesToTableColumnConfig,
+  onlyUnique,
   orchestratorApi,
   parseDate,
   parseDateOrTimeRelativeToToday,

package/package.json

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

package/src/graphqlQueries/index.ts

@@ -3,7 +3,6 @@ export * from './productBlocksQuery';
 export * from './productsQuery';
 export * from './resourceTypesQuery';
 export * from './subscriptionDetailQuery';
-export * from './processDetailQuery';
 export * from './subscriptionsDropdownOptionsQuery';
 export * from './processStepsQuery';
 export * from './processListQuery';

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -5,6 +5,21 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 import type { Pagination } from '@elastic/eui/src/components';
 
+import {
+    useDataDisplayParams,
+    useQueryWithGraphql,
+    useQueryWithGraphqlLazy,
+    useShowToastMessage,
+    useStoredTableConfig,
+} from '@/hooks';
+import type { GraphqlQueryVariables, WorkflowDefinition } from '@/types';
+import { BadgeType, SortOrder } from '@/types';
+import {
+    getQueryVariablesForExport,
+    onlyUnique,
+    parseDateToLocaleDateTimeString,
+    parseIsoString,
+} from '@/utils';
 import {
     csvDownloadHandler,
     getCsvFileNameWithDate,
@@ -28,20 +43,6 @@ import { WfoWorkflowTargetBadge } from '../../components/WfoBadges/WfoWorkflowTa
 import { WfoDateTime } from '../../components/WfoDateTime/WfoDateTime';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { GET_WORKFLOWS_GRAPHQL_QUERY } from '../../graphqlQueries/workflows/workflowsQuery';
-import {
-    useDataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
-    useShowToastMessage,
-    useStoredTableConfig,
-} from '../../hooks';
-import type { GraphqlQueryVariables, WorkflowDefinition } from '../../types';
-import { BadgeType, SortOrder } from '../../types';
-import {
-    getQueryVariablesForExport,
-    parseDateToLocaleDateTimeString,
-    parseIsoString,
-} from '../../utils';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 import {
     graphQlWorkflowListMapper,
@@ -115,26 +116,30 @@ export const WfoWorkflowsPage = () => {
             name: t('productTags'),
             render: (productTags) => (
                 <>
-                    {productTags?.map((productTag, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            badgeType={BadgeType.PRODUCT_TAG}
-                        >
-                            {productTag}
-                        </WfoProductBlockBadge>
-                    ))}
+                    {productTags
+                        ?.filter(onlyUnique)
+                        .map((productTag, index) => (
+                            <WfoProductBlockBadge
+                                key={index}
+                                badgeType={BadgeType.PRODUCT_TAG}
+                            >
+                                {productTag}
+                            </WfoProductBlockBadge>
+                        ))}
                 </>
             ),
             renderDetails: (productTags) => (
                 <EuiBadgeGroup gutterSize="s">
-                    {productTags?.map((productTag, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            badgeType={BadgeType.PRODUCT_TAG}
-                        >
-                            {productTag}
-                        </WfoProductBlockBadge>
-                    ))}
+                    {productTags
+                        ?.filter(onlyUnique)
+                        .map((productTag, index) => (
+                            <WfoProductBlockBadge
+                                key={index}
+                                badgeType={BadgeType.PRODUCT_TAG}
+                            >
+                                {productTag}
+                            </WfoProductBlockBadge>
+                        ))}
                 </EuiBadgeGroup>
             ),
         },

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { TimelineItem, WfoError, WfoLoading } from '@/components';
+import { useGetProcessDetailQuery } from '@/rtk/endpoints/processDetail';
 
 import {
     WfoStepListRef,
     WfoWorkflowStepList,
 } from '../../components/WfoWorkflowSteps';
-import { GET_PROCESS_DETAIL_GRAPHQL_QUERY } from '../../graphqlQueries';
-import { useQueryWithGraphql } from '../../hooks';
 import {
     ProcessDetail,
     ProcessDoneStatuses,
@@ -39,13 +38,10 @@ export const WfoProcessDetailPage = ({
     const stepListRef = useRef<WfoStepListRef>(null);
     const [fetchInterval, setFetchInterval] = useState<number | undefined>();
     const [process, setProcess] = useState<ProcessDetail | undefined>();
-    const { data, isLoading, isError } = useQueryWithGraphql(
-        GET_PROCESS_DETAIL_GRAPHQL_QUERY,
-        {
-            processId,
-        },
-        'processDetail',
-        { refetchInterval: fetchInterval, refetchOnWindowFocus: false },
+
+    const { data, isLoading, isError } = useGetProcessDetailQuery(
+        { processId },
+        { pollingInterval: fetchInterval },
     );
 
     if (isError) {
@@ -55,7 +51,7 @@ export const WfoProcessDetailPage = ({
     }
 
     useEffect(() => {
-        const process = data?.processes.page[0];
+        const process = data?.processes[0];
         // We need to cast here because the backend might return the string in upperCase and
         // toLowerCase() will converts the value type to string
         const lastStatus =
@@ -71,7 +67,7 @@ export const WfoProcessDetailPage = ({
     }, [data, processDetailRefetchInterval]);
 
     useEffect(() => {
-        const fetchedProcessDetails = data?.processes.page[0];
+        const fetchedProcessDetails = data?.processes[0];
 
         if (!process) {
             setProcess(fetchedProcessDetails);

package/src/rtk/endpoints/processDetail.ts

@@ -0,0 +1,66 @@
+import { orchestratorApi } from '@/rtk';
+import { ProcessDetail, ProcessesDetailResult } from '@/types';
+
+export const processDetailQuery = `query ProcessDetail($processId: String!) {
+        processes(filterBy: { value: $processId, field: "processId" }) {
+            page {
+                processId
+                lastStatus
+                createdBy
+                startedAt
+                lastModifiedAt
+                lastStep
+                workflowName
+                isTask
+                form
+                steps {
+                    name
+                    status
+                    stepId
+                    executed
+                    stateDelta
+                }
+                customer {
+                    fullname
+                }
+                subscriptions {
+                    page {
+                        product {
+                            name
+                        }
+                        description
+                        subscriptionId
+                    }
+                }
+            }
+        }
+    }`;
+
+export type ProcessDetailResponse = {
+    processes: ProcessDetail[];
+};
+
+const processDetailApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getProcessDetail: builder.query<
+            ProcessDetailResponse,
+            { processId: string }
+        >({
+            query: (variables) => ({
+                document: processDetailQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: ProcessesDetailResult,
+            ): ProcessDetailResponse => {
+                const processes = response.processes.page || [];
+
+                return {
+                    processes,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetProcessDetailQuery } = processDetailApi;

package/src/rtk/endpoints/processList.ts

@@ -75,7 +75,7 @@ const processApi = orchestratorApi.injectEndpoints({
             transformResponse: (
                 response: ProcessListResult,
             ): ProcessListResponse => {
-                const processes = response?.processes?.page || [];
+                const processes = response.processes.page || [];
 
                 return {
                     processes,

package/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './uuid';
 export * from './strings';
 export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
+export * from './onlyUnique';

package/src/utils/onlyUnique.spec.ts

@@ -0,0 +1,19 @@
+import { onlyUnique } from './onlyUnique';
+
+describe('onlyUnique()', () => {
+    it('returns array as array with only unique values', () => {
+        const test1 = ['SP', 'SP', 'FW', 'SP', 'FW', 'LP'];
+        const result = test1?.filter(onlyUnique);
+        expect(result).toEqual(['SP', 'FW', 'LP']);
+    });
+    it('returns array as array with only single value', () => {
+        const test2 = ['SP', 'SP', 'SP'];
+        const result = test2?.filter(onlyUnique);
+        expect(result).toEqual(['SP']);
+    });
+    it('returns array as empty array', () => {
+        const test3 = [''];
+        const result = test3?.filter(onlyUnique);
+        expect(result).toEqual(['']);
+    });
+});

package/src/utils/onlyUnique.ts

@@ -0,0 +1,3 @@
+export const onlyUnique = (value: string, index: number, array: string[]) => {
+    return array.indexOf(value) === index;
+};

package/src/graphqlQueries/processDetailQuery.ts

@@ -1,46 +0,0 @@
-import { parse } from 'graphql';
-import { gql } from 'graphql-request';
-
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-
-import { ProcessesDetailResult } from '../types';
-
-export const GET_PROCESS_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
-    ProcessesDetailResult,
-    { processId: string }
-> = parse(gql`
-    query ProcessDetail($processId: String!) {
-        processes(filterBy: { value: $processId, field: "processId" }) {
-            page {
-                processId
-                lastStatus
-                createdBy
-                startedAt
-                lastModifiedAt
-                lastStep
-                workflowName
-                isTask
-                form
-                steps {
-                    name
-                    status
-                    stepId
-                    executed
-                    stateDelta
-                }
-                customer {
-                    fullname
-                }
-                subscriptions {
-                    page {
-                        product {
-                            name
-                        }
-                        description
-                        subscriptionId
-                    }
-                }
-            }
-        }
-    }
-`);