From d47ee8845457a8942fe38430be51fb61ddba8f3e Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:21:54 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20When=20saving=20the=20canvas,=20other?=
 =?UTF-8?q?=20dls=20parameters=20passed=20from=20the=20backend=20are=20spl?=
 =?UTF-8?q?iced=20=E2=80=8B=E2=80=8Binto=20the=20dsl=20parameters=20#3355?=
 =?UTF-8?q?=20(#3558)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What problem does this PR solve?

Feat: When saving the canvas, other dls parameters passed from the
backend are spliced ​​into the dsl parameters #3355
#3556

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/pages/flow/canvas/node/popover.tsx | 4 ++--
 web/src/pages/flow/hooks.tsx               | 1 +
 web/src/pages/flow/utils.ts                | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/flow/canvas/node/popover.tsx b/web/src/pages/flow/canvas/node/popover.tsx
index f943c2120..f9cb70bd5 100644
--- a/web/src/pages/flow/canvas/node/popover.tsx
+++ b/web/src/pages/flow/canvas/node/popover.tsx
@@ -35,10 +35,10 @@ export function NextNodePopover({ children, nodeId, name }: IProps) {
 
   const inputs: Array<{ component_id: string; content: string }> = get(
     component,
-    ['obj', 'params', 'inputs'],
+    ['obj', 'inputs'],
     [],
   );
-  const output = get(component, ['obj', 'params', 'output'], {});
+  const output = get(component, ['obj', 'output'], {});
   const { replacedOutput } = useReplaceIdWithText(output);
   const stopPropagation: MouseEventHandler = useCallback((e) => {
     e.stopPropagation();
diff --git a/web/src/pages/flow/hooks.tsx b/web/src/pages/flow/hooks.tsx
index e73455791..de630b945 100644
--- a/web/src/pages/flow/hooks.tsx
+++ b/web/src/pages/flow/hooks.tsx
@@ -268,6 +268,7 @@ export const useSaveGraph = () => {
       const dslComponents = buildDslComponentsByGraph(
         currentNodes ?? nodes,
         edges,
+        data.dsl.components,
       );
       return setFlow({
         id,
diff --git a/web/src/pages/flow/utils.ts b/web/src/pages/flow/utils.ts
index 3cf7f481d..e3b66d571 100644
--- a/web/src/pages/flow/utils.ts
+++ b/web/src/pages/flow/utils.ts
@@ -119,6 +119,7 @@ const buildOperatorParams = (operatorName: string) =>
 export const buildDslComponentsByGraph = (
   nodes: Node<NodeData>[],
   edges: Edge[],
+  oldDslComponents: DSLComponents,
 ): DSLComponents => {
   const components: DSLComponents = {};
 
@@ -129,6 +130,7 @@ export const buildDslComponentsByGraph = (
       const operatorName = x.data.label;
       components[id] = {
         obj: {
+          ...(oldDslComponents[id]?.obj ?? {}),
           component_name: operatorName,
           params:
             buildOperatorParams(operatorName)(