Major fixes to app creator

frontend/src/views/Admin.jsx

@@ -489,7 +489,6 @@ const Admin = (props) => {
 				return response.json()
 			})
 			.then((responseJson) => {
-				console.log(responseJson)
 				setUsers(responseJson)
 			})
 			.catch(error => {
@@ -857,9 +856,9 @@ const Admin = (props) => {
 						style={{ minWidth: 180, maxWidth: 180 }}
 					/>
 				</ListItem>
-				{users === undefined ? null : users.map(data => {
+				{users === undefined ? null : users.map((data, index) => {
 					return (
-						<ListItem>
+						<ListItem key={index}>
 							<ListItemText
 								primary={data.username}
 								style={{ minWidth: 200, maxWidth: 200 }}
@@ -870,19 +869,15 @@ const Admin = (props) => {
 							/>
 							<ListItemText
 								primary=
-									{<Select
-										PaperProps={{
-								style: {
-								}
-							}}
-										SelectDisplayProps={{
-								style: {
-									marginLeft: 10,
-								}
-							}}
-										value={data.role}
-										fullWidth
-										onChange={(e) => {
+								{<Select
+									SelectDisplayProps={{
+									style: {
+										marginLeft: 10,
+									}
+								}}
+								value={data.role}
+								fullWidth
+								onChange={(e) => {
 								console.log("VALUE: ", e.target.value)
 								setUser(data.id, "role", e.target.value)
 							}}
@@ -1131,7 +1126,6 @@ const Admin = (props) => {
 		</div>
 		: null
 
-	console.log("Environments: ", environments)
 	const environmentView = curTab === 2 ?
 		<div>
 			<div style={{marginTop: 20, marginBottom: 20,}}>
@@ -1147,13 +1141,14 @@ const Admin = (props) => {
 				Add environment 
 			</Button>
 			<Button 
-				style={{marginLeft: 5, }} 
+				style={{marginLeft: 5, marginRight: 15, }} 
 				variant="contained"
 				color="primary"
 				onClick={() => getEnvironments()}
 			> 
 				<CachedIcon />
 			</Button>
+			<Switch checked={showArchived} onChange={() => {setShowArchived(!showArchived)}} />	Show archived
 			<Divider style={{marginTop: 20, marginBottom: 20, backgroundColor: theme.palette.inputColor}}/>
 			<List>
 				<ListItem>
@@ -1178,7 +1173,7 @@ const Admin = (props) => {
 						style={{minWidth: 150, maxWidth: 150}}
 					/>
 				</ListItem>
-				{environments === undefined ? null : environments.map(environment => {
+				{environments === undefined ? null : environments.map((environment, index)=> {
 					if (!showArchived && environment.archived) {
 						return null	
 					}
@@ -1189,7 +1184,7 @@ const Admin = (props) => {
 					}
 
 					return (
-						<ListItem>
+						<ListItem key={index}>
 							<ListItemText
 								primary={environment.Name}
 								style={{minWidth: 150, maxWidth: 150, overflow: "hidden"}}

frontend/src/views/AngularWorkflow.jsx

@@ -118,6 +118,7 @@ const AngularWorkflow = (props) => {
 	const [currentView, setCurrentView] = React.useState(0)
 	const [triggerAuthentication, setTriggerAuthentication] = React.useState({})
 	const [triggerFolders, setTriggerFolders] = React.useState([])
+	const [showEnvironment, setShowEnvironment] = React.useState(false)
 
 	const [workflow, setWorkflow] = React.useState({});
 	const [leftViewOpen, setLeftViewOpen] = React.useState(true);
@@ -766,6 +767,13 @@ const AngularWorkflow = (props) => {
 		return data
 	}
 
+	// This can be used to only show prioritzed ones later
+	// Right now, it can prioritize authenticated ones
+	const internalIds = [
+		"Shuffle Tools",
+		"Testing",
+		"Http",
+	]
 	const getAppAuthentication = () => {
 		fetch(globalUrl+"/api/v1/apps/authentication", {
 			method: 'GET',
@@ -795,10 +803,6 @@ const AngularWorkflow = (props) => {
 		});
 	}
 
-	const internalIds = [
-		"80a1fdd2-95c2-49ab-81f6-e05689beb745", // Shuffle tools
-		"39c5f8fa-a088-4cdc-826f-19e2e61cb284", // Testing
-	]
 
 	const getApps = () => {
 		fetch(globalUrl+"/api/v1/workflows/apps", {
@@ -823,11 +827,10 @@ const AngularWorkflow = (props) => {
 			//tmpapps = tmpapps.concat(getExtraApps())
 			//tmpapps = tmpapps.concat(responseJson)
 			setApps(responseJson)
-			setFilteredApps(responseJson)
 			getAppAuthentication() 
 
-
-			setPrioritizedApps(responseJson.filter(app => internalIds.includes(app.id)))
+			setFilteredApps(responseJson.filter(app => !internalIds.includes(app.name)))
+			setPrioritizedApps(responseJson.filter(app => internalIds.includes(app.name)))
     })
 		.catch(error => {
 			alert.error(error.toString())
@@ -931,7 +934,9 @@ const AngularWorkflow = (props) => {
 
 			setSelectedActionEnvironment(env)
 			setSelectedActionName(curaction.name)
-			setRequiresAuthentication(curapp.authentication.required)
+
+			setRequiresAuthentication(curapp.authentication.required && curapp.authentication.parameters !== undefined && curapp.authentication.parameters !== null)
+
 
 			if (curapp.authentication.required) {
 				// Setup auth here :)
@@ -1237,12 +1242,20 @@ const AngularWorkflow = (props) => {
 		})
     .then((responseJson) => {
 			var found = false
+			var showEnvCnt = 0 
 			for (var key in responseJson) {
 				if (responseJson[key].default) {
 					setDefaultEnvironmentIndex(key)
 					found = true
-					break
 				}
+
+				if (responseJson[key].archived === false) {
+					showEnvCnt += 1
+				}
+			}
+
+			if (showEnvCnt > 1) {
+				setShowEnvironment(true)
 			}
 
 			if (!found) {
@@ -1813,13 +1826,12 @@ const AngularWorkflow = (props) => {
 				<Tabs
 					value={currentView}
 					indicatorColor="primary"
-					textColor="white"
 					onChange={handleSetTab}
 					aria-label="Left sidebar tab"
 				>
 					<Tab label={
 						<Grid container direction="row" alignItems="center">
-								<Grid item>
+							<Grid item>
 								<AppsIcon style={iconStyle} />
 							</Grid>
 							<Grid item>
@@ -2246,16 +2258,16 @@ const AngularWorkflow = (props) => {
 						<Grid item>
 							<div style={{borderRadius: borderRadius, height: 80, width: 80, backgroundImage: image, backgroundSize: "cover", backgroundRepeat: "no-repeat"}} />
 						</Grid>
-						<Grid style={{display: "flex", flexDirection: "column", marginLeft: "20px"}}>
+						<Grid style={{display: "flex", flexDirection: "column", marginLeft: "20px", minWidth: 185, maxWidth: 185, overflow: "hidden", maxHeight: 80, }}>
 							<Grid item style={{flex: 1}}>
-								<h4 style={{marginBottom: "0px", marginTop: "5px"}}>{newAppname}</h4>
-							</Grid>
-							<Grid item style={{flex: 1, width: "100%", }}>
-								Short description...
+								<h4 style={{marginBottom: 0, marginTop: 5}}>{newAppname}</h4>
 							</Grid>
 							<Grid item style={{flex: 1}}>
 								Version: {app.app_version}	
 							</Grid>
+							<Grid item style={{flex: 1, width: "100%", maxHeight: 27, overflow: "hidden",}}>
+								{app.description}
+							</Grid>
 						</Grid>
 					</Grid>
 					</Paper>
@@ -2291,12 +2303,12 @@ const AngularWorkflow = (props) => {
 					*/}
 					{prioritizedApps.map((app, index) => {	
 						return(
-							<ParsedAppPaper app={app} />	
+							<ParsedAppPaper key={index} app={app} />	
 						)
 					})}
 					{filteredApps.filter(innerapp => !internalIds.includes(innerapp.id)).map((app, index) => {	
 						return(
-							<ParsedAppPaper app={app} />	
+							<ParsedAppPaper key={index} app={app} />	
 						)
 					})}
 					</div>
@@ -2637,6 +2649,9 @@ const AngularWorkflow = (props) => {
 							data.variant = "STATIC_VALUE"
 						}
 
+
+						// selectedAction.selectedAuthentication = e.target.value
+						// selectedAction.authentication_id = e.target.value.id
 						if (!selectedAction.auth_not_required && selectedAction.selectedAuthentication !== undefined && selectedAction.selectedAuthentication.fields !== undefined && selectedAction.selectedAuthentication.fields[data.name] !== undefined) {
 							// This sets the placeholder in the frontend. (Replaced in backend)
 							selectedActionParameters[count].value = selectedAction.selectedAuthentication.fields[data.name]
@@ -3227,7 +3242,7 @@ const AngularWorkflow = (props) => {
 					</div>
 				</div>
 				: null}
-			{environments !== undefined && environments !== null && environments.length > 1 ?
+			{showEnvironment ? 
 				<div style={{marginTop: "20px"}}>
 					<Typography>
 						Environment
@@ -5658,7 +5673,7 @@ const AngularWorkflow = (props) => {
 			return null
 		}
 
-		if (selectedApp.authentication.parameters.length === undefined || selectedApp.authentication.parameters.length === 0) {
+		if (selectedApp.authentication.parameters === null || selectedApp.authentication.parameters === undefined || selectedApp.authentication.parameters.length === 0) {
 			return null
 		}
 

frontend/src/views/AppCreator.jsx

@@ -214,7 +214,7 @@ const AppCreator = (props) => {
 	const [update, setUpdate] = useState("")
 	const [urlPathParameters, ] = useState([]);
 	const [firstrequest, setFirstrequest] = React.useState(true)
-	const [, setBasedata] = React.useState({})
+	const [basedata, setBasedata] = React.useState({})
 	const [actions, setActions] = useState([])
 	const [errorCode, setErrorCode] = useState("")
 	const [appBuilding, setAppBuilding] = useState(false)
@@ -394,8 +394,6 @@ const AppCreator = (props) => {
 			setNewWorkflowTags(newWorkflowTags)
 		}
 
-		console.log(data.info)
-
 		// This is annoying (:
 		var securitySchemes = data.components.securityDefinitions
 		if (securitySchemes === undefined) {
@@ -431,8 +429,6 @@ const AppCreator = (props) => {
 					continue
 				}
 
-				console.log("Method: ", method)
-				console.log("Methodval: ", methodvalue)
 				var newaction = {
 					"name": methodvalue.summary,
 					"description": methodvalue.description,
@@ -604,7 +600,10 @@ const AppCreator = (props) => {
 				"id": props.match.params.appid,
 		}
 
-		if (contact === "") {
+
+		if (basedata.info.contact !== undefined) {
+			data.info["contact"] = basedata.info.contact
+		} else if (contact === "") {
 			  data.info["contact"] =  {
 				"name": "@frikkylikeme",
 				"url": "https://twitter.com/frikkylikeme",  
@@ -629,7 +628,7 @@ const AppCreator = (props) => {
 
 		// Handles actions
 		for (var key in actions) {
-			const item = actions[key]
+			var item = actions[key]
 			if (item.errors.length > 0) {
 				alert.error("Saving with error in action "+item.name)
 			}
@@ -642,6 +641,12 @@ const AppCreator = (props) => {
 				data.paths[item.url] = {}
 			}
 
+			const regex = /[A-Za-z0-9 _]/g;
+			const found = item.name.match(regex);
+			if (found !== null) {
+				item.name = found.join("")
+			}
+
 			data.paths[item.url][item.method.toLowerCase()] = {
 				"responses": {
 					"default": {
@@ -803,8 +808,6 @@ const AppCreator = (props) => {
 			}
 		}
 
-		console.log("ACTIONS: ", data.paths)
-
 		fetch(globalUrl+"/api/v1/verify_openapi", {
     	  method: 'POST',
 				headers: {
@@ -927,6 +930,16 @@ const AppCreator = (props) => {
 		setUrlPathQueries(urlPathQueries)
 	}
 
+	const duplicateAction = (index) => {
+		var newAction = JSON.parse(JSON.stringify(actions[index]))
+		newAction.name = newAction.name+"_copy"
+		newAction.errors.push("Can't have the same name")
+
+		actions.push(newAction)
+		setActions(actions)
+		setUpdate(Math.random())
+	}
+
 	const deleteAction = (index) => {
 		actions.splice(index, 1)
 		setCurrentAction({
@@ -942,6 +955,7 @@ const AppCreator = (props) => {
 		})
 
 		setActions(actions)
+		setUpdate(Math.random())
 	}
 
 	//console.log("Option: ", authenticationOption)
@@ -1018,7 +1032,7 @@ const AppCreator = (props) => {
 								fullWidth={true}
 								defaultValue={data.name}
 								placeholder={'Query name'}
-								helperText={<div style={{color:"white", marginBottom: "2px",}}>Click required switch</div>}
+								helperText={<span style={{color:"white", marginBottom: "2px",}}>Click required switch</span>}
 								onBlur={(e) => {
 									urlPathQueries[index].name = e.target.value
 									setUrlPathQueries(urlPathQueries)
@@ -1059,12 +1073,12 @@ const AppCreator = (props) => {
 				}
 
 
-				const url = baseUrl+data.url
+				const url = data.url
 				return (
 					<Paper style={actionListStyle}>
 						{error} 
 					 	<Tooltip title="Edit action" placement="bottom">
-							<div style={{marginLeft: "5px", width: "100%", cursor: "pointer", maxWidth: 675}} onClick={() => {
+							<div style={{marginLeft: "5px", width: "100%", cursor: "pointer", maxWidth: 725, overflowX: "hidden",}} onClick={() => {
 								setCurrentAction(data)
 								setCurrentActionMethod(data.method)
 								setUrlPathQueries(data.queries)
@@ -1081,7 +1095,14 @@ const AppCreator = (props) => {
 							</div>
 						</Tooltip>
 						*/}
-					 	<Tooltip title="Delete action" placement="bottom">
+						<Tooltip title="Duplicate action" placement="bottom" style={{minWidth: 60}} >
+							<div style={{color: "#f85a3e", cursor: "pointer", marginRight: 15, }} onClick={() => {
+								duplicateAction(index)
+							}}>
+								Duplicate	
+							</div>
+						</Tooltip>
+					 	<Tooltip title="Delete action" placement="bottom" style={{minWidth: 60}} >
 							<div style={{color: "#f85a3e", cursor: "pointer"}} onClick={() => {deleteAction(index)}}>
 								Delete
 							</div>
@@ -1094,7 +1115,7 @@ const AppCreator = (props) => {
 	const setActionField = (field, value) => {
 		currentAction[field] = value
 		setCurrentAction(currentAction)	
-		console.log("ACTION: ", currentAction)
+		//setUrlPathQueries(currentAction.queries)
 	}
 
 	const bodyInfo = actionBodyRequest.includes(currentActionMethod) ?
@@ -1253,7 +1274,7 @@ const AppCreator = (props) => {
 		}
 
 		// FIXME: Frontend isn't updating..
-		if (JSON.stringify(tmpQueries) !== JSON.stringify(urlPathQueries)) {
+		if (tmpQueries.length > 0 && JSON.stringify(tmpQueries) !== JSON.stringify(urlPathQueries)) {
 			setUrlPathQueries(tmpQueries)
 		}
 
@@ -1388,7 +1409,7 @@ const AppCreator = (props) => {
 							setUrlPath(e.target.value)
 							console.log(e.target.value)
 						}}
-						helperText={<div style={{color:"white", marginBottom: "2px",}}>The path to use. Must start with /. Use {"{variablename}"} to have path variables</div>}
+						helperText={<span style={{color:"white", marginBottom: "2px",}}>The path to use. Must start with /. Use {"{variablename}"} to have path variables</span>}
 						InputProps={{
 							classes: {
 								notchedOutline: classes.notchedOutline,
@@ -1485,7 +1506,7 @@ const AppCreator = (props) => {
 						multiline
 						rows="5"
 						onChange={e => setActionField("headers", e.target.value)}
-						helperText={<div style={{color:"white", marginBottom: "2px",}}>Headers that are part of the request</div>}
+						helperText={<span style={{color:"white", marginBottom: "2px",}}>Headers that are part of the request</span>}
 						InputProps={{
 							classes: {
 								notchedOutline: classes.notchedOutline,
@@ -1503,6 +1524,7 @@ const AppCreator = (props) => {
 					Cancel	
 				</Button>
 	      <Button color="primary" variant="outlined" style={{borderRadius: "0px"}} onClick={() => {
+						console.log(urlPathQueries)
 						const errors = getActionErrors()		
 						addActionToView(errors)
 						setActionsModalOpen(false)
@@ -1617,7 +1639,7 @@ const AppCreator = (props) => {
 		img.onload = function() {
 			// img, x, y, width, height
 			//ctx.drawImage(img, 174, 174)
-			console.log("IMG natural: ", img.naturalWidth, img.naturalHeight)
+			//console.log("IMG natural: ", img.naturalWidth, img.naturalHeight)
 			//ctx.drawImage(img, 0, 0, 174, 174)
 			ctx.drawImage(img, 
 				0, 0, img.width, img.height, 
@@ -1626,7 +1648,7 @@ const AppCreator = (props) => {
 
 			const canvasUrl = canvas.toDataURL()
 			if (canvasUrl !== fileBase64) {
-				console.log("SET URL TO: ", canvasUrl)
+				//console.log("SET URL TO: ", canvasUrl)
 				setFileBase64(canvasUrl)
 			}
 		}