Fixed more autocompletion pieces for the code editor and added header field parsing

frontend/src/components/DetectionFramework.jsx

@@ -552,13 +552,18 @@ const Framework = (props) => {
 			const nodes = cy.nodes().jsons()
 			for (var key in nodes) {
 				const node = nodes[key]
-				//console.log("NOD: ", node.data, discoveryWrapper.id)
+				var newSearchName = discoveryWrapper.id.valueOf()
-				if (node.data.id === discoveryWrapper.id) {
+				if (newSearchName === "EMAIL") {
+					newSearchName = "COMMS"
+				}
+
+				if (node.data.id === newSearchName) {
 					const tmpnode = cy.getElementById(node.data.id)
 					if (tmpnode !== undefined) {
 						tmpnode.select()
 					}
 
+					setDefaultSearch(discoveryWrapper.id)
 					setPaperTitle(discoveryWrapper.id)
 				}
 			}

frontend/src/components/Header.js

@@ -522,7 +522,7 @@ const Header = (props) => {
       </List>
 			{!isLoaded ? null : 
 				userdata.chat_disabled === true ? null : 
-				<div style={{flex: 1, marginTop: 5,}}>
+				<div style={{flex: 1, }}>
 					<SearchField serverside={false} userdata={userdata} />
 				</div>
 			}
@@ -628,7 +628,7 @@ const Header = (props) => {
       </div>
 			{!isLoaded ? null : 
 				userdata.chat_disabled === true ? null : 
-				<div style={{flex: 1, marginTop: 5,}}>
+				<div style={{flex: 1, }}>
 					<SearchField serverside={false} userdata={userdata} />
 				</div>
 			}

frontend/src/components/ParsedAction.jsx

@@ -1302,6 +1302,8 @@ const ParsedAction = (props) => {
 
 							if (data.value.length === 0) {
               	if (data.name.toLowerCase() === "headers") {
+									console.log("Should show headers field instead with + and -!")
+
 									data.value = data.example
 								}
 							}
@@ -1666,6 +1668,198 @@ const ParsedAction = (props) => {
               />
             );
 		
+						// Finds headers from a string to be used for autocompletion
+						const findHeaders = (inputdata) => {
+							const splitdata = inputdata.split("\n")
+
+							var foundnewline = false
+							var allValues = []
+							for (var key in splitdata) {
+								const line = splitdata[key]
+								if (line === "") {
+									foundnewline = true 
+									continue
+								}
+
+								const splitvalue = ""
+								if (line.includes(":")) {
+									splitvalue = ":"
+								}
+
+								if (line.includes("=")) {
+									splitvalue = "="
+								}
+
+								if (splitvalue.length === 0){
+									allValues.push({
+										key: line,
+										value: "",
+									})
+									continue
+								}
+
+								const splitKeys = line.split(splitvalue)
+								if (splitKeys.length > 1) {
+									allValues.push({
+										key: splitKeys[0].trim(),
+										value: splitKeys[1].trim(),
+									})
+								} else {
+									console.log("No keys for ", line)
+								}
+							}
+
+							// Just add one
+							if (foundnewline) {
+								allValues.push({
+									key: "",
+									value: "",
+								})
+							}
+
+							return allValues
+						}
+
+						if (data.name.toLowerCase() === "headers") {
+							//var tmpheaders = findHeaders(data.value)
+							var tmpheaders = findHeaders(selectedActionParameters[count].value)
+							datafield = 
+								<div>
+									{tmpheaders.map((inputdata, index) => {
+										const oldkey = inputdata.key
+										const oldval = inputdata.value
+
+										return (
+											<span key={index}>
+												<div style={{display: "flex"}}>
+													<TextField
+														placeholder="Key"
+														style={{flex: 5}}
+														defaultValue={inputdata.key}
+														onBlur={(e) => {
+															console.log("Change from oldkey to new: ", oldkey, e.target.value)
+
+															// Find the right line to replace!
+															//const newval = selectedActionParameters[count].value.replace(oldval, e.target.value, 1)
+															const tmpsplit = selectedActionParameters[count].value.split("\n")
+															var valsplit = []
+															var add_empty = false
+															for (var key in tmpsplit) {
+																if (tmpsplit[key] === "") {
+																	add_empty = true
+																	continue
+																}
+
+																valsplit.push(tmpsplit[key])
+															}
+
+															if (add_empty) {
+																valsplit.push("")
+															}
+															console.log("Split: ", valsplit)
+
+															var newarr = []
+															for (var key in valsplit) {
+																const line = valsplit[key]
+
+																if (key == index) {
+																	if (oldkey === "") {
+																		if (line.includes("=") || line.includes(":")) {
+																			newarr.push(e.target.value + line)
+																		} else {
+																			newarr.push(e.target.value + ": " + line)
+																		}
+																	} else {
+																		newarr.push(line.replace(oldkey, e.target.value, 1))
+																	}
+
+																} else {
+																	newarr.push(line)
+																}
+															}
+
+															const newval = newarr.join("\n")
+															console.log("Fixed: ", newval)
+
+      												selectedActionParameters[count].value = newval
+      												selectedAction.parameters[count].value = newval
+      												setSelectedAction(selectedAction)
+          										setSelectedActionParameters(selectedActionParameters)
+														}}
+													/>
+													<TextField
+														placeholder="Value"
+														style={{flex: 6}}
+														defaultValue={inputdata.value}
+														onBlur={(e) => {
+															console.log("Change from oldval to new: ", oldval, e.target.value)
+
+															// Find the right line to replace!
+															//const newval = selectedActionParameters[count].value.replace(oldval, e.target.value, 1)
+															const tmpsplit = selectedActionParameters[count].value.split("\n")
+															var valsplit = []
+															var add_empty = false
+															for (var key in tmpsplit) {
+																if (tmpsplit[key] === "") {
+																	add_empty = true
+																	continue
+																}
+
+																valsplit.push(tmpsplit[key])
+															}
+
+															if (add_empty) {
+																valsplit.push("")
+															}
+															console.log("Split: ", valsplit)
+
+															var newarr = []
+															for (var key in valsplit) {
+																const line = valsplit[key]
+
+																if (key == index) {
+																	if (oldval === "") {
+																		if (line.includes("=") || line.includes(":")) {
+																			newarr.push(line + e.target.value)
+																		} else {
+																			newarr.push(line + ": " + e.target.value)
+																		}
+																	} else {
+																		newarr.push(line.replace(oldval, e.target.value, 1))
+																	}
+
+																} else {
+																	newarr.push(line)
+																}
+															}
+
+															const newval = newarr.join("\n")
+															console.log("Fixed: ", newval)
+
+      												selectedActionParameters[count].value = newval
+      												selectedAction.parameters[count].value = newval
+      												setSelectedAction(selectedAction)
+          										setSelectedActionParameters(selectedActionParameters)
+														}}
+													/>
+												</div>
+											</span>
+										)
+									})}
+									<Button variant="outlined" fullWidth onClick={() => {
+										console.log("Add header")
+
+										selectedActionParameters[count].value += "\n"
+										selectedAction.parameters[count].value += "\n"
+          					setSelectedActionParameters(selectedActionParameters)
+										setSelectedAction(selectedAction)
+										setUpdate(Math.random())
+									}}>
+										<AddIcon style={{ marginRight: 10 }} /> Add header
+									</Button>
+								</div>
+						}
+
             //console.log("FIELD VALUE: ", data.value)
             //const regexp = new RegExp("\W+\.", "g")
             //let match
@@ -2223,7 +2417,6 @@ const ParsedAction = (props) => {
 
 						const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
 						const hasAutocomplete = data.autocompleted === true
-						console.log("AUTOCOMPLeTe: ", hasAutocomplete)
             return (
               <div key={data.name}>
                 {hideBodyButton}
@@ -2550,8 +2743,8 @@ const ParsedAction = (props) => {
                   onClick={() => {}}
                 >
                   <a
-                    rel="norefferer"
                     href="https://shuffler.io/docs/workflows#nodes"
+                    rel="norefferer"
                     target="_blank"
                     style={{ textDecoration: "none", color: "#f85a3e" }}
                   >

frontend/src/components/Searchfield.js

@@ -83,7 +83,7 @@ const SearchField = props => {
 			*/
 
 		return (
-		  <form id="search_form" noValidate type="searchbox" action="" role="search" onClick={() => {
+		  <form id="search_form" noValidate type="searchbox" action="" role="search" style={{margin: isCloud ? 10 : 0, }} onClick={() => {
 			}}>
 				<TextField 
 					fullWidth
@@ -202,7 +202,6 @@ const SearchField = props => {
 							const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
 							const avatar = baseImage
 
-							console.log("CLOUD: ", isCloud)
 							var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
 							parsedUrl += `?queryID=${hit.__queryID}`
 

frontend/src/components/ShuffleCodeEditor.jsx

@@ -17,10 +17,19 @@ import Checkbox from '@mui/material/Checkbox';
 import { orange } from '@mui/material/colors';
 import { isMobile } from "react-device-detect" 
 import { GetParsedPaths } from "../views/Apps.jsx";
+import NestedMenuItem from "material-ui-nested-menu-item";
 
 import {
 	FullscreenExit as FullscreenExitIcon,
-} from "@material-ui/icons";
+	Extension as ExtensionIcon, 
+  Apps as AppsIcon,
+  FavoriteBorder as FavoriteBorderIcon,
+  Schedule as ScheduleIcon,
+  FormatListNumbered as FormatListNumberedIcon,
+	SquareFoot as SquareFootIcon,
+  Circle as  CircleIcon,
+  Add as AddIcon,
+} from '@mui/icons-material';
 
 import {
 	AutoFixHigh as AutoFixHighIcon, CompressOutlined, QrCodeScannerOutlined,
@@ -38,6 +47,7 @@ import 'codemirror/theme/gruvbox-dark.css';
 import 'codemirror/theme/duotone-light.css';
 import { padding, textAlign } from '@mui/system';
 import data from '../frameworkStyle.jsx';
+import { useNavigate, Link, useParams } from "react-router-dom";
 
 const liquidFilters = [
 	{"name": "Size", "value": "size", "example": ""},
@@ -78,10 +88,21 @@ const CodeEditor = (props) => {
 	const [anchorEl3, setAnchorEl3] = React.useState(null);
 	const [mainVariables, setMainVariables] = React.useState([]);
 	const [availableVariables, setAvailableVariables] = React.useState([]);
+
+  const [menuPosition, setMenuPosition] = useState(null);
+  const [showAutocomplete, setShowAutocomplete] = React.useState(false);
+
 	const liquidOpen = Boolean(anchorEl);
 	const mathOpen = Boolean(anchorEl2);
 	const pythonOpen = Boolean(anchorEl3);
 
+	const handleMenuClose = () => {
+		setShowAutocomplete(false);
+
+		setMenuPosition(null);
+	}
+
+	let navigate = useNavigate();
 	// console.log("is it file editor? - ", isFileEditor);
 
 	useEffect(() => {
@@ -323,21 +344,61 @@ const CodeEditor = (props) => {
 		const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
 		//console.log(found)
 
+		// Whelp this is inefficient af. Single loop pls
 		try{
 			// When the found array is empty.
 			for (var i = 0; i < found.length; i++) {
-				// console.log(found[i]);
+				found[i] = found[i].toLowerCase()
 
+				var valuefound = false
 				for (var j = 0; j < actionlist.length; j++) {
 					if(found[i].slice(1,).toLowerCase() === actionlist[j].autocomplete.toLowerCase()){
-						input = input.replace(found[i], JSON.stringify(actionlist[j].example));
+						valuefound = true 
-						// console.log(input)
+						try {
-						// console.log(actionlist[j].example)
+							input = input.replace(found[i], JSON.stringify(actionlist[j].example));
+						} catch (e) { 
+							input = input.replace(found[i], actionlist[j].example)
+						}
+					} else {
+					}
+				}
+
+				if (!valuefound && availableVariables.includes(found[i])) {
+					var shouldbreak = false
+					for (var k=0; k < actionlist.length; k++){
+						var parsedPaths = []
+						if (typeof actionlist[k].example === "object") {
+							parsedPaths = GetParsedPaths(actionlist[k].example, "");
+						}
+
+						for (var key in parsedPaths) {
+							const fullpath = "$"+actionlist[k].autocomplete.toLowerCase()+parsedPaths[key].autocomplete
+							if (fullpath === found[i]) {
+								//if (actionlist[k].example === undefined) {
+								//	actionlist[k].example = "TMP"
+								//}
+
+								try {
+									input = input.replace(found[i], JSON.stringify(actionlist[k].example))
+								} catch (e) {
+									input = input.replace(found[i], actionlist[k].example)
+								}
+
+								shouldbreak = true 
+								console.log("New input: ", input)
+								break
+							}
+						}
+
+						if (shouldbreak) {
+							break
+						}
 					}
-					// console.log(actionlist[j].autocomplete);
 				}
 			}
-		} catch (e) {}
+		} catch (e) {
+			console.log("Replace error: ", e)
+		}
 
 		const tmpValidation = validateJson(input.valueOf())
 		//setValidation(true)
@@ -350,6 +411,29 @@ const CodeEditor = (props) => {
 		}
 	}
 
+  const handleItemClick = (values) => {
+		if (
+			values === undefined ||
+			values === null ||
+			values.length === 0
+		) {
+			return;
+		}
+
+		var toComplete = localcodedata.trim().endsWith("$") ? values[0].autocomplete : "$" + values[0].autocomplete;
+
+		toComplete = toComplete.toLowerCase().replaceAll(" ", "_");
+		for (var key in values) {
+			if (key == 0 || values[key].autocomplete.length === 0) {
+				continue;
+			}
+
+			toComplete += values[key].autocomplete;
+		}
+
+		setlocalcodedata(localcodedata+toComplete)
+		setMenuPosition(null)
+	}
 
 	const handleClick = (item) => {
 		if (item === undefined || item.value === undefined || item.value === null) {
@@ -430,7 +514,30 @@ const CodeEditor = (props) => {
 					</DialogTitle>
 					<IconButton
 						style={{
-							marginLeft: isMobile ? "80%" : 400, 
+							marginLeft: isMobile ? "80%" : 350, 
+							height: 50, 
+							width: 50, 
+						}}
+						onClick={() => {
+							
+						}}
+					>
+						<Tooltip
+							color="primary"
+							title={"Test Liquid in the playground"}
+							placement="top"
+						>
+							<a 
+								href="https://pwwang.github.io/liquidpy/playground/"
+								rel="norefferer"
+                target="_blank"
+							>
+								<ExtensionIcon style={{color: "rgba(255,255,255,0.7)"}}/>
+							</a>
+						</Tooltip>
+					</IconButton>
+					<IconButton
+						style={{
 							height: 50, 
 							width: 50, 
 						}}
@@ -557,7 +664,264 @@ const CodeEditor = (props) => {
 						)
 					})}
 				</Menu> 
-			</div> }
+				<Button
+					id="basic-button"
+					aria-haspopup="true"
+					aria-controls={!!menuPosition ? 'basic-menu' : undefined}
+					aria-expanded={!!menuPosition ? 'true' : undefined}
+					variant="outlined"
+					style={{
+					  textTransform: "none",
+						width: 130, 
+						marginLeft: 170, 
+					}}
+					onClick={(event) => {
+						setMenuPosition({
+							top: event.pageY,
+							left: event.pageX,
+						})
+					}}
+				>
+					<AddIcon /> Autocomplete 
+				</Button>
+				<Menu
+					anchorReference="anchorPosition"
+					anchorPosition={menuPosition}
+					onClose={() => {
+						handleMenuClose();
+					}}
+					open={!!menuPosition}
+					style={{
+						color: "white",
+						marginTop: 2,
+						maxHeight: 650,
+					}}
+				>
+					{actionlist.map((innerdata) => {
+						const icon =
+							innerdata.type === "action" ? (
+								<AppsIcon style={{ marginRight: 10 }} />
+							) : innerdata.type === "workflow_variable" ||
+								innerdata.type === "execution_variable" ? (
+								<FavoriteBorderIcon style={{ marginRight: 10 }} />
+							) : (
+								<ScheduleIcon style={{ marginRight: 10 }} />
+							);
+
+						const handleExecArgumentHover = (inside) => {
+							var exec_text_field = document.getElementById(
+								"execution_argument_input_field"
+							);
+							if (exec_text_field !== null) {
+								if (inside) {
+									exec_text_field.style.border = "2px solid #f85a3e";
+								} else {
+									exec_text_field.style.border = "";
+								}
+							}
+						};
+
+						const handleActionHover = (inside, actionId) => {
+						};
+
+						const handleMouseover = () => {
+							if (innerdata.type === "Execution Argument") {
+								handleExecArgumentHover(true);
+							} else if (innerdata.type === "action") {
+								handleActionHover(true, innerdata.id);
+							}
+						};
+
+						const handleMouseOut = () => {
+							if (innerdata.type === "Execution Argument") {
+								handleExecArgumentHover(false);
+							} else if (innerdata.type === "action") {
+								handleActionHover(false, innerdata.id);
+							}
+						};
+
+						var parsedPaths = [];
+						if (typeof innerdata.example === "object") {
+							parsedPaths = GetParsedPaths(innerdata.example, "");
+						}
+
+						const coverColor = "#82ccc3"
+						//menuPosition.left -= 50
+						//menuPosition.top -= 250 
+						//console.log("POS: ", menuPosition1)
+						var menuPosition1 = menuPosition
+						if (menuPosition1 === null) {
+							menuPosition1 = {
+								"left": 0,
+								"top": 0,
+							}
+						} else if (menuPosition1.top === null || menuPosition1.top === undefined) {
+							menuPosition1.top = 0
+						} else if (menuPosition1.left === null || menuPosition1.left === undefined) {
+							menuPosition1.left = 0
+						}
+
+						//console.log("POS1: ", menuPosition1)
+
+						return parsedPaths.length > 0 ? (
+							<NestedMenuItem
+								key={innerdata.name}
+								label={
+									<div style={{ display: "flex", marginLeft: 0, }}>
+										{icon} {innerdata.name}
+									</div>
+								}
+								parentMenuOpen={!!menuPosition}
+								style={{
+									color: "white",
+									minWidth: 250,
+									maxWidth: 250,
+									maxHeight: 50,
+									overflow: "hidden",
+								}}
+								onClick={() => {
+									console.log("CLICKED: ", innerdata);
+									console.log(innerdata.example)
+									handleItemClick([innerdata]);
+								}}
+							>
+								<Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition1.top-200, left: menuPosition1.left-270, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
+									<MenuItem
+										key={innerdata.name}
+										style={{
+											backgroundColor: theme.palette.inputColor,
+											marginLeft: 15,
+											color: "white",
+											minWidth: 250,
+											maxWidth: 250,
+											padding: 0, 
+											position: "relative",
+										}}
+										value={innerdata}
+										onMouseOver={() => {
+											//console.log("HOVER: ", pathdata);
+										}}
+										onClick={() => {
+											handleItemClick([innerdata]);
+										}}
+									>
+										<Typography variant="h6" style={{paddingBottom: 5}}>
+											{innerdata.name}
+										</Typography>
+									</MenuItem>
+									{parsedPaths.map((pathdata, index) => {
+										// FIXME: Should be recursive in here
+										//<VpnKeyIcon style={iconStyle} />
+										const icon =
+											pathdata.type === "value" ? (
+												<span style={{marginLeft: 9, }} />
+											) : pathdata.type === "list" ? (
+												<FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
+											) : (
+												<CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
+											);
+										//<ExpandMoreIcon style={iconStyle} />
+
+										const indentation_count = (pathdata.name.match(/\./g) || []).length+1
+										const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
+										//const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0
+										const boxPadding = 0 
+										const namesplit = pathdata.name.split(".")
+										const newname = namesplit[namesplit.length-1]
+										return (
+											<MenuItem
+												key={pathdata.name}
+												style={{
+													backgroundColor: theme.palette.inputColor,
+													color: "white",
+													minWidth: 250,
+													maxWidth: 250,
+													padding: boxPadding, 
+												}}
+												value={pathdata}
+												onMouseOver={() => {
+													//console.log("HOVER: ", pathdata);
+												}}
+												onClick={() => {
+													handleItemClick([innerdata, pathdata]);
+												}}
+											>
+												<Tooltip
+													color="primary"
+													title={`Ex. value: ${pathdata.value}`}
+													placement="left"
+												>
+													<div style={{ display: "flex", height: 30, }}>
+														{Array(indentation_count).fill().map((subdata, subindex) => {
+															return (
+																baseIndent
+															)
+														})}
+														{icon} {newname} 
+														{pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
+															e.preventDefault()
+															e.stopPropagation()
+
+															console.log("INNER: ", innerdata, pathdata)
+															
+															// Removing .list from autocomplete
+															var newname = pathdata.name
+															if (newname.length > 5) {
+																newname = newname.slice(0, newname.length-5)
+															}
+
+															//selectedActionParameters[count].value += `{{ $${innerdata.name}.${newname} | size }}`
+															//selectedAction.parameters[count].value = selectedActionParameters[count].value;
+															//setSelectedAction(selectedAction);
+															//setShowDropdown(false);
+															setMenuPosition(null);
+
+															// innerdata.name
+															// pathdata.name
+															//handleItemClick([innerdata, newpathdata])
+															//console.log("CLICK LENGTH!")
+														}} /> : null}
+													</div>
+												</Tooltip>
+											</MenuItem>
+										);
+									})}
+								</Paper>
+							</NestedMenuItem>
+						) : (
+							<MenuItem
+								key={innerdata.name}
+								style={{
+									backgroundColor: theme.palette.inputColor,
+									color: "white",
+									minWidth: 250,
+									maxWidth: 250,
+									marginRight: 0,
+								}}
+								value={innerdata}
+								onMouseOver={() => handleMouseover()}
+								onMouseOut={() => {
+									handleMouseOut();
+								}}
+								onClick={() => {
+									handleItemClick([innerdata]);
+								}}
+							>
+								<Tooltip
+									color="primary"
+									title={`Value: ${innerdata.value}`}
+									placement="left"
+								>
+									<div style={{ display: "flex" }}>
+										{icon} {innerdata.name}
+									</div>
+								</Tooltip>
+							</MenuItem>
+						);
+					})}
+				</Menu>
+
+</div> }
 			<span style={{
 				border: `2px solid ${theme.palette.inputColor}`,
 				borderRadius: theme.palette.borderRadius,
@@ -579,26 +943,11 @@ const CodeEditor = (props) => {
 					onChange={(value) => {
 						setlocalcodedata(value.getValue())
 						expectedOutput(value.getValue())
-						// console.log(allVariable)
+
-						// console.log(value.getValue().split('\n')[value.getCursor().line])
-						// console.log(value.getCursor())
-						// console.log(value)
-						// console.log(value.getValue().indexOf('$'))
-						// console.log(value.display.input.prevInput)
 						if(value.display.input.prevInput.startsWith('$') || value.display.input.prevInput.endsWith('$')){
 							setEditorPopupOpen(true)
-							// console.log(findIndex(value.getValue()))
-							// console.log(findlocation(findIndex(value.getValue())))
-								// setCurrentLocation(findlocation(findIndex(value.getValue())))
-							// console.log(currentLocation)
-							// console.log(findVariables(findlocation(findIndex(value.getValue())), value.getValue()))
-							// setCurrentVariable(findVariables(findlocation(findIndex(value.getValue())), value.getValue()))
-							// console.log(actionlist)
 						}
-							// setVariableOccurences(findIndex(value.getValue()))
+
-							// setCurrentVariable(findVariables(value.getValue()))
-							// console.log(currentLocation)
-							// console.log(currentVariable)
 						// console.log(findIndex(value.getValue()))
 						// highlight_variables(value)
 					}}

frontend/src/components/WelcomeForm.jsx

@@ -425,7 +425,7 @@ const WelcomeForm = (props) => {
 															<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"}  style={buttonStyle} startIcon={<NewReleasesIcon />} onClick={(event) => { onNodeSelect("INTEL") }} >
 																	Intel
 															</Button>
-															<Button disabled={finishedApps.includes("COMMS")} variant={defaultSearch === "COMMS" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("COMMS") }} >
+															<Button disabled={finishedApps.includes("COMMS")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("EMAIL") }} >
 																	Email
 															</Button>
                             </div>

frontend/src/views/Admin.jsx

@@ -3765,6 +3765,7 @@ const Admin = (props) => {
     uploadFiles(files);
   };
 
+
   const filesView =
     curTab === 3 ? (
       <Dropzone
@@ -3965,6 +3966,8 @@ const Admin = (props) => {
                     bgColor = "#1f2023";
                   }
 
+									const isDisabledButton = isCloud || file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true
+
                   return (
                     <ListItem
                       key={index}
@@ -4079,7 +4082,7 @@ const Admin = (props) => {
                           >
                             <span>
                               <IconButton
-                                disabled={isCloud || file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true ? false: true}
+                                disabled={isDisabledButton ? false : true}
                                 style = {{padding: "6px"}}
                                 onClick={() => {
                                   setOpenEditor(true)
@@ -4089,8 +4092,7 @@ const Admin = (props) => {
                               >
                                 <EditIcon
                                   style={{
-                                    color:
+                                    color: isDisabledButton === true 
-                                    file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true 
                                         ? "white"
                                         : "grey",
                                   }}

frontend/src/views/AngularWorkflow.jsx

@@ -1259,7 +1259,7 @@ const AngularWorkflow = (defaultprops) => {
     	        }
 
     	        for (var key in workflow.errors) {
-    	          alert.info(workflow.errors[key]);
+    	          //alert.info(workflow.errors[key]);
     	        }
 
     	        setWorkflow(workflow);

frontend/src/views/Workflows.jsx

@@ -412,7 +412,6 @@ export const validateJson = (showResult) => {
       jsonvalid = false
     }
   } catch (e) {
-		console.log("Bug1: ", e)
     showResult = showResult.split("'").join('"');
 
     try {
@@ -420,7 +419,6 @@ export const validateJson = (showResult) => {
         jsonvalid = false;
       }
     } catch (e) {
-			console.log("Bug2: ", e)
 
       jsonvalid = false;
     }
@@ -430,7 +428,6 @@ export const validateJson = (showResult) => {
   try {
     result = jsonvalid ? JSON.parse(showResult, {"storeAsString": true}) : showResult;
   } catch (e) {
-		console.log("Bug3: ", e)
     ////console.log("Failed parsing JSON even though its valid: ", e)
     jsonvalid = false;
   }
@@ -448,7 +445,6 @@ export const validateJson = (showResult) => {
 			result = JSON.parse(newstr)
 			jsonvalid = true
 		} catch (e) {
-			console.log("Bug4: ", e)
 
 			//console.log("Failed parsing JSON even though its valid (2): ", e)
 			jsonvalid = false