Skip to content

Commit fe21f90

Browse files
lucaseduoliCristhianzlanovazzi1
authored
fix: prompt template not being saved on advanced modal (#2488)
* Fixed dbvalue on table node cell renderer * Added Change Advanced hook * Added Handle New Value hook * Added Handle Node Class hook * Added Node Class handler to TableNodeCellRender * Removed internal state of EditNode, added internal state for NodeClass and made the rows and columns be updated when NodeClass changes * Added NodeClass as dependencies on useMemo to update columns when NodeClass changes * Fixed advanced not changing the node * feat: updating tests without save btn * Added Close button on editNode --------- Co-authored-by: cristhianzl <cristhian.lousa@gmail.com> Co-authored-by: anovazzi1 <otavio2204@gmail.com>
1 parent 74845ff commit fe21f90

20 files changed

+259
-85
lines changed

‎src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { CustomCellRendererProps } from "ag-grid-react";
22
import { cloneDeep } from "lodash";
33
import { useState } from "react";
44
import useFlowStore from "../../../../stores/flowStore";
5+
import { APIClassType } from "../../../../types/api";
56
import {
67
convertObjToArray,
78
convertValuesToNumbers,
@@ -24,24 +25,31 @@ import ToggleShadComponent from "../../../toggleShadComponent";
2425

2526
export default function TableNodeCellRender({
2627
node: { data },
27-
value: { value, nodeClass, handleOnNewValue: handleOnNewValueNode },
28+
value: {
29+
value,
30+
nodeClass,
31+
handleOnNewValue: handleOnNewValueNode,
32+
handleNodeClass,
33+
},
2834
}: CustomCellRendererProps) {
2935
const handleOnNewValue = (newValue: any, name: string, dbValue?: boolean) => {
3036
handleOnNewValueNode(newValue, name, dbValue);
3137
setTemplateData((old) => {
3238
let newData = cloneDeep(old);
3339
newData.value = newValue;
34-
if (dbValue) {
40+
if (dbValue !== undefined) {
3541
newData.load_from_db = newValue;
3642
}
3743
return newData;
3844
});
3945
setTemplateValue(newValue);
4046
};
47+
const setNodeClass = (value: APIClassType, code?: string, type?: string) => {
48+
handleNodeClass(value, templateData.key, code, type);
49+
};
4150

4251
const [templateValue, setTemplateValue] = useState(value);
4352
const [templateData, setTemplateData] = useState(data);
44-
4553
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
4654
const edges = useFlowStore((state) => state.edges);
4755

@@ -220,9 +228,7 @@ export default function TableNodeCellRender({
220228
editNode={true}
221229
disabled={disabled}
222230
nodeClass={nodeClass}
223-
setNodeClass={(value) => {
224-
nodeClass = value;
225-
}}
231+
setNodeClass={setNodeClass}
226232
value={templateValue ?? ""}
227233
onChange={(value: string | string[]) => {
228234
handleOnNewValue(value, templateData.key);
@@ -237,9 +243,7 @@ export default function TableNodeCellRender({
237243
<CodeAreaComponent
238244
readonly={nodeClass.flow && templateData.dynamic ? true : false}
239245
dynamic={templateData.dynamic ?? false}
240-
setNodeClass={(value) => {
241-
nodeClass = value;
242-
}}
246+
setNodeClass={setNodeClass}
243247
nodeClass={nodeClass}
244248
disabled={disabled}
245249
editNode={true}

‎src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import { ColDef, ValueGetterParams } from "ag-grid-community";
2-
import { useMemo } from "react";
2+
import { useMemo, useState } from "react";
33
import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
44
import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
5+
import { APIClassType } from "../../../types/api";
56
import { NodeDataType } from "../../../types/flow";
67

78
const useColumnDefs = (
8-
myData: NodeDataType,
9+
nodeClass: APIClassType,
910
handleOnNewValue: (newValue: any, name: string, setDb?: boolean) => void,
11+
handleNodeClass: (
12+
newNodeClass: APIClassType,
13+
name: string,
14+
code: string,
15+
type?: string,
16+
) => void,
1017
changeAdvanced: (n: string) => void,
1118
open: boolean,
1219
) => {
@@ -46,8 +53,9 @@ const useColumnDefs = (
4653
valueGetter: (params: ValueGetterParams) => {
4754
return {
4855
value: params.data.value,
49-
nodeClass: myData.node,
56+
nodeClass: nodeClass,
5057
handleOnNewValue: handleOnNewValue,
58+
handleNodeClass: handleNodeClass,
5159
};
5260
},
5361
minWidth: 340,
@@ -75,7 +83,7 @@ const useColumnDefs = (
7583
cellClass: "no-border",
7684
},
7785
],
78-
[open, myData],
86+
[open, nodeClass],
7987
);
8088

8189
return columnDefs;

‎src/frontend/src/modals/editNodeModal/hooks/use-handle-change-advanced.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { cloneDeep } from "lodash";
2+
import { NodeDataType } from "../../../types/flow";
3+
4+
const useHandleChangeAdvanced = (
5+
data: NodeDataType,
6+
takeSnapshot: () => void,
7+
setNode: (id: string, callback: (oldNode: any) => any) => void,
8+
updateNodeInternals: (id: string) => void,
9+
) => {
10+
const handleChangeAdvanced = (name) => {
11+
if (!data.node) return;
12+
takeSnapshot();
13+
14+
setNode(data.id, (oldNode) => {
15+
let newNode = cloneDeep(oldNode);
16+
17+
newNode.data.node.template[name].advanced =
18+
!newNode.data.node.template[name].advanced;
19+
20+
return newNode;
21+
});
22+
23+
updateNodeInternals(data.id);
24+
};
25+
26+
return { handleChangeAdvanced };
27+
};
28+
29+
export default useHandleChangeAdvanced;

‎src/frontend/src/modals/editNodeModal/hooks/use-handle-new-value.tsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { cloneDeep } from "lodash";
2+
import {
3+
ERROR_UPDATING_COMPONENT,
4+
TITLE_ERROR_UPDATING_COMPONENT,
5+
} from "../../../constants/constants";
6+
import useAlertStore from "../../../stores/alertStore";
7+
import { ResponseErrorTypeAPI } from "../../../types/api";
8+
import { NodeDataType } from "../../../types/flow";
9+
10+
const useHandleOnNewValue = (
11+
data: NodeDataType,
12+
takeSnapshot: () => void,
13+
handleUpdateValues: (name: string, data: NodeDataType) => Promise<any>,
14+
debouncedHandleUpdateValues: any,
15+
setNode: (id: string, callback: (oldNode: any) => any) => void,
16+
) => {
17+
const setErrorData = useAlertStore((state) => state.setErrorData);
18+
19+
const handleOnNewValue = async (
20+
newValue,
21+
name,
22+
dbValue,
23+
skipSnapshot = false,
24+
) => {
25+
const nodeTemplate = data.node!.template[name];
26+
const currentValue = nodeTemplate.value;
27+
28+
if (currentValue !== newValue && !skipSnapshot) {
29+
takeSnapshot();
30+
}
31+
32+
const shouldUpdate =
33+
data.node?.template[name].real_time_refresh &&
34+
!data.node?.template[name].refresh_button &&
35+
currentValue !== newValue;
36+
37+
const typeToDebounce = nodeTemplate.type;
38+
39+
nodeTemplate.value = newValue;
40+
41+
let newTemplate;
42+
if (shouldUpdate) {
43+
try {
44+
if (["int"].includes(typeToDebounce)) {
45+
newTemplate = await handleUpdateValues(name, data);
46+
} else {
47+
newTemplate = await debouncedHandleUpdateValues(name, data);
48+
}
49+
} catch (error) {
50+
let responseError = error as ResponseErrorTypeAPI;
51+
setErrorData({
52+
title: TITLE_ERROR_UPDATING_COMPONENT,
53+
list: [
54+
responseError?.response?.data?.detail.error ??
55+
ERROR_UPDATING_COMPONENT,
56+
],
57+
});
58+
}
59+
}
60+
61+
setNode(data.id, (oldNode) => {
62+
const newNode = cloneDeep(oldNode);
63+
newNode.data = {
64+
...newNode.data,
65+
};
66+
67+
if (dbValue !== undefined) {
68+
newNode.data.node.template[name].load_from_db = dbValue;
69+
}
70+
71+
if (data.node?.template[name].real_time_refresh && newTemplate) {
72+
newNode.data.node.template = newTemplate;
73+
} else {
74+
newNode.data.node.template[name].value = newValue;
75+
}
76+
77+
return newNode;
78+
});
79+
};
80+
81+
return { handleOnNewValue };
82+
};
83+
84+
export default useHandleOnNewValue;

‎src/frontend/src/modals/editNodeModal/hooks/use-handle-node-class.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { cloneDeep } from "lodash";
2+
import { NodeDataType } from "../../../types/flow";
3+
4+
const useHandleNodeClass = (
5+
data: NodeDataType,
6+
takeSnapshot: () => void,
7+
setNode: (id: string, callback: (oldNode: any) => any) => void,
8+
updateNodeInternals: (id: string) => void,
9+
) => {
10+
const handleNodeClass = (newNodeClass, name, code, type?: string) => {
11+
if (!data.node) return;
12+
if (data.node!.template[name].value !== code) {
13+
takeSnapshot();
14+
}
15+
16+
setNode(data.id, (oldNode) => {
17+
let newNode = cloneDeep(oldNode);
18+
19+
newNode.data = {
20+
...newNode.data,
21+
node: newNodeClass,
22+
description: newNodeClass.description ?? data.node!.description,
23+
display_name: newNodeClass.display_name ?? data.node!.display_name,
24+
};
25+
if (type) {
26+
newNode.data.node.template[name].type = type;
27+
}
28+
newNode.data.node.template[name].value = code;
29+
30+
return newNode;
31+
});
32+
33+
updateNodeInternals(data.id);
34+
};
35+
36+
return { handleNodeClass };
37+
};
38+
39+
export default useHandleNodeClass;

‎src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { useMemo } from "react";
22
import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants";
3+
import { APIClassType } from "../../../types/api";
34
import { NodeDataType } from "../../../types/flow";
45

5-
const useRowData = (myData: NodeDataType, open: boolean) => {
6+
const useRowData = (
7+
myData: NodeDataType,
8+
nodeClass: APIClassType,
9+
open: boolean,
10+
) => {
611
const rowData = useMemo(() => {
712
return Object.keys(myData.node!.template)
813
.filter((key: string) => {
@@ -25,7 +30,7 @@ const useRowData = (myData: NodeDataType, open: boolean) => {
2530
id: key,
2631
};
2732
});
28-
}, [open, myData]);
33+
}, [open, nodeClass]);
2934

3035
return rowData;
3136
};

0 commit comments

Comments
 (0)