fix: updated the workflow editor

web/src/components/createupdate/CreateUpdateWorkflow.js

@@ -39,7 +39,7 @@ export default function CreateUpdateWorkflow(props) {
     const [openCreatePipeline, setOpenCreatePipeline] = useState(false);
     const [asset, setAsset] = useState(null);
     const [pipelines, setPipelines] = useState([]);
-    const [workflowPipelines, setWorkflowPipelines] = useState([]);
+    const [workflowPipelines, setWorkflowPipelines] = useState([null]);
     const [loadedWorkflowPipelines, setLoadedWorkflowPipelines] = useState([]);
     const [activeTab, setActiveTab] = useState("asset");
     const [workflowIdNew, setWorkflowIDNew] = useState(workflowId);
@@ -76,6 +76,7 @@ export default function CreateUpdateWorkflow(props) {
                     };
                 });
                 setLoadedWorkflowPipelines(loadedPipelines);
+                setWorkflowPipelines(loadedPipelines);
                 setLoaded(true);
             }
         };

web/src/components/interactive/WorkflowEditor.test.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+import createWrapper from "@cloudscape-design/components/test-utils/dom";
+import WorkflowEditor, { workflowPipelineToElements } from "./WorkflowEditor";
+import { WorkflowContext } from "../../context/WorkflowContex";
+
+class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+
+describe("Workflow Editor", () => {
+    window.ResizeObserver = ResizeObserver;
+
+    it("renders", async () => {
+        const setAsset = jest.fn();
+        const setPipelines = jest.fn();
+        const setWorkflowPipelines = jest.fn();
+        const reloadPipelines = jest.fn();
+        const setReloadPipelines = jest.fn();
+        const setActiveTab = jest.fn();
+
+        const asset = {};
+        const pipelines: any[] = [];
+        const workflowPipelines: any[] = [];
+
+        render(
+            <WorkflowContext.Provider
+                value={{
+                    asset,
+                    setAsset,
+                    pipelines,
+                    setPipelines,
+                    workflowPipelines,
+                    setWorkflowPipelines,
+                    reloadPipelines,
+                    setReloadPipelines,
+                    setActiveTab,
+                }}
+            >
+                <div style={{ width: "800px", height: "600px" }}>
+                    <WorkflowEditor />
+                </div>
+            </WorkflowContext.Provider>
+        );
+    });
+
+    it("renders with wf pipeline", async () => {
+        const setAsset = jest.fn();
+        const setPipelines = jest.fn();
+        const setWorkflowPipelines = jest.fn();
+        const reloadPipelines = jest.fn();
+        const setReloadPipelines = jest.fn();
+        const setActiveTab = jest.fn();
+
+        const asset = {};
+        const pipelines: any[] = [];
+        const workflowPipelines: any[] = [null];
+
+        render(
+            <div style={{ width: 800, height: 800 }}>
+                <WorkflowContext.Provider
+                    value={{
+                        asset,
+                        setAsset,
+                        pipelines,
+                        setPipelines,
+                        workflowPipelines,
+                        setWorkflowPipelines,
+                        reloadPipelines,
+                        setReloadPipelines,
+                        setActiveTab,
+                    }}
+                >
+                    <WorkflowEditor />
+                </WorkflowContext.Provider>
+            </div>
+        );
+    });
+
+    it("makes elements a function of workflow pipelines", () => {
+        const result = workflowPipelineToElements([], "databaseid");
+        expect(result.find((x) => x.id === "asset0")).toBeTruthy();
+        expect(result.length).toEqual(1);
+    });
+
+    it("makes elements a function of workflow pipelines with one pipeline", () => {
+        const result = workflowPipelineToElements([null], "databaseid");
+        expect(result.find((x) => x.id === "asset0")).toBeTruthy();
+        expect(result.find((x) => x.id === "pipeline0")).toBeTruthy();
+        expect(result.length).toEqual(5);
+    });
+
+    it("matches the snapshot for an empty workflow pipeline list", () => {
+        const result = workflowPipelineToElements([null], "databaseid");
+        expect(result).toMatchSnapshot();
+    });
+
+    it("matches the snapshot for zero length pipeline list", () => {
+        const result = workflowPipelineToElements([], "databaseid");
+        expect(result).toMatchSnapshot();
+    });
+});