Added basic frontend elements for timing actions

frontend/src/components/ParsedAction.jsx

@@ -161,6 +161,8 @@ const ParsedAction = (props) => {
     authenticationType,
     appAuthentication,
     getAppAuthentication,
+		actionDelayChange,
+		isCloud,
   } = props;
 
   //const theme = useTheme();
@@ -1015,6 +1017,26 @@ const ParsedAction = (props) => {
 							<b>Parameters</b>
 						</Button>
 					</Tooltip>
+        	{selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 &&  hiddenDescription === false ? (
+						<div
+							style={{
+								border: "1px solid rgba(255,255,255,0.6)",
+								borderRadius: theme.palette.borderRadius,
+								marginTop: 15,
+								marginBottom: 10,
+								maxHeight: 70,
+								overflow: "auto",
+								padding: 15, 
+							}}
+						>
+							<Typography style={{}}>
+								<b>Description</b>
+							</Typography>
+							<Typography style={{}}>
+								{selectedAction.description}
+							</Typography>
+						</div>
+					) : null}
           {selectedActionParameters.map((data, count) => {
             if (data.variant === "") {
               data.variant = "STATIC_VALUE";
@@ -2282,6 +2304,7 @@ const ParsedAction = (props) => {
 										<AutoFixHighIcon style={{ color: selectedAction.run_magic_output === undefined || selectedAction.run_magic_output === null || selectedAction.run_magic_output === false ? "white" : "#f86a3e"}} />
                   </Tooltip>
                 </IconButton>
+
               </div>
             </div>
             <div style={{ display: "flex", flexDirection: "column" }}>
@@ -2351,39 +2374,76 @@ const ParsedAction = (props) => {
               backgroundColor: "rgb(91, 96, 100)",
             }}
           />
-          <Typography>Name</Typography>
-          <TextField
-            style={theme.palette.textFieldStyle}
-            InputProps={{
-              style: theme.palette.innerTextfieldStyle,
-            }}
-            fullWidth
-            color="primary"
-            placeholder={selectedAction.label}
-            defaultValue={selectedAction.label}
-            onChange={selectedNameChange}
-            onBlur={(e) => {
-              const name = e.target.value;
-              console.log("CHANGED FROM2: ", baselabel);
-              console.log("CHANGED TO: ", name);
-              for (var key in workflow.actions) {
-                for (var subkey in workflow.actions[key].parameters) {
-                  const param = workflow.actions[key].parameters[subkey];
-                  if (param.value.includes(baselabel)) {
-                    //if (param.value.toLowerCase().includes(baselabel)) {
-                    console.log("FOUND: ", param);
-                    workflow.actions[key].parameters[subkey].value.replaceAll(
-                      baselabel,
-                      e.target.value
-                    );
-                  }
-                }
-              }
+					<div style={{display: "flex"}}>
+						<div style={{flex: 5}}>
+							<Typography>Name</Typography>
+							<TextField
+								style={theme.palette.textFieldStyle}
+								InputProps={{
+									style: theme.palette.innerTextfieldStyle,
+								}}
+								fullWidth
+								color="primary"
+								placeholder={selectedAction.label}
+								defaultValue={selectedAction.label}
+								onChange={selectedNameChange}
+								onBlur={(e) => {
+									const name = e.target.value;
+									console.log("CHANGED FROM2: ", baselabel);
+									console.log("CHANGED TO: ", name);
+									for (var key in workflow.actions) {
+										for (var subkey in workflow.actions[key].parameters) {
+											const param = workflow.actions[key].parameters[subkey];
+											if (param.value.includes(baselabel)) {
+												//if (param.value.toLowerCase().includes(baselabel)) {
+												console.log("FOUND: ", param);
+												workflow.actions[key].parameters[subkey].value.replaceAll(
+													baselabel,
+													e.target.value
+												);
+											}
+										}
+									}
 
-              console.log("DID REPLACE ACTUALLY WORK?? - Something is buggy.");
-              setWorkflow(workflow);
-            }}
-          />
+									console.log("DID REPLACE ACTUALLY WORK?? - Something is buggy.");
+									setWorkflow(workflow);
+								}}
+							/>
+						</div>
+						{!isCloud ? null :
+							<div style={{flex: 1, marginLeft: 5,}}>
+								<Tooltip
+									color="primary"
+									title={"Delay before action executes (in seconds)"}
+									placement="top"
+								>
+									<span>
+										<Typography>Delay</Typography>
+										<TextField
+											style={{
+												backgroundColor: theme.palette.inputColor,
+												borderRadius: theme.palette.borderRadius,
+												color: "white",
+												width: 50,
+												height: 50,
+												fontSize: "1em",
+											}}
+											InputProps={{
+												style: theme.palette.innerTextfieldStyle,
+											}}
+											placeholder={selectedAction.execution_delay}
+											defaultValue={selectedAction.execution_delay}
+											onChange={(event) => {
+												if (actionDelayChange !== undefined) {
+													actionDelayChange(event) 
+												}
+											}}
+										/>
+									</span>
+								</Tooltip>
+							</div>
+						}
+					</div>
         </span>
       )}
       {selectedApp.name !== undefined &&
@@ -2792,27 +2852,6 @@ const ParsedAction = (props) => {
 					</Select>
 				: null*/}
 
-        {selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 &&  hiddenDescription === false ? (
-						<div
-							style={{
-								border: "1px solid rgba(255,255,255,0.6)",
-								borderRadius: theme.palette.borderRadius,
-								marginTop: 15,
-								marginBottom: 10,
-								maxHeight: 60,
-								overflow: "hidden",
-								padding: 15, 
-							}}
-						>
-							<Typography style={{}}>
-								<b>Description</b>
-							</Typography>
-							<Typography style={{}}>
-								{selectedAction.description}
-							</Typography>
-						</div>
-					) : null}
-
         <div
           style={{
             marginTop: "10px",

frontend/src/components/ShuffleCodeEditor.jsx

@@ -13,6 +13,8 @@ import {
 } from "@material-ui/icons";
 
 import { useTheme } from '@material-ui/core/styles';
+import { validateJson } from "../views/Workflows.jsx";
+import ReactJson from "react-json-view";
 
 import CodeMirror from '@uiw/react-codemirror';
 import 'codemirror/keymap/sublime';
@@ -23,18 +25,9 @@ const CodeEditor = (props) => {
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
   // const {codelang, setcodelang} = props
   const theme = useTheme();
-	const [validation, setvalidation] = React.useState(" ");
-	const [expOutput, setexpOutput] = React.useState(" ");
+	const [validation, setValidation] = React.useState(false);
+	const [expOutput, setExpOutput] = React.useState(" ");
 
-	function IsJsonString(str) {
-		try {
-			var o = JSON.parse(str);
-	    if (o && typeof o === "object") {
-				setvalidation("Correct!")
-			}
-		} catch (e) {setvalidation("Incorrect!");}
-	}
-	
 	function expectedOutput(input) {
 		
 		const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
@@ -56,21 +49,15 @@ const CodeEditor = (props) => {
 			}
 		} catch (e) {}
 
-		try {
-			// var x = document.getElementById("expOutput");
-			// x.innerHTML = JSON.stringify(JSON.parse(input), null, 4)
-			setexpOutput(JSON.stringify(JSON.parse(input), null, 4))
-		} catch (e) {
-			setexpOutput(input)
+		const tmpValidation = validateJson(input.valueOf()) 
+		//setValidation(true)
+		if (tmpValidation.valid === true) {
+			setValidation(true)
+			setExpOutput(tmpValidation.result)
+		} else {
+			setExpOutput(input.valueOf())
+			setValidation(false)
 		}
-
-		// const obj = JSON.parse(input);
-		// setexpOutput(JSON.stringify(JSON.parse(input), null, 4))
-		// x.innerHTML = "<span style='font-size: 30px'>" + JSON.stringify(input, null, 4) + "</span>"
-		// x.appendChild(document.createTextNode(JSON.stringify(JSON.parse(input), null, 4)));
-		// setexpOutput(JSON.stringify(input, undefined, 4).replace('\ ', '\n'))
-		// setexpOutput("Hi there \n Hey there")
-		// Variables + Syntax highlighting + Validation
 	}
 
 	return (
@@ -108,14 +95,12 @@ const CodeEditor = (props) => {
 			}}>
 				<CodeMirror
 					value = {localcodedata}
-					height="200px"
+					height="250px"
 					style={{
 					}}
 					onChange={(value) => {
 						setlocalcodedata(value.getValue())
 						expectedOutput(value.getValue())
-						IsJsonString(value.getValue())
-						// console.log(actionlist.slice(-1))
 					}}
 					options={{
 						theme: 'gruvbox-dark',
@@ -141,22 +126,47 @@ const CodeEditor = (props) => {
 						Output
 					</span>
 				</DialogTitle>
-				<p
-					id='expOutput'
-					style={{
-						whiteSpace: "pre-wrap",
-						color: "#f85a3e",
-						fontFamily: "monospace",
-						backgroundColor: "#282828",
-						padding: 20,
-						marginTop: -2,
-						border: `2px solid ${theme.palette.inputColor}`,
-						borderRadius: theme.palette.borderRadius,
-						maxHeight: 400,
-					}}
-				>
-					{expOutput}
-				</p>
+				{validation === true ? 
+					<ReactJson
+						src={expOutput}
+						theme={theme.palette.jsonTheme}
+						style={{
+							borderRadius: 5,
+							border: "1px solid rgba(255,255,255,0.7)",
+							padding: 5, 
+							maxHeight: 250, 
+							minheight: 250, 
+							overflow: "auto",
+						}}
+						collapsed={false}
+						enableClipboard={(copy) => {
+							//handleReactJsonClipboard(copy);
+						}}
+						displayDataTypes={false}
+						onSelect={(select) => {
+							//HandleJsonCopy(validate.result, select, "exec");
+						}}
+						name={"JSON autocompletion"}
+					/>
+				:
+					<p
+						id='expOutput'
+						style={{
+							whiteSpace: "pre-wrap",
+							color: "#f85a3e",
+							fontFamily: "monospace",
+							backgroundColor: "#282828",
+							padding: 20,
+							marginTop: -2,
+							border: `2px solid ${theme.palette.inputColor}`,
+							borderRadius: theme.palette.borderRadius,
+							maxHeight: 250,
+							overflow: "auto", 
+						}}
+					>
+						{expOutput}
+					</p>
+				}
 				<p
 					style={{
 						color: "white",
@@ -166,7 +176,7 @@ const CodeEditor = (props) => {
 						marginTop: -15,
 					}}
 				>
-					JSON Validation: {validation}
+					JSON Validation: {validation ? "Correct" : "Incorrect"}
 				</p>
 			</div>
 

frontend/src/views/AngularWorkflow.jsx

@@ -2173,11 +2173,9 @@ const AngularWorkflow = (defaultprops) => {
 			// FIXME: Trust it to just work?
 			//event.target.data()
       var curaction = workflow.actions.find((a) => a.id === data.id);
-			var newapps = JSON.parse(JSON.stringify(apps))
       if (!curaction || curaction === undefined) {
 				console.log("NOT FOUND DATA: ", event.target.data())
 				if (data.id !== undefined && data.app_name !== undefined) {
-					//newapps.push(data)
 					workflow.actions.push(data)
 					setWorkflow(workflow)
 					curaction = data
@@ -2188,6 +2186,7 @@ const AngularWorkflow = (defaultprops) => {
 				}
       }
 
+			var newapps = JSON.parse(JSON.stringify(apps))
       const curapp = newapps.find(
         (a) =>
           a.name === curaction.app_name &&
@@ -5310,13 +5309,10 @@ const AngularWorkflow = (defaultprops) => {
 				}
 
 				const newParamIndex = newSelectedAction.parameters.findIndex(paramdata => paramdata.name === param.name)
-				console.log("INDEX: ", newParamIndex)
 				if (newParamIndex < 0) {
-					console.log("NOT FOUND: ", param)
 					continue
 				}
 
-				console.log("FOUND: ", param)
 				newSelectedAction.parameters[newParamIndex].value = param.value
 			}
 		}
@@ -5352,8 +5348,6 @@ const AngularWorkflow = (defaultprops) => {
     // based on previous actions'
     newSelectedAction = RunAutocompleter(newSelectedAction);
 
-    console.log("ACTION: ", newSelectedAction);
-
     if (
       newaction.returns.example !== undefined &&
       newaction.returns.example !== null &&
@@ -5377,7 +5371,17 @@ const AngularWorkflow = (defaultprops) => {
     //}
     //setSelectedActionEnvironment(env)
 
+
+    console.log("ACTION: ", newSelectedAction);
     setSelectedAction(newSelectedAction);
+		if (workflow.actions !== undefined && workflow.actions !== null && workflow.actions.length > 0) {
+			const foundActionIndex = workflow.actions.findIndex(actiondata => actiondata.id === newSelectedAction.id)
+			console.log("Found action on index ", foundActionIndex)
+			if (foundActionIndex >= 0) {
+				workflow.actions[foundActionIndex] = newSelectedAction
+				setWorkflow(workflow)
+			}
+		}
     setUpdate(Math.random());
 
     // FIXME - should change icon-node (descriptor) as well
@@ -5406,7 +5410,6 @@ const AngularWorkflow = (defaultprops) => {
   // appname & version
   // description
   // ACTION select
-  //
   const selectedNameChange = (event) => {
     event.target.value = event.target.value.replaceAll("(", "");
     event.target.value = event.target.value.replaceAll(")", "");
@@ -5429,6 +5432,22 @@ const AngularWorkflow = (defaultprops) => {
     setSelectedAction(selectedAction);
   };
 
+	const actionDelayChange = (event) => {
+		if (isNaN(event.target.value)) {
+			console.log("NAN: ", event.target.value)
+			return
+		}
+
+		const parsedNumber = parseInt(event.target.value)
+		if (parsedNumber > 86400) {
+			console.log("Max number is 1 day (86400)")
+			return
+		}
+
+		selectedAction.execution_delay = parsedNumber
+    setSelectedAction(selectedAction)
+	}
+
   const selectedTriggerChange = (event) => {
     selectedTrigger.label = event.target.value;
     setSelectedTrigger(selectedTrigger);
@@ -7595,6 +7614,10 @@ const AngularWorkflow = (defaultprops) => {
 			const handleSubflowStartnodeSelection = (e) => {
 				setSubworkflowStartnode(e.target.value);
 
+				if (e.target.value === null || e.target.value === undefined) {
+					return
+				}
+
 				const branchId = uuidv4();
 				const newbranch = {
 					source_id: workflow.triggers[selectedTriggerIndex].id,
@@ -7736,26 +7759,75 @@ const AngularWorkflow = (defaultprops) => {
               backgroundColor: "rgb(91, 96, 100)",
             }}
           />
-          <div>Name</div>
-          <TextField
-            style={{
-              backgroundColor: inputColor,
-              borderRadius: theme.palette.borderRadius,
-            }}
-            InputProps={{
-              style: {
-                color: "white",
-                marginLeft: "5px",
-                maxWidth: "95%",
-                height: 50,
-                fontSize: "1em",
-              },
-            }}
-            fullWidth
-            color="primary"
-            placeholder={selectedTrigger.label}
-            onChange={selectedTriggerChange}
-          />
+					<div style={{display: "flex"}}>
+						<div style={{flex: 5}}>
+          		<Typography>Name</Typography>
+							<TextField
+								style={{
+									backgroundColor: inputColor,
+									borderRadius: theme.palette.borderRadius,
+								}}
+								InputProps={{
+									style: {
+										color: "white",
+										marginLeft: "5px",
+										maxWidth: "95%",
+										height: 50,
+										fontSize: "1em",
+									},
+								}}
+								fullWidth
+								color="primary"
+								placeholder={selectedTrigger.label}
+								onChange={selectedTriggerChange}
+							/>
+						</div>
+						<div>
+						{!isCloud  ? null :
+							<div style={{flex: 1, marginLeft: 5,}}>
+								<Tooltip
+									color="primary"
+									title={"Delay before action executes (in seconds)"}
+									placement="top"
+								>
+									<span>
+										<Typography>Delay</Typography>
+										<TextField
+											style={{
+												backgroundColor: theme.palette.inputColor,
+												borderRadius: theme.palette.borderRadius,
+												color: "white",
+												width: 50,
+												height: 50,
+												fontSize: "1em",
+											}}
+											InputProps={{
+												style: theme.palette.innerTextfieldStyle,
+											}}
+											placeholder={selectedTrigger.execution_delay}
+											defaultValue={selectedAction.execution_delay}
+											onChange={(event) => {
+												if (isNaN(event.target.value)) {
+													console.log("NAN: ", event.target.value)
+													return
+												}
+
+												const parsedNumber = parseInt(event.target.value)
+												if (parsedNumber > 86400) {
+													console.log("Max number is 1 day (86400)")
+													return
+												}
+
+												selectedTrigger.execution_delay = parseInt(event.target.value)
+												setSelectedTrigger(selectedTrigger)
+											}}
+										/>
+									</span>
+								</Tooltip>
+							</div>
+							}
+						</div>
+					</div>
           <FormControlLabel
             control={
               <Checkbox
@@ -7798,18 +7870,39 @@ const AngularWorkflow = (defaultprops) => {
           />
           <div style={{ flex: "6", marginTop: "20px" }}>
             <div>
-              <b>Parameters</b>
-              <div
-                style={{
-                  marginTop: "20px",
-                  marginBottom: "7px",
-                  display: "flex",
-                }}
-              >
-                <div style={{ flex: "10" }}>
-                  <b>Select a workflow to execute </b>
-                </div>
-              </div>
+							<div style={{display: "flex"}}>
+								<div
+									style={{
+										marginTop: "20px",
+										marginBottom: "7px",
+										display: "flex",
+										flex: 5,
+									}}
+								>
+									<div style={{ flex: "10" }}>
+										<b>Select a workflow to execute </b>
+									</div>
+								</div>
+              		{workflow.triggers[selectedTriggerIndex].parameters[0].value
+              		  .length === 0 ? null : workflow.triggers[selectedTriggerIndex]
+              		    .parameters[0].value === props.match.params.key ? null : (
+										<div style={{marginLeft: 5, flex: 1}}>
+											<a
+												rel="noopener noreferrer"
+												href={`/workflows/${workflow.triggers[selectedTriggerIndex].parameters[0].value}`}
+												target="_blank"
+												style={{
+													textDecoration: "none",
+													color: "#f85a3e",
+													marginLeft: 5,
+													marginTop: 10,
+												}}
+											>
+												<OpenInNewIcon />
+											</a>
+										</div>
+              		)}
+							</div>
 						{workflows === undefined ||
 						workflows === null ||
 						workflows.length === 0 ? null : (
@@ -7832,7 +7925,7 @@ const AngularWorkflow = (defaultprops) => {
           		      option.name === undefined ||
           		      option.name === null 
           		    ) {
-          		      return "Loading";
+          		      return "No Workflow Selected";
           		    }
 
           		    const newname = (
@@ -7883,24 +7976,6 @@ const AngularWorkflow = (defaultprops) => {
           		  }}
           		/>
               )}
-              {workflow.triggers[selectedTriggerIndex].parameters[0].value
-                .length === 0 ? null : workflow.triggers[selectedTriggerIndex]
-                  .parameters[0].value === props.match.params.key ? null : (
-                <span style={{ marginTop: 5 }}>
-                  <a
-                    rel="noopener noreferrer"
-                    href={`/workflows/${workflow.triggers[selectedTriggerIndex].parameters[0].value}`}
-                    target="_blank"
-                    style={{
-                      textDecoration: "none",
-                      color: "#f85a3e",
-                      marginLeft: 5,
-                    }}
-                  >
-                    Explore selected workflow
-                  </a>
-                </span>
-              )}
 
               {subworkflow === undefined ||
               subworkflow === null ||
@@ -8131,7 +8206,7 @@ const AngularWorkflow = (defaultprops) => {
 			} else {
 				// Always update
 				const newUrl = referenceUrl+"webhook_"+selectedTrigger.id
-				console.log("Validating webhook url: ", newUrl)
+				//console.log("Validating webhook url: ", newUrl)
 				if (newUrl !== workflow.triggers[selectedTriggerIndex].parameters[0].value) {
 					console.log("Url is wrong - updating")
 					workflow.triggers[selectedTriggerIndex].parameters[0].value = newUrl
@@ -8336,7 +8411,7 @@ const AngularWorkflow = (defaultprops) => {
       } else {
         // Always update
         const newUrl = referenceUrl + "webhook_" + selectedTrigger.id;
-        console.log("Validating webhook url: ", newUrl);
+        //console.log("Validating webhook url: ", newUrl);
         if (
           newUrl !== workflow.triggers[selectedTriggerIndex].parameters[0].value
         ) {
@@ -10079,6 +10154,8 @@ const AngularWorkflow = (defaultprops) => {
 					<div id="rightside_actions" style={rightsidebarStyle}>
 						<ParsedAction
 							id="rightside_subactions"
+							isCloud={isCloud}
+							actionDelayChange={actionDelayChange}
 							getAppAuthentication={getAppAuthentication}
 							appAuthentication={appAuthentication}
 							authenticationType={authenticationType}
@@ -11275,7 +11352,7 @@ const AngularWorkflow = (defaultprops) => {
                                 );
                               }}
                             >
-                              See sub-execution
+                            	<OpenInNewIcon />
                             </span>
                           ) : (
                             <a