Improve Process Detail step timestamp using step started and completed datetime (#2096)

* Improve Process Detail step timestamp using step started and completed datetime

* Add changeset and version compatibility

* revert wrongly updated minimum core version in version-compatibility.json

* Update types and tests

Author: tjeerddie

.changeset/evil-cameras-bathe.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Improve Process Detail step timestamp using step started and completed datetime

packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -26,6 +26,7 @@ import { WfoStepForm } from './WfoStepForm';
 export interface WfoStepProps {
     stepListItem: StepListItem;
     startedAt: string;
+    completedAt: string;
     showHiddenKeys: boolean;
     onToggleStepDetail: () => void;
     isTask: boolean;
@@ -39,6 +40,7 @@ export const WfoStep = React.forwardRef(
             stepListItem,
             onToggleStepDetail,
             startedAt,
+            completedAt,
             showHiddenKeys,
             isStartStep = false,
             isTask,
@@ -130,13 +132,13 @@ export const WfoStep = React.forwardRef(
                             </EuiText>
                             <EuiText>
                                 {step.status}{' '}
-                                {step.executed &&
-                                    `- ${formatDate(step.executed)}`}
+                                {step.completed &&
+                                    `- ${formatDate(step.completed)}`}
                             </EuiText>
                         </EuiFlexItem>
 
                         <EuiFlexGroup css={stepRowStyle}>
-                            {step.executed && (
+                            {step.completed && (
                                 <>
                                     {isExpanded && (
                                         <EuiButton
@@ -165,7 +167,7 @@ export const WfoStep = React.forwardRef(
                                         <EuiText size="m">
                                             {calculateTimeDifference(
                                                 startedAt,
-                                                step.executed,
+                                                completedAt,
                                             )}
                                         </EuiText>
                                     </EuiFlexItem>

packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx

@@ -15,7 +15,6 @@ export type WfoStepListRef = {
 export type WfoStepListProps = {
     stepListItems: StepListItem[];
     showHiddenKeys: boolean;
-    startedAt: string;
     onToggleExpandStepListItem: (stepListItem: StepListItem) => void;
     onTriggerExpandStepListItem: (stepListItem: StepListItem) => void;
     isTask: boolean;
@@ -27,7 +26,6 @@ export const WfoStepList = React.forwardRef(
         {
             stepListItems,
             showHiddenKeys,
-            startedAt,
             onToggleExpandStepListItem,
             onTriggerExpandStepListItem,
             isTask,
@@ -52,8 +50,6 @@ export const WfoStepList = React.forwardRef(
 
         const { contentRef } = useContentRef();
 
-        let stepStartTime = startedAt;
-
         useImperativeHandle(reference, () => ({
             scrollToStep: async (stepId: string) => {
                 // Applied a promise construction to wait for the browser to expand the step before scrolling
@@ -103,32 +99,26 @@ export const WfoStepList = React.forwardRef(
 
         return (
             <>
-                {stepListItems.map((stepListItem, index) => {
-                    const stepComponent = (
-                        <div key={`step-${index}`}>
-                            {index !== 0 && <div css={stepSpacerStyle} />}
-                            <WfoStep
-                                ref={getReferenceCallbackForStepId(
-                                    stepListItem.step.stepId,
-                                )}
-                                onToggleStepDetail={() =>
-                                    onToggleExpandStepListItem(stepListItem)
-                                }
-                                stepListItem={stepListItem}
-                                startedAt={stepStartTime}
-                                showHiddenKeys={showHiddenKeys}
-                                isStartStep={index === 0}
-                                isTask={isTask}
-                                processId={processId}
-                            />
-                        </div>
-                    );
-
-                    if (index > 0) {
-                        stepStartTime = stepListItem.step.executed;
-                    }
-                    return stepComponent;
-                })}
+                {stepListItems.map((stepListItem, index) => (
+                    <div key={`step-${index}`}>
+                        {index !== 0 && <div css={stepSpacerStyle} />}
+                        <WfoStep
+                            ref={getReferenceCallbackForStepId(
+                                stepListItem.step.stepId,
+                            )}
+                            onToggleStepDetail={() =>
+                                onToggleExpandStepListItem(stepListItem)
+                            }
+                            stepListItem={stepListItem}
+                            startedAt={stepListItem.step.started}
+                            completedAt={stepListItem.step.completed}
+                            showHiddenKeys={showHiddenKeys}
+                            isStartStep={index === 0}
+                            isTask={isTask}
+                            processId={processId}
+                        />
+                    </div>
+                ))}
             </>
         );
     },

packages/orchestrator-ui-components/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -70,7 +70,6 @@ export const WfoWorkflowStepList = React.forwardRef(
             steps = [],
             lastStatus,
             traceBack,
-            startedAt,
             processId,
             isTask,
             userInputForm,
@@ -206,7 +205,6 @@ export const WfoWorkflowStepList = React.forwardRef(
                     <WfoStepList
                         ref={reference}
                         stepListItems={stepListItems}
-                        startedAt={startedAt}
                         showHiddenKeys={showHiddenKeys}
                         isTask={isTask}
                         onToggleExpandStepListItem={

packages/orchestrator-ui-components/src/pages/processes/timelineUtils.spec.ts

@@ -7,7 +7,8 @@ import {
 } from './timelineUtils';
 
 const baseStep: Step = {
-    executed: 'testExecuted',
+    started: 'testStarted',
+    completed: 'testCompleted',
     name: 'tesName',
     state: {
         testKey: 'testValue',

packages/orchestrator-ui-components/src/rtk/endpoints/processDetail.ts

@@ -30,8 +30,9 @@ export const processDetailQuery = `query ProcessDetail($processId: String!) {
                     name
                     status
                     stepId
-                    executed
                     stateDelta
+                    started
+                    completed
                 }
                 customer {
                     fullname

packages/orchestrator-ui-components/src/types/types.ts

@@ -251,9 +251,10 @@ export interface Step {
     name: string;
     status: StepStatus;
     stepId: string; // sic backend
-    executed: string;
     state: StepState | undefined;
     stateDelta: StepState;
+    started: string;
+    completed: string;
 }
 
 export interface WorkflowDefinition {

packages/orchestrator-ui-components/src/utils/getProductNamesFromProcess.spec.ts

@@ -17,7 +17,8 @@ const getProcessDetail = (data: Partial<ProcessDetail> = {}): ProcessDetail => {
                 name: 'step name',
                 status: StepStatus.RUNNING,
                 stepId: 'step id',
-                executed: 'executed',
+                started: 'started',
+                completed: 'completed',
                 state: {},
                 stateDelta: {},
             },

version-compatibility.json

@@ -1,4 +1,9 @@
 [
+    {
+        "orchestratorUiVersion": "5.3.5",
+        "minimumOrchestratorCoreVersion": "4.2.0",
+        "changes": "Breaking Change on process.steps, using new props started and completed from graphql to improve the process detail timestamps."
+    },
     {
         "orchestratorUiVersion": "5.0.0",
         "minimumOrchestratorCoreVersion": "4.0.0",