Added action and parameter info to App selection

frontend/src/AngularWorkflow.js

@@ -2338,10 +2338,15 @@ const AngularWorkflow = (props) => {
 							<div>
 								<Select
 								PaperProps={{
-				    			  style: {
+				    			style: {
-				    			  	backgroundColor: inputColor,
+				    			  backgroundColor: inputColor,
-				    			  }
+				    			}
-				    			}}
+				    		}}
+								SelectDisplayProps={{
+									style: {
+										marginLeft: 10,
+									}
+								}}
 								value={selectedActionParameters[count].action_field}
 								fullWidth
 								onChange={(e) => {
@@ -2392,10 +2397,15 @@ const AngularWorkflow = (props) => {
 								datafield = 
 								<Select
 									PaperProps={{
-				    			  		style: {
+				    			  style: {
-				    			  			backgroundColor: inputColor,
+				    			  	backgroundColor: inputColor,
-				    			  		}
+				    			  }
-				    				}}
+				    			}}
+									SelectDisplayProps={{
+										style: {
+											marginLeft: 10,
+										}
+									}}
 									fullWidth
 									value={selectedAction.parameters[count].action_field}
 									onChange={(e) => {
@@ -2551,6 +2561,11 @@ const AngularWorkflow = (props) => {
 							backgroundColor: inputColor,
 						}
 					}}
+					SelectDisplayProps={{
+						style: {
+							marginLeft: 10,
+						}
+					}}
 					fullWidth
 					onChange={(e) => {
 						const env = environments.find(a => a.Name === e.target.value)
@@ -2586,6 +2601,11 @@ const AngularWorkflow = (props) => {
 					fullWidth
 					onChange={setNewSelectedAction}
 					style={{backgroundColor: inputColor, color: "white", height: "50px"}}
+					SelectDisplayProps={{
+						style: {
+							marginLeft: 10,
+						}
+					}}
 				>
 					{selectedApp.actions.map(data => {
 						var newActionname = data.name
@@ -2820,18 +2840,23 @@ const AngularWorkflow = (props) => {
 			datafield = 
 			<div>
 				<Select
-				value={data.action_field}
+					value={data.action_field}
-				fullWidth
+					fullWidth
-				onChange={(e) => {
+					onChange={(e) => {
-					changeActionVariable(e.target.value, data.value)
+						changeActionVariable(e.target.value, data.value)
-				}}
+					}}
-				style={{backgroundColor: inputColor, color: "white", height: "50px"}}
+					style={{backgroundColor: inputColor, color: "white", height: "50px"}}
-				>
+					>
-				{parents.map(data => (
+					{parents.map(data => (
-					<MenuItem style={{backgroundColor: inputColor, color: "white"}}  value={data.label}>
+						<MenuItem style={{backgroundColor: inputColor, color: "white"}}  value={data.label}>
-						{data.label}
+							{data.label}
-					</MenuItem>
+						</MenuItem>
-				))}
+					))}
+					SelectDisplayProps={{
+						style: {
+							marginLeft: 10,
+						}
+					}}
 			</Select>
 			<TextField
 				style={{backgroundColor: inputColor}} 
@@ -2872,11 +2897,16 @@ const AngularWorkflow = (props) => {
 				<Select
 					fullWidth
 					value={data.action_field}
-				    PaperProps={{
+				  PaperProps={{
-				      style: {
+				    style: {
-				      	backgroundColor: inputColor,
+				      backgroundColor: inputColor,
-				      }
+				    }
-				    }}
+				  }}
+					SelectDisplayProps={{
+						style: {
+							marginLeft: 10,
+						}
+					}}
 					onChange={(e) => {
 						changeActionVariable(e.target.value, data.value)
 					}}
@@ -3382,11 +3412,16 @@ const AngularWorkflow = (props) => {
 							value={selectedTrigger.parameters[0].value.split(splitter)}
 							style={{backgroundColor: inputColor, color: "white"}}
 							PaperProps={{
-				    			style: {
+				    		style: {
 									height: "200px",
-				    			  	backgroundColor: inputColor,
+				    			backgroundColor: inputColor,
-				    			}
+				    		}
-				    		}}
+				    	}}
+							SelectDisplayProps={{
+								style: {
+									marginLeft: 10,
+								}
+							}}
 							onChange={(e) => {
 								//setTriggerFolderWrapper(e)
 								setTriggerFolderWrapperMulti(e)

frontend/src/Apps.js

@@ -3,13 +3,16 @@ import React, { useEffect} from 'react';
 import { useInterval } from 'react-powerhooks';
 
 import Grid from '@material-ui/core/Grid';
+import Select from '@material-ui/core/Select';
 import Paper from '@material-ui/core/Paper';
 import Divider from '@material-ui/core/Divider';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
 import Tooltip from '@material-ui/core/Tooltip';
+import Input from '@material-ui/core/Input';
 import YAML from 'yaml'
 import {Link} from 'react-router-dom';
 
@@ -39,6 +42,7 @@ const Apps = (props) => {
 	const [validation, setValidation] = React.useState(false)
 	const [isLoading, setIsLoading] = React.useState(false)
 	const [appSearchLoading, setAppSearchLoading] = React.useState(false)
+	const [selectedAction, setSelectedAction] = React.useState({})
 
 	const [openApi, setOpenApi] = React.useState("")
 	const [openApiData, setOpenApiData] = React.useState("")
@@ -109,6 +113,9 @@ const Apps = (props) => {
 			setFilteredApps(responseJson)
 			if (responseJson.length > 0) {
 				setSelectedApp(responseJson[0])
+				if (responseJson[0].actions.length > 0) {
+					setSelectedAction(responseJson[0].actions[0])
+				}
 			}
     })
 		.catch(error => {
@@ -211,6 +218,10 @@ const Apps = (props) => {
 			<Paper square style={paperAppStyle} onClick={() => {
 				if (selectedApp.id !== data.id) {
 					setSelectedApp(data)
+					if (data.actions.length > 0) {
+						console.log(data.actions[0])
+						setSelectedAction(data.actions[0])
+					}
 				}
 			}}>
 				<Grid container style={{margin: 10, flex: "10"}}>
@@ -304,9 +315,66 @@ const Apps = (props) => {
 				<h2>{newAppname}</h2>
 				<p>{description}</p>
 				<Divider style={{marginBottom: "10px", marginTop: "10px", backgroundColor: dividerColor}}/>
-				<p>URL: {selectedApp.link}</p>
+				{selectedApp.link.length > 0 ? <p>URL: {selectedApp.link}</p> : null}
 				<p>ID: {selectedApp.id}</p>
-				<p>PrivateID: {selectedApp.privateId}</p>
+				{selectedApp.privateId !== undefined && selectedApp.privateId.length > 0 ? <p>PrivateID: {selectedApp.privateId}</p> : null}
+			
+				<div style={{marginTop: 15, marginBottom: 15}}>
+					<b>Actions</b>
+					{selectedAction.label}
+					<Select
+						fullWidth
+						value={selectedAction}
+						onChange={(event) => {
+							setSelectedAction(event.target.value)
+						}}
+						style={{backgroundColor: inputColor, color: "white", height: "50px"}}
+						SelectDisplayProps={{
+							style: {
+								marginLeft: 10,
+							}
+						}}
+					>
+						{selectedApp.actions.map(data => {
+								var newActionname = data.label !== undefined && data.label.length > 0 ? data.label : data.name
+
+								// ROFL FIXME - loop
+								newActionname = newActionname.replace("_", " ")
+								newActionname = newActionname.replace("_", " ")
+								newActionname = newActionname.replace("_", " ")
+								newActionname = newActionname.replace("_", " ")
+								newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
+								return (
+									<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+										{newActionname}
+
+									</MenuItem>
+								)
+							})}
+					</Select>
+				</div>
+
+				{selectedAction.parameters !== undefined ? 
+					<div style={{marginTop: 15, marginBottom: 15}}>
+						<b>Arguments</b>
+						{selectedAction.parameters.map(data => {
+								var itemColor = "#f85a3e"
+								if (!data.required) {
+									itemColor = "#ffeb3b"
+								}
+
+								const circleSize = 10
+								return (
+									<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+										<div style={{width: circleSize, height: circleSize, borderRadius: circleSize / 2, backgroundColor: itemColor, marginRight: "10px"}}/>
+										{data.name}
+
+									</MenuItem>
+								)
+							})}
+					</div>
+				: null}
+
 				{editButton}
 				{deleteButton}
 			</div>
@@ -384,6 +452,7 @@ const Apps = (props) => {
 							<h2>Available integrations</h2> 
 						</div>
 						{isLoading ? <CircularProgress style={{marginTop: 13, marginRight: 15}} /> : null}
+						{/*
 						<Button
 							variant="outlined"
 							component="label"
@@ -395,6 +464,7 @@ const Apps = (props) => {
 						>
 							Load apps
 						</Button>
+						*/}
 						<Button
 							variant="outlined"
 							component="label"