#287: Basic import configuration done

frontend/src/views/Admin.jsx

@@ -459,9 +459,9 @@ const Admin = (props) => {
 
 
 				// FIXME: Set up features
-				Object.keys(responseJson.sync_features).map(function(key, index) {
-					//console.log(responseJson.sync_features[key])
-				})
+				//Object.keys(responseJson.sync_features).map(function(key, index) {
+				//	//console.log(responseJson.sync_features[key])
+				//})
 
 				//setOrgName(responseJson.name)
 				//setOrgDescription(responseJson.description)
@@ -849,7 +849,6 @@ const Admin = (props) => {
 				return response.json()
 			})
 			.then((responseJson) => {
-				console.log(responseJson)
 				setSchedules(responseJson)
 			})
 			.catch(error => {
@@ -988,34 +987,45 @@ const Admin = (props) => {
 		});
 	}
 
+	const views = {
+		0: "organization",
+		1: "users",
+		2: "app_auth",
+		3: "files",
+		4: "schedules",
+		5: "environments",
+		6: "categories",
+	}
 	const setConfig = (event, newValue) => {
+		console.log("Value: ", newValue)
+
+		setCurTab(parseInt(newValue))
 		if (newValue === 1) {
+			document.title = "Shuffle - admin - users"
 			getUsers()
 		} else if (newValue === 2) {
+			document.title = "Shuffle - admin - app authentication"
 			getAppAuthentication()
 		} else if (newValue === 3) {
+			document.title = "Shuffle - admin - files"
 			getFiles()
 		} else if (newValue === 4) {
+			document.title = "Shuffle - admin - schedules"
 			getSchedules()
 		} else if (newValue === 5) {
+			document.title = "Shuffle - admin - environments"
 			getEnvironments()
 		} else if (newValue === 6) {
+			document.title = "Shuffle - admin - orgs"
 			getOrgs() 
+		} else {
+			document.title = "Shuffle - admin"
 		}
 
 		if (newValue === 6) {
 			console.log("Should get apps for categories.")
 		}
 
-		const views = {
-			0: "organization",
-			1: "users",
-			2: "app_auth",
-			3: "environments",
-			4: "schedules",
-			5: "files",
-			6: "categories",
-		}
 
 		//var theURL = window.location.pathname
 		//FIXME: Add url edits
@@ -1027,33 +1037,21 @@ const Admin = (props) => {
 		//window.location.pathame = newpath
 
 		setModalUser({})
-		setCurTab(newValue)
 	}
 
 
 	if (firstRequest) {
 		setFirstRequest(false)
+		document.title = "Shuffle - admin"
 		if (!isCloud) {
 			getUsers()
 		} else {
 			getSettings()
 		}
 
-		const views = {
-			"organization": 0,
-			"users": 1,
-			"app_auth": 2,
-			"environments": 3,
-			"schedules": 4,
-			"files": 5,
-		}
-
 		if (props.match.params.key !== undefined) {
-			const tmpitem = views[props.match.params.key]
-			if (tmpitem !== undefined) {
-				//setCurTab(tmpitem)
-				setConfig("", tmpitem)
-			}
+			//const tmpitem = views[props.match.params.key]
+			setConfig("", props.match.params.key)
 		}
 	}
 
@@ -2092,11 +2090,13 @@ const Admin = (props) => {
 											</IconButton>
 										: 
 											<Tooltip title={"Go to workflow"} style={{}} aria-label={"Download"}>
-												<a style={{textDecoration: "none", color: "#f85a3e"}} href={`/workflows/${file.workflow_id}`} target="_blank">
-													<IconButton disabled={file.workflow_id === "global"}>
-														<OpenInNewIcon style={{color: file.workflow_id !== "global" ? "white" : "grey",}} />
-													</IconButton>
-												</a>
+												<span>
+													<a style={{textDecoration: "none", color: "#f85a3e"}} href={`/workflows/${file.workflow_id}`} target="_blank">
+														<IconButton disabled={file.workflow_id === "global"}>
+															<OpenInNewIcon style={{color: file.workflow_id !== "global" ? "white" : "grey",}} />
+														</IconButton>
+													</a>
+												</span>
 											</Tooltip>
 										}
 								style={{minWidth: 100, maxWidth: 100, overflow: "hidden"}}
@@ -2116,11 +2116,13 @@ const Admin = (props) => {
 							<ListItemText
 								primary=
 									<Tooltip title={"Download file"} style={{}} aria-label={"Download"}>
-										<IconButton disabled={file.status !== "active"} onClick={() => {
-											downloadFile(file)
-										}}>
-											<CloudDownloadIcon style={{color: file.status === "active" ? "white" : "grey",}} />
-										</IconButton>
+										<span>
+											<IconButton disabled={file.status !== "active"} onClick={() => {
+												downloadFile(file)
+											}}>
+												<CloudDownloadIcon style={{color: file.status === "active" ? "white" : "grey",}} />
+											</IconButton>
+										</span>
 									</Tooltip>
 								style={{minWidth: 75, maxWidth: 75, overflow: "hidden"}}
 							/>

frontend/src/views/AngularWorkflow.jsx

@@ -128,7 +128,7 @@ const AngularWorkflow = (props) => {
 	const [rightSideBarOpen, setRightSideBarOpen] = React.useState(false)
 	const [showSkippedActions, setShowSkippedActions] = React.useState(false)
 	const [lastExecution, setLastExecution] = React.useState("")
-	const [configureWorkflowModalOpen, setConfigureWorkflowModalOpen] = React.useState(false)
+	const [configureWorkflowModalOpen, setConfigureWorkflowModalOpen] = React.useState(true)
 	const [curpath, setCurpath] = useState(typeof window === 'undefined' || window.location === undefined ? "" : window.location.pathname)
 
 	// 0 = normal, 1 = just done, 2 = normal
@@ -707,8 +707,10 @@ const AngularWorkflow = (props) => {
 				newBranches.push(parsedElement)
 			} else {
 				if (type === "ACTION") {
-					// FIXME - check whether position is new to not fuck up params etc.
-					var curworkflowAction = useworkflow.actions.find(a => a.id === cyelements[key].data()["id"])
+					const cyelement = cyelements[key].data()
+					const elementid = cyelement.id === undefined || cyelement.id === null ? cyelement["_id"] : cyelement.id
+				
+					var curworkflowAction = useworkflow.actions.find(a => a !== undefined && (a["id"] === elementid || a["_id"] === elementid))
 					if (curworkflowAction === undefined)  {
 						curworkflowAction = cyelements[key].data() 
 					} 
@@ -1114,13 +1116,13 @@ const AngularWorkflow = (props) => {
 	
 	const getWorkflow = () => {
 		fetch(globalUrl+"/api/v1/workflows/"+props.match.params.key, {
-    	  	method: 'GET',
+    	  method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
 					'Accept': 'application/json',
 				},
-	  			credentials: "include",
-    		})
+	  		credentials: "include",
+    })
 		.then((response) => {
 			if (response.status !== 200) {
 				console.log("Status not 200 for workflows :O!")
@@ -1146,6 +1148,12 @@ const AngularWorkflow = (props) => {
 
 			setWorkflow(responseJson)
 			setWorkflowDone(true)
+
+			//console.log(responseJson)
+			// Add error checks
+			if (!responseJson.public && (!responseJson.previously_saved || (!responseJson.is_valid || (responseJson.errors !== undefined || responseJson.errors !== null || responseJson.errors !== responseJson.errors.length > 0)))) {
+				setConfigureWorkflowModalOpen(true)
+			}
     })
 		.catch(error => {
 			alert.error(error.toString())
@@ -1289,11 +1297,6 @@ const AngularWorkflow = (props) => {
 		//console.log("BRANCHES: ", branch)
 
 		if (data.type === "ACTION") {
-
-
-			// FIXME - unselect
-			//console.log(cy.elements('[_id!="${data._id}"]`))
-			// Does it choose the wrong action?
 			var curaction = workflow.actions.find(a => a.id === data.id)
 			if (!curaction || curaction === undefined) { 
 				//event.target.unselect()
@@ -1301,15 +1304,27 @@ const AngularWorkflow = (props) => {
 				return
 			}
 
-
-			console.log(apps)
+			//console.log(apps)
 			const curapp = apps.find(a => a.name === curaction.app_name && (a.app_version === curaction.app_version || a.loop_versions.includes(curaction.app_version)))
 			if (!curapp || curapp === undefined) {
 				alert.error(`App ${curaction.app_name}:${curaction.app_version} not found. Is it activated?`)
+
+				const tmpapp = {
+					name: curaction.app_name,
+					app_name: curaction.app_name, 
+					app_version: curaction.app_version, 
+					id: curaction.app_id,
+					actions: [curaction],
+				}
+
+				console.log(tmpapp)
+				console.log(curaction)
+				setSelectedApp(tmpapp)
+				setSelectedAction(curaction)
 				//return
 			} else {
 
-				console.log("AUTHENTICATION: ", curapp.authentication)
+				//console.log("AUTHENTICATION: ", curapp.authentication)
 				setRequiresAuthentication(curapp.authentication.required && curapp.authentication.parameters !== undefined && curapp.authentication.parameters !== null)
 				if (curapp.authentication.required) {
 					// Setup auth here :)
@@ -2147,6 +2162,7 @@ const AngularWorkflow = (props) => {
 		}
 
 		const deleteVariable = (variableName) => {
+			console.log("Delete:" ,variableName)
 			workflow.workflow_variables = workflow.workflow_variables.filter(data => data.name !== variableName)
 			setWorkflow(workflow)
 		}
@@ -2208,7 +2224,7 @@ const AngularWorkflow = (props) => {
 												  setOpen(false)
 												  setAnchorEl(null)
 											  }}
-      										>
+      								>
 
 											<MenuItem style={{backgroundColor: inputColor, color: "white"}} onClick={() => {
 												setOpen(false)
@@ -4232,8 +4248,6 @@ const AngularWorkflow = (props) => {
 			return response.json()
 		})
     .then((responseJson) => {
-			console.log(responseJson)
-
 			if (setApp && responseJson.actions !== undefined && responseJson.actions !== null) {
 				if (selectedApp.versions !== undefined && selectedApp.versions !== null) {
 					responseJson.versions = selectedApp.versions
@@ -4244,17 +4258,14 @@ const AngularWorkflow = (props) => {
 				}
 
 				var foundAction = responseJson.actions.find(action => action.name === selectedAction.name)
-				console.log("Old : ", selectedAction)
-				console.log("Found: ", foundAction)
 				if (foundAction !== null && foundAction !== undefined) {
 					for (var paramkey in foundAction.parameters) {
 						const param = foundAction.parameters[paramkey]
 
 						const foundParam = selectedAction.parameters.find(item => item.name === param.name)
 						if (foundParam === undefined) {
-							console.log("COULDNT find Param: ", param)
+							//console.log("COULDNT find Param: ", param)
 						} else {
-							console.log("FoundP: ", foundParam)
 							foundAction.parameters[paramkey] = foundParam 
 						}
 					}
@@ -7878,9 +7889,15 @@ const AngularWorkflow = (props) => {
 				} 
 			}
 
+			console.log("Action: ", selectedAction)
 			selectedAction.authentication_id = authenticationOption.id
 			selectedAction.selectedAuthentication = authenticationOption
-			selectedAction.authentication.push(authenticationOption)
+			if (selectedAction.authentication === undefined || selectedAction.authentication === null) {
+				selectedAction.authentication = [authenticationOption]
+			} else {
+				selectedAction.authentication.push(authenticationOption)
+			}
+
 			setSelectedAction(selectedAction)
 
 			var newAuthOption = JSON.parse(JSON.stringify(authenticationOption))
@@ -7898,6 +7915,12 @@ const AngularWorkflow = (props) => {
 			setNewAppAuth(newAuthOption)
 			//appAuthentication.push(newAuthOption)
 			//setAppAuthentication(appAuthentication)
+			//
+			
+			if (configureWorkflowModalOpen) {
+				setSelectedAction({})
+			}
+
 			setUpdate(authenticationOption.id)
 
 			/*
@@ -8024,18 +8047,23 @@ const AngularWorkflow = (props) => {
 		<Dialog 
 			open={configureWorkflowModalOpen} 
 			onClose={() => {
-				setConfigureWorkflowModalOpen(false)
+				//setConfigureWorkflowModalOpen(false)
 			}}
 			PaperProps={{
 				style: {
 					backgroundColor: surfaceColor,
 					color: "white",
 					minWidth: 600,
-					padding: 15, 
+					padding: 50, 
 				},
 			}}
 		>
-			<ConfigureWorkflow workflow={workflow} appAuthentication={appAuthentication} apps={apps} />
+			<IconButton style={{zIndex: 5000, position: "absolute", top: 14, right: 14, color: "grey"}} onClick={() => {
+				setConfigureWorkflowModalOpen(false)
+			}}>
+				<CloseIcon  />
+			</IconButton>
+			<ConfigureWorkflow theme={theme} globalUrl={globalUrl} workflow={workflow} setSelectedAction={setSelectedAction} setSelectedApp={setSelectedApp} setAuthenticationModalOpen={setAuthenticationModalOpen} appAuthentication={appAuthentication} selectedAction={selectedAction} apps={apps} setConfigureWorkflowModalOpen={setConfigureWorkflowModalOpen} saveWorkflow={saveWorkflow} newWebhook={newWebhook} submitSchedule={submitSchedule} referenceUrl={referenceUrl} isCloud={isCloud} />
 		</Dialog>
 		: null
 	
@@ -8046,6 +8074,10 @@ const AngularWorkflow = (props) => {
 			open={authenticationModalOpen} 
 			onClose={() => {
 				//setAuthenticationModalOpen(false)
+				//
+				if (configureWorkflowModalOpen) {
+					setSelectedAction({})
+				}
 			}}
 			PaperProps={{
 				style: {
@@ -8056,6 +8088,14 @@ const AngularWorkflow = (props) => {
 				},
 			}}
 		>
+			<IconButton style={{zIndex: 5000, position: "absolute", top: 14, right: 14, color: "grey"}} onClick={() => {
+				setAuthenticationModalOpen(false)
+				if (configureWorkflowModalOpen) {
+					setSelectedAction({})
+				}
+			}}>
+				<CloseIcon  />
+			</IconButton>
 			<DialogTitle><div style={{color: "white"}}>Authentication for {selectedApp.name}</div></DialogTitle>
 			<AuthenticationData app={selectedApp} />	
 		</Dialog> : null

frontend/src/views/Workflows.jsx

@@ -585,7 +585,7 @@ const Workflows = (props) => {
 
 				for (var subkey in data.actions[key].parameters) {
 					const param = data.actions[key].parameters[subkey]
-					if (param.name.includes("key") || param.name.includes("user") || param.name.includes("pass") || param.name.includes("api") || param.name.includes("auth") || param.name.includes("secret")) {
+					if (param.name.includes("key") || param.name.includes("user") || param.name.includes("pass") || param.name.includes("api") || param.name.includes("auth") || param.name.includes("secret") || param.name.includes("domain") || param.name.includes("url")) {
 						// FIXME: This may be a vuln if api-keys are generated that start with $
 						if (param.value.startsWith("$")) {
 							console.log("Skipping field, as it's referencing a variable")
@@ -645,8 +645,8 @@ const Workflows = (props) => {
 		let exportFileDefaultName = data.name+'.json';
 		data = sanitizeWorkflow(data)	
 
-		//console.log("EXPORT: ", data)
-		//return
+		// Add correct ID's for triggers
+		// Add mag
 
 		let dataStr = JSON.stringify(data)
 		let dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);