Loads of frontend fixes

.env

@@ -59,9 +59,9 @@ SHUFFLE_ORBORUS_STARTUP_DELAY= 		# Used for setting up a startup delay for Orbor
 SHUFFLE_SKIPSSL_VERIFY=true 		
 IS_KUBERNETES=false 				# Used for controlling if the environment should run in kubernetes or not
 
-SHUFFLE_BASE_IMAGE_NAME=shuffle
+#SHUFFLE_BASE_IMAGE_NAME=shuffle
-SHUFFLE_BASE_IMAGE_REGISTRY=ghcr.io
+#SHUFFLE_BASE_IMAGE_REGISTRY=ghcr.io
-SHUFFLE_BASE_IMAGE_TAG_SUFFIX="-1.3.1"
+#SHUFFLE_BASE_IMAGE_TAG_SUFFIX="-1.3.1"
 
 # The eth0 interface inside a container corresponds 
 # to the virtual Ethernet interface that connects 

backend/app_sdk/app_base.py

@@ -466,8 +466,8 @@ class AppBase:
                 "success": True,
                 "status": request.status_code,
                 "url": request.url,
-                "headers": parsedheaders,
                 "body": jsondata,
+                "headers": parsedheaders,
                 "cookies":cookies,
             })
         except Exception as e:

frontend/src/components/Header.jsx

@@ -615,7 +615,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 				</List>
 			</div>
 			<div style={{flex: 1, marginTop: 10,}}>
-				<SearchField serverside={serverside} userdata={userdata} />
+				<SearchField globalUrl={globalUrl} serverside={serverside} userdata={userdata} />
 			</div>
 			<div style={{flex: 1, display: "flex", flexDirection: "row-reverse"}}>
 				<List style={{display: 'flex', flexDirection: 'row-reverse'}} component="nav">

frontend/src/components/NewHeader.jsx

