From a273aab2cc01c200179416b293b8c672d9b498b7 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 14 Sep 2023 21:51:55 -0300
Subject: [PATCH] fix(types): add 'readonly' property to TemplateVariableType
 to indicate if a variable is read-only fix(types): add 'selected' property to
 NodeType to indicate if a node is selected fix(reactflowUtils): change
 'dynamic' property to 'readonly' when updating group node template
 fix(reactflowUtils): update group node template fields with correct values
 and set 'selected' property to false

---
 src/frontend/src/types/api/index.ts      |  1 +
 src/frontend/src/types/flow/index.ts     |  1 +
 src/frontend/src/utils/reactflowUtils.ts | 22 +++++++++++-----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 2b46251a7..f9f9ccfd9 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -27,6 +27,7 @@ export type TemplateVariableType = {
   placeholder?: string;
   list: boolean;
   show: boolean;
+  readonly: boolean;
   multiline?: boolean;
   value?: any;
   dynamic?:boolean;
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 75b4031cf..edadbc23f 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -13,6 +13,7 @@ export type NodeType = {
   type?: string;
   position: XYPosition;
   data: NodeDataType;
+  selected?: boolean;
 };
 
 export type NodeDataType = {
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 18753a054..86bb4f6fa 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -534,7 +534,7 @@ function updateGroupNodeTemplate(template: APITemplateType) {
     ) {
       template[key].advanced = true;
       if (template[key].dynamic) {
-        template[key].dynamic = false;
+        template[key].readonly = true;
       }
     }
   });
@@ -789,7 +789,7 @@ export function expandGroupNode(
 ) {
   const {template} = groupNode.node!
   const {flow} = groupNode.node!;
-  const gNodes = _.cloneDeep(flow!.data!.nodes);
+  const gNodes:NodeType[] = _.cloneDeep(flow!.data!.nodes);
   const gEdges = flow!.data!.edges;
   //redirect edges to correct proxy node
   let updatedEdges: Edge[] = [];
@@ -840,17 +840,17 @@ export function expandGroupNode(
     let nodeIndex = gNodes.findIndex((n) => n.id === id);
     if (nodeIndex !== -1) {
       let display_name: string;
-      let show = gNodes[nodeIndex].data.node.template[field].show;
-      let advanced = gNodes[nodeIndex].data.node.template[field].advanced;
-      if (gNodes[nodeIndex].data.node.template[field].display_name) {
-        display_name = gNodes[nodeIndex].data.node.template[field].display_name;
+      let show = gNodes[nodeIndex].data.node!.template[field].show;
+      let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
+      if (gNodes[nodeIndex].data.node!.template[field].display_name) {
+        display_name = gNodes[nodeIndex].data.node!.template[field].display_name;
       } else {
-        display_name = gNodes[nodeIndex].data.node.template[field].name;
+        display_name = gNodes[nodeIndex].data.node!.template[field].name;
       }
-      gNodes[nodeIndex].data.node.template[field] = template[key];
-      gNodes[nodeIndex].data.node.template[field].show = show;
-      gNodes[nodeIndex].data.node.template[field].advanced = advanced;
-      gNodes[nodeIndex].data.node.template[field].display_name = display_name;
+      gNodes[nodeIndex].data.node!.template[field] = template[key];
+      gNodes[nodeIndex].data.node!.template[field].show = show;
+      gNodes[nodeIndex].data.node!.template[field].advanced = advanced;
+      gNodes[nodeIndex].data.node!.template[field].display_name = display_name;
       gNodes[nodeIndex].selected=false;
     }
   });