feat: Add model to store

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

@@ -27,6 +27,7 @@ export type DiagramEditorRef = {
 };
 
 export type DiagramEditorProps = {
+  content: string;
   isReadOnly: boolean;
   locale: string;
   ref?: React.Ref<DiagramEditorRef>;
@@ -63,7 +64,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
 
   return (
     <>
-      <DiagramEditorContextProvider isReadOnly={props.isReadOnly} locale={locale}>
+      <DiagramEditorContextProvider content={props.content} isReadOnly={props.isReadOnly} locale={locale}>
         <I18nProvider locale={locale} dictionaries={dictionaries}>
           <Content />
           <Diagram ref={diagramRef} divRef={diagramDivRef} />

packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContext.tsx

@@ -14,11 +14,14 @@
  * limitations under the License.
  */
 
+import type { Specification } from "@serverlessworkflow/sdk";
 import * as React from "react";
 
 export type DiagramEditorContextType = {
   isReadOnly: boolean;
   locale: string;
+  model: Specification.Workflow | null;
+  errors: Error[];
 
   updateIsReadOnly: (isReadOnly: boolean) => void;
   updateLocale: (locale: string) => void;

packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContextProvider.tsx

@@ -15,6 +15,8 @@
  */
 
 import * as React from "react";
+import type { Specification } from "@serverlessworkflow/sdk";
+import { parseWorkflow } from "../core";
 import { DiagramEditorProps } from "../diagram-editor/DiagramEditor";
 import { DiagramEditorContext, DiagramEditorContextType } from "./DiagramEditorContext";
 
@@ -27,6 +29,8 @@ export const DiagramEditorContextProvider = (
   const [isReadOnly, setIsReadOnly] = React.useState<boolean>(props.isReadOnly);
   const [locale, setLocale] = React.useState<string>(props.locale);
 
+  const { model, errors } = React.useMemo(() => parseWorkflow(props.content), [props.content]);
+
   const updateIsReadOnly = React.useCallback((isReadOnly: boolean) => {
     setIsReadOnly(isReadOnly);
   }, []);
@@ -46,10 +50,12 @@ export const DiagramEditorContextProvider = (
     () => ({
       isReadOnly,
       locale,
+      model,
+      errors,
       updateIsReadOnly,
       updateLocale,
     }),
-    [isReadOnly, locale, updateIsReadOnly, updateLocale],
+    [isReadOnly, locale, model, errors, updateIsReadOnly, updateLocale],
   );
 
   return (

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts

@@ -37,5 +37,6 @@ export const Component: Story = {
   args: {
     isReadOnly: true,
     locale: "en",
+    content: "", // TODO: Replace with a sample workflow YAML once diagram renders from model
   },
 };

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx

@@ -23,7 +23,7 @@ import {
 export const DiagramEditor = ({ ...props }: DiagramEditorProps) => {
   return (
     <div style={{ height: "100vh" }}>
-      <Component isReadOnly={props.isReadOnly} locale={props.locale} />
+      <Component content={props.content} isReadOnly={props.isReadOnly} locale={props.locale} />
     </div>
   );
 };

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx

@@ -18,6 +18,7 @@ import { render, screen } from "@testing-library/react";
 import { composeStories } from "@storybook/react-vite";
 import * as stories from "../../stories/DiagramEditor.stories";
 import { vi, test, expect, afterEach, describe } from "vitest";
+import { BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows";
 
 // Composes all stories in the file
 const { Component } = composeStories(stories);
@@ -31,7 +32,7 @@ describe("Story - DiagramEditor component", () => {
     const locale = "en";
     const isReadOnly = true;
 
-    render(<Component locale={locale} isReadOnly={isReadOnly} />);
+    render(<Component content={BASIC_VALID_WORKFLOW_YAML} locale={locale} isReadOnly={isReadOnly} />);
 
     const reactFlowContainer = screen.getByTestId("diagram-container");
 

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

@@ -17,6 +17,7 @@
 import { render, screen } from "@testing-library/react";
 import { DiagramEditor } from "../../src/diagram-editor";
 import { vi, test, expect, afterEach, describe } from "vitest";
+import { BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows";
 
 describe("DiagramEditor Component", () => {
   afterEach(() => {
@@ -27,7 +28,7 @@ describe("DiagramEditor Component", () => {
     const locale = "en";
     const isReadOnly = true;
 
-    render(<DiagramEditor locale={locale} isReadOnly={isReadOnly} />);
+    render(<DiagramEditor content={BASIC_VALID_WORKFLOW_YAML} locale={locale} isReadOnly={isReadOnly} />);
 
     const reactFlowContainer = screen.getByTestId("diagram-container");
 

packages/serverless-workflow-diagram-editor/tests/store/DiagramEditorContextProvider.test.tsx

@@ -15,13 +15,14 @@
  */
 
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { vi, expect, afterEach, describe, it } from "vitest";
 import { useDiagramEditorContext } from "../../src/store/DiagramEditorContext";
 import { DiagramEditorContextProvider } from "../../src/store/DiagramEditorContextProvider";
+import { BASIC_INVALID_WORKFLOW_YAML, BASIC_VALID_WORKFLOW_YAML } from "../fixtures/workflows";
 
 const TestComponent: React.FC = () => {
-  const { isReadOnly, locale } = useDiagramEditorContext();
+  const { isReadOnly, locale, model, errors } = useDiagramEditorContext();
   const renderCount = React.useRef<number>(0);
 
   // Increments on every render cycle
@@ -31,6 +32,8 @@ const TestComponent: React.FC = () => {
     <div data-testid="test-wrapper">
       <p data-testid="test-read-only">{`${isReadOnly}`}</p>
       <p data-testid="test-locale">{`${locale}`}</p>
+      <p data-testid="test-model">{`${model ? model.document?.name : "null"}`}</p>
+      <p data-testid="test-errors">{`${errors.length}`}</p>
       <p data-testid="test-render">{`${renderCount.current}`}</p>
     </div>
   );
@@ -43,7 +46,11 @@ describe("DiagramEditorContextProvider Component", () => {
 
   it("Consume properties from context", async () => {
     render(
-      <DiagramEditorContextProvider isReadOnly={true} locale={"en"}>
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
         <TestComponent />
       </DiagramEditorContextProvider>,
     );
@@ -61,13 +68,21 @@ describe("DiagramEditorContextProvider Component", () => {
 
   it("Context provider props changes shall cause internal component to reload", async () => {
     const { rerender } = render(
-      <DiagramEditorContextProvider isReadOnly={true} locale={"en"}>
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
         <TestComponent />
       </DiagramEditorContextProvider>,
     );
 
     rerender(
-      <DiagramEditorContextProvider isReadOnly={false} locale={"pt"}>
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={false}
+        locale={"pt"}
+      >
         <TestComponent />
       </DiagramEditorContextProvider>,
     );
@@ -85,13 +100,21 @@ describe("DiagramEditorContextProvider Component", () => {
 
   it("Context provider same props shall not cause internal component to reload", async () => {
     const { rerender } = render(
-      <DiagramEditorContextProvider isReadOnly={true} locale={"en"}>
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
         <TestComponent />
       </DiagramEditorContextProvider>,
     );
 
     rerender(
-      <DiagramEditorContextProvider isReadOnly={true} locale={"en"}>
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
         <TestComponent />
       </DiagramEditorContextProvider>,
     );
@@ -106,4 +129,93 @@ describe("DiagramEditorContextProvider Component", () => {
     // 2 rendering cycles are expected 1- first render and 2- forced by rerender
     expect(renderCount).toHaveTextContent(/2/i);
   });
+
+  it("Parses valid workflow content into model with no errors", async () => {
+    render(
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
+        <TestComponent />
+      </DiagramEditorContextProvider>,
+    );
+
+    const modelElement = await screen.findByTestId("test-model");
+    const errorsElement = screen.getByTestId("test-errors");
+
+    await waitFor(() => {
+      expect(modelElement).toHaveTextContent("valid-workflow-yaml");
+      expect(errorsElement).toHaveTextContent("0");
+    });
+  });
+
+  it("Parses invalid workflow content into model with errors", async () => {
+    render(
+      <DiagramEditorContextProvider
+        content={BASIC_INVALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
+        <TestComponent />
+      </DiagramEditorContextProvider>,
+    );
+
+    const modelElement = screen.getByTestId("test-model");
+    const errorsElement = screen.getByTestId("test-errors");
+
+    await waitFor(() => {
+      // Model is still returned as parsing succeeded but has validation errors
+      expect(modelElement).toBeInTheDocument();
+      expect(errorsElement).toHaveTextContent("1");
+    });
+  });
+
+  it("Parses empty workflow content into null model with errors", async () => {
+    render(
+      <DiagramEditorContextProvider content={""} isReadOnly={true} locale={"en"}>
+        <TestComponent />
+      </DiagramEditorContextProvider>,
+    );
+
+    const modelElement = screen.getByTestId("test-model");
+    const errorsElement = screen.getByTestId("test-errors");
+
+    await waitFor(() => {
+      // Model is null as parsing failed and errors are returned
+      expect(modelElement).toHaveTextContent("null");
+      expect(errorsElement).toHaveTextContent("1");
+    });
+  });
+
+  it("Updates model when content prop changes", async () => {
+    const { rerender } = render(
+      <DiagramEditorContextProvider
+        content={BASIC_VALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
+        <TestComponent />
+      </DiagramEditorContextProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("test-model")).toHaveTextContent("valid-workflow-yaml");
+      expect(screen.getByTestId("test-errors")).toHaveTextContent("0");
+    });
+
+    rerender(
+      <DiagramEditorContextProvider
+        content={BASIC_INVALID_WORKFLOW_YAML}
+        isReadOnly={true}
+        locale={"en"}
+      >
+        <TestComponent />
+      </DiagramEditorContextProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("test-errors")).toHaveTextContent("1");
+    });
+  });
 });