From b37eae37682e98384e1dafa9a42bae0832644825 Mon Sep 17 00:00:00 2001
From: lornakelly <lornakelly88@gmail.com>
Date: Tue, 9 Jun 2026 10:35:40 +0100
Subject: [PATCH] Convert source output from json to yaml

Signed-off-by: lornakelly <lornakelly88@gmail.com>
---
 .../src/side-panel/Fields.tsx                  | 10 +++++-----
 .../src/side-panel/NodeDetailsView.tsx         |  5 +++--
 .../src/side-panel/SidePanel.css               | 18 +++++++++---------
 .../tests/side-panel/NodeDetailsView.test.tsx  | 10 +++++-----
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/Fields.tsx b/packages/serverless-workflow-diagram-editor/src/side-panel/Fields.tsx
index 62da659..c8163b4 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/Fields.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/Fields.tsx
@@ -50,12 +50,12 @@ export function StackedField({ label, value }: { label: string; value: string })
   );
 }
 
-export function JsonField({ json, summary = "{...}" }: { json: string; summary?: string }) {
+export function YamlField({ yaml, summary = "{...}" }: { yaml: string; summary?: string }) {
   return (
-    <div className="dec-sidebar-json-field">
-      <details className="dec-sidebar-json-details">
-        <summary className="dec-sidebar-json-summary">{summary}</summary>
-        <pre className="dec-sidebar-json-pre">{json}</pre>
+    <div className="dec-sidebar-yaml-field">
+      <details className="dec-sidebar-yaml-details">
+        <summary className="dec-sidebar-yaml-summary">{summary}</summary>
+        <pre className="dec-sidebar-yaml-pre">{yaml}</pre>
       </details>
     </div>
   );
diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx b/packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
index 455a500..2c1ce88 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
@@ -15,10 +15,11 @@
  */
 
 import type * as RF from "@xyflow/react";
+import yaml from "js-yaml";
 import { useI18n } from "@serverlessworkflow/i18n";
 import { getTaskDetails, type DetailField } from "@/core/taskDetails";
 import type { BaseNodeData } from "@/react-flow/nodes/Nodes";
-import { JsonField, PropertyField, SectionHeader } from "./Fields";
+import { YamlField, PropertyField, SectionHeader } from "./Fields";
 
 type NodeDetailsViewProps = {
   node: RF.Node<BaseNodeData>;
@@ -68,7 +69,7 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) {
         <>
           <div className="dec-sidebar-section-spacer" />
           <SectionHeader label={t("sidebar.sectionSource")} />
-          <JsonField json={JSON.stringify(task, null, 2)} summary={t("sidebar.viewSource")} />
+          <YamlField yaml={yaml.dump(task, { indent: 2, lineWidth: -1 })} summary={t("sidebar.viewSource")} />
         </>
       )}
     </div>
diff --git a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css
index efe6005..d57621c 100644
--- a/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css
+++ b/packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css
@@ -238,36 +238,36 @@
     @apply dec:mt-4;
   }
 
-  /** collapsible JSON field */
-  .dec-root .dec-sidebar-json-field {
+  /** collapsible YAML field */
+  .dec-root .dec-sidebar-yaml-field {
     @apply dec:py-2 dec:px-1 dec:rounded-sm dec:border-b dec:border-gray-100 dec:transition-colors;
   }
 
-  .dec-root .dec-sidebar-json-field:hover {
+  .dec-root .dec-sidebar-yaml-field:hover {
     @apply dec:bg-gray-100/60;
   }
 
-  .dec-root.dark .dec-sidebar-json-field {
+  .dec-root.dark .dec-sidebar-yaml-field {
     @apply dec:border-gray-800;
   }
 
-  .dec-root.dark .dec-sidebar-json-field:hover {
+  .dec-root.dark .dec-sidebar-yaml-field:hover {
     @apply dec:bg-gray-800/40;
   }
 
-  .dec-root .dec-sidebar-json-summary {
+  .dec-root .dec-sidebar-yaml-summary {
     @apply dec:cursor-pointer dec:text-sm dec:font-semibold dec:text-gray-900 dec:select-none dec:rounded-sm;
   }
 
-  .dec-root.dark .dec-sidebar-json-summary {
+  .dec-root.dark .dec-sidebar-yaml-summary {
     @apply dec:text-gray-100;
   }
 
-  .dec-root .dec-sidebar-json-pre {
+  .dec-root .dec-sidebar-yaml-pre {
     @apply dec:mt-1 dec:max-h-64 dec:overflow-auto dec:rounded-md dec:bg-gray-100 dec:p-2 dec:text-xs dec:text-gray-800 dec:whitespace-pre-wrap dec:break-words;
   }
 
-  .dec-root.dark .dec-sidebar-json-pre {
+  .dec-root.dark .dec-sidebar-yaml-pre {
     @apply dec:bg-gray-800 dec:text-gray-200;
   }
 }
diff --git a/packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx b/packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
index 3ef73c8..72f6177 100644
--- a/packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
+++ b/packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
@@ -17,6 +17,7 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import type * as RF from "@xyflow/react";
+import yaml from "js-yaml";
 import { NodeDetailsView } from "../../src/side-panel/NodeDetailsView";
 import type { BaseNodeData } from "../../src/react-flow/nodes/Nodes";
 import { renderWithProviders } from "../test-utils/render-helpers";
@@ -72,17 +73,16 @@ describe("NodeDetailsView", () => {
     expect(screen.getByText("{...}")).toBeInTheDocument();
   });
 
-  it("renders a collapsed Source section with full json task", () => {
+  it("renders a collapsed Source section with full yaml task", () => {
     const task = { call: "http", with: { endpoint: "https://api.example.com" } };
     const node = makeNode({ label: "getPets", task });
 
     const { container } = renderWithProviders(<NodeDetailsView node={node} />);
 
     expect(screen.getByRole("heading", { name: "Source" })).toBeInTheDocument();
-    expect(container.querySelector(".dec-sidebar-json-summary")?.textContent).toBe("View source");
-    expect(container.querySelector(".dec-sidebar-json-pre")?.textContent).toBe(
-      JSON.stringify(task, null, 2),
-    );
+    expect(container.querySelector(".dec-sidebar-yaml-summary")?.textContent).toBe("View source");
+    expect(container.querySelector(".dec-sidebar-yaml-pre")?.textContent).toBe(
+      'call: http\nwith:\n  endpoint: https://api.example.com\n')
   });
 
   it("renders node details message when the task has no task", () => {