Fixed the subflow Jumpy rendering issue but the value updation is remaining

frontend/src/views/AngularWorkflow.jsx

@@ -522,7 +522,9 @@ const AngularWorkflow = (defaultprops) => {
 
   const [lastSaved, setLastSaved] = React.useState(true);
   const [selectionOpen, setSelectionOpen] = React.useState(false);
-
+  const [menuPosition, setMenuPosition] = useState(null);
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const [subflowActionList, setSubflowActionlist] = React.useState([]);
   // eslint-disable-next-line no-unused-vars
   const [_, setUpdate] = useState(""); // Used to force rendring, don't remove
 
@@ -538,7 +540,7 @@ const AngularWorkflow = (defaultprops) => {
 
   const [distributedFromParent, setDistributedFromParent] = React.useState("")
   const [suborgWorkflows, setSuborgWorkflows] = React.useState([])
-
+  const [subflowExec, setSubflowExec] = React.useState("")
   const [suggestionBox, setSuggestionBox] = React.useState({
   	"position": {
   		"top": 500,
@@ -547,7 +549,6 @@ const AngularWorkflow = (defaultprops) => {
   	"open": false,
   	"attachedTo": "",
   })
-
   useEffect(() => {
 	  if (!firstrequest && isLoaded && isLoggedIn && editWorkflowModalOpen === false) {
         saveWorkflow(workflow)
@@ -788,6 +789,148 @@ const releaseToConnectLabel = "Release to Connect"
 
   }, [selectedApp])
 
+  useEffect(() => {
+
+    const newActionList = [];
+    
+      // Process workflowExecutions
+      if (workflowExecutions.length > 0) {
+        for (let execution of workflowExecutions) {
+            const execArg = execution.execution_argument;
+            if (execArg && execArg.length > 0) {
+                const valid = validateJson(execArg);
+                if (valid.valid) {
+                    newActionList.push({
+                        type: "Execution Argument",
+                        name: "Execution Argument",
+                        value: "$exec",
+                        highlight: "exec",
+                        autocomplete: "exec",
+                        example: valid.result,
+                    });
+                    break;
+                }
+            }
+        }
+      }
+
+      if (newActionList.length === 0) {
+        // FIXME: Have previous execution values in here
+        newActionList.push({
+          type: "Execution Argument",
+          name: "Execution Argument",
+          value: "$exec",
+          highlight: "exec",
+          autocomplete: "exec",
+          example: "hello",
+        })
+        newActionList.push({
+          type: "Shuffle Database",
+          name: "Shuffle Database",
+          value: "$shuffle_cache",
+          highlight: "shuffle_db",
+          autocomplete: "shuffle_cache",
+          example: "hello",
+        })
+      }
+
+      if (
+        workflow.workflow_variables !== null &&
+        workflow.workflow_variables !== undefined &&
+        workflow.workflow_variables.length > 0
+      ) {
+        for (let varkey in workflow.workflow_variables) {
+          const item = workflow.workflow_variables[varkey];
+          newActionList.push({
+            type: "workflow_variable",
+            name: item.name,
+            value: item.value,
+            id: item.id,
+            autocomplete: `${item.name.split(" ").join("_")}`,
+            example: item.value,
+          });
+        }
+      }
+
+      // FIXME: Add values from previous executions if they exist
+      if (
+        workflow.execution_variables !== null &&
+        workflow.execution_variables !== undefined &&
+        workflow.execution_variables.length > 0
+      ) {
+        for (let varkey in workflow.execution_variables) {
+          const item = workflow.execution_variables[varkey];
+          newActionList.push({
+            type: "execution_variable",
+            name: item.name,
+            value: item.value,
+            id: item.id,
+            autocomplete: `${item.name.split(" ").join("_")}`,
+            example: "",
+          });
+        }
+      }
+
+      if(getParents){
+        var parents = getParents(selectedTrigger);
+        if (parents.length > 1) {
+          for (let parentkey in parents) {
+            const item = parents[parentkey];
+            if (item.label === "Execution Argument") {
+              continue;
+            }
+  
+            var exampledata = item.example === undefined ? "" : item.example;
+            // Find previous execution and their variables
+            if (workflowExecutions.length > 0) {
+              // Look for the ID
+              for (let execkey in workflowExecutions) {
+                if (
+                  workflowExecutions[execkey].results === undefined ||
+                  workflowExecutions[execkey].results === null
+                ) {
+                  continue;
+                }
+  
+                var foundResult = workflowExecutions[execkey].results.find(
+                  (result) => result.action.id === item.id
+                );
+                if (foundResult === undefined) {
+                  continue;
+                }
+  
+                const validated = validateJson(foundResult.result)
+                if (validated.valid) {
+                  exampledata = validateJson.result
+                  break
+                }
+              }
+            }
+  
+            // 1. Take
+            const actionvalue = {
+              type: "action",
+              id: item.id,
+              name: item.label,
+              autocomplete: `${item.label.split(" ").join("_")}`,
+              example: exampledata,
+            }
+            newActionList.push(actionvalue);
+          }
+        }
+      }
+
+      setSubflowActionlist(newActionList);
+
+  },[selectedTrigger, workflowExecutions]);
+
+
+  useEffect(() => {
+    if(selectedTrigger.parameters !== undefined && selectedTrigger.parameters.length > 1){
+    setSubflowExec(selectedTrigger?.parameters[1]?.value)
+    }
+  },[selectedTrigger,selectedTriggerIndex,subflowActionList]);
+
   const [executionArgumentModalOpen, setExecutionArgumentModalOpen] = React.useState(false);
 
   // This should all be set once, not on every iteration
@@ -4528,7 +4671,7 @@ const releaseToConnectLabel = "Release to Connect"
 	}
 
 
-
+  console.log("Selected Trigger: ", selectedTrigger)
   // Nodeselectbatching:
   // https://stackoverflow.com/questions/16677856/cy-onselect-callback-only-once
   // onNodeClick
@@ -4540,9 +4683,11 @@ const releaseToConnectLabel = "Release to Connect"
     const data = event.target.data()
 
     if (data.app_name === "Shuffle Workflow") {
-      if ((data.parameters !== undefined) && (data.parameters.length > 0)) {
+      if ((data.parameters !== undefined) && (data?.parameters?.length > 0)) {
         getWorkflowApps(data.parameters[0].value)
       }
+      console.log("data", data)
+      // setSubflowExec(data?.parameters[1]?.value)
     }
 
 	if (data.buttonType == "ACTIONSUGGESTION") {
@@ -10220,7 +10365,7 @@ const releaseToConnectLabel = "Release to Connect"
     var maxiter = 10;
     while (true) {
       for (let parentkey in allkeys) {
-        var currentnode = cy.getElementById(allkeys[parentkey]);
+        var currentnode = cy?.getElementById(allkeys[parentkey]);
         if (currentnode === undefined || currentnode === null) {
           continue;
         }
@@ -12660,162 +12805,6 @@ const releaseToConnectLabel = "Release to Connect"
     );
   };
 
-  const SubflowSidebar = () => {
-    const [menuPosition, setMenuPosition] = useState(null);
-    const [showDropdown, setShowDropdown] = React.useState(false);
-    const [actionlist, setActionlist] = React.useState([]);
-
-    if (actionlist.length === 0) {
-      // FIXME: Have previous execution values in here
-      actionlist.push({
-        type: "Execution Argument",
-        name: "Execution Argument",
-        value: "$exec",
-        highlight: "exec",
-        autocomplete: "exec",
-        example: "hello",
-      })
-      actionlist.push({
-        type: "Shuffle Database",
-        name: "Shuffle Database",
-        value: "$shuffle_cache",
-        highlight: "shuffle_db",
-        autocomplete: "shuffle_cache",
-        example: "hello",
-      })
-      if (
-        workflow.workflow_variables !== null &&
-        workflow.workflow_variables !== undefined &&
-        workflow.workflow_variables.length > 0
-      ) {
-        for (let varkey in workflow.workflow_variables) {
-          const item = workflow.workflow_variables[varkey];
-          actionlist.push({
-            type: "workflow_variable",
-            name: item.name,
-            value: item.value,
-            id: item.id,
-            autocomplete: `${item.name.split(" ").join("_")}`,
-            example: item.value,
-          });
-        }
-      }
-
-      // FIXME: Add values from previous executions if they exist
-      if (
-        workflow.execution_variables !== null &&
-        workflow.execution_variables !== undefined &&
-        workflow.execution_variables.length > 0
-      ) {
-        for (let varkey in workflow.execution_variables) {
-          const item = workflow.execution_variables[varkey];
-          actionlist.push({
-            type: "execution_variable",
-            name: item.name,
-            value: item.value,
-            id: item.id,
-            autocomplete: `${item.name.split(" ").join("_")}`,
-            example: "",
-          });
-        }
-      }
-
-      var parents = getParents(selectedTrigger);
-      if (parents.length > 1) {
-        for (let parentkey in parents) {
-          const item = parents[parentkey];
-          if (item.label === "Execution Argument") {
-            continue;
-          }
-
-          var exampledata = item.example === undefined ? "" : item.example;
-          // Find previous execution and their variables
-          if (workflowExecutions.length > 0) {
-            // Look for the ID
-            for (let execkey in workflowExecutions) {
-              if (
-                workflowExecutions[execkey].results === undefined ||
-                workflowExecutions[execkey].results === null
-              ) {
-                continue;
-              }
-
-              var foundResult = workflowExecutions[execkey].results.find(
-                (result) => result.action.id === item.id
-              );
-              if (foundResult === undefined) {
-                continue;
-              }
-
-              const validated = validateJson(foundResult.result)
-              if (validated.valid) {
-                exampledata = validateJson.result
-                break
-              }
-            }
-          }
-
-          // 1. Take
-          const actionvalue = {
-            type: "action",
-            id: item.id,
-            name: item.label,
-            autocomplete: `${item.label.split(" ").join("_")}`,
-            example: exampledata,
-          }
-          actionlist.push(actionvalue);
-        }
-      }
-
-      setActionlist(actionlist);
-    }
-
-
-      const handleMenuClose = () => {
-        setUpdate(Math.random());
-        setMenuPosition(null);
-      };
-
-      const handleItemClick = (values) => {
-        console.log("VALUES: ", values)
-        if (values === undefined || values === null || values.length === 0) {
-          return;
-        }
-
-
-        /*
-        workflow.triggers[selectedTriggerIndex].parameters[1].value
-          .trim()
-          .endsWith("$")
-          ? values[0].autocomplete
-          : "$" + values[0].autocomplete;
-
-        for (var key in values) {
-          if (key === 0 || values[key].autocomplete.length === 0) {
-            continue;
-          }
-
-          toComplete += values[key].autocomplete
-        }
-        */
-
-        console.log("SELECTED TRIGGER: ", selectedTrigger)
-        if (selectedTrigger.name === "Shuffle Workflow") {
-          const toComplete = selectedTrigger.parameters[1].value + "$" + values[0].autocomplete
-          selectedTrigger.parameters[1].value = toComplete
-          setSelectedTrigger(selectedTrigger)
-        }
-
-        setUpdate(Math.random());
-        setShowDropdown(false);
-        setMenuPosition(null);
-      };
-
-      const iconStyle = {
-        marginRight: 15,
-      };
-
-  
   if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
     if (workflow.triggers[selectedTriggerIndex] === undefined) {
       return null;
@@ -12872,7 +12861,7 @@ const releaseToConnectLabel = "Release to Connect"
       */
     }
 
-      const handleSubflowStartnodeSelection = (e) => {
+    var handleSubflowStartnodeSelection = (e) => {
       setSubworkflowStartnode(e.target.value);
 
       if (e.target.value === null || e.target.value === undefined) {
@@ -12944,10 +12933,11 @@ const releaseToConnectLabel = "Release to Connect"
       }
 
       setWorkflow(workflow);
+    };
   }
 
     
-	  const subflowtypes = [
+    var subflowtypes = [
       {
       name: "Any",
         },
@@ -12956,7 +12946,58 @@ const releaseToConnectLabel = "Release to Connect"
         }
     ]
 
-      return (
+
+    const handleMenuClose = () => {
+      setUpdate(Math.random());
+      setMenuPosition(null);
+    };
+
+    const handleItemClick = (values) => {
+        if (values === undefined || values === null || values.length === 0) {
+          return;
+        }
+
+
+        /*
+        workflow.triggers[selectedTriggerIndex].parameters[1].value
+          .trim()
+          .endsWith("$")
+          ? values[0].autocomplete
+          : "$" + values[0].autocomplete;
+
+        for (var key in values) {
+          if (key === 0 || values[key].autocomplete.length === 0) {
+            continue;
+          }
+
+          toComplete += values[key].autocomplete
+        }
+        */
+
+        if (selectedTrigger.name === "Shuffle Workflow") {
+          const toComplete = selectedTrigger.parameters[1].value + "$" + values[0].autocomplete
+          selectedTrigger.parameters[1].value = toComplete
+          // setSubflowExec(selectedTrigger.parameters[1].value)
+          setSelectedTrigger(selectedTrigger)
+          setWorkflow(workflow)
+        }
+
+        setUpdate(Math.random());
+        setShowDropdown(false);
+        setMenuPosition(null);
+    };
+
+    const handleSubflowExecChange = (e) => {
+        setSubflowExec(e.target.value)
+        // if(selectedTrigger.length > 0){
+        //   selectedTrigger.parameters[1].value = e.target.value
+        //   setSelectedTrigger(selectedTrigger)
+        //   setWorkflow(workflow)
+        //   setLastSaved(false)
+        // }
+    }
+
+   const SubflowSidebar =  Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined || selectedTrigger.trigger_type !== "SUBFLOW" ? null :
         <div style={appApiViewStyle}>
 		  <span style={{display: "flex", }}>
 		    <h3 style={{ marginBottom: "5px", flex: 3, }}>
@@ -13419,7 +13460,7 @@ const releaseToConnectLabel = "Release to Connect"
                               setCodeEditorModalOpen(true)
                               setActiveDialog("codeeditor")
                               //setcodedata(data.value)
-                              var parsedvalue = workflow.triggers[selectedTriggerIndex].parameters[1].value
+                              var parsedvalue = workflow?.triggers[selectedTriggerIndex]?.parameters[1]?.value
                               // if (parsedvalue === undefined || parsedvalue === null) {
                               //   parsedvalue = ""
                               // }
@@ -13427,14 +13468,14 @@ const releaseToConnectLabel = "Release to Connect"
                                 "name": workflow.triggers[selectedTriggerIndex].parameters[1].name,
                                 "value": parsedvalue,
                                 "field_number": 1,
-                                "actionlist": actionlist,
+                                "actionlist": subflowActionList,
                                 "field_id": "subflow_field",
                               })
                               setEditorData({
                                 "name": workflow.triggers[selectedTriggerIndex].parameters[1].name,
                                 "value": parsedvalue,
                                 "field_number": 1,
-                                "actionlist": actionlist,
+                                "actionlist": subflowActionList,
                                 "field_id": "subflow_field",
                               })
                             }}
@@ -13462,15 +13503,23 @@ const releaseToConnectLabel = "Release to Connect"
                 fullWidth
                 color="primary"
                 placeholder="Some execution data"
-                defaultValue={
+                // defaultValue={
-                  workflow.triggers[selectedTriggerIndex].parameters[1].value
+                //   workflow?.triggers[selectedTriggerIndex]?.parameters[1]?.value
-                }
+                // }
-                onBlur={(e) => {
+                value={subflowExec}
-      			  setLastSaved(false)
+                onChange={(e) => {
+                  // handleSubflowExecChange(e)
+                  setSubflowExec(e.target.value)
+                    // workflow.triggers[selectedTriggerIndex].parameters[1].value = e.target.value
+                    // setWorkflow(workflow)
 
-                  workflow.triggers[selectedTriggerIndex].parameters[1].value = e.target.value
-                  setWorkflow(workflow)
                 }}
+              //   onBlur={(e) => {
+      			  // setLastSaved(false)
+
+              //     // workflow.triggers[selectedTriggerIndex].parameters[1].value = e.target.value
+              //     // setWorkflow(workflow)
+              //   }}
               />
               {!showDropdown ? null :
 							  <Menu
@@ -13486,7 +13535,7 @@ const releaseToConnectLabel = "Release to Connect"
                   marginTop: 2,
                 }}
               >
-                {actionlist.map((innerdata) => {
+                {subflowActionList.map((innerdata) => {
                   const icon =
                     innerdata.type === "action" ? (
                       <AppsIcon style={{ marginRight: 10 }} />
@@ -13821,11 +13870,6 @@ const releaseToConnectLabel = "Release to Connect"
             </div>
           </div>
         </div>
-      );
-    }
-
-    return null;
-  };
 
   const CommentSidebar = () => {
     if (Object.getOwnPropertyNames(selectedComment).length > 0) {
@@ -20139,7 +20183,7 @@ const releaseToConnectLabel = "Release to Connect"
 	  {/* Looks for triggers" */}
 	  {/* Only fixed the ones that require scrolling on a small screen */}
 	  {/* Most important: Actions. But these are a lot more complex */}
-	  {rightSideBarOpen && (selectedTrigger.trigger_type === "SCHEDULE" || selectedTrigger.trigger_type === "WEBHOOK" || selectedTrigger.trigger_type === "PIPELINE" || selectedTrigger.trigger_type === "USERINPUT") ?
+	  {rightSideBarOpen && (selectedTrigger.trigger_type === "SCHEDULE" || selectedTrigger.trigger_type === "WEBHOOK" || selectedTrigger.trigger_type === "PIPELINE" || selectedTrigger.trigger_type === "USERINPUT" || selectedTrigger.trigger_type === "SUBFLOW") ?
 		  <div id="rightside_actions" style={rightsidebarStyle}>
 			  {Object.getOwnPropertyNames(selectedTrigger).length > 0 ? 
 				selectedTrigger.trigger_type === "SCHEDULE" ? 
@@ -20150,17 +20194,19 @@ const releaseToConnectLabel = "Release to Connect"
 					WebhookSidebar
         : selectedTrigger.trigger_type === "USERINPUT" ? 
           UserinputSidebar
+        : selectedTrigger.trigger_type === "SUBFLOW" ?
+          SubflowSidebar
 				: null 
 			  : null}
 		  </div>
 	  : null}
 
-    {
+    {/* {
       rightSideBarOpen && selectedTrigger.trigger_type === "SUBFLOW"&& Object.getOwnPropertyNames(selectedTrigger).length > 0   ? 
       <div id="rightside_actions" style={rightsidebarStyle}>
         <SubflowSidebar/>
         </div> : null
-    }
+    } */}
 	  
 	  {/*
       <RightSideBar