DHFPROD-10274: Step Card in Flow Needs In-Progress Indicator

Author: littlecherro

marklogic-data-hub-central/ui/src/components/flows/flow-panel/step-card.test.tsx

@@ -3,7 +3,7 @@ import {Router} from "react-router";
 import {render, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/extend-expect";
-import StepCard, {Props} from "./step-card";
+import StepCard from "./step-card";
 import data from "../../../assets/mock-data/curation/flows.data";
 import {createMemoryHistory} from "history";
 const history = createMemoryHistory();
@@ -12,7 +12,24 @@ import sourceFormatOptions from "@config/formats.config";
 const step = data.flows.data[0].steps[1];
 const flow = data.flows.data[0];
 
-const defaultProps: Props = {
+const runningFlow = {
+  name: "testFlow",
+  steps: [
+    {
+      "stepId": "Mapping1-mapping",
+      "stepName": "Mapping1",
+      "stepDefinitionType": "mapping",
+      "stepNumber": "2",
+      "targetFormat": "json",
+      "targetEntityType": "http://example.org/Customer-0.0.1/Customer",
+    },
+  ],
+  description: "testFlow",
+};
+
+const emptyFlow = {name: "", steps: []};
+
+const defaultProps = runningFlow => ({
   step: step,
   flow: flow,
   openFilePicker: jest.fn(),
@@ -32,16 +49,16 @@ const defaultProps: Props = {
   setShowUploadError: jest.fn(),
   sourceFormatOptions: sourceFormatOptions,
   runningStep: undefined,
-  flowRunning: {name: "", steps: []},
+  flowRunning: runningFlow,
   showUploadError: "",
   uploadError: "",
-};
+});
 
 describe("Flow Card test suite", () => {
   it("links for steps lead to correct path", async () => {
     const {getByLabelText} = render(
       <Router history={history}>
-        <StepCard {...defaultProps} />
+        <StepCard {...defaultProps(emptyFlow)} />
       </Router>,
     );
     const flowName = flow.name;
@@ -56,7 +73,7 @@ describe("Flow Card test suite", () => {
     const newStep = flow.steps[0];
     const {getByLabelText} = render(
       <Router history={history}>
-        <StepCard {...defaultProps} step={newStep} />
+        <StepCard {...defaultProps(emptyFlow)} step={newStep} />
       </Router>,
     );
     const flowName = flow.name;
@@ -67,10 +84,35 @@ describe("Flow Card test suite", () => {
     expect(getByLabelText(`${flowName}-${newStep.stepNumber}-cardlink`).firstChild?.href).toBe(pathname);
   });
 
+  it("displays clock icon when a step is running", async () => {
+    const {getByTestId} = render(
+      <Router history={history}>
+        <StepCard
+          {...defaultProps(runningFlow)}
+          latestJobData={{
+            [flow.name]: [
+              {
+                "stepId": "Mapping1-mapping",
+                "stepName": "Mapping1",
+                "stepDefinitionType": "mapping",
+                "stepNumber": "2",
+                "targetFormat": "json",
+                "targetEntityType": "http://example.org/Customer-0.0.1/Customer",
+                "lastRunStatus": "completed step 2",
+              },
+            ],
+          }}
+        />
+      </Router>,
+    );
+    const stepName = step.stepName;
+    expect(getByTestId(`running-${stepName}`)).toBeInTheDocument();
+  });
+
   it("reorder flow buttons can be focused and pressed by keyboard", async () => {
     const {getByLabelText} = render(
       <Router history={history}>
-        <StepCard {...defaultProps} />
+        <StepCard {...defaultProps(emptyFlow)} />
       </Router>,
     );
     const rightArrowButton = getByLabelText("rightArrow-" + step.stepName);

marklogic-data-hub-central/ui/src/components/flows/flow-panel/step-card.tsx

@@ -67,9 +67,7 @@ const StepCard: React.FC<Props> = ({
   let stepDefinitionType = step.stepDefinitionType ? step.stepDefinitionType.toLowerCase() : "";
   let stepDefinitionTypeTitle = StepDefinitionTypeTitles[stepDefinitionType];
   let stepWithJobDetail =
-    latestJobData && latestJobData[flow.name] && latestJobData[flow.name]
-      ? latestJobData[flow.name].find(el => el.stepId === step.stepId)
-      : null;
+    latestJobData && latestJobData[flow.name] ? latestJobData[flow.name].find(el => el.stepId === step.stepId) : null;
 
   const reorderFlowKeyDownHandler = (event, index, flowName, direction) => {
     if (event.key === "Enter") {
@@ -106,23 +104,23 @@ const StepCard: React.FC<Props> = ({
     return result !== undefined;
   };
 
-  const lastRunResponse = (step, flow) => {
+  const lastRunResponse = (_step, _flow) => {
     let stepEndTime;
-    if (step.stepEndTime) {
-      stepEndTime = new Date(step.stepEndTime).toLocaleString();
+    if (_step.stepEndTime) {
+      stepEndTime = new Date(_step.stepEndTime).toLocaleString();
     }
 
-    const flowLastRun = latestJobData[flow];
+    const flowLastRun = latestJobData[_flow];
 
     let canceled = flowLastRun?.some(function (stepObj) {
       return stepObj.lastRunStatus?.includes("canceled");
     });
 
-    if (!step.lastRunStatus && !canceled) {
+    if (!_step.lastRunStatus && !canceled) {
       return null;
     }
 
-    if (isRunning(flow.name, step.stepNumber)) {
+    if (isRunning(_flow, _step.stepId)) {
       return (
         <HCTooltip text={RunToolTips.stepRunning} id="running-tooltip" placement="bottom">
           <span tabIndex={0}>
@@ -132,13 +130,13 @@ const StepCard: React.FC<Props> = ({
                 icon={faClock}
                 className={styles.runningIcon}
                 size="lg"
-                data-testid={`running-${step.stepName}`}
+                data-testid={`running-${_step.stepName}`}
               />
             </i>
           </span>
         </HCTooltip>
       );
-    } else if (step.lastRunStatus?.includes("canceled") || (!step.lastRunStatus && canceled)) {
+    } else if (_step.lastRunStatus?.includes("canceled") || (!_step.lastRunStatus && canceled)) {
       return (
         <span>
           <HCTooltip text={RunToolTips.stepCanceled(stepEndTime)} id="canceled-tooltip" placement="bottom">
@@ -150,7 +148,7 @@ const StepCard: React.FC<Props> = ({
           </HCTooltip>
         </span>
       );
-    } else if (step.lastRunStatus?.includes("completed step")) {
+    } else if (_step.lastRunStatus?.includes("completed step")) {
       return (
         <span>
           <HCTooltip text={RunToolTips.stepCompleted(stepEndTime)} id="success-tooltip" placement="bottom">
@@ -161,14 +159,14 @@ const StepCard: React.FC<Props> = ({
                   icon={faCheckCircle}
                   className={styles.successfulRun}
                   size="lg"
-                  data-testid={`check-circle-${step.stepName}`}
+                  data-testid={`check-circle-${_step.stepName}`}
                 />
               </i>
             </span>
           </HCTooltip>
         </span>
       );
-    } else if (step.lastRunStatus?.includes("completed with errors step")) {
+    } else if (_step.lastRunStatus?.includes("completed with errors step")) {
       return (
         <span>
           <HCTooltip

marklogic-data-hub-central/ui/src/pages/Run.tsx

@@ -238,16 +238,24 @@ const Run = props => {
     const _stepsRunning = flow?.steps?.filter(step => {
       return stepNumbers.includes(step.stepNumber);
     });
-    flow && _stepsRunning ? setFlowRunning({...flow, steps: _stepsRunning}) : setFlowRunning(InitialFlow);
+    flow && _stepsRunning
+      ? setFlowRunning({...flow, steps: _stepsRunning, description: flowName})
+      : setFlowRunning(InitialFlow);
   };
 
-  const finishRun = (flowName: string) => {
+  const finishRun = () => {
     setIsLoading(false);
     let InitialFlowAux = {...InitialFlow};
-    InitialFlowAux.description = flowName;
     setFlowRunning(InitialFlowAux);
   };
 
+  const handleStepRun = (isRunning: boolean, stepId) => {
+    if (!isRunning) {
+      finishRun();
+    }
+    setIsStepRunning(isRunning);
+  };
+
   const runFlowSteps = async (flowName: string, steps: Step[], formData: any) => {
     setIsStepRunning(true);
     const stepNames: string[] = steps.map(step => {
@@ -295,7 +303,6 @@ const Run = props => {
               }
             });
         }, pollConfig.interval);
-        finishRun(flowName);
       }
     } catch (error) {
       console.error("Error running step", error);
@@ -348,7 +355,6 @@ const Run = props => {
               setRunEnded({flowId: flowName, stepId: step.stepNumber});
             });
         }, pollConfig.interval);
-        finishRun(flowName);
       }
     } catch (error) {
       console.error("Error running step", error);
@@ -445,7 +451,7 @@ const Run = props => {
       {openJobResponse && (
         <JobResponse
           setUserCanStopFlow={setUserCanStopFlow}
-          setIsStepRunning={setIsStepRunning}
+          setIsStepRunning={handleStepRun}
           stopRun={stopRun}
           jobId={jobId}
           setOpenJobResponse={setOpenJobResponse}