Fixed spaces and headers in app generation actions

frontend/src/AngularWorkflow.js

@@ -2411,7 +2411,7 @@ const AngularWorkflow = (props) => {
 							<div style={{marginTop: "20px", marginBottom: "7px", display: "flex"}}>
 								<div style={{width: "17px", height: "17px", borderRadius: 17 / 2, backgroundColor: itemColor, marginRight: "10px"}}/>
 								<div style={{flex: "10"}}> 
-									<b>{data.name}: </b> 
+									<b>{data.name} </b> 
 								</div>
 								<Tooltip color="primary" title="Static data" placement="top">
 									<div style={{cursor: "pointer", color: staticcolor}} onClick={(e) => {
@@ -2497,6 +2497,13 @@ const AngularWorkflow = (props) => {
 		//setStartNode(selectedAction.id)
 	}
 
+	function sortByKey(array, key) {
+	  return array.sort(function(a, b) {
+			var x = a[key]; var y = b[key]
+			return ((x < y) ? -1 : ((x > y) ? 1 : 0))
+		})
+	}
+
 	const appApiView = Object.getOwnPropertyNames(selectedAction).length > 0 && Object.getOwnPropertyNames(selectedApp).length > 0 ? 
 		<div style={appApiViewStyle}>
 			<div style={{display: "flex", minHeight: 40, marginBottom: 30}}>
@@ -2593,7 +2600,7 @@ const AngularWorkflow = (props) => {
 						}
 					}}
 				>
-					{selectedApp.actions.map(data => {
+					{sortByKey(selectedApp.actions, "label").map(data => {
 						var newActionname = data.name
 						if (data.label !== undefined && data.label !== null && data.label.length > 0) {
 							newActionname = data.label
@@ -2605,13 +2612,17 @@ const AngularWorkflow = (props) => {
 						newActionname = newActionname.replace("_", " ")
 						newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
 						return (
-						<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data.name}>
+						<MenuItem style={{maxWidth: 400, overflowX: "hidden", backgroundColor: inputColor, color: "white"}} value={data.name}>
 							{newActionname}
 
 						</MenuItem>
 						)
 					})}
 				</Select>
+				{selectedAction.description !== undefined && selectedAction.description.length > 0 ?
+				<div style={{marginTop: 10, marginBottom: 10, maxHeight: 60, overflow: "hidden"}}>
+					{selectedAction.description}
+				</div> : null}
 				<div style={{marginTop: "10px", borderColor: "white", borderWidth: "2px", marginBottom: 200}}>
 						<AppActionArguments key={selectedAction.id} selectedAction={selectedAction} />
 
@@ -4536,6 +4547,9 @@ const AngularWorkflow = (props) => {
 					boxSelectionEnabled={true}
 					autounselectify={false}
 					cy={(incy) => {
+						// FIXME: There's something specific loading when
+						// you do the first hover of a node. Why is this different?
+						console.log("CY: ", incy)
 						setCy(incy)
 					}}
 				/>