@orchestrator-ui/orchestrator-ui-components 2.8.3 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "2.8.3",
+    "version": "2.9.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -36,6 +36,7 @@
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
         "@rtk-query/graphql-request-base-query": "^2.3.1",
+        "eslint": "^8.57.0",
         "graphql-request": "^6.1.0",
         "invariant": "^2.2.4",
         "lodash": "^4.17.21",
@@ -47,6 +48,7 @@
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
         "react-diff-view": "^3.2.0",
+        "react-redux": "^9.1.2",
         "react-select": "^5.8.0",
         "scroll-into-view": "^1.16.2",
         "unidiff": "^1.0.4",
@@ -65,8 +67,8 @@
         "@storybook/addon-onboarding": "^8.1.10",
         "@storybook/blocks": "^8.1.10",
         "@storybook/nextjs": "^8.1.10",
-        "@storybook/react": "^8.1.10",
-        "@testing-library/jest-dom": "^6.1.5",
+        "@storybook/react": "^8.3.6",
+        "@testing-library/jest-dom": "^6.6.2",
         "@testing-library/react": "^16.0.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/invariant": "^2.2.33",
@@ -85,8 +87,7 @@
     "peerDependencies": {
         "next": "^14.0.4",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-redux": "^8.1.3"
+        "react-dom": "^18.3.1"
     },
     "type": "module",
     "main": "./dist/index.js",

package/src/components/WfoDiff/WfoDiff.tsx

@@ -69,7 +69,7 @@ const WfoDiff: FC<WfoDiffProps> = ({ oldText, newText, syntax }) => {
 
         try {
             return tokenize(hunks, options);
-        } catch (ex) {
+        } catch {
             return undefined;
         }
     }, [hunks, syntax]);

package/src/components/WfoForms/formFields/AcceptField.tsx

