Loads of frontend fixes related to React & MUI

frontend/src/components/AppGrid.jsx

@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
 import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import {Link} from 'react-router-dom';
+import { removeQuery } from '../components/ScrollToTop.jsx';
 
 import { 
 	Search as SearchIcon, 
@@ -89,7 +90,8 @@ const AppGrid = props => {
 	}
 
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
-		useEffect(() => {
+		var defaultSearch = "" 
+		//useEffect(() => {
 		if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
 			const urlSearchParams = new URLSearchParams(window.location.search)
 			const params = Object.fromEntries(urlSearchParams.entries())
@@ -97,13 +99,15 @@ const AppGrid = props => {
 			if (foundQuery !== null && foundQuery !== undefined) {
 				console.log("Got query: ", foundQuery)
 				refine(foundQuery)
+				defaultSearch = foundQuery
 			}
 		}
-		}, [])
+		//}, [])
 
 		return (
 		  <form noValidate action="" role="search">
 				<TextField 
+					defaultValue={defaultSearch}
 					fullWidth
 					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} 
 					InputProps={{
@@ -121,10 +125,12 @@ const AppGrid = props => {
 					autoComplete='off'
 					type="search"
 					color="primary"
-					defaultValue={currentRefinement}
 					placeholder="Find Apps..."
 					id="shuffle_search_field"
 					onChange={(event) => {
+						// Remove "q" from URL
+						removeQuery("q")
+
 						refine(event.currentTarget.value)
 					}}
 					limit={5}
@@ -151,8 +157,6 @@ const AppGrid = props => {
 		//	setInnerHits(hits)
 		//}
 
-		console.log("In appgrid")
-
 		return (
 			<Grid container spacing={2}>
 				{hits.map((data, index) => {

frontend/src/components/CreatorGrid.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import ReactGA from 'react-ga4';
 import {Link} from 'react-router-dom';
 import theme from '../theme.jsx';
+import { removeQuery } from '../components/ScrollToTop.jsx';
 
 import { 
 	SkipNext as SkipNextIcon,
@@ -97,20 +98,21 @@ const CreatorGrid = props => {
 
 	// value={currentRefinement}
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
-		useEffect(() => {
+		var defaultSearch = ""
 		if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
 			const urlSearchParams = new URLSearchParams(window.location.search)
 			const params = Object.fromEntries(urlSearchParams.entries())
 			const foundQuery = params["q"]
 			if (foundQuery !== null && foundQuery !== undefined) {
 				refine(foundQuery)
+				defaultSearch = foundQuery
 			}
 		}
-		}, [])
 
 		return (
 		  <form noValidate action="" role="search">
 				<TextField 
+					defaultValue={defaultSearch}
 					fullWidth
 					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} 
 					InputProps={{
@@ -128,10 +130,10 @@ const CreatorGrid = props => {
 					autoComplete='off'
 					type="search"
 					color="primary"
-					value={currentRefinement}
 					placeholder="Find Creators..."
 					id="shuffle_search_field"
 					onChange={(event) => {
+						removeQuery("q")
 						refine(event.currentTarget.value)
 					}}
 				/>

frontend/src/components/DocsGrid.jsx

@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
 import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import {Link} from 'react-router-dom';
+import { removeQuery } from '../components/ScrollToTop.jsx';
 
 import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
 import aa from 'search-insights'
@@ -84,7 +85,7 @@ const DocsGrid = props => {
 	}
 
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
-		useEffect(() => {
+		var defaultSearch = ""
 		if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
 			const urlSearchParams = new URLSearchParams(window.location.search)
 			const params = Object.fromEntries(urlSearchParams.entries())
@@ -92,13 +93,14 @@ const DocsGrid = props => {
 			if (foundQuery !== null && foundQuery !== undefined) {
 				console.log("Got query: ", foundQuery)
 				refine(foundQuery)
+				defaultSearch = foundQuery
 			}
 		}
-		}, [])
 
 		return (
 		  <form noValidate action="" role="search">
 				<TextField 
+					defaultValue={defaultSearch}
 					fullWidth
 					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} 
 					InputProps={{
@@ -116,10 +118,10 @@ const DocsGrid = props => {
 					autoComplete='off'
 					type="search"
 					color="primary"
-					defaultValue={currentRefinement}
 					placeholder="Search our Documentation..."
 					id="shuffle_search_field"
 					onChange={(event) => {
+						removeQuery("q")
 						refine(event.currentTarget.value)
 					}}
 					limit={5}

frontend/src/components/Header.jsx

@@ -521,7 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 	}
 
 	// Handle top bar or something
-  const defaultTop = 7
+  const defaultTop =  0
   const loginTextBrowser = !isLoggedIn ? 
     <div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
 			<div style={{display: "flex", flex: 1, }}>

frontend/src/components/Oauth2Auth.jsx

@@ -218,7 +218,7 @@ const AuthenticationOauth2 = (props) => {
 				"31cb4c84-658e-43d5-ae84-22c9142e967a",
 				"",
 				"https://graph.microsoft.com",
-				["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access"],
+				["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access", "Team.ReadBasic.All"],
 				admin_consent,
 			)
 		} else if (selectedApp.name.toLowerCase().includes("todoist")) {
@@ -607,7 +607,7 @@ const AuthenticationOauth2 = (props) => {
     <div>
       <DialogTitle>
         <div style={{ color: "white" }}>
-          Authentication for {selectedApp.name}
+          Authenticate {selectedApp.name.replaceAll("_", " ")}
         </div>
       </DialogTitle>
       <DialogContent>
@@ -674,11 +674,6 @@ const AuthenticationOauth2 = (props) => {
 						style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}} 
 						InputProps={{
 							style:{
-								color: "white",
-								marginLeft: "5px",
-								maxWidth: "95%",
-								height: 50, 
-								fontSize: "1em",
 							},
 						}}
 						fullWidth
@@ -763,11 +758,6 @@ const AuthenticationOauth2 = (props) => {
                       }}
                       InputProps={{
                         style: {
-                          color: "white",
-                          marginLeft: "5px",
-                          maxWidth: "95%",
-                          height: 50,
-                          fontSize: "1em",
                         },
                       }}
                       fullWidth
@@ -804,11 +794,6 @@ const AuthenticationOauth2 = (props) => {
               }}
               InputProps={{
                 style: {
-                  color: "white",
-                  marginLeft: "5px",
-                  maxWidth: "95%",
-                  fontSize: "1em",
-                  height: "50px",
                 },
               }}
               fullWidth
@@ -827,11 +812,6 @@ const AuthenticationOauth2 = (props) => {
               }}
               InputProps={{
                 style: {
-                  color: "white",
-                  marginLeft: "5px",
-                  maxWidth: "95%",
-                  fontSize: "1em",
-                  height: "50px",
                 },
               }}
               fullWidth
@@ -848,6 +828,7 @@ const AuthenticationOauth2 = (props) => {
 									Scopes
 									<Select
 										multiple
+										underline={false}
 										value={selectedScopes}
 										style={{
 											backgroundColor: theme.palette.inputColor,

frontend/src/components/ParsedAction.jsx

@@ -376,24 +376,15 @@ const ParsedAction = (props) => {
     const [menuPosition, setMenuPosition] = useState(null);
 
     useEffect(() => {
-      if (
+      if (selectedActionParameters !== undefined && selectedActionParameters !== null && selectedActionParameters.length === 0
-        selectedActionParameters !== null &&
-        selectedActionParameters.length === 0
-      ) {
-        if (
-          selectedAction.parameters !== null &&
-          selectedAction.parameters.length > 0
       ) {
+        if (selectedAction.parameters !== undefined && selectedAction.parameters !== null && selectedAction.parameters.length > 0) {
           setSelectedActionParameters(selectedAction.parameters);
         }
       }
 
-      if (
+      if ((selectedVariableParameter === null || selectedVariableParameter === undefined) && workflow.workflow_variables !== null && workflow.workflow_variables.length > 0) {
-        (selectedVariableParameter === null ||
+      
-          selectedVariableParameter === undefined) &&
-        workflow.workflow_variables !== null &&
-        workflow.workflow_variables.length > 0
-      ) {
         // FIXME - this is the bad thing
         setSelectedVariableParameter(workflow.workflow_variables[0].name);
       }
@@ -1403,7 +1394,7 @@ const ParsedAction = (props) => {
               >
                 <Tooltip
                   color="secondary"
-                  title={"Automatically change body"}
+                  title={"Show all body fields"}
                   placement="top"
                 >
                   <FormControlLabel
@@ -1485,6 +1476,17 @@ const ParsedAction = (props) => {
                   }
 
                   changed = true;
+				  var isRequired = false
+				  // Check if original field name is in the selectedAction.required_body_fields
+				  if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
+					  for (let innerkey in selectedAction.required_body_fields) {
+						  if (selectedAction.required_body_fields[innerkey] === tmpitem) {
+							  isRequired = true
+							  break
+						  }
+					  }
+				  }
+
                   selectedActionParameters.push({
                     action_field: "",
                     configuration: false,
@@ -1494,7 +1496,7 @@ const ParsedAction = (props) => {
                     multiline: true,
                     name: tmpitem,
                     options: null,
-                    required: false,
+                    required: isRequired,
                     schema: { type: "string" },
                     skip_multicheck: false,
                     tags: null,
@@ -2669,8 +2671,6 @@ const ParsedAction = (props) => {
 		const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
   		const [hover, setHover] = React.useState(false);
 
-		console.log("Extra desc: ", extraDescription)
-
 		return (
 			<Tooltip
 			  color="secondary"
@@ -2893,7 +2893,7 @@ const ParsedAction = (props) => {
                 >
                   <Tooltip
                     color="primary"
-                    title={"Find related workflows"}
+                    title={"Find related tworkflows"}
                     placement="top"
                   >
 					<a href={`https://shuffler.io/search?tab=workflows&q=${selectedAction.app_name}`} target="_blank">
@@ -2901,7 +2901,27 @@ const ParsedAction = (props) => {
 					</a>
                   </Tooltip>
                 </IconButton>
-
+                <IconButton
+                  style={{
+                    marginTop: "auto",
+                    marginBottom: "auto",
+                    height: 30,
+                    marginLeft: 15,
+                    paddingRight: 0,
+                  }}
+                  onClick={() => {
+					  // aiSubmit(aiMsg, undefined, undefined, newSelectedAction)
+					  aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
+                  }}
+                >
+                  <Tooltip
+                    color="primary"
+                    title={"Autocompletes fields. Uses NAME of the action and previous values' results."}
+                    placement="top"
+                  >
+						<AutoFixHighIcon style={{ color: "rgba(255,255,255,0.7)", height: 24, }} />
+                  </Tooltip>
+                </IconButton>
               </div>
             </div>
             <div style={{ display: "flex", flexDirection: "column" }}>
@@ -2992,14 +3012,21 @@ const ParsedAction = (props) => {
 								defaultValue={selectedAction.label}
 								onChange={selectedNameChange}
 								onBlur={(e) => {
-									const name = e.target.value;
+									// Copy the name value
+									const name = e.target.value
 									const parsedBaseLabel = "$"+baselabel.toLowerCase().replaceAll(" ", "_")
 									const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
 
+									console.log("NAME: ", name)
+
+									// Check if it's the same as the current name in use
+									//if (name === selectedAction.label) { 
+									//	console.log("Returning from name thing")
+									//	return
+									//}
+
 									// Change in actions, triggers & conditions
 									// Highlight the changes somehow with a glow?
-									//
-									// Should make it a function lol
 									if (workflow.branches !== undefined && workflow.branches !== null) {	
 										for (let [key,keyval] in Object.entries(workflow.branches)) {
 											if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
@@ -3117,7 +3144,13 @@ const ParsedAction = (props) => {
 											continue
 										}
 
-										for (let [subkey, subkeyval] in Object.entries(workflow.actions[key].parameters)) {
+										const params = workflow.actions[key].parameters
+										console.log(params)
+										if (params === null || params === undefined) {
+											continue
+										}
+
+										for (let [subkey, subkeyval] in Object.entries(params)) {
 											const param = workflow.actions[key].parameters[subkey];
 											if (!param.value.includes("$")) {
 												continue
@@ -3240,7 +3273,7 @@ const ParsedAction = (props) => {
                 }}
               >
                 <AddIcon style={{ marginRight: 10 }} /> Authenticate{" "}
-                {selectedApp.name}
+                {selectedApp.name.replaceAll("_", " ")}
               </Button>
             </span>
           </Tooltip>
@@ -3573,8 +3606,6 @@ const ParsedAction = (props) => {
 				  data.label = "No name"
 			  }
 
-			  console.log("Name: ", newActionname)
-
               newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
 
 				var method = ""

frontend/src/components/Searchfield.jsx

@@ -43,6 +43,7 @@ const SearchField = props => {
 	const node = useRef()
 	const [searchOpen, setSearchOpen] = useState(false)
 	const [oldPath, setOldPath] = useState("")
+	const [value, setValue] = useState("");
 
 	if (serverside === true) {
 		return null
@@ -67,7 +68,13 @@ const SearchField = props => {
 	//}, searchOpen)
 
 	const SearchBox = ({currentRefinement, refine, isSearchStalled, } ) => {
-
+		const keyPressHandler = (e) => {
+			// e.preventDefault();
+			if (e.which === 13) {
+			  // alert("You pressed enter!");
+			  navigate("/search?q=" + currentRefinement, { state: value, replace: true });
+			}
+		};
 			/*
 				endAdornment: (
 					<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
@@ -108,6 +115,7 @@ const SearchField = props => {
 					color="primary"
 					placeholder="Find Public Apps, Workflows, Documentation..."
 					value={currentRefinement}
+					onKeyDown={keyPressHandler}
 					id="shuffle_search_field"
 					onClick={(event) => {
 						if (!searchOpen) {

frontend/src/components/ShuffleCodeEditor.jsx

@@ -205,6 +205,9 @@ const CodeEditor = (props) => {
 
 		setAvailableVariables(allVariables)
 		setMainVariables(tmpVariables)
+	
+		console.log("Checking local codedata: ", localcodedata)
+		expectedOutput(localcodedata)
 	}, [])
 
 	const aiSubmit = (value, inputAction) => {

frontend/src/components/WorkflowGrid.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import {Link} from 'react-router-dom';
 import theme from '../theme.jsx';
+import { removeQuery } from '../components/ScrollToTop.jsx';
 
 import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
 
@@ -171,6 +172,7 @@ const AppGrid = props => {
 
 	// value={currentRefinement}
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
+		var defaultSearch = ""
 		useEffect(() => {
 			if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
 				const urlSearchParams = new URLSearchParams(window.location.search)
@@ -179,6 +181,7 @@ const AppGrid = props => {
 				if (foundQuery !== null && foundQuery !== undefined) {
 					console.log("Got query: ", foundQuery)
 					refine(foundQuery)
+					defaultSearch = foundQuery
 				}
 			}
 		}, [])
@@ -187,6 +190,7 @@ const AppGrid = props => {
 			console.log("In refinement: ", inputsearch)
 			//setLocalMessage(inputsearch)
 			refine(inputsearch)
+			defaultSearch = inputsearch 
 		} else if (onlyResults === true) {
 			// Don't return anything unless refinement works
 			return null
@@ -196,6 +200,7 @@ const AppGrid = props => {
 		  <form noValidate action="" role="search">
 		  	{onlyResults !== true ?
 				<TextField 
+					defaultValue={defaultSearch}
 					fullWidth
 					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} 
 					InputProps={{
@@ -214,6 +219,7 @@ const AppGrid = props => {
 					placeholder="Find Workflows..."
 					id="shuffle_search_field"
 					onChange={(event) => {
+						removeQuery("q")
 						refine(event.currentTarget.value)
 					}}
 					limit={5}

frontend/src/defaultCytoscapeStyle.jsx

@@ -125,8 +125,8 @@ const data = [
       "border-radius": "5px",
       "border-color": "orange",
       "background-color": "#213243",
-      "background-width": "100%",
+      "background-width": "100px",
-      "background-height": "100%",
+      "background-height": "100px",
     },
   },
   {
@@ -163,15 +163,16 @@ const data = [
   {
     selector: "node[?isSuggestion]",
     css: {
-      shape: "ellipse",
+      shape: "roundrectangle",
-      width: "50px",
+      width: "30px",
-      height: "50px",
+      height: "30px",
       "z-index": "5002",
-      "font-size": "0px",
+	  filter: "grayscale(100%)",
       border: "1px solid rgba(255,255,255,0.9)",
       "background-image": "data(large_image)",
-      "background-color": "data(iconBackground)",
+	  "background-fit": "cover",
-      label: "data(label)",
+      "font-size": "20px",
+      label: "data(label_replaced)",
     },
   },
   {
@@ -337,9 +338,9 @@ const data = [
       width: "1px",
       "line-style": "dashed",
       "line-fill": "linear-gradient",
-      "target-arrow-color": "#f34079",
+      "target-arrow-color": "#555555",
       "line-gradient-stop-positions": ["0.0", "100"],
-      "line-gradient-stop-colors": ["#f86a3e", "#f34079"],
+      "line-gradient-stop-colors": ["#555555", "#555555"],
     },
   },
   {

frontend/src/theme.jsx

@@ -70,6 +70,11 @@ const theme = createTheme(adaptV4Theme({
     },
   },
   overrides: {
+    MuiPaper: {
+		root: {
+			backgroundColor: "#1c1c1d",
+		},
+    },
     MuiMenu: {
       list: {
         backgroundColor: "#27292d",

frontend/src/views/Admin.jsx

@@ -3381,11 +3381,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                     <ListItemText
                       style={{ maxWidth: 200, minWidth: 200 }}
                       primary={
-                        schedule.environment === "cloud" ? (
+                        schedule.environment === "cloud" || schedule.environment === "" || schedule.frequency.length > 0 ? 
                           schedule.frequency
-                        ) : (
+                         : 
                           <span>{schedule.seconds} seconds</span>
-                        )
                       }
                     />
                     <ListItemText
@@ -3406,7 +3405,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                       }
                     />
                     <ListItemText
-                      primary={schedule.argument}
+                      primary={schedule.argument.replaceAll('\\\"', '\"')}
                       style={{
                         minWidth: 300,
                         maxWidth: 300,

frontend/src/views/AppCreator.jsx

@@ -196,8 +196,9 @@ const parseCurl = (s) => {
           case "data":
             if (out.method === "GET" || out.method === "HEAD")
               out.method = "POST";
-            out.header["Content-Type"] =
+
-              out.header["Content-Type"] || "application/x-www-form-urlencoded";
+            out.header["Content-Type"] = out.header["Content-Type"] || "application/x-www-form-urlencoded";
+              
             out.body = out.body ? out.body + "&" + arg : arg;
             state = "";
             break;
@@ -227,22 +228,22 @@ export const appCategories = [
 	"name": "Communication",
 		"color": "#FFC107",
 		"icon": "communication",
-			"action_labels": ["List Messages", "Send Message", "Get Message", "Search messages"],
+		"action_labels": ["List Messages", "Send Message", "Get Message", "Search messages", "List Attachments", "Get Attachment", "Get Contact"],
 	}, {
 		"name": "SIEM",
 		"color": "#FFC107",
 		"icon": "siem",
-			"action_labels": ["Search", "List Alerts", "Close Alert", "Create detection", "Add to lookup list",],
+		"action_labels": ["Search", "List Alerts", "Close Alert",  "Get Alert",  "Create detection", "Add to lookup list",],
 	}, {
 		"name": "Eradication",
 		"color": "#FFC107",
 		"icon": "eradication",
-			"action_labels": ["List Alerts", "Close Alert", "Create detection", "Block hash", "Search Hosts", "Isolate host", "Unisolate host"],
+		"action_labels": ["List Alerts", "Close Alert", "Get Alert", "Create detection", "Block hash", "Search Hosts", "Isolate host", "Unisolate host"],
 	}, {
 		"name": "Cases",
 		"color": "#FFC107",
 		"icon": "cases",
-			"action_labels": ["List tickets", "Get ticket", "Create ticket", "Close ticket", "Add comment", "Update ticket",],
+		"action_labels": ["List tickets", "Get ticket", "Create ticket", "Close ticket", "Add comment", "Update ticket", "Search tickets"],
 	}, {
 		"name": "Assets",
 		"color": "#FFC107",
@@ -574,7 +575,7 @@ const AppCreator = (defaultprops) => {
 			return
 		}
 
-		console.log("Decoded: ", parsedDecoded)
+		//console.log("Decoded: ", parsedDecoded)
     const parsedapp =
       data.openapi === undefined || data.openapi === null 
         ? data
@@ -788,7 +789,6 @@ const AppCreator = (defaultprops) => {
 				const regex = /_shuffle_replace_\d/i;
 				//console.log("NEW: ", 
 				newaction.url = newaction.url.replaceAll(new RegExp(regex, 'g'), "")
-						console.log("Replaced: ", newaction.url) 
 			}
 
           // Finding category
@@ -1110,19 +1110,11 @@ const AppCreator = (defaultprops) => {
                   undefined
                 ) {
                   if (
-                    methodvalue.responses.default.content["text/plain"][
+                    methodvalue.responses.default.content["text/plain"]["schema"] !== undefined) {
-                      "schema"
+                    if (methodvalue.responses.default.content["text/plain"]["schema"]["example"] !== undefined) {
-                    ] !== undefined
+                      newaction.example_response = methodvalue.responses.default.content["text/plain"]["schema"]["example"]
-                  ) {
+                        
-                    if (
+                        
-                      methodvalue.responses.default.content["text/plain"][
-                        "schema"
-                      ]["example"] !== undefined
-                    ) {
-                      newaction.example_response =
-                        methodvalue.responses.default.content["text/plain"][
-                          "schema"
-                        ]["example"]
 
                     }
 
@@ -1560,12 +1552,12 @@ const AppCreator = (defaultprops) => {
 
     if (securitySchemes !== undefined) {
       
-			console.log("SECURITY: ", securitySchemes)
+	  //console.log("SECURITY: ", securitySchemes)
 	  var newauth = [];
 	  try {
 		var optionset = false 
       	for (const [key, value] of Object.entries(securitySchemes)) {
-      	  console.log("AUTH: ", key, value);
+      	  //console.log("AUTH: ", key, value);
 
       	  if (key === "jwt") {
       	    setAuthenticationOption("JWT");
@@ -1776,12 +1768,12 @@ const AppCreator = (defaultprops) => {
 			if (!found) {
 				newActions2.push(action)
 			} else {
-				console.log("NOT skipping duplicate action: ", action.url, ". Should merge contents")
+				//console.log("NOT skipping duplicate action: ", action.url, ". Should merge contents")
 				newActions2.push(action)
 			}
 		}
 
-		console.log("Actions: ", newActions.length, " Actions2: ", newActions2.length)
+		//console.log("Actions: ", newActions.length, " Actions2: ", newActions2.length)
 		newActions = newActions2
     if (newActions.length > increaseAmount - 1) {
       setActionAmount(increaseAmount);
@@ -3880,7 +3872,7 @@ const AppCreator = (defaultprops) => {
 
 										const datasplit = parsedurlsplit[1].split("&")
 										for (var key in datasplit) {
-											console.log("Data: ", datasplit[key])
+											//console.log("Data: ", datasplit[key])
 											var actualkey = datasplit[key]
 											var example = ""
 											if (datasplit[key].includes("=")) {
@@ -4143,7 +4135,7 @@ const AppCreator = (defaultprops) => {
 							overflowX: "hidden",
 						}}
 						onClick={() => {
-							console.log("Data: ", data)
+							//console.log("Data: ", data)
 							if (hasFile) {
 								//setActionField("headers", "")
 								//console.log("It has a file: ", data["file_field"])
@@ -4323,7 +4315,7 @@ const AppCreator = (defaultprops) => {
   const LoopActions = (props) => {
 	const { filteredActions } = props;
 
-		console.log("Actions: ", filteredActions)
+	//console.log("Actions: ", filteredActions)
     if (filteredActions === null || filteredActions === undefined || filteredActions.length === 0) {
 			return null
 		}
@@ -4745,7 +4737,7 @@ const AppCreator = (defaultprops) => {
       }
 
       const handleSubmitCheck = () => {
-        console.log("NEW AUTH: ", authenticationOption);
+        //console.log("NEW AUTH: ", authenticationOption);
         if (authenticationOption.label.length === 0) {
           authenticationOption.label = `Auth for ${selectedApp.name}`;
           //toast("Label can't be empty")

frontend/src/views/Docs.jsx

@@ -391,19 +391,28 @@ const Docs = (defaultprops) => {
   }
 
   function CodeHandler(props) {
+	console.log("PROPS: ", props)
+
+	const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
+
     return (
-      <pre
+      <div
         style={{
           padding: 15,
           minWidth: "50%",
           maxWidth: "100%",
           backgroundColor: theme.palette.inputColor,
-          overflowX: "auto",
+          overflowY: "auto",
-          overflowY: "hidden",
         }}
       >
-        <code>{props.value}</code>
+        <code
-      </pre>
+			style={{
+				// Wrap if larger than X
+				whiteSpace: "pre-wrap",
+				overflow: "auto",
+			}}
+		>{propvalue}</code>
+      </div>
     );
   }
 
@@ -436,7 +445,7 @@ const Docs = (defaultprops) => {
                   href={selectedMeta.link}
                   style={{ textDecoration: "none", color: "#f85a3e" }}
                 >
-                  <Button style={{}} variant="outlined" color="secondary">
+                  <Button style={{color: "white", }} variant="outlined" color="secondary">
                     <EditIcon /> &nbsp;&nbsp;Edit
                   </Button>
                 </a>
@@ -638,7 +647,7 @@ const Docs = (defaultprops) => {
 
 					<Typography variant="h6" style={headerStyle}>Why Shuffle?</Typography>
 					<Typography variant="body1">
-						<b>Security first.</b> We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
+						<b>Security first.</b> We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
 					</Typography>
 
 					<Typography variant="h6" style={headerStyle}>Get help</Typography>
@@ -878,16 +887,25 @@ const Docs = (defaultprops) => {
 				:
 					<div id="markdown_wrapper_outer" style={markdownStyle}>
 						<ReactMarkdown
+							components={{
+								img: Img,
+								code: CodeHandler,
+								h1: Heading,
+								h2: Heading,
+								h3: Heading,
+								h4: Heading,
+								h5: Heading,
+								h6: Heading,
+								a: OuterLink,
+							}}
 							id="markdown_wrapper"
 							escapeHtml={false}
-							source={data}
+							style={{
-							renderers={{
+								maxWidth: "100%", minWidth: "100%", 
-								link: OuterLink,
-								image: Img,
-								code: CodeHandler,
-								heading: Heading,
 							}}
-						/>
+						>
+							{data}
+						</ReactMarkdown>
 					</div>
 				}
         <Divider

frontend/src/views/RunWorkflow.jsx

@@ -126,12 +126,14 @@ const RunWorkflow = (defaultprops) => {
 		}
 
 		const executionMargin = 20 
-		const defaultReturn = 
+		const defaultReturn = null
+		/*
 			<div style={{marginTop: executionMargin, }}>
 				<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
 					No results yet
 				</Typography>
 			</div>
+		*/
 
 		if (executionData.results === undefined || executionData.results === null)  {
 			return defaultReturn
@@ -271,7 +273,7 @@ const RunWorkflow = (defaultprops) => {
 											width: 30,
 										}}
 										onClick={() => {
-											navigate(`?execution_highlight=${parsed_url}`)
+											//navigate(`?execution_highlight=${parsed_url}`)
 										}}
 									>
 										<PreviewIcon style={{ color: "rgba(255,255,255,0.5)" }} />
@@ -314,7 +316,13 @@ const RunWorkflow = (defaultprops) => {
 		)
 	}
 
-	const onSubmit = (execution_id, authorization, answer) => {
+	const onSubmit = (event, execution_id, authorization, answer) => {
+		if (event !== null) {
+			event.preventDefault()
+		}
+
+		console.log("In submit!")
+
 		stop()
   	    setMessage("")
   	    setExecutionLoading(true)
@@ -327,13 +335,13 @@ const RunWorkflow = (defaultprops) => {
 
 		var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`
 		var fetchBody = {
+			headers: {
+				'Content-Type': 'application/json; charset=utf-8',
+			},
 			mode: 'cors',
 			credentials: 'include',
 			crossDomain: true,
 			withCredentials: true,
-			headers: {
-				'Content-Type': 'application/json; charset=utf-8',
-			},
 		}
 
 		if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
@@ -345,8 +353,10 @@ const RunWorkflow = (defaultprops) => {
 			fetchBody.body = JSON.stringify(data)
 		}
 
+		console.log("Pre request: ", url, fetchBody)
 		fetch(url, fetchBody)
 		.then((response) => {
+			console.log("Got answer 1")
 			if (response.status !== 200 && response.status !== 201) {
 
 				if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
@@ -362,9 +372,11 @@ const RunWorkflow = (defaultprops) => {
 				}
 			}
 
+			console.log("Got answer 2")
 			return response.json();
 		})
 		.then(responseJson => {
+			console.log("Got answer 3")
 			setExecutionLoading(false)
 			if (responseJson["success"] === false) {
 				console.log("Failed sending execution request")
@@ -379,6 +391,7 @@ const RunWorkflow = (defaultprops) => {
 					start();
 				}
 			}
+			console.log("Got answer 4")
 		})
 		.catch(error => {
 			//setExecutionInfo("Error in workflow startup: " + error)
@@ -441,7 +454,7 @@ const RunWorkflow = (defaultprops) => {
 			return
 		}
 
-		console.log("Got response: ", responseJson)
+		//console.log("Got response: ", responseJson)
 
 		ReactDOM.unstable_batchedUpdates(() => {
 		  if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
@@ -449,7 +462,7 @@ const RunWorkflow = (defaultprops) => {
 			// Doesn't work because this is some async garbage
 			if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
 			  if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
-						console.log("Updating data!")
+				//console.log("Updating data!")
 				setExecutionData(responseJson)
 
 				for (var key in responseJson.results) {
@@ -530,6 +543,11 @@ const RunWorkflow = (defaultprops) => {
   };
 
 	const fetchUpdates = (execution_id, authorization, getorg) => {
+		if (execution_id === undefined || execution_id === null || execution_id === "") {
+			stop()
+			return
+		}
+
 		const innerRequest = {
 			"execution_id": execution_id,
 			"authorization": authorization
@@ -594,7 +612,7 @@ const RunWorkflow = (defaultprops) => {
 	const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
 	const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
 	
-	console.log("execdata: ", executionData)
+	//console.log("execdata: ", executionData)
 	const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
 
 	const organization = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.name : "Unknown"
@@ -603,7 +621,7 @@ const RunWorkflow = (defaultprops) => {
 	
 	const image = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.image !== undefined && selectedOrganization.image !== null && selectedOrganization.image !== "" ? selectedOrganization.image : theme.palette.defaultImage
 
-	console.log("IMG: ", image, "ORG: ", selectedOrganization)
+	//console.log("IMG: ", image, "ORG: ", selectedOrganization)
 
 	if (!disabledButtons && answer !== undefined && answer !== null && organization !== "Unknown" && buttonClicked.length === 0) {
 		console.log("Finding button!")
@@ -627,7 +645,7 @@ const RunWorkflow = (defaultprops) => {
 	const basedata = 
 		<div style={bodyDivStyle}>
 			<Paper style={boxStyle}>
-      	<form onSubmit={() => {onSubmit()}} style={{margin: "15px 15px 15px 15px"}}>
+      			<form onSubmit={(e) => {onSubmit(e)}} style={{margin: "15px 15px 15px 15px"}}>
 		
 					<img
 						alt={workflow.name}
@@ -676,7 +694,7 @@ const RunWorkflow = (defaultprops) => {
 					
 					{answer !== undefined && answer !== null ? null :
 						<span>
-							Execution Argument
+							Runtime Argument
 							<div style={{marginBottom: 5}}>
 								<TextField
 									color="primary"
@@ -705,9 +723,12 @@ const RunWorkflow = (defaultprops) => {
 					{executionRunning ?
 						<span style={{width: 50, height: 50, margin: "auto", alignItems: "center", justifyContent: "center", textAlign: "center", }}>
 							<CircularProgress style={{marginTop: 20, marginBottom: 20, marginLeft: 185, }}/>
+
+							{executionData.status !== undefined && executionData.status !== null && executionData.status !== "" ?
 								<Typography variant="body2" style={{margin: "auto", marginTop: 20, marginBottom: 20, textAlign: "center", alignItem: "center", }} color="textSecondary">
 									Status: {executionData.status}
 								</Typography>
+							: null}
 						</span>
 						
 						:
@@ -723,7 +744,7 @@ const RunWorkflow = (defaultprops) => {
 								}
 								<div fullWidth style={{width: "100%", marginTop: 10, marginBottom: 10, display: "flex", }}>
 									<Button fullWidth id="continue_execution" variant="contained" disabled={disabledButtons} color="primary" style={{border: answer === "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1,}} onClick={() => {
-										onSubmit(execution_id, authorization, true) 
+										onSubmit(null, execution_id, authorization, true) 
 
 										setButtonClicked("FINISHED")
 										setExecutionData({
@@ -734,7 +755,7 @@ const RunWorkflow = (defaultprops) => {
 										&nbsp;or&nbsp;
 									</Typography>
 									<Button fullWidth id="abort_execution" variant="contained" color="primary" disabled={disabledButtons} style={{border: answer !== "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1, }} onClick={() => {
-										onSubmit(execution_id, authorization, false) 
+										onSubmit(null, execution_id, authorization, false) 
 
 										setButtonClicked("ABORTED")
 										setExecutionData({

frontend/src/views/Workflows.jsx

@@ -393,6 +393,9 @@ export const validateJson = (showResult) => {
 	if (typeof showResult === 'string') {
 		showResult = showResult.split(" False").join(" false")
 		showResult = showResult.split(" True").join(" true")
+
+		showResult.replaceAll("False,", "false,")
+		showResult.replaceAll("True,", "true,")
 	}
 
 	if (typeof showResult === "object" || typeof showResult === "array") {
@@ -1247,9 +1250,9 @@ const Workflows = (props) => {
 
 	//flexDirection: !isMobile ? "column" : "row",
   const paperAppContainer = {
-    display: "flex",
+    //display: "flex",
-    flexWrap: "wrap",
+    //flexWrap: "wrap",
-    alignContent: "space-between",
+    //alignContent: "space-between",
   };
 
   const paperAppStyle = {
@@ -1587,7 +1590,7 @@ const Workflows = (props) => {
   const NewWorkflowPaper = () => {
     const [hover, setHover] = React.useState(false);
 
-    const innerColor = "rgba(255,255,255,0.3)";
+    const innerColor = "rgba(255,255,255,0.3)"
     const setupPaperStyle = {
       minHeight: paperAppStyle.minHeight,
 	  maxWidth: "100%",
@@ -2224,7 +2227,7 @@ const Workflows = (props) => {
           // Update :)
           setTimeout(() => {
             getAvailableWorkflows();
-          }, 2500);
+          }, 4000);
 					setSubmitLoading(false)
           setModalOpen(false);
         } else {
@@ -3239,14 +3242,18 @@ const Workflows = (props) => {
 										fullWidth
 										value={filters}
 										onChange={(chips) => {
+											console.log("CHANGE: ", chips);
 											setFilters(chips);
+    										findWorkflow(chips);
 										}}
-										onAdd={(chip) => {
+										//onAdd={(chip) => {
-											addFilter(chip);
+										//	console.log("ADd: ", chip);
-										}}
+										//	addFilter(chip);
-										onDelete={(_, index) => {
+										//}}
-											removeFilter(index);
+										//onDelete={(_, index) => {
-										}}
+										//	console.log("Remove: ", index);
+										//	removeFilter(index);
+										//}}
 									/>
 								</div>
 							</div>
@@ -3485,9 +3492,9 @@ const Workflows = (props) => {
 						/>
 					: null}
 
-					<div style={{marginTop: 30, marginBottom: 50, marginLeft: 30, }}>
+					<div style={{}}>
 						{view === "grid" ? (
-							<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
+							<Grid container spacing={0/*filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4*/} style={paperAppContainer}>
 								{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
 								<NewWorkflowPaper />
 								{/*</Zoom>*/}