From cadc66ab51c77283537f299544f03036735ba13e Mon Sep 17 00:00:00 2001
From: Bogdan Nechyporenko <bnechyporenko@bol.com>
Date: Mon, 30 Oct 2023 15:00:27 +0100
Subject: [PATCH 1/3] Preserve step's time execution for a non-running task.

Signed-off-by: Bogdan Nechyporenko <bnechyporenko@bol.com>
---
 .../src/next/components/TaskSteps/TaskSteps.tsx               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx
index d783351eca..b5fffe802f 100644
--- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx
+++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx
@@ -59,7 +59,7 @@ export const TaskSteps = (props: TaskStepsProps) => {
           alternativeLabel
           variant="elevation"
         >
-          {props.steps.map((step, index) => {
+          {props.steps.map(step => {
             const isCompleted = step.status === 'completed';
             const isFailed = step.status === 'failed';
             const isActive = step.status === 'processing';
@@ -73,7 +73,7 @@ export const TaskSteps = (props: TaskStepsProps) => {
               };
 
             return (
-              <MuiStep key={index}>
+              <MuiStep key={`${step.id}-${step.startedAt}-${step.endedAt}`}>
                 <MuiStepButton>
                   <MuiStepLabel
                     StepIconProps={stepIconProps}

From dda56ae26563eb0bfca8c9de9f9007bd2f2e8732 Mon Sep 17 00:00:00 2001
From: Bogdan Nechyporenko <bnechyporenko@bol.com>
Date: Mon, 30 Oct 2023 15:06:32 +0100
Subject: [PATCH 2/3] Preserve step's time execution for a non-running task.

Signed-off-by: Bogdan Nechyporenko <bnechyporenko@bol.com>
---
 .changeset/soft-oranges-act.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/soft-oranges-act.md

diff --git a/.changeset/soft-oranges-act.md b/.changeset/soft-oranges-act.md
new file mode 100644
index 0000000000..99ff63395f
--- /dev/null
+++ b/.changeset/soft-oranges-act.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Preserve step's time execution for a non-running task.

From 8e9f3f76de03303c3cd4f37afdb5ee4e1309ef3c Mon Sep 17 00:00:00 2001
From: Bogdan Nechyporenko <bnechyporenko@bol.com>
Date: Thu, 2 Nov 2023 13:39:02 +0100
Subject: [PATCH 3/3] wip

Signed-off-by: Bogdan Nechyporenko <bnechyporenko@bol.com>
---
 .../src/next/components/TaskSteps/StepTime.tsx    | 15 ++++++++++++---
 .../src/next/components/TaskSteps/TaskSteps.tsx   |  2 +-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx
index 653fe6e942..3f8fde748c 100644
--- a/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx
+++ b/plugins/scaffolder-react/src/next/components/TaskSteps/StepTime.tsx
@@ -31,6 +31,16 @@ export const StepTime = (props: {
   const [time, setTime] = useState('');
   const { step } = props;
 
+  const getDelay = () => {
+    if (step.startedAt && step.endedAt && time) {
+      return null;
+    }
+    if (step.startedAt && step.endedAt) {
+      return 1;
+    }
+    return 1000;
+  };
+
   const calculate = useCallback(() => {
     if (!step.startedAt) {
       setTime('');
@@ -49,9 +59,8 @@ export const StepTime = (props: {
     setTime(humanizeDuration(formatted, { round: true }));
   }, [step.endedAt, step.startedAt]);
 
-  useMountEffect(() => calculate());
-
-  useInterval(() => !step.endedAt && calculate(), 1000);
+  useMountEffect(calculate);
+  useInterval(calculate, getDelay());
 
   return <Typography variant="caption">{time}</Typography>;
 };
diff --git a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx
index b5fffe802f..96f0d9d865 100644
--- a/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx
+++ b/plugins/scaffolder-react/src/next/components/TaskSteps/TaskSteps.tsx
@@ -73,7 +73,7 @@ export const TaskSteps = (props: TaskStepsProps) => {
               };
 
             return (
-              <MuiStep key={`${step.id}-${step.startedAt}-${step.endedAt}`}>
+              <MuiStep key={step.id}>
                 <MuiStepButton>
                   <MuiStepLabel
                     StepIconProps={stepIconProps}