Added major JSON change to action

frontend/src/AngularWorkflow.js

@@ -1028,8 +1028,6 @@ const AngularWorkflow = (props) => {
 		}, {
 			duration: animationDuration,	
 		})
-
-		console.log(previousnodecolor)
 	}
 
 	const onNodeHover = (event) => {
@@ -2134,11 +2132,15 @@ const AngularWorkflow = (props) => {
 						var staticcolor = "inherit"
 						var actioncolor = "inherit"
 						var varcolor = "inherit"
-						var multiline = false
+						var multiline
 						if (data.multiline !== undefined && data.multiline !== null && data.multiline === true) {
 							multiline = true
 						}
 
+						if (data.value.startsWith("{") && data.value.endsWith("}")) {
+							multiline = true
+						}
+
 						var placeholder = "Static value"
 						if (data.example !== undefined && data.example !== null && data.example.length > 0) {
 							placeholder = data.example
@@ -2165,12 +2167,24 @@ const AngularWorkflow = (props) => {
 								onChange={(event) => {
 									changeActionParameter(event, count)
 								}}
+								onBlur={(event) => {
+									// Super basic check
+									if (event.target.value.startsWith("{")) {
+										console.log("VALIDATING JSON")
+										try {
+											JSON.parse(event.target.value)
+										} catch (e) {
+											alert.error("Failed to parse json")
+										}
+									}
+								}}
 							/>
 
 
 						// Remap data based on variant
 						if (data.variant === "STATIC_VALUE") {
 							staticcolor = "#f85a3e"	
+							console.log("DATA IS STATIC")
 						} else if (data.variant === "ACTION_RESULT") {
 							// Gets the parents of the current node
 							var parents = getParents(selectedAction)
@@ -2390,7 +2404,7 @@ const AngularWorkflow = (props) => {
 			<div style={{marginTop: "20px"}}>
 				Environment:
 				<Select
-					value={selectedActionEnvironment.Name === undefined ? "" : selectedActionEnvironment.Name}
+					value={selectedActionEnvironment === undefined || selectedActionEnvironment.Name === undefined ? "" : selectedActionEnvironment.Name}
 					PaperProps={{
 						style: {
 							backgroundColor: inputColor,
@@ -2597,12 +2611,13 @@ const AngularWorkflow = (props) => {
 	}
 
 	const AppConditionHandler = (props) => {
-  		const { tmpdata, type } = props;
+  	const { tmpdata, type } = props;
 
 		if (tmpdata === undefined) {
 			return tmpdata
 		}
 		const [data, ] = useState(tmpdata)
+		const [multiline, setMultiline] = useState(false)
 
 		if (data.variant === "") {
 			data.variant = "STATIC_VALUE"
@@ -2611,9 +2626,8 @@ const AngularWorkflow = (props) => {
 		var staticcolor = "inherit"
 		var actioncolor = "inherit"
 		var varcolor = "inherit"
-		var multiline = false
 		if (data.multiline !== undefined && data.multiline !== null && data.multiline === true) {
-			multiline = true
+			setMultiline(true)
 		}
 
 		var placeholder = "Static value"
@@ -2635,10 +2649,14 @@ const AngularWorkflow = (props) => {
 				}}
 				fullWidth
 				multiline={multiline}
-				rows="5"
+				rows={5}
 				color="primary"
 				defaultValue={data.value}
 				placeholder={placeholder}
+				onClick={() => {
+					console.log("CHANGE FIELD")
+					setMultiline(!multiline)
+				}}
 				onBlur={(e) => {
 					changeActionVariable(data.action_field, e.target.value)
 				}}
@@ -2701,12 +2719,12 @@ const AngularWorkflow = (props) => {
 				setCurrentView("variables")
 				datafield = 
 				<div>
-				<div>
-					Looks like you don't have any variables yet.  
-				</div>
-				<div style={{width: "100%", margin: "auto"}}>
-					<Button style={{margin: "auto", marginTop: "10px",}} color="primary" variant="outlined" onClick={() => setVariablesModalOpen(true)}>New workflow variable</Button> 				
-				</div>
+					<div>
+						Looks like you don't have any variables yet.  
+					</div>
+					<div style={{width: "100%", margin: "auto"}}>
+						<Button style={{margin: "auto", marginTop: "10px",}} color="primary" variant="outlined" onClick={() => setVariablesModalOpen(true)}>New workflow variable</Button> 				
+					</div>
 				</div>
 			} else {
 				// FIXME - this is a shitty solution that needs re-renders all the time
@@ -4022,6 +4040,7 @@ const AngularWorkflow = (props) => {
 							}}
 							color="secondary"
 							placeholder={"Execution Argument"}
+							defaultValue={executionText}
 							onBlur={(e) => {
 								setExecutionText(e.target.value)
 							}}

frontend/src/App.js

@@ -38,12 +38,12 @@ import AlertTemplate from "react-alert-template-basic";
 import { positions, Provider } from "react-alert";
 
 // Testing - localhost
-//const globalUrl = "http://192.168.3.6:5001"
+const globalUrl = "http://192.168.3.6:5001"
 //console.log("HOST: ", process.env)
 
 
 // Production - backend proxy forwarding in nginx
-const globalUrl = window.location.origin
+//const globalUrl = window.location.origin
 
 const surfaceColor = "#27292D"
 const inputColor = "#383B40"

frontend/src/Workflows.js

@@ -86,7 +86,7 @@ const Workflows = (props) => {
 				if (isLoggedIn) {
 					alert.error("An error occurred while loading workflows")
 				} else {
-					window.location.pathname = "/login"
+					window.location = "/login"
 				}
 
 				return
@@ -493,15 +493,17 @@ const Workflows = (props) => {
 		}
 
 		var t = new Date(data.started_at*1000)
+		var jsonvalid = true
 		var showResult = data.result.trim()
-		if ((showResult.startsWith("{") && showResult.endsWith("}")) || (showResult.startsWith("[{") && showResult.endsWith("}]"))) {
-			//showResult = <JSONPretty 
-			//				id="json-pretty" 
-			//				theme={JSONPrettyMon} 
-			//				data={showResult}/>
-			
-			showResult = replaceAll(showResult, " None", " \"None\"");
-			console.log(showResult)
+		showResult = replaceAll(showResult, " None", " \"None\"");
+		try {
+			JSON.parse(showResult)
+		} catch (e) {
+			jsonvalid = false
+		}
+
+		console.log("VALID: ", jsonvalid)
+		if (jsonvalid) {
 			showResult = <ReactJson 
 				src={JSON.parse(showResult)} 
 				theme="solarized" 
@@ -531,13 +533,13 @@ const Workflows = (props) => {
 				<Grid container style={{margin: "10px 10px 10px 10px", flex: "1"}}>
 					<Grid style={{display: "flex", flexDirection: "column", width: "100%"}}>
 						<Grid item style={{flex: "1"}}>
-							<h4 style={{marginBottom: "0px", marginTop: "10px"}}><b>Status</b>: {data.status}</h4>
+							<h4 style={{marginBottom: "0px", marginTop: "10px"}}><b>Name</b>: {data.action.label}</h4>
 						</Grid>
 						<Grid item style={{flex: "1", justifyContent: "center"}}>
 							App: {data.action.app_name}, Version: {data.action.app_version}
 						</Grid>
 						<Grid item style={{flex: "1", justifyContent: "center"}}>
-							Action: {data.action.name}, Environment: {data.action.environment}
+							Action: {data.action.name}, Environment: {data.action.environment}, Status: {data.status}
 						</Grid>
 						<div style={{display: "flex", flex: "1"}}>
 							<Grid item style={{flex: "10", justifyContent: "center"}}>
@@ -578,25 +580,30 @@ const Workflows = (props) => {
 		var parsedArgument = selectedExecution.execution_argument
 		if (selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0) {
 			parsedArgument = replaceAll(parsedArgument, " None", " \"None\"");
+		}	
+
+		var arg = null
+		if (selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0) {
+			var jsonvalid = false
+			var showResult = selectedExecution.execution_argument.trim()
+			showResult = replaceAll(showResult, " None", " \"None\"");
+			try {
+				JSON.parse(showResult)
+			} catch (e) {
+				jsonvalid = false
+			}
+
+			arg = jsonvalid ? 
+				<ReactJson 
+					src={JSON.parse(showResult)} 
+					theme="solarized" 
+					collapsed={true}
+					displayDataTypes={false}
+					name={"Execution argument"}
+				/>
+			: showResult
 		}
 
-		const arg = selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0 ? 
-			<div>
-				Execution argument: {(parsedArgument.startsWith("{") && parsedArgument.endsWith("}")) || (parsedArgument.startsWith("[{") && parsedArgument.endsWith("}]")) ?
-					<div>
-						<ReactJson 
-							src={JSON.parse(parsedArgument)} 
-							theme="solarized" 
-							collapsed={true}
-							displayDataTypes={false}
-							name={"Execution argument"}
-						/>
-					</div>
-					:
-					selectedExecution.execution_argument
-					}
-			</div>
-			: null
 		/*
 		<div>
 			ID: {selectedExecution.execution_id}