Synced 2.0 updates

frontend/src/components/AppModal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
 import {
@@ -23,14 +23,14 @@ import ForkRightIcon from '@mui/icons-material/ForkRight';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import LaunchIcon from '@mui/icons-material/Launch';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { CloudDownloadOutlined } from '@mui/icons-material';
+import { CloudDownloadOutlined, Delete } from '@mui/icons-material';
 import { findSpecificApp } from '../components/AppFramework.jsx';
 import theme from "../theme.jsx";
 import YAML from 'yaml';
 import { toast } from 'react-toastify';
 import { Link } from 'react-router-dom';
 
-const AppModal = ({ open, onClose, app, globalUrl }) => {
+const AppModal = ({ open, onClose, app, globalUrl, getApps }) => {
 
   const [frameworkData, setFrameworkData] = useState({})
   const [userdata, setUserdata] = useState({})
@@ -41,6 +41,8 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
   const [latestUsecase, setLatestUsecase] = useState([])
   const [foundAppUsecase, setFoundAppUsecase] = useState({})
   const [usecaseLoading, setUsecaseLoading] = useState(false)
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+  const [sharingConfiguration, setSharingConfiguration] = React.useState("you");
   const navigate = useNavigate();
   const parseUsecase = (subcase) => {
     const srcdata = findSpecificApp(frameworkData, subcase.type)
@@ -294,8 +296,101 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
     setUsecaseLoading(true)
     getAvailableWorkflows()
     getFramework()
+    handleUpdateSharingConfiguration()
   }, [app])
 
+  const handleUpdateSharingConfiguration = useCallback(() => {
+    if (app?.sharing === true) {
+      setSharingConfiguration("public")
+    }else {
+      setSharingConfiguration("you")
+    }
+
+  }, [app?.id])
+
+  const deleteApp = (appId) => {
+      toast("Attempting to delete app");
+      fetch(globalUrl + "/api/v1/apps/" + appId, {
+        method: "DELETE",
+        headers: {
+          Accept: "application/json",
+        },
+        credentials: "include",
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            toast("Successfully deleted app");
+            setTimeout(() => {
+              //delete apps from local storage
+              localStorage.removeItem("apps");
+              getApps();
+            }, 1000);
+          } else {
+            toast("Failed deleting app. Does it still exist?");
+          }
+        })
+        .catch((error) => {
+          toast(error.toString());
+        });
+    };
+
+  const deleteModal = deleteModalOpen ? (
+      <Dialog
+        open={deleteModalOpen}
+        onClose={() => {
+          setDeleteModalOpen(false);
+        }}
+        PaperProps={{
+          sx: {
+            borderRadius: theme?.palette?.DialogStyle?.borderRadius,
+            border: theme?.palette?.DialogStyle?.border,
+            fontFamily: theme?.typography?.fontFamily,
+            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            zIndex: 1000,
+            minWidth: "500px",
+            overflow: "hidden",
+            '& .MuiDialogContent-root': {
+              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            },
+            '& .MuiDialogTitle-root': {
+              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+            },
+          }
+        }}
+      >
+        <DialogTitle>
+          <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
+            Are you sure? <div />
+            Some workflows may stop working.
+          </div>
+        </DialogTitle>
+        <DialogContent
+          style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
+        >
+          <Button
+            style={{}}
+            onClick={() => {
+              deleteApp(app.id);
+              setDeleteModalOpen(false);
+            }}
+            color="primary"
+          >
+            Yes
+          </Button>
+          <Button
+            variant="outlined"
+            style={{marginLeft: 5}}
+            onClick={() => {
+              setDeleteModalOpen(false);
+            }}
+            color="primary"
+          >
+            No
+          </Button>
+        </DialogContent>
+      </Dialog>
+    ) : null;
+
 
   const downloadApp = (inputdata) => {
     const id = inputdata.id;
@@ -425,6 +520,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
         }
       }}
     >
+      {deleteModal}
       <DialogTitle
         sx={{
           display: 'flex',
@@ -457,7 +553,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
           <div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: theme?.typography?.fontFamily }}>
             <img
               alt={app?.name}
-              src={app?.large_image || app?.image_url}
+              src={app?.large_image || app?.image_url || "/images/no_image.png"}
               style={{
                 borderRadius: 4,
                 maxWidth: 100,
@@ -536,6 +632,35 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
                 </Button>
               </Tooltip>
             ) : null}
