More Shuffle-Hybrid migration

frontend/src/views/Admin.jsx

@@ -348,7 +348,9 @@ const Admin = (props) => {
 
 	const deleteUser = (data) => {
 		// Just use this one?
-		const url = globalUrl + '/api/v1/users/' + data.id
+		const userId = isCloud ? data.username : data.id 
+		
+		const url = globalUrl + '/api/v1/users/' + userId
 		fetch(url, {
 			method: 'DELETE',
 			credentials: "include",
@@ -1038,7 +1040,8 @@ const Admin = (props) => {
 
 
 
-	const generateApikey = (userId) => {
+	const generateApikey = (user) => {
+		const userId = isCloud ? user.username : user.id
 		const data = { "user_id": userId }
 
 		fetch(globalUrl + "/api/v1/generateapikey", {
@@ -1209,7 +1212,7 @@ const Admin = (props) => {
 					style={{}}
 					variant="outlined"
 					color="primary"
-					onClick={() => generateApikey(selectedUser.id)}
+					onClick={() => generateApikey(selectedUser)}
 				>
 					Get new API key
 				</Button>
@@ -1748,12 +1751,12 @@ const Admin = (props) => {
 				<ListItem>
 					<ListItemText
 						primary="Username"
-						style={{ minWidth: 200, maxWidth: 200 }}
+						style={{ minWidth: 300, maxWidth: 300}}
 					/>
 					
 					<ListItemText
 						primary="API key"
-						style={{ minWidth: 360, maxWidth: 360, overflow: "hidden" }}
+						style={{ minWidth: 100, maxWidth: 100, overflow: "hidden" }}
 					/>
 					
 					<ListItemText
@@ -1779,42 +1782,61 @@ const Admin = (props) => {
 						<ListItem key={index} style={{backgroundColor: bgColor}}>
 							<ListItemText
 								primary={data.username}
-								style={{ minWidth: 200, maxWidth: 200 }}
+								style={{ minWidth: 300, maxWidth: 300, overflow: "hidden",}}
 							/>
 							
 							<ListItemText
-								primary={data.apikey === undefined || data.apikey.length === 0 ? "" : data.apikey}
-								style={{ maxWidth: 360, minWidth: 360, }}
-							/>
+								style={{ maxWidth: 100, minWidth: 100, }}
+								primary={data.apikey === undefined || data.apikey.length === 0 ? "" : 
+									<Tooltip title={"Copy Api Key"} style={{}} aria-label={"Copy APIkey"}>
+										<IconButton style={{}} onClick={() => {
+												const elementName = "copy_element_shuffle"
+												var copyText = document.getElementById(elementName);
+												if (copyText !== null && copyText !== undefined) {
+													navigator.clipboard.writeText(data.apikey)
+													copyText.select();
+													copyText.setSelectionRange(0, 99999); /* For mobile devices */
+
+												/* Copy the text inside the text field */
+												document.execCommand("copy");
+
+												alert.info("Apikey copied to clipboard")	
+											}
+										}}>
+										<FileCopyIcon style={{color: "rgba(255,255,255,0.8)"}}/>
+									</IconButton>
+								</Tooltip>
+							}/>
 							
 							<ListItemText
 								primary=
-								{<Select
-									SelectDisplayProps={{
-									style: {
-										marginLeft: 10,
+									{<Select
+										SelectDisplayProps={{
+										style: {
+											marginLeft: 10,
+										}
+									}}
+									value={data.role}
+									fullWidth
+									onChange={(e) => {
+									console.log("VALUE: ", e.target.value)
+
+									if (isCloud) {	
+										setUser(data.username, "role", e.target.value)
+									} else {
+										setUser(data.id, "role", e.target.value)
 									}
 								}}
-								value={data.role}
-								fullWidth
-								onChange={(e) => {
-								console.log("VALUE: ", e.target.value)
-
-								if (isCloud) {	
-									setUser(data.username, "role", e.target.value)
-								} else {
-									setUser(data.id, "role", e.target.value)
-								}
-							}}
 										style={{ backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px" }}
-										>
-							<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"admin"}>
-								Admin
-										</MenuItem>
-							<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"user"}>
-								User
-										</MenuItem>
-									</Select>}
+									>
+									<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"admin"}>
+										Admin
+									</MenuItem>
+									<MenuItem style={{ backgroundColor: theme.palette.inputColor, color: "white" }} value={"user"}>
+										User
+									</MenuItem>
+								</Select>
+								}
 								style ={{ minWidth: 135, maxWidth: 135, marginRight: 15,}}
 							/>
 							<ListItemText
@@ -1831,7 +1853,9 @@ const Admin = (props) => {
 						<EditIcon color="primary"/>
 					</IconButton>
 					<Button
-						onClick={() => generateApikey(data.id)}
+						onClick={() => {
+							generateApikey(data)
+						}}
 						variant="outlined"
 						color="primary"
 					>
@@ -1932,7 +1956,7 @@ const Admin = (props) => {
 					/>
 					<ListItemText
 						primary="Status"
-						style={{minWidth: 75, maxWidth: 75}}
+						style={{minWidth: 75, maxWidth: 75, marginLeft: 10,}}
 					/>
 					<ListItemText
 						primary="Filesize"
@@ -1984,7 +2008,7 @@ const Admin = (props) => {
 							/>
 							<ListItemText
 								primary={file.status}
-								style={{minWidth: 75, maxWidth: 75, overflow: "hidden"}}
+								style={{minWidth: 75, maxWidth: 75, overflow: "hidden", marginLeft: 10,}}
 							/>
 							<ListItemText
 								primary={file.filesize}
@@ -2221,7 +2245,7 @@ const Admin = (props) => {
 					/>
 					<ListItemText
 						primary="App Name"
-						style={{minWidth: 150, maxWidth: 150}}
+						style={{minWidth: 175, maxWidth: 175, marginLeft: 10,}}
 					/>
 					<ListItemText
 						primary="Ready"
@@ -2257,15 +2281,15 @@ const Admin = (props) => {
 							/>
 							<ListItemText
 								primary={data.label}
-								style={{minWidth: 225, maxWidth: 225}}
+								style={{minWidth: 225, maxWidth: 225, overflow: "hidden",}}
 							/>
 							<ListItemText
 								primary={data.app.name}
-								style={{minWidth: 150, maxWidth: 150}}
+								style={{minWidth: 175, maxWidth: 175, marginLeft: 10}}
 							/>
 							<ListItemText
 								primary={data.defined === false ? "No" : "Yes"}
-								style={{minWidth: 100, maxWidth: 100}}
+								style={{minWidth: 100, maxWidth: 100, marginLeft: 10,}}
 							/>
 							<ListItemText
 								primary={data.workflow_count === null ? 0 : data.workflow_count}

frontend/src/views/AngularWorkflow.jsx

@@ -88,7 +88,7 @@ const AngularWorkflow = (props) => {
   const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
 	const referenceUrl = globalUrl+"/api/v1/hooks/"
 	const alert = useAlert()
-	const borderRadius = 3
+	const borderRadius = 5
 	const theme = useTheme();
 
 	const [bodyWidth, bodyHeight] = useWindowSize();
@@ -883,6 +883,19 @@ const AngularWorkflow = (props) => {
 				setExecutionRequestStarted(false)
 			}
 
+			if (responseJson.execution_id === "" || responseJson.execution_id === undefined || responseJson.authorization === "" || responseJson.authorization === undefined ) {
+				alert.error("Something went wrong during execution startup")
+				console.log("BAD RESPONSE FOR EXECUTION: ", responseJson)
+				setExecutionRunning(false)
+				setExecutionRequestStarted(false)
+				stop()
+
+				for (var i = 0; i < curelements.length; i++) {
+					curelements[i].removeClass("not-executing-highlight")
+				}
+				return
+			}
+
 			setExecutionRequest({
 				"execution_id": responseJson.execution_id,
 				"authorization": responseJson.authorization,
@@ -1021,7 +1034,7 @@ const AngularWorkflow = (props) => {
 
 
 	const getApps = () => {
-		fetch(globalUrl+"/api/v1/workflows/apps", {
+		fetch(globalUrl+"/api/v1/apps", {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
@@ -1042,11 +1055,16 @@ const AngularWorkflow = (props) => {
 			//var tmpapps = []
 			//tmpapps = tmpapps.concat(getExtraApps())
 			//tmpapps = tmpapps.concat(responseJson)
+			console.log("APPS: ", responseJson)
 			setApps(responseJson)
-			//getAppAuthentication() 
 
-			setFilteredApps(responseJson.filter(app => !internalIds.includes(app.name) && !(!app.activated && app.generated)))
-			setPrioritizedApps(responseJson.filter(app => internalIds.includes(app.name)))
+			if (isCloud) {
+				setFilteredApps(responseJson.filter(app => !internalIds.includes(app.name)))
+				setPrioritizedApps(responseJson.filter(app => internalIds.includes(app.name)))
+			} else {
+				setFilteredApps(responseJson.filter(app => !internalIds.includes(app.name) && !(!app.activated && app.generated)))
+				setPrioritizedApps(responseJson.filter(app => internalIds.includes(app.name)))
+			}
     })
 		.catch(error => {
 			alert.error(error.toString())
@@ -1172,6 +1190,12 @@ const AngularWorkflow = (props) => {
 	const onNodeSelect = (event, newAppAuth) => {
 		const data = event.target.data()
 		setLastSaved(false)
+		
+		const node = cy.getElementById(data.id)
+		if (node.length > 0) {
+			node.addClass('shuffle-hover-highlight')
+		}
+
 		//const branch = workflow.branches.filter(branch => branch.source_id === data.id || branch.destination_id === data.id)
 		console.log("NODE: ", data)
 		//console.log("BRANCHES: ", branch)
@@ -2757,6 +2781,7 @@ const AngularWorkflow = (props) => {
 		//setSelectedActionEnvironment(env)
 		
 		setSelectedAction(selectedAction)
+		setUpdate(Math.random())
 	}
 
 	// APPSELECT at top
@@ -2996,6 +3021,7 @@ const AngularWorkflow = (props) => {
 					selectedActionParameters[count]["value_replace"] = paramcheck
 					selectedAction.parameters[count]["value_replace"] = paramcheck
 					setSelectedAction(selectedAction)
+					//setUpdate(Math.random())
 					return
 				}
 			}
@@ -3088,6 +3114,7 @@ const AngularWorkflow = (props) => {
 			selectedActionParameters[count].value = event.target.value
 			selectedAction.parameters[count].value = event.target.value
 			setSelectedAction(selectedAction)
+			//setUpdate(Math.random())
 			//setUpdate(event.target.value)
 		}
 
@@ -3125,7 +3152,7 @@ const AngularWorkflow = (props) => {
 			setSelectedApp(selectedApp)
 
 			setSelectedAction(selectedAction)
-			setUpdate(fieldvalue)
+			setUpdate(Math.random())
 		}
 
 		const changeActionParameterVariant = (data, count) => {
@@ -3157,6 +3184,7 @@ const AngularWorkflow = (props) => {
 			// Set value 
 			setSelectedApp(selectedApp)
 			setSelectedAction(selectedAction)
+			setUpdate(Math.random())
 		}
 
 		// FIXME: Issue #40 - selectedActionParameters not reset
@@ -3177,6 +3205,7 @@ const AngularWorkflow = (props) => {
 							selectedActionParameters[count].value = selectedAction.selectedAuthentication.fields[data.name]
 							selectedAction.parameters[count].value = selectedAction.selectedAuthentication.fields[data.name]
 							setSelectedAction(selectedAction)
+							//setUpdate(Math.random())
 
 							return null	
 						}

frontend/src/views/AppCreator.jsx

@@ -2502,7 +2502,9 @@ const AppCreator = (props) => {
 					}}>
 						{appBuilding ? <CircularProgress /> : "Save"}
 					</Button>
-					{errorCode.length > 0 ? `Error: ${errorCode}` : null}
+					<Typography style={{marginTop: 5}}>
+						{errorCode.length > 0 ? `Error: ${errorCode}` : null}
+					</Typography>
 				</Paper>
 		</div>
 

frontend/src/views/Apps.jsx

@@ -195,6 +195,10 @@ const Apps = (props) => {
 			setIsLoading(false)
 			if (response.status !== 200) {
 				console.log("Status not 200 for apps :O!")
+
+				if (isCloud) {
+					window.location.pathname = "/search"
+				}
 			}
 
 			return response.json()
@@ -648,11 +652,17 @@ const Apps = (props) => {
 						<Select
 							value={sharingConfiguration}
 							onChange={(event) => {
-								setSharingConfiguration(event.target.value)
-								alert.info("Changed sharing to "+event.target.value)
+								alert.info("Changing sharing to "+event.target.value)
 
-								updateAppField(selectedApp.id, "sharing", !selectedApp.sharing)
-								//setSelectedAction(event.target.value)
+								setSharingConfiguration(event.target.value)
+
+								if (event.target.value === "you") {
+									updateAppField(selectedApp.id, "sharing", false)
+								} else if (event.target.value === "everyone") {
+									updateAppField(selectedApp.id, "sharing", true)
+								} else {
+									console.log("Can't handle value for sharing: ", event.target.value)
+								}
 							}}
 							style={{width: 150, backgroundColor: theme.palette.surfaceColor, backgroundColor: inputColor, color: "white", height: 35, marginleft: 10,}}
 							SelectDisplayProps={{
@@ -910,9 +920,8 @@ const Apps = (props) => {
 						</span>
 					}
 					</div>
-					{isCloud ? null :
 					<TextField
-						style={{backgroundColor: inputColor}} 
+						style={{backgroundColor: inputColor, borderRadius: 5,}} 
 						InputProps={{
 							style:{
 								color: "white",
@@ -920,6 +929,7 @@ const Apps = (props) => {
 								marginLeft: "5px",
 								maxWidth: "95%",
 								fontSize: "1em",
+								borderRadius: 5,
 							},
 						}}
 						fullWidth
@@ -930,7 +940,6 @@ const Apps = (props) => {
 							setCursearch(event.target.value)
 						}}
 					/>
-					}
 					<div style={{marginTop: 15}}>
 						{apps.length > 0 ? 
 							filteredApps.length > 0 ? 
@@ -1057,8 +1066,11 @@ const Apps = (props) => {
 			return response.json()
 		})
 		.then((responseJson) => {
-			if (responseJson.reason !== undefined && responseJson.reason.length > 0) {
-				alert.info("Hotloading: ", responseJson.reason)
+			if (responseJson.success === true) {
+				alert.info("Successfully finished hotload")
+			} else {
+				alert.error("Failed hotload: ", responseJson.reason)
+				//(responseJson.reason !== undefined && responseJson.reason.length > 0) {
 			}
     })
 		.catch(error => {
@@ -1116,6 +1128,8 @@ const Apps = (props) => {
 		const data = {}
 		data[fieldname] = fieldvalue
 
+		console.log("DATA: ", data)
+
 		fetch(globalUrl+"/api/v1/apps/"+app_id, {
     	method: 'PATCH',
 			headers: {
@@ -1132,9 +1146,9 @@ const Apps = (props) => {
 			//console.log(responseJson)
 			//alert.info(responseJson)
 			if (responseJson.success) {
-				alert.info("Success")
+				alert.success("Successfully updated app configuration")
 			} else {
-				alert.error("Error updating app")
+				alert.error("Error updating app configuration")
 			}
     })
 		.catch(error => {

frontend/src/views/Workflows.jsx

@@ -527,7 +527,6 @@ const Workflows = (props) => {
 
 
 	const deleteWorkflow = (id) => {
-		alert.success("Deleted workflow "+id)
 		fetch(globalUrl+"/api/v1/workflows/"+id, {
     	  method: 'DELETE',
 				headers: {
@@ -539,6 +538,9 @@ const Workflows = (props) => {
 		.then((response) => {
 			if (response.status !== 200) {
 				console.log("Status not 200 for setting workflows :O!")
+				alert.error("Failed deleting workflow")
+			} else {
+				alert.success("Deleted workflow "+id)
 			}
 
 			return response.json()