Added more descriptive features to workflows

backend/go-app/main.go

@@ -5181,16 +5181,34 @@ func runInit(ctx context.Context) {
 			log.Printf("Failed setting up new environment")
 		}
 	} else if len(activeOrgs) == 1 {
-		log.Printf("Setting up all environments with org %s", activeOrgs[0].Id)
+		log.Printf("[INFO] Setting up all environments with org %s", activeOrgs[0].Id)
 		var environments []shuffle.Environment
 		q := datastore.NewQuery("Environments")
 		_, err = dbclient.GetAll(ctx, q, &environments)
 		if err == nil {
+			existingEnv := []string{}
+			_ = existingEnv
 			for _, item := range environments {
-				if item.OrgId == activeOrgs[0].Id {
+				//if shuffle.ArrayContains(existingEnv, item.Name) {
+				//	log.Printf("[WARNING] Env %s already exists - deleting it. %#v", item.Name, item)
+				//	err = DeleteKey(ctx, "Environments", item.Name)
+				//	if err != nil {
+				//		log.Printf("[WARNING] Env deletion error: %s", err)
+				//	}
+
+				//	continue
+				//}
+
+				//existingEnv = append(existingEnv, item.Name)
+
+				if item.OrgId == activeOrgs[0].Id && len(item.Id) > 0 {
 					continue
 				}
 
+				if len(item.Id) == 0 {
+					item.Id = uuid.NewV4().String()
+				}
+
 				item.OrgId = activeOrgs[0].Id
 				err = setEnvironment(ctx, &item)
 				if err != nil {

frontend/package.json

@@ -4,6 +4,7 @@
   "version": "0.8.76",
   "private": true,
   "dependencies": {
+    "@babel/helper-regex": "^7.10.5",
     "@material-ui/core": "^4.5.2",
     "@material-ui/data-grid": "^4.0.0-alpha.22",
     "@material-ui/icons": "^4.5.1",

frontend/src/components/ParsedAction.jsx

@@ -492,6 +492,7 @@ const ParsedAction = (props) => {
 
 		// FIXME: Issue #40 - selectedActionParameters not reset
 		if (Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0) {
+			var authWritten = false
 			return (
 				<div style={{marginTop: hideExtraTypes ? 10 : 30}}>	
 					<b>Parameters</b>
@@ -509,8 +510,17 @@ const ParsedAction = (props) => {
 							selectedAction.parameters[count].value = selectedAction.selectedAuthentication.fields[data.name]
 							setSelectedAction(selectedAction)
 							//setUpdate(Math.random())
+							
+							if (authWritten) {
+								return null
+							}
 
-							return null	
+							authWritten = true
+							return (
+								<Typography id="skip_auth" variant="body2" color="textSecondary" style={{marginTop: 5,}}>
+									Authentication fields are hidden
+								</Typography>
+							)
 						}
 
 						var staticcolor = "inherit"
@@ -550,6 +560,7 @@ const ParsedAction = (props) => {
 							console.log("GENERATED WITH DATA: ", data)
 							return null
 						}
+
 						if (selectedApp.generated && data.name === "body") {
 							const regex = /\${(\w+)}/g
 							const found = placeholder.match(regex)
@@ -747,7 +758,7 @@ const ParsedAction = (props) => {
 										changeActionParameter(e, count, data)
 										setUpdate(Math.random())
 									}}
-									style={{backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px"}}
+									style={{backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px", borderRadius: theme.palette.borderRadius,}}
 									>
 									{selectedActionParameters[count].options.map((data, index) => {
 										const split_data = data.split("||")
@@ -1086,7 +1097,7 @@ const ParsedAction = (props) => {
 										onClick={() => setShowAutocomplete(true)}
 										fullWidth
 										open={showAutocomplete}
-										style={{border: `2px solid #f85a3e`, color: "white", height: 50, marginTop: 2,}}
+										style={{border: `2px solid #f85a3e`, color: "white", height: 50, marginTop: 2, borderRadius: theme.palette.borderRadius,}}
 										onChange={(e) => {
 											if (selectedActionParameters[count].value[selectedActionParameters[count].value.length-1] === ".") {
 												e.target.value.autocomplete = e.target.value.autocomplete.slice(1, e.target.value.autocomplete.length)
@@ -1168,7 +1179,7 @@ const ParsedAction = (props) => {
 								</Tooltip>
 							</IconButton>
 							<span style={{}}>
-								<Typography style={{marginTop: 5, marginLeft: 10,}}><a rel="norefferer" href="https://shuffler.io/docs/workflows#nodes" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>What are actions?</a></Typography>
+								<Typography style={{marginTop: 5,}}><a rel="norefferer" href="https://shuffler.io/docs/workflows#nodes" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>What are actions?</a></Typography>
 								{selectedAction.errors !== undefined && selectedAction.errors !== null && selectedAction.errors.length > 0 ? 
 									<div>
 										Errors: {selectedAction.errors.join("\n")}
@@ -1197,7 +1208,7 @@ const ParsedAction = (props) => {
 										getApp(newversion.id, true) 
 									}
 								}}
-								style={{marginTop: 10, backgroundColor: theme.palette.surfaceColor, backgroundColor: theme.palette.inputColor, color: "white", height: 35, marginleft: 10,}}
+								style={{marginTop: 10, backgroundColor: theme.palette.surfaceColor, backgroundColor: theme.palette.inputColor, color: "white", height: 35, marginleft: 10, borderRadius: theme.palette.borderRadius,}}
 								SelectDisplayProps={{
 									style: {
 										marginLeft: 10,
@@ -1265,7 +1276,7 @@ const ParsedAction = (props) => {
 								setSelectedAction(selectedAction)
 								setUpdate(Math.random())
 							}}
-							style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, maxWidth: rightsidebarStyle.maxWidth-80,}}	
+							style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, maxWidth: rightsidebarStyle.maxWidth-80, borderRadius: theme.palette.borderRadius,}}	
 						>
 							{selectedAction.authentication.map(data => {
 								//console.log("AUTH DATA: ", data)
@@ -1295,6 +1306,7 @@ const ParsedAction = (props) => {
 					</div>
 				</div>
 				: null}
+
 			{showEnvironment !== undefined && showEnvironment ? 
 				<div style={{marginTop: "20px"}}>
 					<Typography>
@@ -1315,7 +1327,7 @@ const ParsedAction = (props) => {
 							selectedAction.environment = env.Name
 							setSelectedAction(selectedAction)
 						}}
-						style={{backgroundColor: theme.palette.inputColor, color: "white", height: "50px"}}
+						style={{backgroundColor: theme.palette.inputColor, color: "white", height: "50px", borderRadius: theme.palette.borderRadius,}}
 					>
 						{environments.map(data => {
 							if (data.archived) {
@@ -1331,6 +1343,7 @@ const ParsedAction = (props) => {
 					</Select>
 				</div>
 				: null}
+
 			{workflow.execution_variables !== undefined && workflow.execution_variables !== null && workflow.execution_variables.length > 0 ?
 				<div style={{marginTop: "20px"}}>
 					Set execution variable (optional) 
@@ -1352,7 +1365,7 @@ const ParsedAction = (props) => {
 							setSelectedAction(selectedAction)
 							setUpdate(Math.random())
 						}}
-						style={{backgroundColor: theme.palette.inputColor, color: "white", height: "50px"}}
+						style={{backgroundColor: theme.palette.inputColor, color: "white", height: "50px", borderRadius: theme.palette.borderRadius,}}
 					>
 							<MenuItem style={{backgroundColor: theme.palette.inputColor, color: "white"}} value="No selection">
 								<em>No selection</em>
@@ -1366,6 +1379,7 @@ const ParsedAction = (props) => {
 					</Select>
 				</div>
 				: null}
+
 			<Divider style={{marginTop: "20px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
 			<div style={{flex: "6", marginTop: "20px"}}>
 				{hideExtraTypes ? null : 
@@ -1373,6 +1387,7 @@ const ParsedAction = (props) => {
 						<b>Actions</b>
 					</div>
 				}
+
 				{setNewSelectedAction !== undefined ? 
 					<Select
 						value={selectedAction.name}
@@ -1383,7 +1398,6 @@ const ParsedAction = (props) => {
 							style: {
 								marginLeft: 10,
 								maxHeight: 200,
-								borderRadius: theme.palette.borderRadius,
 							}
 						}}
 					>
@@ -1407,10 +1421,12 @@ const ParsedAction = (props) => {
 						})}
 					</Select>
 				: null}
+
 				{selectedAction.description !== undefined && selectedAction.description.length > 0 && hideExtraTypes !== true ?
 				<div style={{marginTop: 10, marginBottom: 10, maxHeight: 60, overflow: "hidden"}}>
 					{selectedAction.description}
 				</div> : null}
+
 				<div style={{marginTop: "10px", borderColor: "white", borderWidth: "2px", marginBottom: hideExtraTypes ? 50 : 200 ,}}>
 					<AppActionArguments key={selectedAction.id} selectedAction={selectedAction} />
 				</div>

frontend/src/defaultCytoscapeStyle.js

@@ -24,7 +24,7 @@ const data = [{
 				'curve-style': 'unbundled-bezier',
 				'label': 'data(label)',
 				'text-margin-y': '-15px',
-				'width': '2px',
+				'width': '5px',
 				"color": "white",
 				"line-fill": "linear-gradient",
 				"line-gradient-stop-positions": ["0.0", "100"],
@@ -234,6 +234,17 @@ const data = [{
 				'transition-duration': '0.25s',
 			},
 		},
+		{
+			selector: `edge[?decorator]`,
+			css: {
+				'width': '1px',
+				'line-style': 'dashed',
+				"line-fill": "linear-gradient",
+				'target-arrow-color': '#f34079',
+				"line-gradient-stop-positions": ["0.0", "100"],
+				"line-gradient-stop-colors": ["#f86a3e", "#f34079"],
+			},
+		},
 		{
 			selector: 'edge.success-highlight',
 			css: {

frontend/src/views/Admin.jsx

@@ -1644,7 +1644,7 @@ const Admin = (props) => {
 							}
 
 							const item = selectedOrganization.sync_features[key]
-							const newkey = key.replace("_", " ")
+							const newkey = key.replaceAll("_", " ")
 							const griditem = {
 								"primary": newkey,
 								"secondary": item.description === undefined || item.description === null || item.description.length === 0 ? "Not defined yet" : item.description,

frontend/src/views/AppCreator.jsx

@@ -1409,11 +1409,14 @@ const AppCreator = (props) => {
 	//console.log("Location: ", parameterLocation)
   //console.log("Name: ", parameterName)
 	const apiKey = authenticationOption === "API key" ? 
-		<div style={{color: "white"}}>
+		<div style={{color: "white", marginTop: 20, }}>
-			<h4>API key</h4>
+			<Typography variant="body1">API key authentication</Typography>
+			<Typography variant="body2" color="textSecondary">
+				Add the name of the field used for authentication, e.g. "X-APIKEY"
+			</Typography>
 			<TextField
 				required
-				style={{flex: "1", marginRight: "15px", backgroundColor: inputColor}}
+				style={{flex: "1", backgroundColor: inputColor}}
 				fullWidth={true}
 				placeholder="Field Name (not token)"
 				type="name"
@@ -2550,9 +2553,9 @@ const AppCreator = (props) => {
 							/>
 						</div>
 					</div>
-					<Divider style={{marginBottom: "10px", marginTop: "30px", height: "1px", width: "100%", backgroundColor: "grey"}}/>
+					<Divider style={{marginBottom: 10, marginTop: 30, height: 1, width: "100%", backgroundColor: "grey"}}/>
-					<h3 style={{marginBottom: "10px", color: "white",}}>API information</h3>
+					<Typography variant="h6" style={{marginTop: 10, marginBottom: 10, color: "white",}}>API information</Typography>
-					<span style={{color: "white"}}>Base URL - leave empty if user changeable</span>
+					<Typography variant="body1">Base URL - used as suggestion to the user</Typography>
 					<TextField
 						color="primary"
 						style={{backgroundColor: inputColor, marginTop: "5px"}}
@@ -2590,9 +2593,8 @@ const AppCreator = (props) => {
 							setBaseUrl(tmpstring)
 						}}
 					/>
-					<FormControl style={{marginTop: "15px",}} variant="outlined">
+					<FormControl style={{marginTop: 30,}} variant="outlined">
-						<h5 style={{marginBottom: "10px", color: "white",}}>Authentication
+						<Typography variant="body1">Authentication type</Typography>
-						</h5>
 						<Select
 							fullWidth
 							onChange={(e) => {