From c6dce918986742c88cdf40860f3cb2d27a0f45da Mon Sep 17 00:00:00 2001 From: alextran1 Date: Tue, 12 May 2026 16:08:45 -0700 Subject: [PATCH 1/5] feat(apollo-react): display sla status and remaining time in stage node --- .../StageNode/StageNode.stories.tsx | 105 ++++++++++++++++++ .../components/StageNode/StageNode.test.tsx | 100 +++++++++++++++++ .../components/StageNode/StageNode.types.ts | 4 + .../components/StageNode/StageNodeHeader.tsx | 36 +++++- 4 files changed, 244 insertions(+), 1 deletion(-) diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx index b238a26d8..bf42586e0 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx @@ -567,6 +567,111 @@ export const ExecutionStatus: Story = { }, }; +export const SLAStates: Story = { + name: 'SLA States', + parameters: { + nodes: [ + { + id: '0', + type: 'stage', + position: { x: 48, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'Stage 1', + isReadOnly: true, + tasks: [], + }, + execution: { + stageStatus: { + slaText: 'SLA: None', + }, + taskStatus: {}, + }, + }, + }, + { + id: '1', + type: 'stage', + position: { x: 400, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'Closing', + isReadOnly: true, + tasks: [ + [{ id: '1', label: 'Prepare closing docs', icon: }], + [{ id: '2', label: 'eSign envelope', icon: }], + [{ id: '3', label: 'Review closing docs', icon: }], + ], + }, + execution: { + stageStatus: { + status: 'InProgress', + label: 'In progress', + slaText: 'SLA: 10 days remaining', + slaStatus: 'ok', + }, + taskStatus: {}, + }, + }, + }, + { + id: '2', + type: 'stage', + position: { x: 752, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'Closing', + isReadOnly: true, + tasks: [ + [{ id: '1', label: 'Prepare closing docs', icon: }], + [{ id: '2', label: 'eSign envelope', icon: }], + [{ id: '3', label: 'Review closing docs', icon: }], + ], + }, + execution: { + stageStatus: { + status: 'InProgress', + label: 'In progress', + slaText: 'SLA: 1 day remaining', + slaStatus: 'warning', + }, + taskStatus: {}, + }, + }, + }, + { + id: '3', + type: 'stage', + position: { x: 1104, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'Closing', + isReadOnly: true, + tasks: [ + [{ id: '1', label: 'Prepare closing docs', icon: }], + [{ id: '2', label: 'eSign envelope', icon: }], + [{ id: '3', label: 'Review closing docs', icon: }], + ], + }, + execution: { + stageStatus: { + status: 'InProgress', + label: 'In progress', + slaText: 'SLA: 1 day overdue', + slaStatus: 'overdue', + }, + taskStatus: {}, + }, + }, + }, + ], + }, +}; + export const InteractiveTaskManagement: Story = { name: 'Interactive Task Management', parameters: { diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx index 230c37433..a5f92e32f 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx @@ -848,6 +848,106 @@ describe('StageNode - ReadOnly Mode', () => { }); }); +describe('StageNode - SLA Indicator', () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + const getSlaIndicator = () => screen.getByTestId('stage-sla-stage-1'); + + it('does not render the SLA indicator when slaText is undefined', () => { + renderStageNode({ + execution: { stageStatus: {}, taskStatus: {} }, + }); + + expect(screen.queryByTestId('stage-sla-stage-1')).not.toBeInTheDocument(); + }); + + it('does not render the SLA indicator when only duration is provided', () => { + renderStageNode({ + execution: { + stageStatus: { duration: 'Duration: 1h 30m' }, + taskStatus: {}, + }, + }); + + expect(screen.queryByTestId('stage-sla-stage-1')).not.toBeInTheDocument(); + }); + + it('renders slaText without an icon when slaStatus is omitted', () => { + renderStageNode({ + execution: { + stageStatus: { slaText: 'SLA: 10 days remaining' }, + taskStatus: {}, + }, + }); + + const indicator = getSlaIndicator(); + expect(indicator).toHaveTextContent('SLA: 10 days remaining'); + expect(indicator).toHaveAttribute('data-sla-status', 'ok'); + expect(indicator.querySelector('svg')).toBeNull(); + }); + + it('renders slaText without an icon when slaStatus is "ok"', () => { + renderStageNode({ + execution: { + stageStatus: { slaText: 'SLA: 10 days remaining', slaStatus: 'ok' }, + taskStatus: {}, + }, + }); + + const indicator = getSlaIndicator(); + expect(indicator).toHaveAttribute('data-sla-status', 'ok'); + expect(indicator.querySelector('svg')).toBeNull(); + }); + + it('renders a warning icon and text when slaStatus is "warning"', () => { + renderStageNode({ + execution: { + stageStatus: { slaText: 'SLA: 1 day remaining', slaStatus: 'warning' }, + taskStatus: {}, + }, + }); + + const indicator = getSlaIndicator(); + expect(indicator).toHaveTextContent('SLA: 1 day remaining'); + expect(indicator).toHaveAttribute('data-sla-status', 'warning'); + expect(indicator.querySelector('svg')).not.toBeNull(); + }); + + it('renders an error icon and text when slaStatus is "overdue"', () => { + renderStageNode({ + execution: { + stageStatus: { slaText: 'SLA: 1 day overdue', slaStatus: 'overdue' }, + taskStatus: {}, + }, + }); + + const indicator = getSlaIndicator(); + expect(indicator).toHaveTextContent('SLA: 1 day overdue'); + expect(indicator).toHaveAttribute('data-sla-status', 'overdue'); + expect(indicator.querySelector('svg')).not.toBeNull(); + }); + + it('renders both duration and slaText as independent lines when both are provided', () => { + renderStageNode({ + execution: { + stageStatus: { + duration: 'Duration: 1h 30m', + slaText: 'SLA: 1 day remaining', + slaStatus: 'warning', + }, + taskStatus: {}, + }, + }); + + expect(screen.getByText('Duration: 1h 30m')).toBeInTheDocument(); + const indicator = getSlaIndicator(); + expect(indicator).toHaveTextContent('SLA: 1 day remaining'); + expect(indicator).toHaveAttribute('data-sla-status', 'warning'); + }); +}); + describe('StageNode - Header Chips', () => { beforeEach(() => { vi.clearAllMocks(); diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts b/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts index dc49c952d..c0fd5ed49 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts @@ -18,6 +18,8 @@ enum ElementStatusValues { export type StageStatus = `${ElementStatusValues}`; export type StageTaskStatus = `${ElementStatusValues}`; +export type StageSlaStatus = 'ok' | 'warning' | 'overdue'; + export interface StageTaskItem { id: string; label: string; @@ -66,6 +68,8 @@ export interface StageNodeBaseProps { status?: StageStatus; label?: string; duration?: string; + slaText?: string; + slaStatus?: StageSlaStatus; }; taskStatus: Record; }; diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx index 39298513d..3808ff73a 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx @@ -14,9 +14,25 @@ import { StageTitleContainer, StageTitleInput, } from './StageNode.styles'; -import type { StageNodeProps, StageStatus } from './StageNode.types'; +import type { StageNodeProps, StageSlaStatus, StageStatus } from './StageNode.types'; import { StageHeaderChipType } from './StageNode.types'; +const SLA_STATUS_CONFIG: Record< + Exclude, + { icon: string; iconColor: string; textClass: string } +> = { + warning: { + icon: 'triangle-alert', + iconColor: 'var(--canvas-warning-icon)', + textClass: 'text-[color:var(--canvas-warning-text)]', + }, + overdue: { + icon: 'circle-alert', + iconColor: 'var(--canvas-error-icon)', + textClass: 'text-[color:var(--canvas-error-text)]', + }, +}; + const CHIP_ICONS: Record = { [StageHeaderChipType.Entry]: , [StageHeaderChipType.Exit]: , @@ -54,6 +70,9 @@ const StageNodeHeaderInner = ({ const icon = stageDetails?.icon; const statusLabel = execution?.stageStatus?.label; const stageDuration = execution?.stageStatus?.duration; + const slaText = execution?.stageStatus?.slaText; + const slaStatus = execution?.stageStatus?.slaStatus; + const slaIndicator = slaStatus && slaStatus !== 'ok' ? SLA_STATUS_CONFIG[slaStatus] : undefined; const isStageTitleEditable = !!onStageTitleChange && !isReadOnly; @@ -145,6 +164,21 @@ const StageNodeHeaderInner = ({ {stageDuration && {stageDuration}} + {slaText && ( + + {slaIndicator && ( + + )} + {slaText} + + )} {stageDetails.headerChips && stageDetails.headerChips.length > 0 && ( {stageDetails.headerChips.map((chip) => { From 25f892a6f2e09658b5615061f4c75be4235a0c99 Mon Sep 17 00:00:00 2001 From: alextran1 Date: Tue, 12 May 2026 16:24:28 -0700 Subject: [PATCH 2/5] fix(apollo-react): update sla text color --- .../src/canvas/components/StageNode/StageNodeHeader.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx index 3808ff73a..2301b8a59 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx @@ -19,17 +19,15 @@ import { StageHeaderChipType } from './StageNode.types'; const SLA_STATUS_CONFIG: Record< Exclude, - { icon: string; iconColor: string; textClass: string } + { icon: string; iconColor: string } > = { warning: { icon: 'triangle-alert', iconColor: 'var(--canvas-warning-icon)', - textClass: 'text-[color:var(--canvas-warning-text)]', }, overdue: { icon: 'circle-alert', iconColor: 'var(--canvas-error-icon)', - textClass: 'text-[color:var(--canvas-error-text)]', }, }; @@ -166,10 +164,7 @@ const StageNodeHeaderInner = ({ {stageDuration && {stageDuration}} {slaText && ( From 9e52fd8b9f78149d860b418d21caea899edc6572 Mon Sep 17 00:00:00 2001 From: alextran1 Date: Tue, 12 May 2026 16:53:32 -0700 Subject: [PATCH 3/5] fix(apollo-react): update sla icon types --- .../StageNode/StageNode.stories.tsx | 91 ++++++++++++++++++- .../components/StageNode/StageNode.test.tsx | 33 ++----- .../components/StageNode/StageNode.types.ts | 4 +- .../components/StageNode/StageNodeHeader.tsx | 15 ++- 4 files changed, 106 insertions(+), 37 deletions(-) diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx index bf42586e0..4d6f4899a 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx @@ -610,7 +610,6 @@ export const SLAStates: Story = { status: 'InProgress', label: 'In progress', slaText: 'SLA: 10 days remaining', - slaStatus: 'ok', }, taskStatus: {}, }, @@ -636,7 +635,7 @@ export const SLAStates: Story = { status: 'InProgress', label: 'In progress', slaText: 'SLA: 1 day remaining', - slaStatus: 'warning', + slaIcon: 'warning', }, taskStatus: {}, }, @@ -662,7 +661,7 @@ export const SLAStates: Story = { status: 'InProgress', label: 'In progress', slaText: 'SLA: 1 day overdue', - slaStatus: 'overdue', + slaIcon: 'error', }, taskStatus: {}, }, @@ -800,6 +799,92 @@ export const InteractiveTaskManagement: Story = { }, }; +export const ExecutionModeWithSla: Story = { + name: 'Execution Mode - Runtime vs SLA', + parameters: { + nodes: [ + { + id: 'exec-runtime-only', + type: 'stage', + position: { x: 48, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'Runtime only', + isReadOnly: true, + tasks: [ + [{ id: '1', label: 'Prepare closing docs', icon: }], + [{ id: '2', label: 'eSign envelope', icon: }], + [{ id: '3', label: 'Review closing docs', icon: }], + ], + }, + execution: { + stageStatus: { + status: 'InProgress', + label: 'In progress', + duration: 'Duration: 2h 15m', + }, + taskStatus: {}, + }, + }, + }, + { + id: 'exec-sla-only', + type: 'stage', + position: { x: 400, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'SLA only', + isReadOnly: true, + tasks: [ + [{ id: '1', label: 'Prepare closing docs', icon: }], + [{ id: '2', label: 'eSign envelope', icon: }], + [{ id: '3', label: 'Review closing docs', icon: }], + ], + }, + execution: { + stageStatus: { + status: 'InProgress', + label: 'In progress', + slaText: 'SLA: 1 day remaining', + slaIcon: 'warning', + }, + taskStatus: {}, + }, + }, + }, + { + id: 'exec-runtime-and-sla', + type: 'stage', + position: { x: 752, y: 96 }, + width: 304, + data: { + stageDetails: { + label: 'Runtime + SLA (both)', + isReadOnly: true, + tasks: [ + [{ id: '1', label: 'Prepare closing docs', icon: }], + [{ id: '2', label: 'eSign envelope', icon: }], + [{ id: '3', label: 'Review closing docs', icon: }], + ], + }, + execution: { + stageStatus: { + status: 'InProgress', + label: 'In progress', + duration: 'Duration: 2h 15m', + slaText: 'SLA: 1 day remaining', + slaIcon: 'warning', + }, + taskStatus: {}, + }, + }, + }, + ], + }, +}; + export const LoanProcessingWorkflow: Story = { name: 'Loan Processing Workflow', parameters: { diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx index a5f92e32f..4467ce57e 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.test.tsx @@ -874,7 +874,7 @@ describe('StageNode - SLA Indicator', () => { expect(screen.queryByTestId('stage-sla-stage-1')).not.toBeInTheDocument(); }); - it('renders slaText without an icon when slaStatus is omitted', () => { + it('renders slaText without an icon when slaIcon is omitted', () => { renderStageNode({ execution: { stageStatus: { slaText: 'SLA: 10 days remaining' }, @@ -884,48 +884,35 @@ describe('StageNode - SLA Indicator', () => { const indicator = getSlaIndicator(); expect(indicator).toHaveTextContent('SLA: 10 days remaining'); - expect(indicator).toHaveAttribute('data-sla-status', 'ok'); + expect(indicator).not.toHaveAttribute('data-sla-icon'); expect(indicator.querySelector('svg')).toBeNull(); }); - it('renders slaText without an icon when slaStatus is "ok"', () => { + it('renders a warning icon and text when slaIcon is "warning"', () => { renderStageNode({ execution: { - stageStatus: { slaText: 'SLA: 10 days remaining', slaStatus: 'ok' }, - taskStatus: {}, - }, - }); - - const indicator = getSlaIndicator(); - expect(indicator).toHaveAttribute('data-sla-status', 'ok'); - expect(indicator.querySelector('svg')).toBeNull(); - }); - - it('renders a warning icon and text when slaStatus is "warning"', () => { - renderStageNode({ - execution: { - stageStatus: { slaText: 'SLA: 1 day remaining', slaStatus: 'warning' }, + stageStatus: { slaText: 'SLA: 1 day remaining', slaIcon: 'warning' }, taskStatus: {}, }, }); const indicator = getSlaIndicator(); expect(indicator).toHaveTextContent('SLA: 1 day remaining'); - expect(indicator).toHaveAttribute('data-sla-status', 'warning'); + expect(indicator).toHaveAttribute('data-sla-icon', 'warning'); expect(indicator.querySelector('svg')).not.toBeNull(); }); - it('renders an error icon and text when slaStatus is "overdue"', () => { + it('renders an error icon and text when slaIcon is "error"', () => { renderStageNode({ execution: { - stageStatus: { slaText: 'SLA: 1 day overdue', slaStatus: 'overdue' }, + stageStatus: { slaText: 'SLA: 1 day overdue', slaIcon: 'error' }, taskStatus: {}, }, }); const indicator = getSlaIndicator(); expect(indicator).toHaveTextContent('SLA: 1 day overdue'); - expect(indicator).toHaveAttribute('data-sla-status', 'overdue'); + expect(indicator).toHaveAttribute('data-sla-icon', 'error'); expect(indicator.querySelector('svg')).not.toBeNull(); }); @@ -935,7 +922,7 @@ describe('StageNode - SLA Indicator', () => { stageStatus: { duration: 'Duration: 1h 30m', slaText: 'SLA: 1 day remaining', - slaStatus: 'warning', + slaIcon: 'warning', }, taskStatus: {}, }, @@ -944,7 +931,7 @@ describe('StageNode - SLA Indicator', () => { expect(screen.getByText('Duration: 1h 30m')).toBeInTheDocument(); const indicator = getSlaIndicator(); expect(indicator).toHaveTextContent('SLA: 1 day remaining'); - expect(indicator).toHaveAttribute('data-sla-status', 'warning'); + expect(indicator).toHaveAttribute('data-sla-icon', 'warning'); }); }); diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts b/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts index c0fd5ed49..ac3765fe5 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.types.ts @@ -18,7 +18,7 @@ enum ElementStatusValues { export type StageStatus = `${ElementStatusValues}`; export type StageTaskStatus = `${ElementStatusValues}`; -export type StageSlaStatus = 'ok' | 'warning' | 'overdue'; +export type StageSlaIcon = 'warning' | 'error'; export interface StageTaskItem { id: string; @@ -69,7 +69,7 @@ export interface StageNodeBaseProps { label?: string; duration?: string; slaText?: string; - slaStatus?: StageSlaStatus; + slaIcon?: StageSlaIcon; }; taskStatus: Record; }; diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx index 2301b8a59..867712dca 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx @@ -14,18 +14,15 @@ import { StageTitleContainer, StageTitleInput, } from './StageNode.styles'; -import type { StageNodeProps, StageSlaStatus, StageStatus } from './StageNode.types'; +import type { StageNodeProps, StageSlaIcon, StageStatus } from './StageNode.types'; import { StageHeaderChipType } from './StageNode.types'; -const SLA_STATUS_CONFIG: Record< - Exclude, - { icon: string; iconColor: string } -> = { +const SLA_ICON_CONFIG: Record = { warning: { icon: 'triangle-alert', iconColor: 'var(--canvas-warning-icon)', }, - overdue: { + error: { icon: 'circle-alert', iconColor: 'var(--canvas-error-icon)', }, @@ -69,8 +66,8 @@ const StageNodeHeaderInner = ({ const statusLabel = execution?.stageStatus?.label; const stageDuration = execution?.stageStatus?.duration; const slaText = execution?.stageStatus?.slaText; - const slaStatus = execution?.stageStatus?.slaStatus; - const slaIndicator = slaStatus && slaStatus !== 'ok' ? SLA_STATUS_CONFIG[slaStatus] : undefined; + const slaIcon = execution?.stageStatus?.slaIcon; + const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : undefined; const isStageTitleEditable = !!onStageTitleChange && !isReadOnly; @@ -166,7 +163,7 @@ const StageNodeHeaderInner = ({ {slaIndicator && ( From 88979f9f6fd8c916b1dd0db28370c418cdb9bf53 Mon Sep 17 00:00:00 2001 From: alextran1 Date: Wed, 13 May 2026 11:23:01 -0700 Subject: [PATCH 4/5] fix(apollo-react): update item alignment of sla and chips --- .../StageNode/StageNode.stories.tsx | 18 ++-- .../components/StageNode/StageNode.styles.ts | 2 +- .../components/StageNode/StageNodeHeader.tsx | 94 +++++++++---------- 3 files changed, 56 insertions(+), 58 deletions(-) diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx index 4d6f4899a..572cf16ec 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.stories.tsx @@ -188,7 +188,7 @@ export const Default: Story = { }, execution: { stageStatus: { - duration: 'SLA: None', + slaText: 'SLA: None', }, }, onTaskAdd: () => { @@ -212,7 +212,7 @@ export const Default: Story = { }, execution: { stageStatus: { - duration: 'SLA: None', + slaText: 'SLA: None', }, }, onAddTaskFromToolbox: (taskItem: ListItem) => { @@ -391,7 +391,7 @@ export const ExecutionStatus: Story = { execution: { stageStatus: { status: 'Completed', - duration: 'SLA: 4h', + slaText: 'SLA: 4h', }, taskStatus: { '1': { status: 'Completed', label: 'KYC and AML Checks', duration: '2h 15m' }, @@ -427,7 +427,7 @@ export const ExecutionStatus: Story = { execution: { stageStatus: { status: 'Completed', - duration: 'SLA: 6h 15m', + slaText: 'SLA: 6h 15m', }, taskStatus: { '1': { @@ -480,7 +480,7 @@ export const ExecutionStatus: Story = { stageStatus: { status: 'InProgress', label: 'In progress', - duration: 'SLA: 2h 15m', + slaText: 'SLA: 2h 15m', }, taskStatus: { '1': { status: 'Completed', label: 'Report Ordering', duration: '2h 15m' }, @@ -2119,7 +2119,7 @@ export const AdhocTasks: Story = { stageStatus: { status: 'InProgress', label: 'In progress', - duration: 'SLA: 3h 45m', + slaText: 'SLA: 3h 45m', }, taskStatus: { '1': { @@ -2395,7 +2395,7 @@ export const TasksBySection: Story = { stageStatus: { status: 'InProgress', label: 'In progress', - duration: 'SLA: 3h 45m', + slaText: 'SLA: 3h 45m', }, taskStatus: { '1': { @@ -2634,7 +2634,7 @@ export const WithRulesTags: Story = { ], }, execution: { - stageStatus: { status: 'Completed', label: 'Completed', duration: 'SLA: 4h' }, + stageStatus: { status: 'Completed', label: 'Completed', slaText: 'SLA: 4h' }, }, }, }, @@ -2667,7 +2667,7 @@ export const WithRulesTags: Story = { ], }, execution: { - stageStatus: { status: 'InProgress', label: 'In progress', duration: 'SLA: 2h' }, + stageStatus: { status: 'InProgress', label: 'In progress', slaText: 'SLA: 2h' }, }, }, }, diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNode.styles.ts b/packages/apollo-react/src/canvas/components/StageNode/StageNode.styles.ts index 6720cd461..900c41a66 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNode.styles.ts +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNode.styles.ts @@ -69,7 +69,7 @@ export const StageContainer = styled.div<{ export const StageHeader = styled.div<{ isException?: boolean }>` position: relative; display: flex; - justify-content: space-between; + flex-direction: column; padding: ${Spacing.SpacingS} ${Spacing.SpacingBase}; border-bottom: solid 1px var(--canvas-border-de-emp); background: ${(props) => (props.isException ? 'var(--color-background-secondary)' : 'var(--canvas-background)')}; diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx index 867712dca..9884f9d60 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx @@ -1,5 +1,5 @@ import { Icon, Padding, Spacing } from '@uipath/apollo-core'; -import { Column, Row } from '@uipath/apollo-react/canvas/layouts'; +import { Row } from '@uipath/apollo-react/canvas/layouts'; import { Button, cn } from '@uipath/apollo-wind'; import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from '../../icons'; @@ -7,13 +7,7 @@ import { CanvasIcon } from '../../utils/icon-registry'; import { CanvasTooltip } from '../CanvasTooltip'; import { ExecutionStatusIcon } from '../ExecutionStatusIcon'; import { getExecutionStatusColor } from '../ExecutionStatusIcon/ExecutionStatusIcon'; -import { - StageChip, - StageHeader, - StageHeaderChipsRow, - StageTitleContainer, - StageTitleInput, -} from './StageNode.styles'; +import { StageChip, StageHeader, StageTitleContainer, StageTitleInput } from './StageNode.styles'; import type { StageNodeProps, StageSlaIcon, StageStatus } from './StageNode.types'; import { StageHeaderChipType } from './StageNode.types'; @@ -135,10 +129,10 @@ const StageNodeHeaderInner = ({ return ( - - {icon} - - +
+ + {icon} + - {stageDuration && {stageDuration}} + + + {status && ( + + + + )} + {(onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && ( + + + + )} + +
+ {(slaText || (stageDetails.headerChips && stageDetails.headerChips.length > 0)) && ( +
{slaText && ( )} {stageDetails.headerChips && stageDetails.headerChips.length > 0 && ( - +
{stageDetails.headerChips.map((chip) => { const button = ( +
)} - - - - {status && ( - - - - )} - {(onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && ( - - - - )} - +
+ )} + {stageDuration && {stageDuration}} ); }; From b0fdaaf2c98c3bbf0a9c16ccc371f7f76ecb7311 Mon Sep 17 00:00:00 2001 From: alextran1 Date: Wed, 13 May 2026 14:03:22 -0700 Subject: [PATCH 5/5] fix(apollo-react): format props --- .../src/canvas/components/StageNode/StageNodeHeader.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx index 9884f9d60..f00eac41c 100644 --- a/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx +++ b/packages/apollo-react/src/canvas/components/StageNode/StageNodeHeader.tsx @@ -132,7 +132,9 @@ const StageNodeHeaderInner = ({
{icon} - +