@@ -114,8 +114,8 @@ function Accept({
                 state.skip
                     ? 'SKIPPED'
                     : state.allChecked
-                      ? 'ACCEPTED'
-                      : 'INCOMPLETE',
+                    ? 'ACCEPTED'
+                    : 'INCOMPLETE',
             );
 
             return { ...state };

package/src/components/WfoForms/formFields/SubscriptionField.tsx

@@ -170,7 +170,9 @@ function SubscriptionFieldDefinition({
                     (item) => item.field === 'title',
                 );
             if (subscriptionTitle) {
-                return `${subscriptionSubstring} - ${description.trim()} - ${subscriptionTitle.value}`;
+                return `${subscriptionSubstring} - ${description.trim()} - ${
+                    subscriptionTitle.value
+                }`;
             }
             return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description.trim()} ${
                 subscription.customer?.fullname
@@ -326,7 +328,9 @@ function SubscriptionFieldDefinition({
                                     iconSize="l"
                                     disabled={isDisabled}
                                     onClick={() => {
-                                        !isDisabled ? refetch() : null;
+                                        if (isDisabled) {
+                                            refetch();
+                                        }
                                     }}
                                 />
                             </EuiFlexGroup>

package/src/components/WfoForms/formFields/deprecated/ImsNodeIdField.tsx

@@ -80,8 +80,8 @@ function ImsNodeId({
         isLoading && locationCode
             ? t('widgets.node_select.nodes_loading')
             : nodes.length
-              ? t('widgets.node_select.select_node')
-              : t('forms.widgets.node_select.no_nodes_placeholder');
+            ? t('widgets.node_select.select_node')
+            : t('forms.widgets.node_select.no_nodes_placeholder');
 
     const imsNodeIdLabelLookup =
         nodes?.reduce<{ [index: string]: string }>(function (mapping, node) {

package/src/components/WfoForms/formFields/deprecated/ImsPortIdField.tsx

@@ -140,8 +140,8 @@ function ImsPortId({
     const portPlaceholder = loading
         ? t('widgets.nodePort.loadingPorts')
         : nodeId
-          ? t('widgets.nodePort.selectPort')
-          : t('widgets.nodePort.selectNodeFirst');
+        ? t('widgets.nodePort.selectPort')
+        : t('widgets.nodePort.selectNodeFirst');
 
     const nodeOptions: Option[] =
         nodeSubscriptionOptions?.map(nodeToOptionCorelink) || [];

package/src/components/WfoForms/formFields/deprecated/VlanField.tsx

@@ -212,20 +212,20 @@ function Vlan({
     const placeholder = isLoading
         ? t('widgets.vlan.loadingIms')
         : subscriptionId
-          ? t('widgets.vlan.placeholder')
-          : t('widgets.vlan.placeholderNoServicePort');
+        ? t('widgets.vlan.placeholder')
+        : t('widgets.vlan.placeholderNoServicePort');
 
     const errorMessageExtra = missingInIms
         ? t('widgets.vlan.missingInIms')
         : !validFormat
-          ? t('widgets.vlan.invalidVlan')
-          : vlansInUse.length
-            ? vlansInUse.length >= 1 && vlansInUse[0] === 0
-                ? t('widgets.vlan.untaggedPortInUse')
-                : t('widgets.vlan.vlansInUseError', {
-                      vlans: vlanRangeFromNumbers(vlansInUse),
-                  })
-            : undefined;
+        ? t('widgets.vlan.invalidVlan')
+        : vlansInUse.length
+        ? vlansInUse.length >= 1 && vlansInUse[0] === 0
+            ? t('widgets.vlan.untaggedPortInUse')
+            : t('widgets.vlan.vlansInUseError', {
+                  vlans: vlanRangeFromNumbers(vlansInUse),
+              })
+        : undefined;
 
     let message = '';
     if (!isLoading && subscriptionId) {

package/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -53,7 +53,7 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
         <EuiHeader css={getHeaderStyle(navigationHeight)}>
             <EuiHeaderSection>
                 <EuiToolTip
-                    content={'UI version' + ORCHESTRATOR_UI_LIBRARY_VERSION}
+                    content={'UI version ' + ORCHESTRATOR_UI_LIBRARY_VERSION}
                 >
                     <EuiHeaderSectionItem css={{ paddingTop: theme.size.xs }}>
                         <EuiHeaderLogo iconType={() => <WfoAppLogo />} />

package/src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx

@@ -43,10 +43,9 @@ export const WfoCustomerDescriptionsField: FC<
         <div>
             {customerDescriptionsWithName.map(
                 ({ shortcode, fullname, description, customerId }) => (
-                    <div
-                        key={customerId}
-                        title={fullname ?? customerId}
-                    >{`${shortcode ?? customerId}: ${description}`}</div>
+                    <div key={customerId} title={fullname ?? customerId}>{`${
+                        shortcode ?? customerId
+                    }: ${description}`}</div>
                 ),
             )}
         </div>

package/src/components/WfoSubscription/WfoInSyncField.tsx

@@ -62,7 +62,9 @@ export const WfoInSyncField = ({
     };
 
     const getProcessLink = () => {
-        const processUrl = `${lastUncompletedProcess?.isTask ? PATH_TASKS : PATH_WORKFLOWS}/${lastUncompletedProcess?.processId}`;
+        const processUrl = `${
+            lastUncompletedProcess?.isTask ? PATH_TASKS : PATH_WORKFLOWS
+        }/${lastUncompletedProcess?.processId}`;
 
         const confirmSetInSync = () => {
             showConfirmDialog({

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import { EuiButtonIcon, EuiText } from '@elastic/eui';
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+
+import { PATH_SUBSCRIPTIONS } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { SubscriptionAction } from '@/types';
+
+import { getSubscriptionActionStyles } from './styles';
+
+export type WfoSubscriptionActionExpandableMenuItemProps = {
+    subscriptionAction: SubscriptionAction;
+    onClickLockedRelation: (relation: string) => void;
+    children: ReactJSXElement;
+};
+
+export const WfoSubscriptionActionExpandableMenuItem: FC<
+    WfoSubscriptionActionExpandableMenuItemProps
+> = ({ subscriptionAction, onClickLockedRelation, children }) => {
+    const t = useTranslations('subscriptions.detail.actions');
+
+    const {
+        clickableStyle,
+        expandableMenuItemStyle,
+        expandButtonStyle,
+        expandedContentStyle,
+        linkStyle,
+    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const { locked_relations: lockedRelations } = subscriptionAction;
+
+    return (
+        <div>
+            <div
+                css={[
+                    expandableMenuItemStyle,
+                    lockedRelations && clickableStyle,
+                ]}
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div>{children}</div>
+                {lockedRelations && (
+                    <EuiButtonIcon
+                        css={expandButtonStyle}
+                        iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
+                        onClick={() => setIsExpanded(!isExpanded)}
+                    />
+                )}
+            </div>
+            {lockedRelations && isExpanded && (
+                <div css={expandedContentStyle}>
+                    <EuiText size="xs">{t('lockedBySubscriptions')}</EuiText>
+                    {lockedRelations.map((relation) => (
+                        <EuiText key={relation} size="xs">
+                            <Link
+                                css={linkStyle}
+                                href={`${PATH_SUBSCRIPTIONS}/${relation}`}
+                                onClick={() => onClickLockedRelation(relation)}
+                            >
+                                {relation}
+                            </Link>
+                        </EuiText>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/WfoSubscription/{WfoSubscriptionActions.tsx → WfoSubscriptionActions/WfoSubscriptionActions.tsx}

@@ -17,13 +17,20 @@ import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 
 import { PATH_START_NEW_TASK, PATH_START_NEW_WORKFLOW } from '@/components';
 import { PolicyResource } from '@/configuration/policy-resources';
-import { useCheckEngineStatus, useOrchestratorTheme, usePolicy } from '@/hooks';
+import {
+    useCheckEngineStatus,
+    useOrchestratorTheme,
+    usePolicy,
+    useWithOrchestratorTheme,
+} from '@/hooks';
 import { WfoXCircleFill } from '@/icons';
 import { useGetSubscriptionActionsQuery } from '@/rtk/endpoints/subscriptionActions';
 import { SubscriptionAction, WorkflowTarget } from '@/types';
 
-import { WfoTargetTypeIcon } from './WfoTargetTypeIcon';
-import { flattenArrayProps } from './utils';
+import { WfoTargetTypeIcon } from '../WfoTargetTypeIcon';
+import { flattenArrayProps } from '../utils';
+import { WfoSubscriptionActionExpandableMenuItem } from './WfoSubscriptionActionExpandableMenuItem';
+import { getSubscriptionActionStyles } from './styles';
 
 type MenuItemProps = {
     key: string;
@@ -52,6 +59,13 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
     isLoading,
 }) => {
     const { theme } = useOrchestratorTheme();
+    const {
+        linkMenuItemStyle,
+        tooltipMenuItemStyle,
+        disabledIconStyle,
+        iconStyle,
+        secondaryIconStyle,
+    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
 
     const router = useRouter();
     const t = useTranslations('subscriptions.detail.actions');
@@ -89,6 +103,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
 
             const handleLinkClick = async (e: React.MouseEvent) => {
                 e.preventDefault();
+                setPopover(false);
                 if (await isEngineRunningNow()) {
                     router.push(url);
                 }
@@ -96,7 +111,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
 
             return (
                 <Link href={url} onClick={handleLinkClick}>
-                    {actionItem}
+                    <div css={linkMenuItemStyle}>{actionItem}</div>
                 </Link>
             );
         };
@@ -134,9 +149,14 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
             const tooltipContent = t(action.reason, flattenArrayProps(action));
 
             return (
-                <div>
+                <div css={tooltipMenuItemStyle}>
                     <EuiToolTip position="top" content={tooltipContent}>
-                        {actionItem}
+                        <WfoSubscriptionActionExpandableMenuItem
+                            subscriptionAction={action}
+                            onClickLockedRelation={() => setPopover(false)}
+                        >
+                            {actionItem}
+                        </WfoSubscriptionActionExpandableMenuItem>
                     </EuiToolTip>
                 </div>
             );
@@ -144,13 +164,9 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
 
         const getIcon = () => {
             return action.reason ? (
-                <div css={{ display: 'flex', width: theme.base * 2 }}>
+                <div css={disabledIconStyle}>
                     <WfoTargetTypeIcon target={target} disabled={true} />
-                    <div
-                        css={{
-                            transform: 'translate(-11px, -8px);',
-                        }}
-                    >
+                    <div css={secondaryIconStyle}>
                         <WfoXCircleFill
                             width={20}
                             height={20}
@@ -159,7 +175,7 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                     </div>
                 </div>
             ) : (
-                <div css={{ width: theme.base * 2 }}>
+                <div css={iconStyle}>
                     <WfoTargetTypeIcon target={target} />
                 </div>
             );

package/src/components/WfoSubscription/WfoSubscriptionActions/index.ts

@@ -0,0 +1 @@
+export * from './WfoSubscriptionActions';

package/src/components/WfoSubscription/WfoSubscriptionActions/styles.ts

@@ -0,0 +1,75 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+const EXPANDED_CONTENT_LEFT_MARGIN = '52px';
+
+export const getSubscriptionActionStyles = ({ theme }: WfoTheme) => {
+    const clickableStyle = css({
+        '&:hover, & :hover': {
+            cursor: 'pointer',
+        },
+    });
+
+    const expandableMenuItemStyle = css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    });
+
+    const expandButtonStyle = css({
+        marginRight: theme.size.m,
+    });
+
+    const expandedContentStyle = css({
+        marginLeft: EXPANDED_CONTENT_LEFT_MARGIN,
+        paddingBottom: theme.size.m,
+        paddingRight: theme.size.m,
+    });
+
+    const linkStyle = css({
+        display: 'block',
+    });
+
+    const linkMenuItemStyle = css({
+        '&>:hover': {
+            backgroundColor: theme.colors.lightestShade,
+            borderRadius: theme.border.radius.medium,
+        },
+    });
+
+    const tooltipMenuItemStyle = css([
+        linkMenuItemStyle,
+        {
+            '& > *': {
+                display: 'block',
+            },
+        },
+    ]);
+
+    const disabledIconStyle = css({
+        display: 'flex',
+        width: theme.base * 2,
+    });
+
+    const iconStyle = css({
+        width: theme.base * 2,
+    });
+
+    const secondaryIconStyle = css({
+        transform: 'translate(-11px, -8px);',
+    });
+
+    return {
+        clickableStyle,
+        expandableMenuItemStyle,
+        expandButtonStyle,
+        expandedContentStyle,
+        linkStyle,
+        linkMenuItemStyle,
+        tooltipMenuItemStyle,
+        disabledIconStyle,
+        iconStyle,
+        secondaryIconStyle,
+    };
+};

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { isEmpty } from 'lodash';
 import { useTranslations } from 'next-intl';
 
 import {
@@ -61,10 +62,6 @@ export const WfoSubscriptionProductBlock = ({
     );
     const showProductBlockValues = !isOutsideCurrentSubscription || showDetails;
 
-    const isEmpty = (value: unknown) => {
-        return value === null || value === undefined || value === '';
-    };
-
     return (
         <>
             <EuiSpacer size={'m'}></EuiSpacer>

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts

@@ -43,6 +43,9 @@ export const getStyles = (wfoTheme: WfoTheme) => {
         '&:first-child': {
             borderTop: `solid 1px ${theme.colors.lightShade}`,
         },
+        '&:last-child': {
+            borderBottom: 'none',
+        },
     });
 
     const leftColumnStyle = css({

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

@@ -20,9 +20,9 @@ describe('tableUtils', () => {
     });
 
     describe('determineNewSortOrder', () => {
-        const testData = {
-            column1: {},
-            column2: {},
+        type TestData = {
+            column1: object;
+            column2: object;
         };
 
         it('returns SortDirection.Asc when sorting on a new column', () => {
@@ -30,7 +30,7 @@ describe('tableUtils', () => {
             const currentSortDirection = SortOrder.ASC;
             const newSortColumnId = 'column2';
 
-            const result = determineNewSortOrder<typeof testData>(
+            const result = determineNewSortOrder<TestData>(
                 currentSortColumnId,
                 currentSortDirection,
                 newSortColumnId,
@@ -44,7 +44,7 @@ describe('tableUtils', () => {
             const currentSortDirection = SortOrder.DESC;
             const newSortColumnId = 'column1';
 
-            const result = determineNewSortOrder<typeof testData>(
+            const result = determineNewSortOrder<TestData>(
                 currentSortColumnId,
                 currentSortDirection,
                 newSortColumnId,
@@ -58,7 +58,7 @@ describe('tableUtils', () => {
             const currentSortDirection = SortOrder.DESC;
             const newSortColumnId = 'column1';
 
-            const result = determineNewSortOrder<typeof testData>(
+            const result = determineNewSortOrder<TestData>(
                 currentSortColumnId,
                 currentSortDirection,
                 newSortColumnId,

package/src/components/confirmationDialog/WfoConfirmationDialog.tsx

@@ -72,7 +72,9 @@ export default function WfoConfirmationDialog({
                         <EuiModalBody>
                             <div>
                                 <section
-                                    className={`dialog-content ${isError ? ' error' : ''}`}
+                                    className={`dialog-content ${
+                                        isError ? ' error' : ''
+                                    }`}
                                 >
                                     <h2>{question}</h2>
                                     {subQuestion && <p>{subQuestion}</p>}

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.8.3';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.9.0';

package/src/messages/en-GB.json

@@ -116,7 +116,7 @@
                 "placeholderNoServicePort": "First select a Service Port...",
                 "invalidVlan": "Invalid VLAN - must be a range of valid [2-4094] VLAN integers, for example '2, 5-6, 1048-1052'",
                 "untaggedPortInUse": "This service port is already in use and cannot be chosen",
-                "taggedOnly": "VLAN is only relevant for SN7 MSP or SN8 SP in tagged mode, not for link_member or untagged ports.",
+                "taggedOnly": "VLAN is only relevant for service ports in tagged mode, not for link_member or untagged ports.",
                 "loadingIms": "Loading VLAN info from IMS"
             },
             "subscription": {
@@ -291,6 +291,7 @@
                 "tasks": "Tasks",
                 "terminate": "Terminate workflow",
                 "actions": "Actions",
+                "lockedBySubscriptions": "This action is locked by the following subscriptions:",
                 "subscription": {
                     "no_modify_deleted_related_objects": "This subscription can not be modified because it contains references to other systems that are deleted.",
                     "no_modify_in_use_by_subscription": "This subscription can not be {action} as it is used in other subscriptions: {unterminated_in_use_by_subscriptions}",

package/src/messages/nl-NL.json

@@ -38,6 +38,7 @@
         "noItemsFound": "Geen items gevonden",
         "search": "Zoeken",
         "errorMessage": "Er is een fout opgetreden",
+        "unknownError": "Onbekende error",
         "export": "Exporteren",
         "unauthorizedPage": "Niet geautoriseerd om deze pagina te bekijken",
         "insyncTrue": "in-sync",
@@ -115,7 +116,7 @@
                 "placeholderNoServicePort": "Selecteer eerst een Service Port...",
                 "invalidVlan": "Invalid VLAN - Voer een range of geldige [2-4094] VLAN integers in, bijvoorbeeld: '2, 5-6, 1048-1052'",
                 "untaggedPortInUse": "Deze service port is al in gebruik en kan niet worden gekozen",
-                "taggedOnly": "VLAN is alleen relevant SN7, MSP of SN8 SP in tagged mode, niet voor link_member of untagged ports.",
+                "taggedOnly": "VLAN is alleen relevant voor service poorten in tagged mode, niet voor link_member of untagged ports.",
                 "loadingIms": "VLAN informatie aan het laden uit IMS..."
             },
             "subscription": {
@@ -223,7 +224,7 @@
         },
         "steps": {
             "taskSteps": "Taak stappen",
-            "steps": "Workflow stappen",
+            "workflowSteps": "Workflow stappen",
             "showDelta": "Toon subscription delta",
             "hideDelta": "Verberg subscription delta",
             "showTraceback": "Toon traceback",
@@ -290,6 +291,7 @@
                 "tasks": "Taken",
                 "terminate": "Terminate workflow",
                 "actions": "Acties",
+                "lockedBySubscriptions": "Deze actie is geblokkeerd door de volgende subscriptions:",
                 "subscription": {
                     "no_modify_deleted_related_objects": "Deze subscription kan niet worden gewijzigd omdat het verwijzingen bevat naar andere systemen die zijn verwijderd.",
                     "no_modify_in_use_by_subscription": "Deze subscription kan niet worden {gewijzigd} omdat het wordt gebruikt in andere subscriptions: {unterminated_in_use_by_subscriptions}",

package/src/pages/processes/WfoProcessDetail.tsx

@@ -158,8 +158,9 @@ export const WfoProcessDetail = ({
                 },
             ),
             onConfirm: () => {
-                processDetail?.processId &&
+                if (processDetail?.processId) {
                     retryProcess({ processId: processDetail.processId });
+                }
             },
         });
 
@@ -172,8 +173,9 @@ export const WfoProcessDetail = ({
                 },
             ),
             onConfirm: () => {
-                processDetail?.processId &&
+                if (processDetail?.processId) {
                     abortProcess({ processId: processDetail.processId });
+                }
                 router.push(processIsTask ? PATH_TASKS : PATH_WORKFLOWS);
             },
         });
@@ -184,8 +186,9 @@ export const WfoProcessDetail = ({
                 workflowName: processDetail?.workflowName,
             }),
             onConfirm: () => {
-                processDetail?.processId &&
+                if (processDetail?.processId) {
                     deleteProcess({ processId: processDetail.processId });
+                }
                 router.push(PATH_TASKS);
             },
         });

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -7,7 +7,10 @@ import {
     WfoStepListRef,
     WfoWorkflowStepList,
 } from '@/components';
-import { useGetProcessDetailQuery } from '@/rtk/endpoints/processDetail';
+import {
+    useGetDescriptionForWorkflowNameQuery,
+    useGetProcessDetailQuery,
+} from '@/rtk';
 import { Step } from '@/types';
 import { getProductNamesFromProcess } from '@/utils';
 
@@ -35,10 +38,23 @@ export const WfoProcessDetailPage = ({
     });
     const processDetail = data?.processes[0];
 
+    const { data: workflowMetadata, isError: isErrorWorkflowDescription } =
+        useGetDescriptionForWorkflowNameQuery(
+            {
+                workflowName: processDetail?.workflowName ?? '',
+            },
+            {
+                skip: processDetail === undefined,
+            },
+        );
+
     const steps = processDetail?.steps ?? [];
 
     const productNames = getProductNamesFromProcess(processDetail);
-    const pageTitle = processDetail?.workflowName || '';
+    const pageTitle =
+        workflowMetadata?.description ||
+        (isErrorWorkflowDescription && processDetail?.workflowName) ||
+        '';
     const isTask = processDetail?.isTask ?? false;
     const groupedSteps: GroupedStep[] = convertStepsToGroupedSteps(steps);
     const timelineItems: TimelineItem[] =