@@ -741,7 +741,7 @@ const Header = (props) => {
         >
 	  	  <div style={{maxWidth: 70, minWidth: 70, }}/>
 	  	  <span style={{marginTop: 8, marginRight: 15, }}>
-		  	<SearchField isHeader={true} isLoggedIn={isLoggedIn} isLoaded={isLoaded} serverside={serverside} userdata={userdata} small={true} rounded={true} />
+		  	<SearchField globalUrl={globalUrl} isHeader={true} isLoggedIn={isLoggedIn} isLoaded={isLoaded} serverside={serverside} userdata={userdata} small={true} rounded={true} />
 	  	  </span>
 		    <Link to="/register" style={hrefStyle}>
 		      <Button
@@ -912,7 +912,7 @@ const Header = (props) => {
           </List>
         </div>
         <div style={{ flex: 1, marginTop: 10, }}>
-          <SearchField isHeader={true} isLoggedIn={isLoggedIn} isLoaded={isLoaded} serverside={serverside} userdata={userdata} hidemargins={true}/>
+          <SearchField globalUrl={globalUrl} isHeader={true} isLoggedIn={isLoggedIn} isLoaded={isLoaded} serverside={serverside} userdata={userdata} hidemargins={true}/>
         </div>
         <div style={{ flex:  isLoggedIn ? null : 1, display: "flex", flexDirection: "row-reverse" }}>
           <List

frontend/src/components/Oauth2Auth.jsx

@@ -374,7 +374,7 @@ const AuthenticationOauth2 = (props) => {
 				},
 				"fields": parsedFields,
 				"type": "oauth2-app",
-				"reference_workflow": workflowId,
+				//"reference_workflow": workflowId,
 		}
 
 	    if (setNewAppAuth !== undefined) {

frontend/src/components/ParsedAction.jsx

@@ -1644,13 +1644,11 @@ const ParsedAction = (props) => {
                 multiline={data.name.startsWith("${") && data.name.endsWith("}") ? true : multiline}
                 helperText={returnHelperText(data.name, data.value)}
                 onClick={() => {
-                  console.log("Clicked field: ", clickedFieldId, data.name)
 				  	/*
                   		setExpansionModalOpen(false);
 					*/
 
 					if (setScrollConfig !== undefined && scrollConfig !== null && scrollConfig !== undefined && scrollConfig.selected !== clickedFieldId) {
-						console.log("IN SCROLL CONFIG!")
 
 						scrollConfig.selected = clickedFieldId
 						setScrollConfig(scrollConfig)
@@ -3737,6 +3735,11 @@ const ParsedAction = (props) => {
 							break
 						}
 					}
+
+					// Check if it starts with "Get List" and method is "Get"
+					if (params.inputProps.value.startsWith("Get List")) {
+						console.log("Get List")
+					}
 				}
 
               return (

frontend/src/components/SearchData.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 
 import theme from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
+import { toast } from "react-toastify" 
 
 import {
     Chip,
@@ -41,7 +42,7 @@ const chipStyle = {
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const SearchData = props => {
-    const { serverside, userdata, setModalOpen, modalOpen } = props
+    const { serverside, globalUrl, userdata, setModalOpen, modalOpen } = props
     let navigate = useNavigate();
     const borderRadius = 3
     const node = useRef()
@@ -326,6 +327,57 @@ const SearchData = props => {
         )
     }
 
+	const activateApp = (name, appid, type) => {
+	  if (globalUrl === undefined || globalUrl === null) {
+		  console.log(`Global URL not set`)
+		  return
+	  }
+
+	  if (name === undefined || name === null) {
+		  name = ""
+	  }
+
+	  name = name.replaceAll("_", " ")
+
+	  if (userdata === undefined || userdata === null || userdata.id === undefined) {
+		  toast(`You need to be logged in to activate the ${name} app. Redirecting`)
+
+		  setTimeout(() => {
+		  	navigate(`/register?message=You need to be logged in to use the ${name} app.`)
+		  }, 500)
+		  return
+	  }
+
+	  const url = `${globalUrl}/api/v1/apps/${appid}/${type}` 
+
+      fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        credentials: "include",
+      })
+        .then((response) => {
+          if (response.status !== 200) {
+			toast(`Failed to ${type} the app for your organization. Please try again or contact support@shuffler.io`)
+          }
+
+          return response.json()
+        })
+        .then((responseJson) => {
+          if (responseJson.success === false) {
+            toast(`Failed to ${type} the app for your organization. Please try again or contact support@shuffler.io for more info`) 
+		  } else {
+			  toast(`App successfully ${type}d. Please refresh the page to use it.`)
+		  }
+        })
+        .catch(error => {
+          //toast(error.toString())
+          console.log("Activate app error: ", error.toString())
+        });
+    }  
+
     const AppHits = ({ hits }) => {
         const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
 
@@ -431,7 +483,6 @@ const SearchData = props => {
                             return (
                                 <Link key={hit.objectID} to={parsedUrl} style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
                                     setSearchOpen(true)
-
                                     setModalOpen(false)
                                     aa('init', {
                                         appId: searchClient.appId,
@@ -474,6 +525,29 @@ const SearchData = props => {
 											</IconButton>
 										</ListItemSecondaryAction>
 										*/}
+										<Button
+											variant="outlined"
+											color="secondary"
+											onClick={(e) => {
+												e.preventDefault()
+												e.stopPropagation()
+
+												console.log("OBJECT CHANGE: ", hit.objectID)
+
+												// This does nothing rofl
+												if (userdata.active_apps === undefined || userdata.active_apps === null) {
+													activateApp(hit.name, hit.objectID, "activate")
+												} else {
+													if (userdata.active_apps.includes(hit.objectID)) {
+														activateApp(hit.name, hit.objectID, "deactivate")
+													} else {
+														activateApp(hit.name, hit.objectID, "activate")
+													}
+												}
+											}}
+										>
+											{userdata.active_apps !== undefined && userdata.active_apps !== null && userdata.active_apps.includes(hit.objectID) ? "Deactivate" : "Activate"}
+										</Button>
                                     </ListItem>
                                 </Link>
                             )

frontend/src/components/Searchfield.jsx

@@ -98,7 +98,7 @@ const SearchField = props => {
 			</div>
 				: null}
 			<DialogContent style={{}}>
-				<SearchBox setModalOpen={setModalOpen} modalOpen={modalOpen} serverside={serverside} userdata={userdata} />
+				<SearchBox globalUrl={globalUrl} setModalOpen={setModalOpen} modalOpen={modalOpen} serverside={serverside} userdata={userdata} />
 			</DialogContent>
 			<Divider style={{overflow: "hidden"}}/>
 			<span style={{display:"flex", width:"100%", height:30}}>

frontend/src/components/ShuffleCodeEditor.jsx

@@ -236,8 +236,6 @@ const CodeEditor = (props) => {
 
     	//var newitem = JSON.parse(base);
     	var newitem = validateJson(base).result
-
-
     	to_be_copied = "$" + base_node_name.toLowerCase().replaceAll(" ", "_");
     	for (let copykey in copy.namespace) {
     	  if (copy.namespace[copykey].includes("Results for")) {
@@ -825,7 +823,7 @@ const CodeEditor = (props) => {
 										console.log("ERR IN INPUT: ", e)
 									}
 
-									console.log("Got output for: ", fullpath, new_input, actionlist[k].example, typeof new_input)
+									//console.log("Got output for: ", fullpath, new_input, actionlist[k].example, typeof new_input)
 
 									if (typeof new_input === "object") {
 										new_input = JSON.stringify(new_input)
@@ -1078,6 +1076,12 @@ const CodeEditor = (props) => {
 							*/}
 					{ isFileEditor ? null :
 					<div style={{display: "flex", maxHeight: 40, }}>
+						{selectedAction.name === "execute_python" ? 
+							<Typography variant="body1" style={{marginTop: 5, }}>
+								Run Python Code
+							</Typography>
+						: 
+						<div style={{display: "flex", }}>
 							<Button
 								id="basic-button"
 								aria-haspopup="true"
@@ -1186,6 +1190,8 @@ const CodeEditor = (props) => {
 									)
 								})}
 							</Menu> 
+						</div>
+						}
 						<Button
 							id="basic-button"
 							aria-haspopup="true"
@@ -1589,7 +1595,6 @@ const CodeEditor = (props) => {
 											maxHeight: 35, 
 											minWidth: 70, 
 										}} 
-										variant="contained" 
 										onClick={() => {
 											executeSingleAction(expOutput)
 										}}

frontend/src/views/Admin.jsx

@@ -140,6 +140,11 @@ const Admin = (props) => {
   const classes = useStyles();
   let navigate = useNavigate();
 
+  const [logsViewModal, setLogsViewModal] = React.useState(false);
+  const [userLogViewing, setUserLogViewing] = React.useState({});
+  const [ipSelected, setIpSelected] = React.useState("");
+  const [logsLoading, setLogsLoading] = React.useState(true);
+  const [logs, setLogs] = React.useState([]);
   const [firstRequest, setFirstRequest] = React.useState(true);
   const [orgRequest, setOrgRequest] = React.useState(true);
   const [modalUser, setModalUser] = React.useState({});
@@ -3343,6 +3348,111 @@ If you're interested, please let me know a time that works for you, or set up a
             backgroundColor: theme.palette.inputColor,
           }}
         />
+
+        
+        {logsViewModal ? 
+            <Dialog
+              open={logsViewModal}
+              onClose={() => {
+                setLogsViewModal(false);
+              }}
+              PaperProps={{
+                style: {
+                  backgroundColor: theme.palette.surfaceColor,
+                  color: "white",
+                  minWidth: "1200px",
+                  minHeight: "320px",
+                },
+              }}
+            >
+              <DialogTitle>
+                <span style={{ color: "white" }}>User Logs</span>
+              </DialogTitle>
+              <DialogContent>
+                {/* ask user for which IP they want to see logs for by iterating of user.login_info */}
+                <FormControl fullWidth>
+                  <InputLabel style={{ size: 10 }} id="user-ip-simple-select-label">
+                    User IP
+                  </InputLabel>
+
+                  <Select
+                    labelId="user-ip-simple-select-label"
+                    id="user-ip-simple-select"
+                    onChange={async (event) => {
+                      setIpSelected(event.target.value);
+                      await getLogs(event.target.value, userLogViewing.id);
+                    }}
+                  >
+                    {(() => {
+                      const uniqueIPs = new Set();
+
+                      return userLogViewing.login_info.map((data, index) => {
+                        if (data.ip.includes("127.0.0.1") || uniqueIPs.has(data.ip)) {
+                          return null;
+                        }
+
+                        uniqueIPs.add(data.ip);
+
+                        return (
+                          <MenuItem key={index} value={data.ip}>
+                            {data.ip}
+                          </MenuItem>
+                        );
+                      });
+                    })()}                  
+                  </Select>
+                </FormControl>
+                {logsLoading && ipSelected.length !== 0 ?
+                  <div style={{ marginTop: 20, marginBottom: 20, display: 'flex', alignItems: 'center' }}>
+                    <CircularProgress style={{ marginRight: 10 }} />
+                    <Typography>Loading logs</Typography>
+                  </div>
+                : null}
+
+                <List>
+                  {logs.map((data, index) => (
+                    // redirect user to logs 
+                    // using request id or trace id
+                    <ListItem key={index} style={{ backgroundColor: index % 2 === 0 ? "#1f2023" : "#27292d" }}>
+                      <ListItemText
+                        primary={new Date(data.start_time.seconds * 1000).toISOString().slice(0, 10)}
+                        style={{
+                          minWidth: 150,
+                          maxWidth: 150,
+                        }}
+                      />
+                      <ListItemText
+                        primary={data.status}
+                        style={{
+                          minWidth: 70,
+                          maxWidth: 70,
+                        }}
+                      />
+                      <ListItemText
+                        primary={data.method}
+                        style={{
+                          minWidth: 150,
+                          maxWidth: 150,
+                        }}
+                      />
+                      <ListItemText
+                        primary={data.resource}
+                        style={{
+                          minWidth: 700,
+                          maxWidth: 700,
+                          overflow: "hidden",
+                        }}
+                      />
+                    </ListItem>
+                  ))}
+                </List>
+                
+              </DialogContent>
+
+            </Dialog>
+          : null}
+          
+
         <List>
           <ListItem>
             <ListItemText
@@ -3392,6 +3502,7 @@ If you're interested, please let me know a time that works for you, or set up a
               primary="Last Login"
               style={{ minWidth: 150, maxWidth: 150, }}
             />
+
           </ListItem>
           {users === undefined || users === null
             ? null
@@ -3418,10 +3529,19 @@ If you're interested, please let me know a time that works for you, or set up a
 					}
 				}
 
+        var userData = data.username
+        if (userdata.support === true) {
+          userData = <a style={{ cursor: "pointer", textDecoration: 'underline', textDecorationColor: '#F76742', color: '#F76742' }} onClick={() => {
+            setLogsViewModal(true)
+            setUserLogViewing(data)
+          }}
+          >{data.username}</a>
+        }
+
         return (
               <ListItem key={index} style={{ backgroundColor: bgColor }}>
                 <ListItemText
-                      primary={data.username}
+                  primary={userData}
                   style={{
                     minWidth: 350,
                     maxWidth: 350,
@@ -4131,6 +4251,46 @@ If you're interested, please let me know a time that works for you, or set up a
       </div>
     ) : null;
 
+  const getLogs = async (ip, userId) => {
+    setLogsLoading(true);
+    console.log("logs loading: ", logsLoading);
+    fetch(`${globalUrl}/api/v1/users/${userId}/audit?user_ip=${ip}`, {
+      mode: "cors",
+      method: "GET",
+      credentials: "include",
+      crossDomain: true,
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+    }) 
+      .then((response) => {
+        return response.json();
+      })
+      .then((responseJson) => {
+        console.log("ResponseJSON: ", responseJson);
+        if (responseJson.success === true) {
+          setLogs(responseJson.logs);
+        } else {
+          if (responseJson.success === false || responseJson.reason !== undefined) {
+            console.log("Reason given: ", responseJson.reason)
+            toast("Failed getting logs: " + responseJson.reason)
+            setLogs([])
+          } else {
+            toast("Failed getting logs");
+          }
+        }
+        console.log("logs loading now: ", logsLoading);
+        setLogsLoading(false);
+      })
+      .catch((error) => {
+        console.log("Error: ", error);
+        toast("Failed getting logs. Please contact: ", error);
+        console.log("logs loading now: ", logsLoading);
+        setLogsLoading(false);
+      });
+  };
+
 	const changeRecommendation = (recommendation, action) => {
     const data = {
       action: action,

frontend/src/views/AngularWorkflow.jsx

@@ -17,7 +17,7 @@ import { ToastContainer, toast } from "react-toastify"
 import { isMobile } from "react-device-detect"
 import aa from 'search-insights'
 import Drift from "react-driftjs";
-import ShuffleCodeEditor from "../components/ShuffleCodeEditor.jsx";
+import { CodeHandler, Img, OuterLink, } from "../views/Docs.jsx";
 
 import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
 import algoliasearch from 'algoliasearch/lite';
@@ -116,17 +116,12 @@ import {
   AutoAwesome as AutoAwesomeIcon,
 } from "@mui/icons-material";
 
-
 import * as cytoscape from "cytoscape";
 import * as edgehandles from "cytoscape-edgehandles";
-//import * as clipboard from "cytoscape-clipboard";
-//import undoRedo from "cytoscape-undo-redo";
-//import cxtmenu from "cytoscape-cxtmenu";
 import CytoscapeComponent from "react-cytoscapejs";
-
 import Draggable from "react-draggable";
-
 import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
+import ShuffleCodeEditor from "../components/ShuffleCodeEditor.jsx";
 
 import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
 import { GetParsedPaths, internalIds, } from "../views/Apps.jsx";
@@ -842,48 +837,6 @@ const AngularWorkflow = (defaultprops) => {
       });
   };
 
-  function OuterLink(props) {
-    if (props.href.includes("http") || props.href.includes("mailto")) {
-      return (
-        <a
-          href={props.href}
-          style={{ color: "#f85a3e", textDecoration: "none" }}
-        >
-          {props.children}
-        </a>
-      );
-    }
-    return (
-      <Link
-        to={props.href}
-        style={{ color: "#f85a3e", textDecoration: "none" }}
-      >
-        {props.children}
-      </Link>
-    );
-  }
-
-  function Img(props) {
-    return <img style={{ maxWidth: "100%" }} alt={props.alt} src={props.src} />;
-  }
-
-  function CodeHandler(props) {
-    return (
-      <pre
-        style={{
-          padding: 15,
-          minWidth: "50%",
-          maxWidth: "100%",
-          backgroundColor: theme.palette.inputColor,
-          overflowX: "auto",
-          overflowY: "hidden",
-        }}
-      >
-        <code>{props.value}</code>
-      </pre>
-    );
-  }
-
   function Heading(props) {
     const element = React.createElement(
       `h${props.level}`,
@@ -1021,8 +974,6 @@ const AngularWorkflow = (defaultprops) => {
         return response.json();
       })
       .then((responseJson) => {
-		  console.log("GOT A RESPONSE??")
-      // getWorkflowExecutionCount(id);
         if (responseJson !== undefined && responseJson !== null && responseJson.executions !== undefined && responseJson.executions !== null) {
 
           // - means it's opposite
@@ -1035,8 +986,6 @@ const AngularWorkflow = (defaultprops) => {
             tmpView = execution_id;
           }
 
-		  console.log("EXECUTION ID: ", tmpView)
-
 		  // Compare with currently selected item
           if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
 			// Don't clean up if it's already open
@@ -1820,7 +1769,6 @@ const AngularWorkflow = (defaultprops) => {
 			  }
 		  }
 
-		  console.log("FOUNDMISSING: ", foundmissing)
 		  if (foundmissing) {
 			  //toast("This workflow contains a node that requires an execution argument. Please provide one.")
           	  setExecutionRequestStarted(false)
@@ -2788,12 +2736,18 @@ const AngularWorkflow = (defaultprops) => {
 			if (response.status >= 500) {
 				toast("Something went wrong while loading the workflow. Please reload.")
 			} else {
-				toast("You don't access to this workflow or loading failed. Redirecting to workflows in a few seconds..")
 
+				// Check for execution_id in URL
+				// don't redirect if it exists
+				const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+			    var execFound = new URLSearchParams(cursearch).get("execution_id");
+			    if (execFound === null) {
+					toast(`You don't access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
 					setTimeout(() => {
 						window.location.pathname = "/workflows";
 					}, 2000);
 				}
+			}
         }
 
 				// Read text from stream
@@ -8518,8 +8472,6 @@ const AngularWorkflow = (defaultprops) => {
     	    }
 
     	    if (param.name === "headers") {
-    	      console.log("Swap header? For now, yes. File found: ", fileid_found)
-
     	      if (fileid_found) {
     	        newSelectedAction.parameters[paramkey].value = ""
     	        newSelectedAction.parameters[paramkey].autocompleted = true
@@ -8614,7 +8566,6 @@ const AngularWorkflow = (defaultprops) => {
 
     if (workflow.actions !== undefined && workflow.actions !== null && workflow.actions.length > 0) {
       const foundActionIndex = workflow.actions.findIndex(actiondata => actiondata.id === newSelectedAction.id)
-      console.log("Found action on index ", foundActionIndex)
       if (foundActionIndex >= 0) {
         workflow.actions[foundActionIndex] = newSelectedAction
         setWorkflow(workflow)
@@ -9444,14 +9395,18 @@ const AngularWorkflow = (defaultprops) => {
           bottom: 10,
           left: 10,
           color: "rgba(255,255,255,0.6)",
+		  zIndex: 10000,
         }}
       >
         Conditions can't be used for loops [ .# ]{" "}
         <a
           rel="noopener noreferrer"
           target="_blank"
-          href="https://shuffler.io/docs/workflows#conditions"
+          href="/docs/workflows#conditions"
-          style={{ textDecoration: "none", color: "#f85a3e" }}
+          style={{ 
+			  	textDecoration: "none", 
+				color: "#f85a3e",
+		  }}
         >
           Learn more
         </a>
@@ -15936,6 +15891,9 @@ const AngularWorkflow = (defaultprops) => {
 							  setCodeModalOpen(true);
 						  } else {
 							  toast("Please wait until the workflow is loaded and try again")
+							  setCodeModalOpen(true)
+							  setSelectedResult(data)
+
 							}
                         }}
                       >
@@ -16197,6 +16155,25 @@ const AngularWorkflow = (defaultprops) => {
         }}
       >
         <span id="top_bar">
+          <Tooltip
+            title="Suggest solution"
+            placement="top"
+            style={{ zIndex: 50000 }}
+          >
+            <IconButton
+              style={{
+                zIndex: 5000,
+                position: "absolute",
+                top: 34,
+                right: 210,
+              }}
+              onClick={(e) => {
+                e.preventDefault()
+			  }}
+	  		>
+	  			<AutoFixHighIcon />
+	  		</IconButton>
+	  	  </Tooltip>
           <Tooltip
             title="Find successful execution"
             placement="top"
@@ -16210,7 +16187,7 @@ const AngularWorkflow = (defaultprops) => {
                 right: 170,
               }}
               onClick={(e) => {
-                e.preventDefault();
+                e.preventDefault()
 
 				if (workflowExecutions !== null) {
                 	for (let execkey in workflowExecutions) {

frontend/src/views/AppCreator.jsx

@@ -264,7 +264,7 @@ export const appCategories = [
 		"name": "IAM",
 		"color": "#FFC107",
 		"icon": "iam",
-		"action_labels": ["Reset Password", "Enable user", "Disable user", "Get Identity", "Get Asset", "Search Identity", ],
+		"action_labels": ["Reset Password", "Enable user", "Disable user", "Get Identity", "Get Asset", "Search Identity", "Get KMS Key",],
 	}, {
 		"name": "Network",
 		"color": "#FFC107",
@@ -2174,6 +2174,10 @@ const AppCreator = (defaultprops) => {
             queryitem.name.toLowerCase() == "ssl_verify" ||
             queryitem.name.toLowerCase() == "queries" ||
             queryitem.name.toLowerCase() == "headers" ||
+            queryitem.name.toLowerCase() == "list" ||
+            queryitem.name.toLowerCase() == "dict" ||
+            queryitem.name.toLowerCase() == "str" ||
+            queryitem.name.toLowerCase() == "int" ||
             queryitem.name.toLowerCase() == "access_token") {
 						/*
 
@@ -3748,7 +3752,7 @@ const AppCreator = (defaultprops) => {
     		  }}
     		>
     		  <FormControl style={{ backgroundColor: surfaceColor, color: "white" }}>
-    		    <DialogTitle style={{marginTop: 30, }}>
+    		    <DialogTitle style={{marginTop: 45, }}>
     		      <div style={{ color: "white" }}>New action</div>
     		    </DialogTitle>
     		    <DialogContent style={{paddingBottom: 100, }}>

frontend/src/views/Docs.jsx

@@ -3,10 +3,12 @@ import React, { useEffect, useState } from "react";
 import { toast } from 'react-toastify';
 import Markdown from 'react-markdown'
 
+import theme from '../theme.jsx';
+import ReactJson from "react-json-view";
+import { isMobile } from "react-device-detect";
 import { BrowserView, MobileView } from "react-device-detect";
 import { useParams, useNavigate, Link } from "react-router-dom";
-import { isMobile } from "react-device-detect";
+import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
-import theme from '../theme.jsx';
 
 import {
   Grid,
@@ -30,6 +32,7 @@ import {
   Edit as EditIcon,
   KeyboardArrowRight as KeyboardArrowRightIcon,
   ExpandMore as ExpandMoreIcon,
+  FileCopy as FileCopyIcon
 } from "@mui/icons-material";
 
 const Body = {
@@ -60,6 +63,120 @@ const innerHrefStyle = {
   textDecoration: "none",
 };
 
+
+export const CopyToClipboard = (props) => {
+	const {text, style, onCopy} = props;
+	const parsedstyle = style !== undefined ? style : {
+		position: "absolute",
+		right: 0,
+		top: -10,
+	}
+
+	return (
+		<div
+			style={parsedstyle}
+		>
+			<IconButton
+				onClick={() => {
+					navigator.clipboard.writeText(text);
+					toast("Copied to clipboard")
+				}}
+			>
+				<FileCopyIcon />
+			</IconButton>
+		</div>
+	)
+}
+
+export const OuterLink = (props) => {
+    if (props.href.includes("http") || props.href.includes("mailto")) {
+      return (
+        <a
+          href={props.href}
+          style={{ color: "#f85a3e", textDecoration: "none" }}
+        >
+          {props.children}
+        </a>
+      );
+    }
+
+    return (
+      <Link
+        to={props.href}
+        style={{ color: "#f85a3e", textDecoration: "none" }}
+      >
+        {props.children}
+      </Link>
+    );
+  }
+
+
+export const Img = (props) => {
+    return <img style={{ borderRadius: theme.palette.borderRadius, width: 750, maxWidth: "100%", marginTop: 15, marginBottom: 15, }} alt={props.alt} src={props.src} />;
+}
+
+export const CodeHandler = (props) => {
+    const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
+
+
+
+    const validate = validateJson(propvalue)
+
+	var newprop = propvalue
+	if (validate.valid === false) {
+		// Check if https://shuffler.io in the url
+		// if so, then we change it for the current url	
+		if (propvalue.includes("https://shuffler.io")) {
+			newprop = propvalue.replace("https://shuffler.io", window.location.origin)
+		}
+
+		// Check if it contains Bearer APIKEY
+		// If so, replace apikey
+		//if (newprop.includes("Bearer APIKEY")) {
+		//	newprop = newprop.replace("Bearer APIKEY", "Bearer API
+		//}
+	}
+
+    return (
+      <div
+        style={{
+          padding: 15,
+          minWidth: "50%",
+          maxWidth: "100%",
+          backgroundColor: theme.palette.inputColor,
+          overflowY: "auto",
+        }}
+      >
+		{validate.valid === true ? 
+			<ReactJson
+				src={validate.result}
+				theme={theme.palette.jsonTheme}
+				style={theme.palette.reactJsonStyle}
+				collapsed={false}
+				displayDataTypes={false}
+				name={""}
+			/>
+			: 
+			<div style={{display: "flex", position: "relative", }}>
+				<code
+				  style={{
+					// Wrap if larger than X
+					whiteSpace: "pre-wrap",
+					overflow: "auto",
+					marginRight: 40, 
+				  }}
+				>
+					{newprop}
+				</code>
+				<CopyToClipboard 
+					text={newprop} 
+				/>
+			</div>
+		}
+	  </div>
+	)
+}
+
 const Docs = (defaultprops) => {
   const { globalUrl, selectedDoc, serverside, serverMobile } = defaultprops;
 
@@ -121,6 +238,123 @@ const Docs = (defaultprops) => {
     //height: "50vh",
   };
 
+  const Heading = (props) => {
+    const element = React.createElement(
+      `h${props.level}`,
+      { style: { marginTop: props.level === 1 ? 20 : 50 } },
+      props.children
+    );
+    const [hover, setHover] = useState(false);
+
+    var extraInfo = "";
+    if (props.level === 1) {
+      extraInfo = (
+        <div
+          style={{
+            backgroundColor: theme.palette.inputColor,
+            padding: 15,
+            borderRadius: theme.palette.borderRadius,
+            marginBottom: 30,
+            display: "flex",
+          }}
+        >
+          <div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
+            {isMobile ? null : (
+              <Typography style={{ display: "inline", marginTop: 6 }}>
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={selectedMeta.link}
+                  style={{ textDecoration: "none", color: "#f85a3e" }}
+                >
+                  <Button style={{ color: "white", }} variant="outlined" color="secondary">
+                    <EditIcon /> &nbsp;&nbsp;Edit
+                  </Button>
+                </a>
+              </Typography>
+            )}
+            {isMobile ? null : (
+              <div
+                style={{
+                  height: "100%",
+                  width: 1,
+                  backgroundColor: "white",
+                  marginLeft: 50,
+                  marginRight: 50,
+                }}
+              />
+            )}
+            <Typography style={{ display: "inline", marginTop: 11 }}>
+              {selectedMeta.read_time} minute
+              {selectedMeta.read_time === 1 ? "" : "s"} to read
+            </Typography>
+          </div>
+          <div style={{ flex: 2 }}>
+            {isMobile ||
+              selectedMeta.contributors === undefined ||
+              selectedMeta.contributors === null ? (
+              ""
+            ) : (
+              <div style={{ margin: 10, height: "100%", display: "inline" }}>
+                {selectedMeta.contributors.slice(0, 7).map((data, index) => {
+                  return (
+                    <a
+                      key={index}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      href={data.url}
+                      target="_blank"
+                      style={{ textDecoration: "none", color: "#f85a3e" }}
+                    >
+                      <Tooltip title={data.url} placement="bottom">
+                        <img
+                          alt={data.url}
+                          src={data.image}
+                          style={{
+                            marginTop: 5,
+                            marginRight: 10,
+                            height: 40,
+                            borderRadius: 40,
+                          }}
+                        />
+                      </Tooltip>
+                    </a>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+	if (extraInfo !== "" && props.level === 1 && props.children !== undefined && props.children !== null && props.children.length > 0) {
+		if (props.children[0].toLowerCase().includes("privacy") || props.children[0].toLowerCase().includes("terms")) {
+			extraInfo = ""
+		}
+	}
+
+    return (
+      <Typography
+        onMouseOver={() => {
+          setHover(true);
+        }}
+      >
+        {props.level !== 1 ? (
+          <Divider
+            style={{
+              width: "90%",
+              marginTop: 40,
+              backgroundColor: theme.palette.inputColor,
+            }}
+          />
+        ) : null}
+        {element}
+        {extraInfo}
+      </Typography>
+    )
+  }
+
   const SideBar = {
     minWidth: 300,
     width: "20%",
@@ -382,190 +616,7 @@ const Docs = (defaultprops) => {
     fontSize: isMobile ? "1.3rem" : "1.1rem",
   };
 
-  function OuterLink(props) {
-    if (props.href.includes("http") || props.href.includes("mailto")) {
-      return (
-        <a
-          href={props.href}
-          style={{ color: "#f85a3e", textDecoration: "none" }}
-        >
-          {props.children}
-        </a>
-      );
-    }
-    return (
-      <Link
-        to={props.href}
-        style={{ color: "#f85a3e", textDecoration: "none" }}
-      >
-        {props.children}
-      </Link>
-    );
-  }
   
-  function Img(props) {
-    return <img style={{ borderRadius: theme.palette.borderRadius, width: 750, maxWidth: "100%", marginTop: 15, marginBottom: 15, }} alt={props.alt} src={props.src} />;
-  }
-
-  function CodeHandler(props) {
-    //console.log("Codehandler 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 (
-      <div
-        style={{
-          padding: 15,
-          minWidth: "50%",
-          maxWidth: "100%",
-          backgroundColor: theme.palette.inputColor,
-          overflowY: "auto",
-        }}
-      >
-        <code
-          style={{
-            // Wrap if larger than X
-            whiteSpace: "pre-wrap",
-            overflow: "auto",
-          }}
-        >{propvalue}</code>
-      </div>
-    );
-  }
-
-  const Heading = (props) => {
-    const element = React.createElement(
-      `h${props.level}`,
-      { style: { marginTop: props.level === 1 ? 20 : 50 } },
-      props.children
-    );
-    const [hover, setHover] = useState(false);
-
-    var extraInfo = "";
-    if (props.level === 1) {
-      extraInfo = (
-        <div
-          style={{
-            backgroundColor: theme.palette.inputColor,
-            padding: 15,
-            borderRadius: theme.palette.borderRadius,
-            marginBottom: 30,
-            display: "flex",
-          }}
-        >
-          <div style={{ flex: 3, display: "flex", vAlign: "center", position: "sticky", top: 50, }}>
-            {mobile ? null : (
-              <Typography style={{ display: "inline", marginTop: 6 }}>
-                <a
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  href={selectedMeta.link}
-                  style={{ textDecoration: "none", color: "#f85a3e" }}
-                >
-                  <Button style={{ color: "white", }} variant="outlined" color="secondary">
-                    <EditIcon /> &nbsp;&nbsp;Edit
-                  </Button>
-                </a>
-              </Typography>
-            )}
-            {mobile ? null : (
-              <div
-                style={{
-                  height: "100%",
-                  width: 1,
-                  backgroundColor: "white",
-                  marginLeft: 50,
-                  marginRight: 50,
-                }}
-              />
-            )}
-            <Typography style={{ display: "inline", marginTop: 11 }}>
-              {selectedMeta.read_time} minute
-              {selectedMeta.read_time === 1 ? "" : "s"} to read
-            </Typography>
-          </div>
-          <div style={{ flex: 2 }}>
-            {mobile ||
-              selectedMeta.contributors === undefined ||
-              selectedMeta.contributors === null ? (
-              ""
-            ) : (
-              <div style={{ margin: 10, height: "100%", display: "inline" }}>
-                {selectedMeta.contributors.slice(0, 7).map((data, index) => {
-                  return (
-                    <a
-                      key={index}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      href={data.url}
-                      target="_blank"
-                      style={{ textDecoration: "none", color: "#f85a3e" }}
-                    >
-                      <Tooltip title={data.url} placement="bottom">
-                        <img
-                          alt={data.url}
-                          src={data.image}
-                          style={{
-                            marginTop: 5,
-                            marginRight: 10,
-                            height: 40,
-                            borderRadius: 40,
-                          }}
-                        />
-                      </Tooltip>
-                    </a>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      );
-    }
-
-	if (extraInfo !== "" && props.level === 1 && props.children !== undefined && props.children !== null && props.children.length > 0) {
-		if (props.children[0].toLowerCase().includes("privacy") || props.children[0].toLowerCase().includes("terms")) {
-			extraInfo = ""
-		}
-	}
-
-    return (
-      <Typography
-        onMouseOver={() => {
-          setHover(true);
-        }}
-      >
-        {props.level !== 1 ? (
-          <Divider
-            style={{
-              width: "90%",
-              marginTop: 40,
-              backgroundColor: theme.palette.inputColor,
-            }}
-          />
-        ) : null}
-        {element}
-        {/*hover ? <LinkIcon onMouseOver={() => {setHover(true)}} style={{cursor: "pointer", display: "inline", }} onClick={() => {
-					window.location.href += "#hello"
-					console.log(window.location)
-					//window.history.pushState('page2', 'Title', '/page2.php');
-					//window.history.replaceState('page2', 'Title', '/page2.php');
-				}} /> 
-				: ""
-				*/}
-        {extraInfo}
-      </Typography>
-    );
-  };
-  //React.createElement("p", {style: {color: "red", backgroundColor: "blue"}}, this.props.paragraph)
-
-  //function unicodeToChar(text) {
-  //	return text.replace(/\\u[\dA-F]{4}/gi,
-  //   		function (match) {
-  //        	return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
-  //        }
-  //	);
-  //}
 
 
   const CustomButton = (props) => {

frontend/src/views/Workflows.jsx

@@ -484,7 +484,6 @@ export const validateJson = (showResult) => {
 	// This is where we start recursing
 	if (jsonvalid) {
 		// Check fields if they can be parsed too 
-   	//console.log("In this window for the data. Should look for list in result! Does recursion.") 
 		try {
 			for (const [key, value] of Object.entries(result)) {
 				if (typeof value === "string" && (value.startsWith("{") || value.startsWith("["))) {
@@ -1649,6 +1648,7 @@ const Workflows = (props) => {
     addFilter(e.target.innerHTML);
   };
 
+  const hasWorkflows = workflows === undefined || workflows === null || workflows.length === 0
   const NewWorkflowPaper = () => {
     const [hover, setHover] = React.useState(false);
 
@@ -1659,17 +1659,17 @@ const Workflows = (props) => {
       minWidth: paperAppStyle.width,
       color: innerColor,
       padding: paperAppStyle.padding,
-      borderRadius: paperAppStyle.borderRadius,
       display: "flex",
       boxSizing: "border-box",
       position: "relative",
-      border: `2px solid ${innerColor}`,
+      border: hasWorkflows ? `2px solid #f85a3e` : `2px solid ${innerColor}`,
       cursor: "pointer",
       backgroundColor: hover ? "rgba(39,41,45,0.5)" : "rgba(39,41,45,1)",
+      borderRadius: paperAppStyle.borderRadius,
     };
 
     return (
-      <Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
+      <Grid item xs={isMobile ? 12 : hasWorkflows ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
         <Paper
           square
           style={setupPaperStyle}
@@ -1685,8 +1685,11 @@ const Workflows = (props) => {
           }}
         >
           <Tooltip title={`New Workflow`} placement="bottom">
-            <span style={{ textAlign: "center", minWidth: 300, margin: "auto" }}>
+            <span style={{ textAlign: "center", minWidth: 240, margin: "auto" }}>
               <AddCircleIcon style={{ height: 65, width: 65 }} />
+			  <Typography variant="h6" style={{ color: innerColor, margin: "auto" }}>
+				New Workflow
+			  </Typography>
             </span>
           </Tooltip>
         </Paper>
@@ -3328,8 +3331,8 @@ const Workflows = (props) => {
             </div>
           </div>
   		
-					<div style={{width: "100%", minHeight: isMobile ? 0 : 51, maxHeight: isMobile ? 0 : 51, marginTop: 10, }}>
+					<div style={{width: "100%", minHeight: isMobile ? 0 : hasWorkflows ? 0 : 51, maxHeight: isMobile ? 0 : 51, marginTop: 10, }}>
-						{!isMobile && usecases !== null && usecases !== undefined && usecases.length > 0 ? 
+						{!isMobile && !hasWorkflows && usecases !== null && usecases !== undefined && usecases.length > 0 ? 
 							<div style={{ display: "flex", }}>
 								{usecases.map((usecase, index) => {
 									//console.log(usecase)