+            {(userdata?.id === app?.owner)? (
+              <Tooltip title={"Delete app (confirm box will show)"}> 
+              <Button
+                variant="outlined"
+                component="label"
+                color="primary"
+                sx={{
+                  bgcolor: '#494949',
+                  '&:hover': { bgcolor: '#494949', border: 'none' },
+                  textTransform: 'none',
+                  borderRadius: 1,
+                  minWidth: '45px',
+                  width: '45px',
+                  height: '40px',
+                  padding: 2,
+                  color: "#fff",
+                  fontFamily: theme?.typography?.fontFamily,
+                  border: 'none'
+                }}
+                onClick={() => {
+                  setDeleteModalOpen(true);
+                }}
+                disabled={(sharingConfiguration === undefined || sharingConfiguration === null || sharingConfiguration === "public") }
+              >
+                <Delete />
+              </Button>
+            </Tooltip>
+            ): null}
+            
             <Button
               variant="contained"
               sx={{

frontend/src/components/Appsearch.jsx

@@ -50,6 +50,9 @@ const Appsearch = props => {
 		return (
 		  <form noValidate action="" role="search">
 				<TextField 
+					autoFocus
+					autoComplete="off"
+					autocomplete="off"
 					fullWidth
 					style={{backgroundColor: "#2F2F2F", borderRadius: borderRadius, width: "100%",}} 
 					InputProps={{

frontend/src/components/CacheView.jsx

@@ -390,6 +390,10 @@ const CacheView = memo((props) => {
                     variant="contained"
                     style={{ borderRadius: "2px", backgroundColor: "#ff8544",color: "#1a1a1a", textTransform:"none" }}
                     onClick={() => {
+                        if (value === "") {
+                            toast("Key or Value can not be empty");
+                            return;
+                        }
                         {editCache ? editOrgCache(orgId) : addOrgCache(orgId)}
 						setKey("")
 						setValue("")
@@ -503,7 +507,7 @@ const CacheView = memo((props) => {
 	>
 		<DialogTitle>
 			<div style={{ color: "rgba(255,255,255,0.9)" }}>
-				Select sub-org to distribute files
+				Select sub-org to distribute Datastore key
 			</div>
 		</DialogTitle>
 		<DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
@@ -714,7 +718,9 @@ const CacheView = memo((props) => {
                                         display: "table-cell",
                                         overflow: "hidden",
                                         verticalAlign: "middle",
-                                        padding: "8px 8px 8px 15px"
+                                        padding: "8px 8px 8px 15px",
+                                        maxWidth: 200,
+                                        overflowX: "auto",
                                     }}
                                     primary={data.key}
                                 />
@@ -872,6 +878,8 @@ const CacheView = memo((props) => {
                                         style={{display: "table-cell", textAlign: 'center', verticalAlign: 'middle', }}
                                         />
                                       :
+                                      <ListItemText
+                                        primary={
                                             <Tooltip
                                           title="Distributed to sub-organizations. This means the sub organizations can use this datastore key, but can not modify it."
                                           placement="top"
@@ -879,7 +887,7 @@ const CacheView = memo((props) => {
                                           <Checkbox
                                               disabled={ userdata?.active_org?.role !== "admin" || (selectedOrganization.creator_org !== undefined && selectedOrganization.creator_org !== null && selectedOrganization.creator_org !== "" )? true : false}
                                               checked={isDistributed}
-                                              style={{ }}
+                                              style={{ margin: "auto" }}
                                               color="secondary"
                                               onClick={() => {
 												setShowDistributionPopup(true)
@@ -893,6 +901,9 @@ const CacheView = memo((props) => {
                                           />
                                       </Tooltip>
                                         }
+                                        style={{display: "table-cell", textAlign: 'center', verticalAlign: 'middle', }}
+                                        />
+                                  }
                             </ListItem>
                         );
                     })}

frontend/src/components/ConfigureWorkflow.jsx

@@ -799,12 +799,16 @@ const ConfigureWorkflow = (props) => {
 		>
 			<div 
 				style={{
-					border: filled ? `1px solid ${theme.palette.green}` : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, width: "100%", padding: 12, cursor: "pointer", 
+					border: filled ? `1px solid ${theme.palette.green}` : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, width: "100%", padding: 12, cursor: filled ? "default" : "pointer", 
 				}}
 				id="app-config"
 			>
 				<div style={{display: "flex", }}
 					onClick={() => {
+						if (filled) {
+							return
+						}
+
 						setOpened(!opened);
 
 						// Scroll to it
@@ -865,6 +869,7 @@ const ConfigureWorkflow = (props) => {
 									isLoggedIn={true}
 									getAppAuthentication={undefined}
 
+									workflow={workflow}
 									setFinalized={setFinalized}
 								/>
 							</div>
@@ -1377,7 +1382,7 @@ const ConfigureWorkflow = (props) => {
 
   return (
     <div>
-		<div style={{margin: setConfigureWorkflowModalOpen !== undefined ? "0px 50px 0px 50px" : "35px 0px 0px 0px", maxHeight: 475, }}>
+		<div style={{margin: setConfigureWorkflowModalOpen !== undefined ? "0px 50px 0px 50px" : "25px 0px 0px 0px", maxHeight: 475, }}>
 			
 
 	  	{setConfigureWorkflowModalOpen !== undefined ? 
@@ -1387,7 +1392,7 @@ const ConfigureWorkflow = (props) => {
 			: null
 		}
 
-	    <div style={{marginTop: 10, }} />
+	    <div style={{marginTop: setConfigureWorkflowModalOpen !== undefined ? 10 : 0, }} />
 
 	  	{/*
 	    <WorkflowValidationTimeline 
@@ -1404,7 +1409,7 @@ const ConfigureWorkflow = (props) => {
       	{requiredActions.length > 0 ? (
       	  <span>
 			<Typography variant="body2" color="textSecondary">
-			  Please configure the following steps to help us complete your workflow. This can also be done later.
+			  To complete the workflow setup, please configure the following steps. 
 			</Typography>
 
 			{setConfigureWorkflowModalOpen !== undefined ?
@@ -1434,6 +1439,13 @@ const ConfigureWorkflow = (props) => {
 				)
       	      })}
       	    </List>
+
+			{/*
+			<Typography variant="body2" color="textSecondary">
+				Once done, you may continue to the workflow.
+			</Typography>
+			*/}
+
       	  </span>
       	) : null}
 

frontend/src/components/EditWorkflow.jsx

@@ -71,7 +71,8 @@ const EditWorkflow = (props) => {
 	const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
 
 	const [submitLoading, setSubmitLoading] = React.useState(false);
-	const [showMoreClicked, setShowMoreClicked] = React.useState(expanded === true ? true : false);
+	//const [showMoreClicked, setShowMoreClicked] = React.useState(expanded === true ? true : false);
+	const [showMoreClicked, setShowMoreClicked] = React.useState(true);
 
 	const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
 
@@ -244,7 +245,6 @@ const EditWorkflow = (props) => {
 							Workflows can be built from scratch, or from templates. <a href="/usecases2" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
 						</Typography>
 
-						{/*
 						<div style={{marginTop: 10, marginBottom: 10, marginRight: 50, }}>
 							<WorkflowValidationTimeline 
 							
@@ -252,7 +252,6 @@ const EditWorkflow = (props) => {
 							  workflow={workflow}
 							/>
 						</div>
-				*/}
 
 						{showUpload === true ?
 							<div style={{ float: "right" }}>
@@ -290,7 +289,7 @@ const EditWorkflow = (props) => {
 					bottom: 0, 
 					zIndex: 1002, 
 					backgroundColor: theme.palette.backgroundColor,
-					height: 50, 
+					height: 75, 
 					paddingTop: 20, 
 					paddingLeft: 75, 
 				}}>
@@ -327,12 +326,17 @@ const EditWorkflow = (props) => {
 
 							innerWorkflow.name = name
 							innerWorkflow.description = description
+
 							if (newWorkflowTags.length > 0) {
 								innerWorkflow.tags = newWorkflowTags
+							} else {
+								innerWorkflow.tags = []
 							}
 
 							if (selectedUsecases.length > 0) {
 								innerWorkflow.usecase_ids = selectedUsecases
+							} else {
+								innerWorkflow.usecase_ids = []
 							}
 
 							if (dueDate > 0) {
@@ -361,7 +365,6 @@ const EditWorkflow = (props) => {
 								setWorkflow({})
 							} else {
 								setWorkflow(innerWorkflow)
-								console.log("editing workflow: ", innerWorkflow)
 							}
 
 							setSubmitLoading(true)
@@ -505,7 +508,7 @@ const EditWorkflow = (props) => {
 											color: "white",
 										},
 									}}
-									multiLine
+									multiline
 									rows={3}
 									color="primary"
 									defaultValue={innerWorkflow.description}
@@ -537,81 +540,10 @@ const EditWorkflow = (props) => {
 
 										</RadioGroup>
 									</FormControl>
-									<LocalizationProvider dateAdapter={AdapterDayjs}>
-										<DatePicker
-											sx={{
-												marginTop: 3,
-												marginLeft: 3,
-											}}
-											value={dueDate}
-											label="Due Date"
-											format="YYYY-MM-DD"
-											onChange={(newValue) => {
-												setDueDate(newValue)
-											}}
-										/>
-									</LocalizationProvider>
 								</div>
 								<div />
 
-								<FormControl style={{ marginTop: 15, }}>
-									<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
-									<RadioGroup
-										row
-										aria-labelledby="demo-row-radio-buttons-group-label"
-										name="row-radio-buttons-group"
-										defaultValue={innerWorkflow.workflow_type}
-										onChange={(e) => {
-											console.log("Data: ", e.target.value)
 								
-											innerWorkflow.workflow_type = e.target.value
-											setInnerWorkflow(innerWorkflow)
-										}}
-									>
-										<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
-										<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
-										<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
-
-									</RadioGroup>
-								</FormControl>
-
-
-								<TextField
-									onBlur={(event) => {
-										innerWorkflow.blogpost = event.target.value
-										setInnerWorkflow(innerWorkflow)
-									}}
-									InputProps={{
-										style: {
-											color: "white",
-										},
-									}}
-									color="primary"
-									defaultValue={innerWorkflow.blogpost}
-									placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
-									rows="1"
-									label="blogpost"
-									margin="dense"
-									fullWidth
-								/>
-								<TextField
-									onBlur={(event) => {
-										innerWorkflow.video = event.target.value
-										setInnerWorkflow(innerWorkflow)
-									}}
-									InputProps={{
-										style: {
-											color: "white",
-										},
-									}}
-									color="primary"
-									defaultValue={innerWorkflow.video}
-									placeholder="A youtube or loom link to the video"
-									rows="1"
-									label="Video"
-									margin="dense"
-									fullWidth
-								/>
 
 								<TextField
 									onBlur={(event) => {
@@ -1166,6 +1098,87 @@ const EditWorkflow = (props) => {
 							</div>
 						</> : null*/}
 
+						<Typography variant="h4" style={{ marginTop: 100, }}>
+							Publishing
+						</Typography>
+						<Typography variant="body1" color="textSecondary" style={{ marginTop: 10, }}>
+							Publishing is related to making the workflow itself public. When publishing a workflow, all the details (except sensitive info) become available to everyone. The details below will help a user understand this better. When a workflow is published, you keep the original, and a copy enters the workflow search, and is associated with your <a href="/creators" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">creator account</a>, if you have one. You can always unpublish the workflow after. To publish it, click the three dots next to the workflow.
+						</Typography>
+
+						<LocalizationProvider style={{marginLeft: 0, }} dateAdapter={AdapterDayjs}>
+							<DatePicker
+								sx={{
+									marginTop: 3,
+									marginLeft: 3,
+								}}
+								value={dueDate}
+								label="Due Date"
+								format="YYYY-MM-DD"
+								onChange={(newValue) => {
+									setDueDate(newValue)
+								}}
+							/>
+						</LocalizationProvider>
+
+						<FormControl style={{ marginTop: 15, }}>
+							<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
+							<RadioGroup
+								row
+								aria-labelledby="demo-row-radio-buttons-group-label"
+								name="row-radio-buttons-group"
+								defaultValue={innerWorkflow.workflow_type}
+								onChange={(e) => {
+									console.log("Data: ", e.target.value)
+
+									innerWorkflow.workflow_type = e.target.value
+									setInnerWorkflow(innerWorkflow)
+								}}
+							>
+								<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
+								<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
+								<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
+
+							</RadioGroup>
+						</FormControl>
+
+
+						<TextField
+							onBlur={(event) => {
+								innerWorkflow.blogpost = event.target.value
+								setInnerWorkflow(innerWorkflow)
+							}}
+							InputProps={{
+								style: {
+									color: "white",
+								},
+							}}
+							color="primary"
+							defaultValue={innerWorkflow.blogpost}
+							placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
+							rows="1"
+							label="blogpost"
+							margin="dense"
+							fullWidth
+						/>
+						<TextField
+							onBlur={(event) => {
+								innerWorkflow.video = event.target.value
+								setInnerWorkflow(innerWorkflow)
+							}}
+							InputProps={{
+								style: {
+									color: "white",
+								},
+							}}
+							color="primary"
+							defaultValue={innerWorkflow.video}
+							placeholder="A youtube or loom link to the video"
+							rows="1"
+							label="Video"
+							margin="dense"
+							fullWidth
+						/>
+
 						<Tooltip color="primary" title={"Add more details"} placement="top">
 							<Button
 								style={{ margin: "auto", marginTop: 50, marginBottom: 10, textAlign: "center", textTransform: "none", }}

frontend/src/components/FixWorkflowValidationErrors.jsx

@@ -644,6 +644,7 @@ const FixWorkflowValidationErrors = (props) => {
 	console.log("Workflow validation: ", workflow.validation)
 	return (
 		<div>
+			{/*
 			{workflow.errors !== undefined && workflow.errors !== null ?
 				<div>
 					General errors: {workflow.errors.length}
@@ -656,11 +657,8 @@ const FixWorkflowValidationErrors = (props) => {
 					})}
 				</div>
 			: null}
-
 			<Divider style={{marginTop: 15, marginBottom: 15, }}/>
-
+			workflow.validation.errors !== undefined && workflow.validation.errors !== null ?
-
-			{workflow.validation.errors !== undefined && workflow.validation.errors !== null ?
 				<div>
 					Validation errors: {workflow.validation.errors.length}
 					{workflow.validation.errors.map((error, index) => {
@@ -675,10 +673,12 @@ const FixWorkflowValidationErrors = (props) => {
 						)
 					})}
 				</div>
-			: null}
+			: null*/}
 
+			{/*
 			<Divider style={{marginTop: 15, marginBottom: 15, }} />
 			Apps loaded: {apps.length}
+			*/}
 
 		</div>
 	)

frontend/src/components/LeftSideBar.jsx

@@ -7,7 +7,9 @@ import {
   Add as AddIcon,
   BorderColor,
   Close as CloseIcon,
-  ConstructionOutlined,
+  ConstructionOutlined as ConstructionOutlinedIcon,
+  Toc as TocIcon,
+  Settings as SettingsIcon 
 } from "@mui/icons-material";
 import SearchBox from "./SearchData.jsx";
 import {
@@ -29,9 +31,6 @@ import {
   Collapse,
 } from "@mui/material";
 import theme from "../theme.jsx";
-import { 
-	Settings as SettingsIcon 
-} from "@mui/icons-material";
 import RecentWorkflow from "../components/RecentWorkflow.jsx";
 
 import { useNavigate } from "react-router";
@@ -143,8 +142,6 @@ useEffect(() => {
         >
           <Box
           sx={{
-            maxHeight: 250,
-            overflowY: "auto",
             scrollbarWidth: "thin",
             scrollbarColor: "#494949 transparent",
             "& .MuiAutocomplete-listbox": {
@@ -238,7 +235,7 @@ useEffect(() => {
       setOpenautomateTab(true);
       setOpenSecurityTab(false);
       setCurrentOpenTab("workflows");
-        } else if ((lastTabOpenByUser === "apps" && currentPath.includes("/search")) || currentPath.includes("/search")) {
+        } else if ((lastTabOpenByUser === "apps" && currentPath.includes("/apps")) || currentPath.includes("/apps")) {
       setOpenautomateTab(true);
       setOpenSecurityTab(false);
       setCurrentOpenTab("apps");
@@ -500,16 +497,6 @@ useEffect(() => {
 			}) 
 		  </MenuItem>
 		</Link>
-        <Link to="/workflows" style={hrefStyle}>
-          <MenuItem
-            onClick={(event) => {
-              handleClose();
-            }}
-            style={{fontSize: 18}}
-          >
-            <LightbulbIcon style={{ marginRight: 5 }} /> Use Cases
-          </MenuItem>
-        </Link>
 
         <Divider style={{ marginTop: 10, marginBottom: 10, }} />
 
@@ -537,7 +524,7 @@ useEffect(() => {
         <Divider style={{ marginBottom: 10, }} />
 
         <Typography color="textSecondary" align="center" style={{ marginTop: 5, marginBottom: 5, fontSize: 18 }}>
-          Version: 2.0.0-rc3
+          Version: 2.0.0-rc4
         </Typography>
       </Menu>
     </span>
@@ -704,16 +691,48 @@ useEffect(() => {
 
   const CheckOrgStates = useCallback(() => {
     setOrgOptions(
-      userdata?.orgs?.map((org) => ({
+      userdata?.orgs?.map((org) => {
+        let skipOrg = false;
+  
+        if (
+          org.creator_org !== undefined &&
+          org.creator_org !== null &&
+          org.creator_org.length > 0
+        ) {
+          // Finds the parent org
+          for (let key in userdata.child_orgs) {
+            if (userdata.child_orgs[key].id === org.creator_org) {
+              skipOrg = true;
+              break;
+            }
+          }
+  
+          if (skipOrg) {
+            return null; // Skip this org
+          }
+        }
+  
+        return {
           id: org.id,
           name: org.name,
           image: org.image,
           region_url: getRegionTag(org.region_url),
-      })) || []
+          margin_left:
+            org.creator_org !== undefined &&
+            org.creator_org !== null &&
+            org.creator_org.length > 0
+              ? org.id === userdata.active_org.id
+                ? 0
+                : 20
+              : 0,
+        };
+      }) || []
     );
+  
     setActiveOrgName(userdata?.active_org?.name || "Select Organization");
     setSelectedOrg(userdata?.active_org?.name || "Select Organization");
-  },[orgOptions, activeOrgName, selectedOrg]);
+  }, [userdata]);
+  
 
   useEffect(() => {
     if (typeof userdata?.id === "string" && userdata?.id?.length > 0) {
@@ -870,7 +889,7 @@ useEffect(() => {
           </Button>
         </Box>
       </Box>
-      <Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease',paddingTop: 0.5 }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true);}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false);}}>
+      <Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease',paddingTop: 0.5 }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true)}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false)}}>
       <Box
             sx={{
               display: "flex",
@@ -1144,7 +1163,7 @@ useEffect(() => {
                 color: currentOpenTab === "apps" && currentPath.includes("/apps") ? "#FFFFFF" : "#C8C8C8",
                 justifyContent: "flex-start",
                 textTransform: "none",
-                backgroundColor: currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps2") ? "#2f2f2f": "transparent",
+                backgroundColor: currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps") ? "#2f2f2f": "transparent",
                 marginLeft: 16,
                 fontSize: 18
               }}
@@ -1152,7 +1171,7 @@ useEffect(() => {
                 event.currentTarget.style.backgroundColor = "#2f2f2f";
               }}
               onMouseOut={(event)=>{
-                event.currentTarget.style.backgroundColor = currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/search") ? "#2f2f2f": "transparent";
+                event.currentTarget.style.backgroundColor = currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps") ? "#2f2f2f": "transparent";
               }}
               disableRipple={expandLeftNav ? false : true}
             >
@@ -1205,7 +1224,7 @@ useEffect(() => {
                   : "transparent";
               }}
             >
-              <ShieldOutlinedIcon
+              <TocIcon 
                 style={{
                   width: 18,
                   height: 18,
@@ -1223,7 +1242,7 @@ useEffect(() => {
                       : "#C8C8C8"
                 }}
               >
-               	Discover	
+	  			Content
               </span>
             </Button>
           </Link>
@@ -1262,7 +1281,7 @@ useEffect(() => {
           <Collapse in={openSecurityTab} timeout="auto" unmountOnExit>
               <Box
                 style={{
-                  maxHeight: openSecurityTab && expandLeftNav ? 100 : 0,
+                  maxHeight: openSecurityTab && expandLeftNav ? 135 : 0,
                   overflow: "hidden",
                   transition: "max-height 0.3s ease, opacity 0.3s ease",
                   display: "flex",
@@ -1276,19 +1295,18 @@ useEffect(() => {
                     to={"/forms"}
                     style={{
                       ...hrefStyle,
-                      pointerEvents: userdata?.support ? "auto" : "none",
+                      pointerEvents: "auto", 
                     }}
                   >
                     <Button
                       onClick={(event) => {
-                        if (!userdata?.support) return;
                         setCurrentOpenTab("detection");
                         localStorage.setItem("lastTabOpenByUser", "detection");
                       }}
                       sx={{
                         width: "100%",
                         height: 35,
-                        color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
+                        color: "#C8C8C8", 
                         justifyContent: "flex-start",
                         textTransform: "none",
                         backgroundColor:
@@ -1296,11 +1314,10 @@ useEffect(() => {
                             ? "#2f2f2f"
                             : "transparent",
                         "&:hover": {
-                          backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
+                          backgroundColor: "#2f2f2f", 
                         },
-                        cursor: userdata?.support ? "pointer" : "not-allowed",
+                        cursor: "pointer", 
                       }}
-                      disabled={userdata?.support === false}
                     >
                       <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
                         •
@@ -1312,11 +1329,9 @@ useEffect(() => {
                           transition: "opacity 0.3s ease",
                           fontSize: 18,
                           color:
-                            userdata?.support && currentOpenTab === "detection" && currentPath.includes("/detection")
+                            currentOpenTab === "detection" && currentPath.includes("/detection")
                               ? "#F1F1F1"
-                              : userdata?.support
+                              : "#C8C8C8"
-                              ? "#C8C8C8"
-                              : "#6F6F6F",
                         }}
                       >
                        	Forms	
@@ -1329,19 +1344,18 @@ useEffect(() => {
                     to={"/admin?tab=datastore"}
                     style={{
                       ...hrefStyle,
-                      pointerEvents: userdata?.support ? "auto" : "none",
+                      pointerEvents: "auto", 
                     }}
                   >
                     <Button
                       onClick={(event) => {
-                        if (!userdata?.support) return;
                         setCurrentOpenTab("response");
                         localStorage.setItem("lastTabOpenByUser", "response");
                       }}
                       sx={{
                         width: "100%",
                         height: 35,
-                        color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
+                        color: "#C8C8C8", 
                         justifyContent: "flex-start",
                         textTransform: "none",
                         backgroundColor:
@@ -1349,9 +1363,9 @@ useEffect(() => {
                             ? "#2f2f2f"
                             : "transparent",
                         "&:hover": {
-                          backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
+                          backgroundColor: "#2f2f2f", 
                         },
-                        cursor: userdata?.support ? "pointer" : "not-allowed",
+                        cursor: "pointer", 
                       }}
                     >
                       <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
@@ -1364,11 +1378,9 @@ useEffect(() => {
                           transition: "opacity 0.3s ease",
                           fontSize: 18,
                           color:
-                            userdata?.support && currentOpenTab === "response" && currentPath.includes("/response")
+                            currentOpenTab === "response" && currentPath.includes("/response")
                               ? "#F1F1F1"
-                              : userdata?.support
+                              : "#C8C8C8"
-                              ? "#C8C8C8"
-                              : "#6F6F6F",
                         }}
                       >
                        	Datastore	
@@ -1376,24 +1388,24 @@ useEffect(() => {
                     </Button>
                   </Link>
                 </span>
+
                 <span style={{ display: "inline-block", width: "100%" }}>
                   <Link
                     to={"/admin?tab=files"}
                     style={{
                       ...hrefStyle,
-                      pointerEvents: userdata?.support ? "auto" : "none",
+                      pointerEvents: "auto", 
                     }}
                   >
                     <Button
                       onClick={(event) => {
-                        if (!userdata?.support) return;
                         setCurrentOpenTab("response");
                         localStorage.setItem("lastTabOpenByUser", "response");
                       }}
                       sx={{
                         width: "100%",
                         height: 35,
-                        color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
+                        color: "#C8C8C8", 
                         justifyContent: "flex-start",
                         textTransform: "none",
                         backgroundColor:
@@ -1401,9 +1413,9 @@ useEffect(() => {
                             ? "#2f2f2f"
                             : "transparent",
                         "&:hover": {
-                          backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
+                          backgroundColor: "#2f2f2f", 
                         },
-                        cursor: userdata?.support ? "pointer" : "not-allowed",
+                        cursor: "pointer", 
                       }}
                     >
                       <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
@@ -1416,11 +1428,9 @@ useEffect(() => {
                           transition: "opacity 0.3s ease",
                           fontSize: 18,
                           color:
-                            userdata?.support && currentOpenTab === "response" && currentPath.includes("/response")
+                            currentOpenTab === "response" && currentPath.includes("/response")
                               ? "#F1F1F1"
-                              : userdata?.support
+                              : "#C8C8C8"
-                              ? "#C8C8C8"
-                              : "#6F6F6F",
                         }}
                       >
                        	Files	
@@ -1428,8 +1438,59 @@ useEffect(() => {
                     </Button>
                   </Link>
                 </span>
+
+                <span style={{ display: "inline-block", width: "100%" }}>
+                  <Link
+                    to={"/admin?tab=locations"}
+                    style={{
+                      ...hrefStyle,
+                      pointerEvents: "auto", 
+                    }}
+                  >
+                    <Button
+                      onClick={(event) => {
+                        setCurrentOpenTab("response");
+                        localStorage.setItem("lastTabOpenByUser", "response");
+                      }}
+                      sx={{
+                        width: "100%",
+                        height: 35,
+                        color: "#C8C8C8", 
+                        justifyContent: "flex-start",
+                        textTransform: "none",
+                        backgroundColor:
+                          currentOpenTab === "response" && currentPath.includes("/response")
+                            ? "#2f2f2f"
+                            : "transparent",
+                        "&:hover": {
+                          backgroundColor: "#2f2f2f", 
+                        },
+                        cursor: "pointer", 
+                      }}
+                    >
+                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
+                        •
+                      </span>
+                      <span
+                        style={{
+                          display: expandLeftNav ? "inline" : "none",
+                          opacity: expandLeftNav ? 1 : 0,
+                          transition: "opacity 0.3s ease",
+                          fontSize: 18,
+                          color:
+                            currentOpenTab === "response" && currentPath.includes("/response")
+                              ? "#F1F1F1"
+                              : "#C8C8C8"
+                        }}
+                      >
+	  					Shuffle Agent
+                      </span>
+                    </Button>
+                  </Link>
+                </span>
               </Box>
             </Collapse>
+
 	  	  <Link to="/docs" style={hrefStyle}>
           <Button
             onClick={(event) => {
@@ -1464,6 +1525,38 @@ useEffect(() => {
             </span>
           </Button>
 	  	  </Link>
+
+
+	  	  <Link to="/admin?admin_tab=billingstats" style={hrefStyle}>
+          <Button
+            onClick={(event) => {
+              setCurrentOpenTab("admin");
+              localStorage.setItem("lastTabOpenByUser", "admin");
+            }}
+            style={{
+              ...ButtonStyle,
+              marginTop: 8,
+              marginTop: 8,
+              backgroundColor: currentOpenTab === "docs" && currentPath.includes("/admin") ? "#2f2f2f": "transparent",
+            }}
+            onMouseOver={(event)=>{
+              event.currentTarget.style.backgroundColor = "#2f2f2f";
+            }}
+            onMouseOut={(event)=>{
+              event.currentTarget.style.backgroundColor = currentOpenTab === "docs" && currentPath.includes("/admin") ? "#2f2f2f": "transparent";
+            }}
+          >
+			<BusinessIcon style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0, color: "rgba(255,255,255,0.5)", }} />
+            <span
+              style={{
+                display: expandLeftNav ? "inline" : "none",
+                color: currentOpenTab === "admin" && currentPath.includes("/admin") ? "#F1F1F1" : "#C8C8C8",
+              }}
+            >
+	  		  Admin
+            </span>
+          </Button>
+	  	  </Link>
         </Box>
 
         {recentworkflows?.length > 0 ? 
@@ -1549,6 +1642,7 @@ useEffect(() => {
                   padding: option.id === "add_suborg" ? "0" : "12px 16px",
                   marginTop: index !== 0 ? 8 : 0,
                   borderRadius: 6,
+                  marginLeft: option.margin_left ? option.margin_left : 0,
                 }}
                 onMouseOver={(e) => {
                   e.currentTarget.style.backgroundColor = "#444444";
@@ -1618,12 +1712,15 @@ useEffect(() => {
               setAutocompleteValue(newInputValue);
             }}
             filterOptions={(options, params) => {
+              const normalize = (str) => str.toLowerCase().replace(/[\s-]+/g, "");
+              const input = normalize(params.inputValue);
+            
               return options.filter((option) =>
-                option.name
+                normalize(option.name).includes(input) || 
-                  .toLowerCase()
+                normalize(option.region_url).includes(input)
-                  .includes(params.inputValue.toLowerCase())
               );
             }}
+                        
             value={userOrgs}
             renderInput={(params) => (
               <Box

frontend/src/components/Oauth2Auth.jsx

@@ -431,7 +431,7 @@ const AuthenticationOauth2 = (props) => {
 
     const authentication_url = authenticationType.token_uri;
     const redirectUri = `${window.location.protocol}//${window.location.host}/set_authentication`;
-	const workflowId = workflow !== undefined ? workflow.id : "";
+	const workflowId = workflow !== undefined ? workflow.id : ""
     var state = `workflow_id%3D${workflowId}%26reference_action_id%3d${selectedAction.app_id}%26app_name%3d${selectedAction.app_name}%26app_id%3d${selectedAction.app_id}%26app_version%3d${selectedAction.app_version}%26authentication_url%3d${authentication_url}%26scope%3d${resources}%26client_id%3d${client_id}%26client_secret%3d${client_secret}`;
 
 

frontend/src/components/ParsedAction.jsx

@@ -200,6 +200,7 @@ const ParsedAction = (props) => {
 	const [menuPosition, setMenuPosition] = useState(null);
 	const [uiBox, setUiBox] = useState(null);
 	const isIntegration = selectedAction.app_id === "integration"
+	const [distributeAuthToSuborgs, setDistributeAuthToSuborgs] = useState(selectedAction?.selectedAuthentication?.suborg_distributed || false)
 
 	useEffect(() => {
 		if (setLastSaved !== undefined) {
@@ -420,7 +421,7 @@ const ParsedAction = (props) => {
 					);
 					if (foundAction !== null && foundAction !== undefined) {
 						var foundparams = [];
-            for (let [paramkey,paramkeyval] in Object.entries(foundAction.parameters)) {
+						for (let [paramkey, paramkeyval] in Object.entries(foundAction.parameters)) {
 							const param = foundAction.parameters[paramkey];
 
 							const foundParam = selectedAction.parameters.find(
@@ -454,7 +455,50 @@ const ParsedAction = (props) => {
 			});
 	};
 
+	const changeDistribution = (data) => {
+		editAuthenticationConfig(data.id, "suborg_distribute")
+	}
 
+	const editAuthenticationConfig = (id, parentAction) => {
+		const data = {
+			id: id,
+			action: parentAction !== undefined && parentAction !== null ? parentAction : "assign_everywhere",
+		}
+
+		const url = globalUrl + "/api/v1/apps/authentication/" + id + "/config";
+
+		fetch(url, {
+			mode: "cors",
+			method: "POST",
+			body: JSON.stringify(data),
+			credentials: "include",
+			crossDomain: true,
+			withCredentials: true,
+			headers: {
+				"Content-Type": "application/json; charset=utf-8",
+			},
+		})
+			.then((response) =>
+				response.json().then((responseJson) => {
+					if (responseJson["success"] === false) {
+						toast("Failed overwriting appauth");
+					} else {
+						if (distributeAuthToSuborgs) {
+							toast.success("Successfully updated auth");
+						} else {
+							toast.success("Successfully distributed auth to suborgs");
+						}
+						setTimeout(() => {
+							getAppAuthentication();
+							setDistributeAuthToSuborgs(!distributeAuthToSuborgs)
+						}, 1000);
+					}
+				})
+			)
+			.catch((error) => {
+				toast("Err: " + error.toString());
+			});
+	};
 
 	const defineStartnode = () => {
 		if (cy === undefined) {
@@ -522,7 +566,7 @@ const ParsedAction = (props) => {
 			}
 		}
 
-		if(selectedAction.label !== prevActionName){
+		if (selectedAction.label !== prevActionName) {
 			setPrevActionName(selectedAction.label)
 		}
 
@@ -542,7 +586,7 @@ const ParsedAction = (props) => {
 		if (!selectedVariableParameter && workflow.workflow_variables?.length > 0) {
 			setSelectedVariableParameter(workflow.workflow_variables[0].name);
 		}
-	},[selectedAction,selectedApp,setNewSelectedAction,workflow, workflowExecutions, getParents])
+	}, [selectedAction, selectedApp, setNewSelectedAction, workflow, workflowExecutions, getParents])
 
 	useEffect(() => {
 		const newActionList = [];
@@ -697,17 +741,17 @@ const ParsedAction = (props) => {
 			let paramvalue = param.value === undefined || param.value === null ? "" : param.value;
 			let errorVars = [];
 
-			if(paramvalue.includes("$")){
+			if (paramvalue.includes("$")) {
 				let actions = workflow.actions?.map((action) => {
-					return "$"+action.label?.toLowerCase();
+					return "$" + action.label?.toLowerCase();
 				})
 
-				if(newActionList?.length > 0){
+				if (newActionList?.length > 0) {
 					let appParentActions = parentActionList?.map(action => "$" + action.name.toLowerCase());
 					let notPresentAction = actions?.filter((action) => !appParentActions?.includes(action))
 					notPresentAction?.forEach((action) => {
 						action = action.replace(" ", "_");
-						if(paramvalue.includes(action)){
+						if (paramvalue.includes(action)) {
 							errorVars.push(action);
 							// paramvalue = paramvalue.replace(action, "")
 							// paramvalue = paramvalue.replace(/^\s*[\r\n]/gm, "");
@@ -717,30 +761,30 @@ const ParsedAction = (props) => {
 			}
 
 			let message = "";
-			if(errorVars.length > 0){
+			if (errorVars.length > 0) {
-				if(errorVars.length === 1){
+				if (errorVars.length === 1) {
 					message = errorVars[0] + " is not accessible in this action.";
-				}else{
+				} else {
 					message = errorVars.join(", ") + " are not accessible in this action.";
 				}
 			}
 
-			if (param?.configuration) {
+			if (param?.configuration && param?.name !== "url") {
 				let regex = /(^|[^\\])\$/;
 				if (regex.test(paramvalue)) {
-					if(message.length > 0){
+					if (message.length > 0) {
 						message += "\nUse \"\\$\" instead of \"$\" if you want to escape $ (1)";
-					}else{
+					} else {
 						message = "Use \"\\$\" instead of \"$\" if you want to escape $ (2)";
 					}
 				}
 			}
-			return {...param, value: paramvalue, error: message}
+			return { ...param, value: paramvalue, error: message }
 		});
 
 		setSelectedActionParameters(newParameters);
 		setActionlist(newActionList);
-    }, [workflow.execution_variables, paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents,setNewSelectedAction]);
+	}, [workflow.execution_variables, paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents, setNewSelectedAction]);
 
 	useEffect(() => {
 		selectedNameChange(appActionName)
@@ -748,9 +792,9 @@ const ParsedAction = (props) => {
 		if (actionDelayChange !== undefined) {
 			actionDelayChange(delay)
 		}
-	  	},[appActionName,delay])
+	}, [appActionName, delay])
 
-		const handleParamChange = (event, count,data) => {
+	const handleParamChange = (event, count, data) => {
 		const newParams = [...selectedActionParameters];
 		newParams.map((param) => {
 			if (param.name === data.name) {
@@ -770,7 +814,7 @@ const ParsedAction = (props) => {
 
 		if (found !== null && found !== undefined) {
 			var new_occurences = []
-				for (let [key,keyval] in Object.entries(found)) {
+			for (let [key, keyval] in Object.entries(found)) {
 				if (found[key][0] !== "\\") {
 					new_occurences.push(found[key])
 				}
@@ -784,7 +828,7 @@ const ParsedAction = (props) => {
 				// When the found array is empty.
 				for (let i = 0; i < found.length; i++) {
 					const variableSplit = found[i].split(".#")
-						if ((variableSplit.length-1) > 1) {
+					if ((variableSplit.length - 1) > 1) {
 						//console.log("Larger than 1: ", variableSplit)
 						if (looperText.length === 0) {
 							looperText += "PS: Double looping (.#.#) may cause problems."
@@ -795,7 +839,7 @@ const ParsedAction = (props) => {
 					for (let j = 0; j < actionlist.length; j++) {
 						//console.log("ACTION: ", found[i], actionlist[j])
 						//console.log("ACTION :", found[i].split(".")[0].slice(1,).toLowerCase(), actionlist[j].autocomplete.toLowerCase())
-							if(found[i].split(".")[0].slice(1,).toLowerCase() == actionlist[j].autocomplete.toLowerCase()){
+						if (found[i].split(".")[0].slice(1,).toLowerCase() == actionlist[j].autocomplete.toLowerCase()) {
 							//console.log("Found: ", found[i])
 							// Validate path?
 
@@ -805,9 +849,9 @@ const ParsedAction = (props) => {
 
 					if (!foundSlice) {
 						if (!helperText.includes("Invalid variables")) {
-								helperText+= "Invalid variables: "
+							helperText += "Invalid variables: "
 						}
-							helperText+= found[i] + ", "
+						helperText += found[i] + ", "
 					}
 				}
 			} catch (e) {
@@ -929,7 +973,7 @@ const ParsedAction = (props) => {
 
 			var curstring = "";
 			var record = false;
-        for (let [key,keyval] in Object.entries(selectedActionParameters[count].value)) {
+			for (let [key, keyval] in Object.entries(selectedActionParameters[count].value)) {
 				const item = selectedActionParameters[count].value[key];
 				if (record) {
 					curstring += item;
@@ -1090,7 +1134,7 @@ const ParsedAction = (props) => {
 			}
 		}
 
-			if (event.target.value[event.target.value.length-1] === "$") {
+		if (event.target.value[event.target.value.length - 1] === "$") {
 			if (!showDropdown) {
 				setShowAutocomplete(false)
 				setShowDropdown(true)
@@ -1104,7 +1148,7 @@ const ParsedAction = (props) => {
 
 
 		// bad detection mechanism probably
-			if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) {
+		if (event.target.value[event.target.value.length - 1] === "." && actionlist.length > 0) {
 			console.log("GET THE LAST ARGUMENT FOR NODE!")
 			// THIS IS AN EXAMPLE OF SHOWING IT 
 			/*
@@ -1125,7 +1169,7 @@ const ParsedAction = (props) => {
 
 			var curstring = ""
 			var record = false
-				for (let [key,keyval] in Object.entries(selectedActionParameters[count].value)) {
+			for (let [key, keyval] in Object.entries(selectedActionParameters[count].value)) {
 				const item = selectedActionParameters[count].value[key]
 				if (record) {
 					curstring += item
@@ -1315,7 +1359,7 @@ const ParsedAction = (props) => {
 		if (selectedAction.name === "set_cache_value") {
 			var actionKey = ""
 			var actionValue = ""
-			for (let [key,keyval] in Object.entries(selectedActionParameters)) {
+			for (let [key, keyval] in Object.entries(selectedActionParameters)) {
 				const param = selectedActionParameters[key]
 				if (param.name === "key") {
 					actionKey = param.value
@@ -1331,7 +1375,7 @@ const ParsedAction = (props) => {
 			}
 
 			if (!actionKey.includes(".#") && actionValue.includes(".#")) {
-				return <span>When the key ({actionKey}) is static, but the value is a list ({actionValue}), it will overwrite the list. You may be looking for the <span onClick={() => {}} style={{cursor: "pointer", color: "#FF8544", }}>Check Cache Contains</span> action instead.</span>
+				return <span>When the key ({actionKey}) is static, but the value is a list ({actionValue}), it will overwrite the list. You may be looking for the <span onClick={() => { }} style={{ cursor: "pointer", color: "#FF8544", }}>Check Cache Contains</span> action instead.</span>
 			}
 		}
 
@@ -1349,8 +1393,8 @@ const ParsedAction = (props) => {
 			selectedAction.errors = ["Suggestion: " + suggestionText]
 		}
 
-		return <Paper style={{padding: 10, backgroundColor: theme.palette.surfaceColor, border: "1px solid red",}}>
+		return <Paper style={{ padding: 10, backgroundColor: theme.palette.surfaceColor, border: "1px solid red", }}>
-		  	<Typography variant="body" style={{color: "white", }}>
+			<Typography variant="body" style={{ color: "white", }}>
 				<b>Tip:</b> {suggestionText}
 			</Typography>
 		</Paper>
@@ -1433,7 +1477,7 @@ const ParsedAction = (props) => {
 						}
 					}}
 				>
-					<div style={{ display: "flex", marginBottom: 0,}}>
+					<div style={{ display: "flex", marginBottom: 0, }}>
 						<span
 							style={{
 								marginRight: 10,
@@ -1443,10 +1487,10 @@ const ParsedAction = (props) => {
 						>
 							{useIcon}
 						</span>
-						<span style={{marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
+						<span style={{ marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
 					</div>
 					{extraDescription.length > 0 ?
-						<Typography variant="body2" color="textSecondary" style={{marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block",}}>
+						<Typography variant="body2" color="textSecondary" style={{ marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block", }}>
 							{extraDescription}
 						</Typography>
 						: null}
@@ -1498,7 +1542,12 @@ const ParsedAction = (props) => {
 	if (newAppname === undefined || newAppname === null) {
 		newAppname = ""
 	} else {
-	  newAppname = newAppname.replaceAll("_", " ")
+		try {
+			newAppname = newAppname?.replaceAll("_", " ")
+		} catch (e) {
+			console.log("Error in replace newappname: ", e)
+		}
+
 	}
 
 	var optionalFound = false
@@ -1514,7 +1563,7 @@ const ParsedAction = (props) => {
 									//window.open("/apps/${selectedAction.app_id}", "_blank")
 								}}
 							>
-		  		  <Tooltip title={"App: "+selectedAction.app_name} placement="top">
+								<Tooltip title={"App: " + selectedAction.app_name} placement="top">
 									<img src={selectedAppIcon} style={{
 										width: 30,
 										height: 30,
@@ -1525,11 +1574,11 @@ const ParsedAction = (props) => {
 									}} />
 								</Tooltip>
 
-				  <h3 style={{ }}>
+								<h3 style={{}}>
 									{newAppname}
 								</h3>
 							</div>
-              <div style={{display: "flex", marginTop: 0, }}>
+							<div style={{ display: "flex", marginTop: 0, }}>
 								<IconButton
 									style={{
 										marginTop: "auto",
@@ -1542,7 +1591,7 @@ const ParsedAction = (props) => {
 										if (workflowExecutions.length > 0) {
 											// Look for the ID
 											var found = false;
-                      for (let [key,keyval] in Object.entries(workflowExecutions)) {
+											for (let [key, keyval] in Object.entries(workflowExecutions)) {
 												if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
 													continue;
 												}
@@ -1636,7 +1685,7 @@ const ParsedAction = (props) => {
 										placement="top"
 									>
 										{autoCompleting ?
-						<CircularProgress style={{height: 20, width: 20, }} />
+											<CircularProgress style={{ height: 20, width: 20, }} />
 											:
 											<AutoFixHighIcon style={{ color: "rgba(255,255,255,0.7)", height: 24, }} />
 										}
@@ -1670,7 +1719,7 @@ const ParsedAction = (props) => {
 											}
 										}
 
-					toast.success("Changed version of all nodes to "+event.target.value)
+										toast.success("Changed version of all nodes to " + event.target.value)
 									}}
 									style={{
 										marginTop: 10,
@@ -1704,9 +1753,9 @@ const ParsedAction = (props) => {
 							) : null}
 						</div>
 					</div>
-					<div style={{display: "flex"}}>
+					<div style={{ display: "flex" }}>
-						<div style={{flex: 5}}>
+						<div style={{ flex: 5 }}>
-							<Typography style={{color: "rgba(255,255,255,0.7)"}}>Name</Typography>
+							<Typography style={{ color: "rgba(255,255,255,0.7)" }}>Name</Typography>
 							<TextField
 								style={theme.palette.textFieldStyle}
 								InputProps={{
@@ -1725,8 +1774,8 @@ const ParsedAction = (props) => {
 								onBlur={(e) => {
 									// Copy the name value
 									const name = e.target.value
-									const parsedBaseLabel = "$"+prevActionName.toLowerCase().replaceAll(" ", "_")
+									const parsedBaseLabel = "$" + prevActionName.toLowerCase().replaceAll(" ", "_")
-									const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
+									const newname = "$" + name.toLowerCase().replaceAll(" ", "_")
 
 									// Check if it's the same as the current name in use
 									//if (name === selectedAction.label) { 
@@ -1737,9 +1786,9 @@ const ParsedAction = (props) => {
 									// Change in actions, triggers & conditions
 									// Highlight the changes somehow with a glow?
 									if (workflow.branches !== undefined && workflow.branches !== null) {
-										for (let [key,keyval] in Object.entries(workflow.branches)) {
+										for (let [key, keyval] in Object.entries(workflow.branches)) {
 											if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
-												for (let [subkey,subkeyval] in Object.entries(workflow.branches[key].conditions)) {
+												for (let [subkey, subkeyval] in Object.entries(workflow.branches[key].conditions)) {
 													const condition = workflow.branches[key].conditions[subkey]
 													const sourceparam = condition.source
 													const destinationparam = condition.destination
@@ -1762,22 +1811,22 @@ const ParsedAction = (props) => {
 																}
 
 																if (foundindex >= 0) {
-																	previous = foundindex+newname.length
+																	previous = foundindex + newname.length
 																	// Need to add diff of length to word
 
 																	// Check location:
 																	// If it's a-zA-Z_ then don't replace
-																	if (sourceparam.value.length > foundindex+parsedBaseLabel.length) {
+																	if (sourceparam.value.length > foundindex + parsedBaseLabel.length) {
 																		const regex = /[a-zA-Z0-9_]/g;
-																		const match = sourceparam.value[foundindex+parsedBaseLabel.length].match(regex);
+																		const match = sourceparam.value[foundindex + parsedBaseLabel.length].match(regex);
 																		if (match !== null) {
 																			continue
 																		}
 																	}
 
 																	console.log("Old found: ", workflow.branches[key].conditions[subkey].source.value)
-																	const extralength = newname.length-parsedBaseLabel.length
+																	const extralength = newname.length - parsedBaseLabel.length
-																	sourceparam.value = sourceparam.value.substring(0, foundindex) + newname + sourceparam.value.substring(foundindex-extralength+newname.length, sourceparam.value.length)
+																	sourceparam.value = sourceparam.value.substring(0, foundindex) + newname + sourceparam.value.substring(foundindex - extralength + newname.length, sourceparam.value.length)
 
 																	console.log("New: ", workflow.branches[key].conditions[subkey].source.value)
 																} else {
@@ -1811,22 +1860,22 @@ const ParsedAction = (props) => {
 																}
 
 																if (foundindex >= 0) {
-																	previous = foundindex+newname.length
+																	previous = foundindex + newname.length
 																	// Need to add diff of length to word
 
 																	// Check location:
 																	// If it's a-zA-Z_ then don't replace
-																	if (destinationparam.value.length > foundindex+parsedBaseLabel.length) {
+																	if (destinationparam.value.length > foundindex + parsedBaseLabel.length) {
 																		const regex = /[a-zA-Z0-9_]/g;
-																		const match = destinationparam.value[foundindex+parsedBaseLabel.length].match(regex);
+																		const match = destinationparam.value[foundindex + parsedBaseLabel.length].match(regex);
 																		if (match !== null) {
 																			continue
 																		}
 																	}
 
 																	console.log("Old found: ", workflow.branches[key].conditions[subkey].destination.value)
-																	const extralength = newname.length-parsedBaseLabel.length
+																	const extralength = newname.length - parsedBaseLabel.length
-																	destinationparam.value = destinationparam.value.substring(0, foundindex) + newname + destinationparam.value.substring(foundindex-extralength+newname.length, destinationparam.value.length)
+																	destinationparam.value = destinationparam.value.substring(0, foundindex) + newname + destinationparam.value.substring(foundindex - extralength + newname.length, destinationparam.value.length)
 
 																	console.log("New: ", workflow.branches[key].conditions[subkey].destination.value)
 																} else {
@@ -1848,7 +1897,7 @@ const ParsedAction = (props) => {
 										}
 									}
 
-									for (let [key,keyval] in Object.entries(workflow.actions)) {
+									for (let [key, keyval] in Object.entries(workflow.actions)) {
 										if (workflow.actions[key].id === selectedAction.id) {
 											continue
 										}
@@ -1883,21 +1932,21 @@ const ParsedAction = (props) => {
 													}
 
 													if (foundindex >= 0) {
-														previous = foundindex+newname.length
+														previous = foundindex + newname.length
 														// Need to add diff of length to word
 
 														// Check location:
 														// If it's a-zA-Z_ then don't replace
-														if (param.value.length > foundindex+parsedBaseLabel.length) {
+														if (param.value.length > foundindex + parsedBaseLabel.length) {
 															const regex = /[a-zA-Z0-9_]/g;
-															const match = param.value[foundindex+parsedBaseLabel.length].match(regex);
+															const match = param.value[foundindex + parsedBaseLabel.length].match(regex);
 															if (match !== null) {
 																continue
 															}
 														}
 
-														const extralength = newname.length-parsedBaseLabel.length
+														const extralength = newname.length - parsedBaseLabel.length
-														param.value = param.value.substring(0, foundindex) + newname + param.value.substring(foundindex-extralength+newname.length, param.value.length)
+														param.value = param.value.substring(0, foundindex) + newname + param.value.substring(foundindex - extralength + newname.length, param.value.length)
 
 													} else {
 														break
@@ -1922,14 +1971,14 @@ const ParsedAction = (props) => {
 							/>
 						</div>
 						{/*!isCloud ? null :*/}
-							<div style={{flex: 1, marginLeft: 5,}}>
+						<div style={{ flex: 1, marginLeft: 5, }}>
 							<Tooltip
 								color="primary"
 								title={"Delay before action executes (in seconds)"}
 								placement="top"
 							>
 								<span>
-										<Typography style={{color: "rgba(255,255,255,0.7)"}}>Delay</Typography>
+									<Typography style={{ color: "rgba(255,255,255,0.7)" }}>Delay</Typography>
 									<TextField
 										InputProps={{
 											style: theme.palette.innerTextfieldStyle,
@@ -1987,8 +2036,31 @@ const ParsedAction = (props) => {
 			{selectedAction.authentication !== undefined &&
 				selectedAction.authentication !== null &&
 				selectedAction.authentication.length > 0 ? (
-        <div style={{ marginTop: 15 }}>
+
-          <Typography style={{color: "rgba(255,255,255,0.7)"}}>Authentication</Typography>
+				<div style={{ marginTop: 15, position: "relative", }}>
+					<Typography style={{ color: "rgba(255,255,255,0.7)" }}>Authentication</Typography>
+					<Tooltip 
+						title={
+						workflow?.suborg_distribution?.length > 0 && Object.getOwnPropertyNames(selectedAction?.selectedAuthentication).length !== 0 ? (
+							<React.Fragment>
+								<div style={{padding: 10, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0)"}}>
+									<FormControlLabel
+										control={
+											<Checkbox
+												checked={distributeAuthToSuborgs}
+												onChange={(event) => {
+													changeDistribution(selectedAction?.selectedAuthentication)
+												}}
+												name="distributeAuth"
+												color="primary"
+											/>
+										}
+										label="Distribute auth to suborgs"
+									/>
+								</div>
+							</React.Fragment>
+						) : null
+					} placement="left">
 						<div style={{ display: "flex" }}>
 							<Select
 								MenuProps={{
@@ -2008,11 +2080,12 @@ const ParsedAction = (props) => {
 								}}
 								fullWidth
 								onChange={(e) => {
+
 									if (e.target.value === "No selection") {
 										selectedAction.selectedAuthentication = {};
 										selectedAction.authentication_id = "";
 
-                  for (let [key,keyval] in Object.entries(selectedAction.parameters)) {
+										for (let [key, keyval] in Object.entries(selectedAction.parameters)) {
 											if (selectedAction.parameters[key].configuration === false) {
 												//console.log("FIELDSKIP: ", selectedAction.parameters[key].name)
 												continue
@@ -2033,6 +2106,7 @@ const ParsedAction = (props) => {
 												selectedAction.parameters[key].value = ""
 											}
 										}
+
 										setSelectedAction(selectedAction)
 										setUpdate(Math.random())
 
@@ -2047,7 +2121,7 @@ const ParsedAction = (props) => {
 											selectedAction.selectedAuthentication = {};
 											selectedAction.authentication_id = "authgroups"
 
-						for (let [key,keyval] in Object.entries(selectedAction.parameters)) {
+											for (let [key, keyval] in Object.entries(selectedAction.parameters)) {
 												//console.log(selectedAction.parameters[key])
 												if (selectedAction.parameters[key].configuration) {
 
@@ -2064,6 +2138,9 @@ const ParsedAction = (props) => {
 									} else {
 										selectedAction.selectedAuthentication = e.target.value;
 										selectedAction.authentication_id = e.target.value.id;
+
+										setDistributeAuthToSuborgs(e.target.value?.suborg_distributed || false)
+
 										setSelectedAction(selectedAction)
 										setUpdate(Math.random())
 									}
@@ -2105,16 +2182,16 @@ const ParsedAction = (props) => {
 											{data?.validation?.valid === true ?
 												<Tooltip title="Authentication has been validated" placement="top">
 													<Chip
-								style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", borderColor: green, maxHeight: 25, }}
+														style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", borderColor: green, maxHeight: 25, }}
 														label={"Valid"}
 														variant="outlined"
 														color="secondary"
 													/>
 												</Tooltip>
-					: null }
+												: null}
 											{data?.last_modified === true ?
 												<Chip
-							style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", maxHeight: 25, }}
+													style={{ marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", maxHeight: 25, }}
 													label={"Latest"}
 													variant="outlined"
 													color="secondary"
@@ -2133,7 +2210,7 @@ const ParsedAction = (props) => {
 									);
 								})}
 
-			  <Divider style={{marginTop: 10, marginBottom: 10, }}/>
+								<Divider style={{ marginTop: 10, marginBottom: 10, }} />
 
 								<MenuItem
 									style={{
@@ -2165,12 +2242,13 @@ const ParsedAction = (props) => {
 								</IconButton>
 							</Tooltip>
 						</div>
+					</Tooltip>
 				</div>
 			) : null}
 
 			{selectedAction.authentication_id === "authgroups" && (authGroups === undefined || authGroups === null || authGroups.length === 0) ?
-		<a href="/admin?tab=app_auth" target="_blank" style={{textDecoration: "none", color: "#FF8544",}}>
+				<a href="/admin?tab=app_auth" target="_blank" style={{ textDecoration: "none", color: "#FF8544", }}>
-			<Typography variant="body2" style={{marginTop: 5,}}>
+					<Typography variant="body2" style={{ marginTop: 5, }}>
 						Create your first Authentication group
 					</Typography>
 				</a>
@@ -2364,7 +2442,7 @@ const ParsedAction = (props) => {
 
 							return (
 								<li key={params.key}>
-						<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
+									<Typography variant="body1" style={{ textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
 									<Typography variant="body2">{params.children}</Typography>
 								</li>
 							)
@@ -2383,7 +2461,7 @@ const ParsedAction = (props) => {
 							return options
 						}}
 						getOptionLabel={(option) => {
-              if (option === undefined || option === null || option.name === undefined || option.name === null ) {
+							if (option === undefined || option === null || option.name === undefined || option.name === null) {
 								return null;
 							}
 
@@ -2429,7 +2507,7 @@ const ParsedAction = (props) => {
 							if (option.description === undefined || option.description === null) {
 								newActiondescription = "Description: No description defined for this action"
 							} else {
-				newActiondescription = "Description: "+newActiondescription
+								newActiondescription = "Description: " + newActiondescription
 							}
 
 							const iconInfo = GetIconInfo({ name: option.name });
@@ -2467,7 +2545,7 @@ const ParsedAction = (props) => {
 								const descSplit = option.description.split("\n")
 								// Last line of descSplit
 								if (descSplit.length > 0) {
-						extraUrl = descSplit[descSplit.length-1]
+									extraUrl = descSplit[descSplit.length - 1]
 								}
 
 								if (extraUrl.length > 0) {
@@ -2569,7 +2647,7 @@ const ParsedAction = (props) => {
 							<div style={{ marginTop: hideExtraTypes ? 10 : 30 }}>
 								{isIntegration ?
 									apps !== undefined && apps !== null && apps.length > 0 ?
-					<div style={{display: "flex", maxWidth: 335, overflowX: "auto", overflowY: "hidden",}}>
+										<div style={{ display: "flex", maxWidth: 335, overflowX: "auto", overflowY: "hidden", }}>
 											<div onClick={() => {
 
 												selectedAction.example = "noapp"
@@ -2605,7 +2683,7 @@ const ParsedAction = (props) => {
 
 											}}>
 												<Tooltip title={"Unselect which App to use"} placement="top">
-								<div style={{textAlign: "center", }}>
+													<div style={{ textAlign: "center", }}>
 														<img
 															src={wrapperapp.large_image}
 															style={{
@@ -2704,7 +2782,7 @@ const ParsedAction = (props) => {
 										title={"Click to learn more about this action"}
 										placement="top"
 									>
-					<div style={{marginTop: 50, }} />
+										<div style={{ marginTop: 50, }} />
 										{/*
 					<Button 
 						variant="text" 
@@ -2812,11 +2890,11 @@ const ParsedAction = (props) => {
 											renderInput={(params) => {
 												if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
 													const prefixes = ["Post", "Put", "Patch"]
-										for (let [key,keyval] in Object.entries(prefixes)) {
+													for (let [key, keyval] in Object.entries(prefixes)) {
 														if (params.inputProps.value.startsWith(prefixes[key])) {
-												params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
+															params.inputProps.value = params.inputProps.value.replace(prefixes[key] + " ", "", -1)
 															if (params.inputProps.value.length > 1) {
-													params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
+																params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase() + params.inputProps.value.substring(1)
 															}
 															break
 														}
@@ -3316,7 +3394,7 @@ const ParsedAction = (props) => {
 													<CloseIcon fontSize="small" />
 												</IconButton>
 											</Box>
-					<Divider sx={{ backgroundColor: theme.palette.surfaceColor, marginTop: "5px", marginBottom : "10px", height: "3px" }}/>
+											<Divider sx={{ backgroundColor: theme.palette.surfaceColor, marginTop: "5px", marginBottom: "10px", height: "3px" }} />
 											<Box display="flex" flexDirection="column">
 												<Typography variant="body2" mb={0.5}>
 													<strong>Required:</strong> {data.required === true || data.configuration === true ? "True" : "False"}
@@ -3343,7 +3421,7 @@ const ParsedAction = (props) => {
 													localStorage.setItem("disabled_ui_box", "true")
 													setUiBox("closed")
 												}}>
-							<Typography style={{marginTop: 10, color: "#FF8544", cursor: "pointer",}} variant="body2"> 
+													<Typography style={{ marginTop: 10, color: "#FF8544", cursor: "pointer", }} variant="body2">
 														Don't show again
 													</Typography>
 												</div>
@@ -3441,7 +3519,7 @@ const ParsedAction = (props) => {
 												error={
 													data?.error?.length > 0 ? true : false
 												}
-				helperText={data?.error?.length > 0 ? errorHelperText(data?.name,data?.value,data?.error) : returnHelperText(data.name, data.value)}
+												helperText={data?.error?.length > 0 ? errorHelperText(data?.name, data?.value, data?.error) : returnHelperText(data.name, data.value)}
 												//options={{
 												//	theme: 'gruvbox-dark',
 												//	keyMap: 'sublime',
@@ -3497,7 +3575,7 @@ const ParsedAction = (props) => {
 
 										var foundnewline = false
 										var allValues = []
-							for (let [key,keyval] in Object.entries(splitdata)) {
+										for (let [key, keyval] in Object.entries(splitdata)) {
 											const line = splitdata[key]
 											if (line === "") {
 												foundnewline = true
@@ -3513,7 +3591,7 @@ const ParsedAction = (props) => {
 												splitvalue = "="
 											}
 
-								if (splitvalue.length === 0){
+											if (splitvalue.length === 0) {
 												allValues.push({
 													key: line,
 													value: "",
@@ -3554,10 +3632,10 @@ const ParsedAction = (props) => {
 
 													return (
 														<span key={index}>
-												<div style={{display: "flex"}}>
+															<div style={{ display: "flex" }}>
 																<TextField
 																	placeholder="Key"
-														style={{flex: 5}}
+																	style={{ flex: 5 }}
 																	defaultValue={inputdata.key}
 																	onBlur={(e) => {
 																		console.log("Change from oldkey to new: ", oldkey, e.target.value)
@@ -3567,7 +3645,7 @@ const ParsedAction = (props) => {
 																		const tmpsplit = selectedActionParameters[count].value.split("\n")
 																		var valsplit = []
 																		var add_empty = false
-															for (let [key,keyval] in Object.entries(tmpsplit)) {
+																		for (let [key, keyval] in Object.entries(tmpsplit)) {
 																			if (tmpsplit[key] === "") {
 																				add_empty = true
 																				continue
@@ -3582,7 +3660,7 @@ const ParsedAction = (props) => {
 																		console.log("Split: ", valsplit)
 
 																		var newarr = []
-															for (let [key,keyval] in Object.entries(valsplit)) {
+																		for (let [key, keyval] in Object.entries(valsplit)) {
 																			var line = valsplit[key]
 
 																			if (key == index) {
@@ -3612,7 +3690,7 @@ const ParsedAction = (props) => {
 																/>
 																<TextField
 																	placeholder="Value"
-														style={{flex: 6}}
+																	style={{ flex: 6 }}
 																	defaultValue={inputdata.value}
 																	onBlur={(e) => {
 																		console.log("Change from oldval to new: ", oldval, e.target.value)
@@ -3622,7 +3700,7 @@ const ParsedAction = (props) => {
 																		var tmpsplit = selectedActionParameters[count].value.split("\n")
 																		var valsplit = []
 																		var add_empty = false
-															for (let [key,keyval] in Object.entries(tmpsplit)) {
+																		for (let [key, keyval] in Object.entries(tmpsplit)) {
 																			if (tmpsplit[key] === "") {
 																				add_empty = true
 																				continue
@@ -3637,7 +3715,7 @@ const ParsedAction = (props) => {
 																		console.log("Split: ", valsplit)
 
 																		var newarr = []
-															for (let [key,keyval] in Object.entries(valsplit)) {
+																		for (let [key, keyval] in Object.entries(valsplit)) {
 																			var line = valsplit[key]
 
 																			if (key == index) {
@@ -3750,7 +3828,7 @@ const ParsedAction = (props) => {
 												onChange={(event) => {
 													changeActionParameter(event, count, data);
 												}}
-                  onBlur={(event) => {}}
+												onBlur={(event) => { }}
 											/>
 										)
 									} else if (
@@ -3856,7 +3934,7 @@ const ParsedAction = (props) => {
 										};
 
 										const handleItemClick = (values) => {
-                if (values === undefined ||values === null ||values.length === 0) {
+											if (values === undefined || values === null || values.length === 0) {
 												return;
 											}
 
@@ -3866,7 +3944,7 @@ const ParsedAction = (props) => {
 												: "$" + values[0].autocomplete;
 
 											toComplete = toComplete.toLowerCase().replaceAll(" ", "_");
-                for (let [key,keyval] in Object.entries(values)) {
+											for (let [key, keyval] in Object.entries(values)) {
 												if (key == 0 || values[key].autocomplete.length === 0) {
 													continue;
 												}
@@ -3921,7 +3999,7 @@ const ParsedAction = (props) => {
 
 											console.log("In nestedclick!!")
 											var newValue = selectedActionParameters[count].value + toComplete
-								changeActionParameter({target: {value: newValue}}, count, data, true)
+											changeActionParameter({ target: { value: newValue } }, count, data, true)
 											//selectedActionParameters[count].value += toComplete;
 											//selectedAction.parameters[count].value = selectedActionParameters[count].value;
 											//setSelectedAction(selectedAction);
@@ -3978,7 +4056,7 @@ const ParsedAction = (props) => {
 															workflow.triggers !== null &&
 															workflow.triggers.length > 0
 														) {
-                        for (let [key,keyval] in Object.entries(workflow.triggers)) {
+															for (let [key, keyval] in Object.entries(workflow.triggers)) {
 																const item = workflow.triggers[key];
 
 																if (cy !== undefined) {
@@ -4083,7 +4161,7 @@ const ParsedAction = (props) => {
 																handleItemClick([innerdata]);
 															}}
 														>
-						<Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition1.top-200, left: menuPosition1.left-450, padding: "10px 0px 10px 10px", overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
+															<Paper style={{ minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition1.top - 200, left: menuPosition1.left - 450, padding: "10px 0px 10px 10px", overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)", }}>
 																<MenuItem
 																	key={innerdata.name}
 																	style={{
@@ -4102,7 +4180,7 @@ const ParsedAction = (props) => {
 																		handleItemClick([innerdata]);
 																	}}
 																>
-								<Typography variant="h6" style={{paddingBottom: 5}}>
+																	<Typography variant="h6" style={{ paddingBottom: 5 }}>
 																		{innerdata.name}
 																	</Typography>
 																</MenuItem>
@@ -4111,20 +4189,20 @@ const ParsedAction = (props) => {
 																	//<VpnKeyIcon style={iconStyle} />
 																	const icon =
 																		pathdata.type === "value" ? (
-									<span style={{marginLeft: 9, }} />
+																			<span style={{ marginLeft: 9, }} />
 																		) : pathdata.type === "list" ? (
-                        	      <FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
+																			<FormatListNumberedIcon style={{ marginLeft: 9, marginRight: 10, }} />
 																		) : (
-									<CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
+																			<CircleIcon style={{ marginLeft: 9, marginRight: 10, color: coverColor }} />
 																		);
 																	//<ExpandMoreIcon style={iconStyle} />
 
-								const indentation_count = (pathdata.name.match(/\./g) || []).length+1
+																	const indentation_count = (pathdata.name.match(/\./g) || []).length + 1
-								const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
+																	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]
+																	const newname = namesplit[namesplit.length - 1]
 																	return (
 																		<MenuItem
 																			key={pathdata.name}
@@ -4154,7 +4232,7 @@ const ParsedAction = (props) => {
 																						)
 																					})}
 																					{icon} {newname}
-										{pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
+																					{pathdata.type === "list" ? <SquareFootIcon style={{ marginleft: 10, }} onClick={(e) => {
 																						e.preventDefault()
 																						e.stopPropagation()
 
@@ -4163,7 +4241,7 @@ const ParsedAction = (props) => {
 																						// Removing .list from autocomplete
 																						var newname = pathdata.name
 																						if (newname.length > 5) {
-												newname = newname.slice(0, newname.length-5)
+																							newname = newname.slice(0, newname.length - 5)
 																						}
 
 																						//selectedActionParameters[count].value += `{{ $${innerdata.name}.${newname} | size }}`
@@ -4222,17 +4300,32 @@ const ParsedAction = (props) => {
 										data.variant = "STATIC_VALUE"
 									}
 
-			const isFirstOptional = optionalFound === false && data.configuration === false && data.required === false ? true : false
+									var isFirstOptional = optionalFound === false && data.configuration === false && data.required === false ? true : false
 									if (optionalFound === false && data.configuration === false && data.required === false) {
 										optionalFound = true
 									}
 
+									if (isFirstOptional) {
+										// Check if any required fields are found
+										var foundRequired = false
+										for (var key in selectedActionParameters) {
+											if (selectedActionParameters[key]?.required === true) {
+												foundRequired = true
+												break
+											}
+										}
+
+										if (!foundRequired) {
+											isFirstOptional = false
+										}
+									}
+
 									return (
-              <div key={data.name} style={{marginTop: isFirstOptional ? 55 : 5, }}>
+										<div key={data.name} style={{ marginTop: isFirstOptional ? 55 : 5, }}>
-				{isFirstOptional ? <Divider style={{backgroundColor: "rgba(255,255,255,0.1)", marginBottom: 20, }} /> : null}
+											{isFirstOptional ? <Divider style={{ backgroundColor: "rgba(255,255,255,0.1)", marginBottom: 20, }} /> : null}
 											{showButtonField === true ? hideBodyButtonValue : null}
 											<div
-                  style={{ marginTop: 20, marginBottom: 0, display: "flex" }}
+												style={{ marginTop: 18, marginBottom: 0, display: "flex" }}
 											>
 												{data.configuration === true ? (
 													<Tooltip
@@ -4263,9 +4356,9 @@ const ParsedAction = (props) => {
 														>
 															<PriorityHighIcon
 																style={{
-									color: "rgba(255,255,255,0.5)" ,
+																	color: "rgba(255,255,255,0.5)",
 																	marginRight: 0,
-								}}/>
+																}} />
 														</Tooltip>
 
 														:
@@ -4275,9 +4368,9 @@ const ParsedAction = (props) => {
 															placement="top"
 														>
 															<AutoFixHighIcon style={{
-				  			color: "rgba(255,255,255,0.7)" ,
+																color: "rgba(255,255,255,0.7)",
 																marginRight: 10,
-				  		}}/>
+															}} />
 														</Tooltip>
 													:
 													null}
@@ -4288,11 +4381,11 @@ const ParsedAction = (props) => {
 														title={"Explore your keys in Datastore"}
 														placement="top"
 													>
-						<a href="/admin?tab=datastore" target="_blank" style={{textDecoration: "none"}}>
+														<a href="/admin?tab=datastore" target="_blank" style={{ textDecoration: "none" }}>
 															<StorageIcon style={{
 																color: "#FF8544",
 																marginRight: 10,
-							}}/>
+															}} />
 														</a>
 													</Tooltip>
 													: null}
@@ -4305,7 +4398,7 @@ const ParsedAction = (props) => {
 														color: "#C5C5C5",
 													}}
 												>
-                      {tmpitem} <span style={{color: theme.palette.main}}>{selectedActionParameters[count].required || selectedActionParameters[count].configuration ? "*" : ""}</span>
+													{tmpitem} <span style={{ color: theme.palette.main }}>{selectedActionParameters[count].required || selectedActionParameters[count].configuration ? "*" : ""}</span>
 												</div>
 
 												<Tooltip title="Expand editor window" placement="top">
@@ -4400,7 +4493,7 @@ const ParsedAction = (props) => {
 															console.log("SELECT ONCHANGE DONE")
 
 															if (selectedActionParameters[count].value[selectedActionParameters[count].value.length - 1] === ".") {
-                          e.target.value.autocomplete = e.target.value.autocomplete.slice(1,e.target.value.autocomplete.length);
+																e.target.value.autocomplete = e.target.value.autocomplete.slice(1, e.target.value.autocomplete.length);
 															}
 
 															selectedActionParameters[count].value += e.target.value.autocomplete;
@@ -4433,7 +4526,7 @@ const ParsedAction = (props) => {
 																		color: "white",
 																	}}
 																	value={data}
-                            onMouseOver={() => {}}
+																	onMouseOver={() => { }}
 																>
 																	<Tooltip
 																		color="primary"

frontend/src/components/Priorities.jsx

@@ -13,8 +13,11 @@ import {
 	Card,
 	Chip,
   	Switch,
-		Skeleton,
+	Autocomplete,
+	TextField,
+	MenuItem,
 } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { Context } from "../context/ContextApi.jsx";
 
 import { useNavigate, Link } from "react-router-dom";
@@ -22,8 +25,15 @@ import Priority from "../components/Priority.jsx";
 import { constrainMatrix } from "reaviz";
 //import { useAlert 
 
+
+const useStyles = makeStyles({
+	notchedOutline: {
+		borderColor: "#f85a3e !important",
+	},
+});
+
 const Priorities = memo((props) => {
-  const { globalUrl, userdata,clickedFromOrgTab, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
+  const { globalUrl, userdata,clickedFromOrgTab,selectedOrganization, handleEditOrg, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
   
   const [showDismissed, setShowDismissed] = React.useState(false);
   const [showRead, setShowRead] = React.useState(false);
@@ -32,7 +42,21 @@ const Priorities = memo((props) => {
   const [selectedExecutionId, setSelectedExecutionId] = React.useState("NO HIGHLIGHT");
   const [highlightKMS, setHighlightKMS] = React.useState(false)
 
+  const [workflows, setWorkflows] = React.useState([])
+  const [openNotification, setOpenNotification] = React.useState(false);
+  const [workflow, setWorkflow] = React.useState({})
+  const [notificationWorkflow, setNotificationWorkflow] = React.useState(
+		selectedOrganization.defaults === undefined
+			? ""
+			: selectedOrganization.defaults.notification_workflow === undefined ||
+				selectedOrganization.defaults.notification_workflow.length === 0
+				? ""
+				: selectedOrganization.defaults.notification_workflow
+	);
+  
   let navigate = useNavigate();
+  const classes = useStyles();
+
 	useEffect(() => {
 		getFramework()
 
@@ -60,6 +84,20 @@ const Priorities = memo((props) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		if (selectedOrganization === undefined || selectedOrganization === null || selectedOrganization?.id === undefined || selectedOrganization?.id === null || selectedOrganization?.id.length === 0) {
+			return
+		}
+
+		if(workflows?.length === 0) {
+			getAvailableWorkflows()
+		}
+
+		if (notificationWorkflow !== selectedOrganization?.defaults?.notification_workflow) {
+			setNotificationWorkflow(selectedOrganization?.defaults?.notification_workflow)
+		}
+	}, [selectedOrganization])
+
 	if (userdata === undefined || userdata === null) {
 		return 
 	}
@@ -220,11 +258,287 @@ const Priorities = memo((props) => {
 	const imagesize = 22
   	const boxColor = "#86c142"
 
+
+	const getAvailableWorkflows = () => {
+		fetch(globalUrl + "/api/v1/workflows", {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json",
+			},
+			credentials: "include",
+		})
+			.then((response) => {
+				if (response.status !== 200) {
+					console.log("Status not 200 for workflows :O!");
+					return;
+				}
+				return response.json();
+			})
+			.then((responseJson) => {
+				if (responseJson !== undefined) {
+
+					// Add parent notification workflow	if it's a child org
+					// selectedOrganization,
+					if (selectedOrganization.creator_org !== undefined && selectedOrganization.creator_org !== null && selectedOrganization.creator_org.length > 0) {
+
+						// Add to start of the list
+						responseJson.unshift({
+							"name": "Parent-Org's Notification Workflow",
+							"id": "parent",
+						})
+					}
+
+					setWorkflows(responseJson)
+
+					if (selectedOrganization.defaults !== undefined && selectedOrganization.defaults.notification_workflow !== undefined) {
+
+						const workflow = responseJson.find((workflow) => workflow.id === selectedOrganization.defaults.notification_workflow)
+						if (workflow !== undefined && workflow !== null) {
+							setWorkflow(workflow)
+						}
+					}
+				}
+			})
+			.catch((error) => {
+				console.log("Error getting workflows: " + error);
+			})
+	}
+
+	const handleWorkflowSelectionUpdate = (e, isUserinput) => {
+		if (e.target.value === undefined || e.target.value === null || e.target.value.id === undefined) {
+			console.log("Returning as there's no id")
+			return null
+		}
+		setOpenNotification(false)
+		setWorkflow(e.target.value)
+		setNotificationWorkflow(e.target.value.id)
+		handleEditOrg(
+			selectedOrganization?.name,
+			selectedOrganization.description,
+			selectedOrganization.id,
+			selectedOrganization.image,
+			{
+				app_download_repo: selectedOrganization?.defaults?.app_download_repo,
+				app_download_branch: selectedOrganization?.defaults?.app_download_branch,
+				workflow_download_repo: selectedOrganization?.defaults?.workflow_download_repo,
+				workflow_download_branch: selectedOrganization?.defaults?.workflow_download_branch,
+				notification_workflow: e.target.value.id,
+				documentation_reference: selectedOrganization?.defaults?.documentation_reference,
+				workflow_upload_repo: selectedOrganization?.defaults?.workflow_upload_repo,
+				workflow_upload_branch: selectedOrganization?.defaults?.workflow_upload_branch,
+				workflow_upload_username: selectedOrganization?.defaults?.workflow_upload_username,
+				workflow_upload_token: selectedOrganization?.defaults?.workflow_upload_token,
+				newsletter: selectedOrganization?.defaults?.newsletter,
+				weekly_recommendations: selectedOrganization?.defaults?.weekly_recommendations,
+			},
+			{
+				sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
+				sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
+				client_id: selectedOrganization?.sso_config?.client_id,
+				client_secret: selectedOrganization?.sso_config?.client_secret,
+				openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
+				openid_token: selectedOrganization?.sso_config?.openid_token,
+				SSORequired: selectedOrganization?.sso_config?.SSORequired,
+				auto_provision: selectedOrganization?.sso_config?.auto_provision,
+			}
+		)
+	}
+
 	return (
 		<div style={{width: "100%", height: "100%", boxSizing: 'border-box', transition: 'width 0.3s ease', padding: clickedFromOrgTab ? "27px 10px 19px 27px":null, height: clickedFromOrgTab ? "auto":null, minHeight: 843, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null,  }}>
 		  <div style={{ maxHeight: 1700,  overflowY: "auto", width: '100%', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
 			<div style={{maxWidth: "calc(100% - 20px)"}}>
-		  <Typography style={{ fontSize: 24, fontWeight: 'bold', display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, color: clickedFromOrgTab?"#ffffff":null }}>Notifications ({
+		  	<Typography variant="h5" style={{ color: "rgba(241, 241, 241, 1)",  fontSize: 24, fontWeight: 600, textAlign: "left" }}>
+			  Notification Workflow
+			</Typography>
+			<Typography style={{ color: "rgba(158, 158, 158, 1)", fontSize: 16, fontWeight: 400, marginTop: 5,  }}>
+				The notification workflow triggers when an error occurs in one of your workflows. Each individual one will only start a workflow once every 2 minutes. <b>You can point child org notifications into the parent org notification by choosing it in the list.</b>
+			</Typography>
+			<div style={{ display: "flex", flexDirection: "row", alignItems: "center", }}>
+
+			{workflows !== undefined && workflows !== null && workflows.length > 0 ?
+				<Autocomplete
+					id="notification_workflow_search"
+					autoHighlight
+					open={openNotification}
+					onOpen={() => {
+						setOpenNotification(true);
+					}}
+					onClose={() => {
+						setOpenNotification(false);
+					}}
+					freeSolo
+					//autoSelect
+					value={workflows?.find(w => w.id === notificationWorkflow) || null}
+					classes={{ inputRoot: classes.inputRoot }}
+					ListboxProps={{
+						style: {
+							backgroundColor: "#212121",
+							color: "white",
+						},
+					}}
+					getOptionLabel={(option) => {
+						if (
+							option === undefined ||
+							option === null ||
+							option.name === undefined ||
+							option.name === null
+						) {
+							return "No Workflow Selected";
+						}
+
+						const newname = (
+							option.name.charAt(0).toUpperCase() + option.name.substring(1)
+						).replaceAll("_", " ");
+						return newname;
+					}}
+					options={workflows}
+					fullWidth
+					style={{
+						backgroundColor:  "#212121",
+						borderRadius: theme.palette?.borderRadius,
+						height: 35,
+						marginBottom: 40,
+					}}
+					onChange={(event, newValue) => {
+						console.log("Found value: ", newValue)
+
+						var parsedinput = { target: { value: newValue } }
+
+						// For variables
+						if (typeof newValue === 'string' && newValue.startsWith("$")) {
+							parsedinput = {
+								target: {
+									value: {
+										"name": newValue,
+										"id": newValue,
+										"actions": [],
+										"triggers": [],
+									}
+								}
+							}
+						}
+
+						handleWorkflowSelectionUpdate(parsedinput)
+					}}
+					renderOption={(props, data, state) => {
+						if (data.id === workflow.id) {
+							data = workflow;
+						}
+
+						return (
+							<Tooltip arrow placement="right" title={
+								<span style={{}}>
+									{data.image !== undefined && data.image !== null && data.image.length > 0 ?
+										<img src={data.image} alt={data.name} style={{ backgroundColor: theme.palette.surfaceColor, maxHeight: 200, minHeigth: 200, borderRadius: theme.palette?.borderRadius, }} />
+										: null}
+									<Typography>
+										Choose {data.name}
+									</Typography>
+								</span>
+							} placement="bottom">
+								<MenuItem
+									{...props}
+									style={{
+										// backgroundColor: theme.palette.inputColor,
+										color: data.id === workflow.id ? "red" : "white",
+										borderBottom: data.id === "parent" ? "2px solid rgba(255,255,255,0.5)" : null
+									}}
+									value={data}
+									onClick={(e) => {
+										props.onMouseDown?.(null);
+										var parsedinput = { target: { value: data } }
+										handleWorkflowSelectionUpdate(parsedinput)
+									}}
+								>
+									{data.name}
+								</MenuItem>
+							</Tooltip>
+						)
+					}}
+					renderInput={(params) => {
+						return (
+							<TextField
+								{...params}
+								style={{
+									backgroundColor: "rgba(33, 33, 33, 1)",
+									borderRadius: 4,
+									height: 35,
+									fontSize: 16,
+									marginTop: "16px"
+								}}
+								InputProps={{
+									...params.InputProps,
+									style: {
+										height: 35,
+										display: "flex",
+										alignItems: "center",
+										padding: "0px 8px",
+										fontSize: 16,
+										borderRadius: 4,
+									},
+									inputProps: {
+										...params.inputProps,
+										style: {
+											height: "100%",
+											boxSizing: "border-box",
+										}
+
+									}
+								}}
+								// label="Find a notification workflow"
+								variant="outlined"	
+								placeholder="Select a notification workflow"
+							/>
+						);
+					}}
+				/>
+				:
+				<TextField
+					required
+					InputProps={{
+						style: {
+							height: 35,
+							display: "flex",
+							alignItems: "center",
+							padding: "0px 8px",
+							fontSize: 16,
+							borderRadius: 4,
+						},
+						inputProps: {
+							style: {
+								height: "100%",
+								boxSizing: "border-box",
+							}
+
+						}
+					}}
+					style={{
+						backgroundColor: "rgba(33, 33, 33, 1)",
+						borderRadius: 4,
+						height: 35,
+						fontSize: 16,
+						marginBottom: 30
+					}}
+					fullWidth={true}
+					type="name"
+					id="outlined-with-placeholder"
+					margin="normal"
+					variant="outlined"
+					placeholder="ID of the workflow to receive notifications"
+					value={notificationWorkflow}
+					onChange={(e) => {
+						setNotificationWorkflow(e.target.value);
+					}}
+				/>
+			}
+			{/* <div style={{ minWidth: 150, maxWidth: 150, marginTop: 5, marginLeft: 10, }}>
+				{orgSaveButton}
+			</div> */}
+		</div>
+
+		  <Typography style={{marginTop: 50, fontSize: 24, fontWeight: 'bold', display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, color: clickedFromOrgTab?"#ffffff":null }}>Notifications ({
 				notifications?.filter((notification) => showRead === true || notification.read === false).length
 				})</Typography>
 
@@ -261,10 +575,12 @@ const Priorities = memo((props) => {
 					</Button>
 				  ) : null}
 			</div>
+
 			<NotificationComponent  notifications={notifications} showRead={showRead} selectedExecutionId={selectedExecutionId} selectedWorkflow={selectedWorkflow} highlightKMS={highlightKMS} userdata={userdata} imagesize={imagesize} boxColor={boxColor} clickedFromOrgTab={clickedFromOrgTab} notificationWidth={notificationWidth} dismissNotification={dismissNotification}/>
 
 			{clickedFromOrgTab? null : <Divider style={{marginTop: 50, marginBottom: 50, }} />}
-			<h2 style={{ display: clickedFromOrgTab ? null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ? 30 :null, color: clickedFromOrgTab ? "#ffffff" : null }}>Suggestions</h2>
+
+			<h2 style={{ display: clickedFromOrgTab ? null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ? 60 : null, color: clickedFromOrgTab ? "#ffffff" : null }}>Suggestions</h2>
 			<span style={{ fontSize: 16, color: clickedFromOrgTab ?"#9E9E9E":null,marginLeft: clickedFromOrgTab ?null:25,  }}>
 				Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. <br/>These range from simple configurations in Shuffle to Usecases you may have missed.&nbsp;
 				<a

frontend/src/components/ShuffleCodeEditor1.jsx

@@ -90,8 +90,8 @@ const pythonFilters = [
 	{ "name": "Use files", "value": `# Create a sample file\nfiles = [{\n  \"name\": \"test.txt\",\n  \"data\": \"Testdata\"\n}]\nret = self.set_files(files)\n\n# Get the content of the file from Shuffle storage\n# Originally a byte string in the \"data\" key\nfile_content = (self.get_file(ret[0])[\"data\"]).decode()\nprint(file_content)`, "example": `` },
 
 	{ "name": "Use datastore", "value": `key = \"testkey\"\nvalue = \"The value of the testkey\"\n\nself.set_cache(key, value)\n\n# Print the details of the key after it's been updated\n# To get the value, use self.get_cache(key)[\"value\"]\nprint(self.get_cache(key))`, "example": `` },
-	{ "name": "Run an App Action", "value": `response = self.run_app(app_id="app", action="action_name", auth="authentication_id", params={})\nprint(response)`, "example": ``, "disabled": true, },
+	{ "name": "Run an App Action", "value": `response = shuffle.run_app(app_id="app", action="action_name", auth="authentication_id", params={})\nprint(response)`, "example": ``, "disabled": true, },
-	{ "name": "Run a Singul AI Action", "value": `response = self.create_ticket(app="jira/iris/ticketingsystem", fields={"title": "Test ticket!"})\nprint(response)`, "example": ``, "disabled": true, },
+	{ "name": "Run a Singul AI Action", "value": `response = singul.create_ticket(app="jira/iris/ticketingsystem", fields={"title": "Test ticket!"})\nprint(response)`, "example": ``, "disabled": true, },
 
 ]
 
@@ -1416,7 +1416,7 @@ const CodeEditor = (props) => {
 													return (
 														<MenuItem key={index} onClick={() => {
 															if (item.disabled) {
-																toast.error("This feature may not work in your environment yet, and is awaiting updates to the Shuffle python execution environment.", { autoClose: 10000 })
+																toast.error("This feature may not work in your environment until you update your Shuffle Tools app.", { autoClose: 10000 })
 															}
 
 															if (selectedAction.name !== "execute_python") {

frontend/src/components/WorkflowTemplatePopup2.jsx

@@ -26,6 +26,7 @@ import {
 	Close as CloseIcon,
 	East as EastIcon, 
 	Interests as InterestsIcon,
+	OpenInNew as OpenInNewIcon,
 } from '@mui/icons-material';
 
 import {
@@ -35,7 +36,8 @@ import {
 	grey,
 } from "../views/AngularWorkflow.jsx"
 
-import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup.jsx";
+//import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup2.jsx";
+import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup2.jsx";
 import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
 import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx";
 import FixWorkflowValidationErrors from "../components/FixWorkflowValidationErrors.jsx";
@@ -47,9 +49,11 @@ const WorkflowTemplatePopup = (props) => {
 		isModalOpenDefault,
 		setIsClicked,
 		inputWorkflowId,
+		inputWorkflow,
 	} = props;
 
-	const [isActive, setIsActive] = useState(workflowBuilt === true);
+	const [isActive, setIsActive] = useState(workflowBuilt === true || (workflowBuilt !== undefined && workflowBuilt !== null && workflowBuilt?.length > 0) || (inputWorkflow !== undefined && inputWorkflow !== null && inputWorkflow.id !== undefined && inputWorkflow.id !== null && inputWorkflow.id !== "") ? true : false)
+
 	const [isHovered, setIsHovered] = useState(false);
 	const [modalOpen, setModalOpen] = useState(isModalOpenDefault === true ? true : false)
 	const [errorMessage, setErrorMessage] = useState("");
@@ -65,7 +69,7 @@ const WorkflowTemplatePopup = (props) => {
 	const [showTryitOut, setShowTryitout] = React.useState(showTryit === true ? true : false)
 
 	const [loadingWorkflow, setLoadingWorkflow] = React.useState(false)
-	const [workflow, setWorkflow] = useState({});
+	const [workflow, setWorkflow] = useState(inputWorkflow !== undefined && inputWorkflow !== null && inputWorkflow.id !== undefined && inputWorkflow.id !== null && inputWorkflow.id !== "" ? inputWorkflow : {})
 	const [_, setUpdate] = useState(0)
 
 	const fetchWorkflow = (id) => {
@@ -455,7 +459,7 @@ const WorkflowTemplatePopup = (props) => {
 				//console.log("Error in workflow template: ", responseJson.error);
 				setRequestSent(false)
 
-				const defaultMessage = "Error: Failed to generate workflow the workflow - the Shuffle team has been notified. Contact support@shuffler.io if you want manual help building this usecase until the AI system is handled."
+				const defaultMessage = "Error: Failed to generate workflow the workflow - the Shuffle team has been notified. Contact support@shuffler.io if you want manual help building this usecase." 
 				if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason !== "") {
 					setErrorMessage(defaultMessage + "\n\n" + responseJson.reason)
 				} else {
@@ -535,8 +539,8 @@ const WorkflowTemplatePopup = (props) => {
         	        style: {
 						backgroundColor: "black",
         	            color: "white",
-        	            minWidth: isHomePage ? null : isMobile ? 300 : 850,
+        	            minWidth: isHomePage ? null : isMobile ? 300 : 750,
-        	            maxWidth: isHomePage ? null : isMobile ? 300 : 850,
+        	            maxWidth: isHomePage ? null : isMobile ? 300 : 750,
 						paddingTop: isMobile ? null : 75, 
 						itemAlign: "center",
         	        },
@@ -564,7 +568,7 @@ const WorkflowTemplatePopup = (props) => {
 					{title === undefined || title === null || title === "" ? null : 
 						<span>
 							<Typography variant="body2" color="textSecondary" style={{marginTop: 25, }}>
-								Selected Workflow:
+								Selected Usecase:
 							</Typography> 
 							<div style={{marginBottom: 0, }} id="workflow-template">
 								<WorkflowTemplatePopup2 
@@ -575,9 +579,10 @@ const WorkflowTemplatePopup = (props) => {
 									dstapp={dstapp}
 									title={title}
 									description={description}
-									visualOnly={true} 
 
+									visualOnly={true} 
 									workflowBuilt={workflowBuilt}
+									inputWorkflow={workflow}
 									shownColor={shownColor}
 								/>
 
@@ -585,7 +590,7 @@ const WorkflowTemplatePopup = (props) => {
 						</span>
 					}
 
-					<div style={{marginTop: 15, }}>
+					<div style={{marginTop: 0, }}>
 						{/* Fix the timeline when errors are fixed.. how? */}
 						<WorkflowValidationTimeline
 							workflow={workflow}
@@ -601,21 +606,23 @@ const WorkflowTemplatePopup = (props) => {
 					</div>
 
 					{workflowLoading === true ? 
-						<div style={{marginTop: 75, textAlign: "center", }}>
+						<div style={{marginTop: 60, textAlign: "center", }}>
-							<Typography variant="h4"> Generating the Workflow...
+							<Typography variant="h4"> Generating Workflows...
 							</Typography> 
 							<CircularProgress style={{marginLeft: 0, marginTop: 25, }}/> 
 						</div>
 						:
 						<div>
-							{usecaseDetails === undefined ? null :
+							{usecaseDetails === undefined || usecaseDetails === null || workflow.id !== undefined ? null :
-								<Typography variant="h6" style={{marginTop: 75, }}>
+								<Typography variant="body1" style={{marginTop: 60, }} color="textSecondary">
 									{usecaseDetails?.description} 
 								</Typography> 
 							}
+							{errorMessage !== "" ?
 								<Typography variant="h6" style={{marginTop: 75, }}>
 									{errorMessage !== "" ? errorMessage : ""}
 								</Typography> 
+							: null}
 							{showLoginButton ?
           						<Link to="/register?message=Please login to create workflows&view=usecases"
           						  style={{
@@ -643,6 +650,7 @@ const WorkflowTemplatePopup = (props) => {
 										variant="outlined"
 										style={{
 											textTransform: "none",
+											marginTop: 15, 
 										}}
 										onClick={() => {
 											//setWorkflowLoading(true)
@@ -730,11 +738,11 @@ const WorkflowTemplatePopup = (props) => {
 
 	const parsedDescription = description !== undefined && description !== null ? description.replaceAll("_", " ") : ""
 
-	const boxHeight = 104
+	const boxHeight = visualOnly ? 75 : 104
 	const highlightColor = shownColor !== undefined && shownColor !== null && shownColor !== "" ? shownColor : "#f85a3e"
 
 	var hasInterest = false
-	if (userdata.interests !== undefined && userdata.interests !== null && userdata.interests.length > 0) {
+	if (userdata?.interests !== undefined && userdata?.interests !== null && userdata?.interests?.length > 0) {
 		const comparisonTitle = title === undefined || title === null ? "" : title.trim().toLowerCase().replaceAll(" ", "_")
 		for (var interestkey in userdata.interests) {
 			if (userdata.interests[interestkey].name === undefined || userdata.interests[interestkey].name === null || userdata.interests[interestkey].name === "") {
@@ -742,12 +750,12 @@ const WorkflowTemplatePopup = (props) => {
 			}
 
 			if (modalOpen) { 
-				console.log("COMPARE: ", userdata.interests[interestkey].name.trim().toLowerCase().replaceAll(" ", "_"), comparisonTitle)
+				//console.log("COMPARE: ", userdata.interests[interestkey].name.trim().toLowerCase().replaceAll(" ", "_"), comparisonTitle)
 			}
 
 			if (userdata.interests[interestkey].name.trim().toLowerCase().replaceAll(" ", "_") === comparisonTitle) {
 				if (modalOpen) { 
-					console.log("FOUND: ", comparisonTitle)
+					//console.log("FOUND: ", comparisonTitle)
 				}
 
 				hasInterest = true
@@ -791,7 +799,16 @@ const WorkflowTemplatePopup = (props) => {
 				}}
 				onClick={() => {
 					if (visualOnly === true) {
-						console.log("Not showing more than visuals.")
+						console.log("Not showing more than visuals. Workflow built: ", workflowBuilt, workflow)
+
+						if (workflowBuilt !== undefined && workflowBuilt !== null && workflowBuilt?.length > 0) { 
+							window.open("/workflows/" + workflowBuilt, "_blank")
+						} else if (workflow.id !== undefined && workflow.id !== null && workflow.id !== "") {
+							window.open("/workflows/" + workflow.id, "_blank")
+						} else {
+							toast("Click 'Try this usecase' to generate workflows for this usecase.")
+						}
+
 						return
 					}
 
@@ -822,7 +839,7 @@ const WorkflowTemplatePopup = (props) => {
 					: null}
 
 					<div style={{ display: "flex", itemAlign: "left", textAlign: "left", }}>
-						<div style={{display: "flex", flex: 1, marginLeft: 25, marginTop: showTryitOut && !isActive ? 14 : 30, }}>
+						<div style={{display: "flex", flex: 1, marginLeft: 25, marginTop: visualOnly ? 18 : showTryitOut && !isActive ? 14 : 30, }}>
 							<div style={{zIndex: 51}}>
 								{img1 !== undefined && img1 !== "" && srcapp !== undefined && srcapp !== "" ?
 									<Tooltip title={srcapp.replaceAll(":default", "").replaceAll("_", " ").replaceAll(" API", "")} placement="top">
@@ -849,7 +866,7 @@ const WorkflowTemplatePopup = (props) => {
 							}	
 
 						</div>
-						<div style={{ marginLeft: 20, overflow: "hidden", maxHeight: 30, marginTop: showTryitOut && !isActive ? 8 : 23, }}>
+						<div style={{ marginLeft: 20, overflow: "hidden", maxHeight: 30, marginTop: visualOnly ? 12 : showTryitOut && !isActive ? 8 : 23, }}>
 							<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16, fontWeight: isHomePage ? 600 : null, textTransform: 'capitalize', color: isHomePage ? "var(--White-text, #F1F1F1)" : "rgba(241, 241, 241, 1)"}} >
 								<b>{parsedTitle}</b>
 							</Typography>
@@ -858,13 +875,19 @@ const WorkflowTemplatePopup = (props) => {
 				</div>
 
 				<div>
+
 					{isActive === true && errorMessage === "" ?
+						visualOnly === true ? 
+							<Tooltip title="Open the workflow in a new tab" placement="top">
+								<OpenInNewIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", top: 22, right: 20, }} /> 
+							</Tooltip>
+							:
 							<Tooltip title="You already have workflows that are based on this usecase" placement="top">
 								<CheckIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", color: theme.palette.green, top: 10, right: 10, }} /> 
 							</Tooltip>
 					: ""}
 
-					{!isActive && hasInterest === true ?
+					{!isActive && hasInterest === true && !visualOnly ?
 						<Tooltip title="Your team has shown interest in this usecase previously." placement="top">
 							<InterestsIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", color: "rgba(254, 204, 0, 0.5)", top: 10, right: 10, }} />
 						</Tooltip>
@@ -872,7 +895,7 @@ const WorkflowTemplatePopup = (props) => {
 				</div>
 
 
-				{showTryitOut && !isActive ? 
+				{showTryitOut && !isActive && !visualOnly ? 
 					<Fade in={showTryitOut} timeout={300}>
 						<Button
 							variant="text"

frontend/src/components/WorkflowValidationTimeline.jsx

@@ -287,7 +287,7 @@ const WorkflowValidationTimeline = (props) => {
 	var scheduleNotStarted = false
 
 	if (workflow.validation !== undefined && workflow.validation !== null && workflow.validation.validation_ran === false) {
-		console.log("Validation didn't run. Why?")
+		console.log("Validation didn't run or get set for workflow. Why?")
 		return null
 	}
 
@@ -367,10 +367,13 @@ const WorkflowValidationTimeline = (props) => {
 						action.result = foundResult
 
 						action.status = foundResult.status
+					} else {
+						action.status = "SUCCESS"
 					}
 				}
 
 				const lastitem = index === relevantactions.length - 1
+
 				if (!lastitem) {
 					if (action.app_name === "Shuffle Tools") {
 						if (action.status === "SUCCESS") {
@@ -386,9 +389,10 @@ const WorkflowValidationTimeline = (props) => {
 									nodecolor = grey 
 									branchcolor = grey 
 								}
+							} else {
+								nodecolor = green
+								branchcolor = green
 							}
-
-
 						} else if (action.status === "SKIPPED") {
 							branchcolor = grey
 						} else {
@@ -489,7 +493,7 @@ const WorkflowValidationTimeline = (props) => {
 
 				if (!showMiddle && relevantactions.length > 2 && index > 0 && index === relevantactions.length - 2) {
 					if (founderror.length > 0) {
-						middleError += founderror+"\n"
+						middleError += action.label+": "+founderror+"\n\n"
 
 						middleBranchColor = branchcolor
 					}
@@ -497,11 +501,18 @@ const WorkflowValidationTimeline = (props) => {
 					if (index === relevantactions.length-2 && relevantactions.length > 2) {
 
 						const selectedIcon = middleError.length > 0 ? 
-							<Tooltip title={
+							<Tooltip 
+								title={
 									<Typography variant="body1" style={{margin: 5, whiteSpace: "pre-line", }}>
 										{middleError}
 									</Typography>
-							}>
+								}
+								inputProps={{
+									paperProps: {
+										backgroundColor: "red",
+									}
+								}}
+							>
 								<IconButton style={{width: 30, height: 30, backgroundColor: "rgba(255,255,255,0.0)", borderRadius: 30, marginTop: 2, }}>
 									<ErrorOutlineIcon style={{color: "red", }} /> 
 								</IconButton>
@@ -517,7 +528,7 @@ const WorkflowValidationTimeline = (props) => {
 				// Returns for anything non-middle
 				if (relevantactions.length > 2 && index >= 1 && index < relevantactions.length - 2) {
 					if (founderror.length > 0) {
-						middleError += founderror+"\n"
+						middleError += action.label+": "+founderror+"\n\n"
 					}
 
 					return null

frontend/src/views/AppCreator.jsx

@@ -5435,6 +5435,7 @@ const AppCreator = (defaultprops) => {
         minWidth: 174,
         minHeight: 174,
         objectFit: "contain",
+		borderRadius: theme.palette?.borderRadius,
       }}
     />
   );
@@ -5450,6 +5451,7 @@ const AppCreator = (defaultprops) => {
         margin: "auto",
         marginTop: 30,
         marginLeft: 40,
+		borderRadius: theme.palette?.borderRadius,
       }}
       onClick={() => {
         upload.click();
@@ -5832,6 +5834,7 @@ const AppCreator = (defaultprops) => {
 							//setOpenApiModal(true)
 							toast.info("Action merging & fork management coming soon")
 						}}
+	  					disabled={true}
 	  					style={{marginLeft: 10, }}
 					>
 						<CallMergeIcon 
@@ -5846,7 +5849,7 @@ const AppCreator = (defaultprops) => {
           href="https://shuffler.io/docs/app_creation#app-creator-instructions"
           style={{ textDecoration: "none", color: "#f85a3e" }}
         >
-          Click here to learn more about app creation
+          Click to learn more about app creation
         </a>
         <div
           style={{
@@ -5940,7 +5943,6 @@ const AppCreator = (defaultprops) => {
             <TextField
               required
               style={{
-				paddingTop: 5,
 				marginTop: 5, 
                 marginRight: 15,
                 backgroundColor: inputColor,

frontend/src/views/Apps.jsx

@@ -1258,7 +1258,6 @@ const Apps = (props) => {
                 style={{
                   width: 150,
                   backgroundColor: theme.palette.surfaceColor,
-                  backgroundColor: inputColor,
                   color: "white",
                   height: 35,
                   marginleft: 10,

frontend/src/views/Apps2.jsx

@@ -1853,6 +1853,7 @@ const Apps2 = (props) => {
           app={selectedApp}
           userdata={userdata}
           globalUrl={globalUrl}
+          getApps={getApps}
         />
         <AppCreationModal
           open={createAppModalOpen}

frontend/src/views/RunWorkflow.jsx

@@ -1642,7 +1642,7 @@ const RunWorkflow = (defaultprops) => {
 			maxHeight: 500, 
 			position: "absolute", 
 			left: 150, 
-			top: 0, 
+			top: 75, 
 			border: "1px solid rgba(255,255,255,0.3)",
 			borderRadius: theme.palette?.borderRadius,
 

frontend/src/views/Usecases2.jsx

@@ -621,7 +621,7 @@ const UsecaseListComponent = (props) => {
 								parsedUsecase.dstapp = newsubcase.dstapp
 
 
-								var workflowBuilt = false
+								var workflowBuilt = "" 
 								const newname = subcase.name.toLowerCase().replaceAll(" ", "_")
 								for (var workflowkey in workflows) {
 									const workflow = workflows[workflowkey]
@@ -635,7 +635,7 @@ const UsecaseListComponent = (props) => {
 
 									//console.log("WORKFLOW: ", newname, newusecases)
 									if (newusecases.includes(newname)) {
-										workflowBuilt = true
+										workflowBuilt = workflow.id 
 										break
 									}
 								}
@@ -676,6 +676,7 @@ const UsecaseListComponent = (props) => {
 											showTryit={false}
 											shownColor={""}
 											workflowBuilt={workflowBuilt} 
+											inputWorkflowId={workflowBuilt}
 											usecaseDetails={usecaseDetails}
 										/>
 

frontend/src/views/Workflows2.jsx

@@ -92,6 +92,7 @@ import {
     ArrowRight as ArrowRightIcon,
     Visibility as VisibilityIcon,
     EditNote as EditNoteIcon,
+	ErrorOutline as ErrorOutlineIcon,
 } from "@mui/icons-material";
 
 // Additional Components
@@ -108,6 +109,8 @@ import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinem
 import { debounce } from "lodash";
 import { removeQuery } from "../components/ScrollToTop.jsx";
 
+import {green, yellow, red, grey } from "../views/AngularWorkflow.jsx"
+
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240");
 
@@ -1114,12 +1117,9 @@ const Workflows2 = (props) => {
                 <Button
                     style={{}}
                     onClick={() => {
-                        console.log("Editing: ", editingWorkflow);
                         if (selectedWorkflowId) {
                             deleteWorkflow(selectedWorkflowId)
-                            setTimeout(() => {
+
-                                getAvailableWorkflows();
-                            }, 1000);
                         } else if (selectedWorkflowIndexes.length > 0) {
                             // Do backwards so it doesn't change 
                             toast("Starting deletion of workflows. This might take a while.")
@@ -1132,11 +1132,11 @@ const Workflows2 = (props) => {
 
 							setTimeout(() => {
 								getAvailableWorkflows()
-                            }, 1000);
+							}, 5000)
-
                             setSelectedWorkflowIndexes([]);
                         }
-                        setDeleteModalOpen(false);
+
+                        setDeleteModalOpen(false)
                     }}
                     color="primary"
                 >
@@ -2807,6 +2807,7 @@ const Workflows2 = (props) => {
                                 {workflowMenuButtons}
                             </div>
                         ) : null}
+
                         {(data.sharing !== undefined && data.sharing !== null && data.sharing === "form") || (data?.form_control?.input_markdown !== undefined && data?.form_control?.input_markdown !== null && data?.form_control?.input_markdown !== "") && type !== "public" ?
                             <Tooltip title="Edit Form" placement="top">
                                 <div style={{ position: "absolute", top: 45, right: 8, }}>
@@ -2821,10 +2822,33 @@ const Workflows2 = (props) => {
                                     >
                                         <EditNoteIcon />
                                     </IconButton>
-                                    {workflowMenuButtons}
                                 </div>
                             </Tooltip>
                         : null}
+
+						{(data?.validation?.validation_ran === true && data?.validation?.valid === false && data?.validation?.errors?.length > 0 ) ?                            
+							<Tooltip title={`Explore more than  ${data?.validation?.errors?.length} errors. When the last execution finishes without errors AND notifications stop occuring, this icon disappears.`} placement="top">
+                                <div style={{ position: "absolute", top: 45, right: 8, }}>
+                                    <IconButton
+                                        aria-label="more"
+                                        aria-controls="long-menu"
+                                        aria-haspopup="true"
+                                        onClick={() => {
+                                            window.open(`/admin?admin_tab=notifications&workflow_id=${data.id}`, "_blank")
+                                        }}
+                                        style={{ 
+											padding: "0px", 
+											color: "#979797",
+										}}
+                                    >
+										<ErrorOutlineIcon style={{ 
+											marginRight: 2, 
+										}} />
+                                    </IconButton>
+                                </div>
+                            </Tooltip>
+
+						: null}
                     </Grid>
                 </Paper>
             </div>