Synced 2.0 updates

2025-01-30 15:21:45 +01:00
parent e5ac2e3ae7
commit 4b8c860569
20 changed files with 15790 additions and 15012 deletions
@@ -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={{
@@ -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={{
@@ -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,14 +878,16 @@ const CacheView = memo((props) => {
                                        style={{display: "table-cell", textAlign: 'center', verticalAlign: 'middle', }}
                                        />
                                      :
-                                      <Tooltip
+                                      <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"
                                      >
                                          <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)
@@ -892,6 +900,9 @@ const CacheView = memo((props) => {
                                              }}
                                          />
                                      </Tooltip>
+                                        }
+                                        style={{display: "table-cell", textAlign: 'center', verticalAlign: 'middle', }}
+                                        />
                                  }
                            </ListItem>
                        );
@@ -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}

@@ -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,15 +245,13 @@ 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 
-					
-					  apps={apps}
-					  workflow={workflow}
-					/>
-				</div>
-				*/}
+						<div style={{marginTop: 10, marginBottom: 10, marginRight: 50, }}>
+							<WorkflowValidationTimeline 
+							
+							  apps={apps}
+							  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", }}
@@ -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>
 	)
@@ -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) => ({
-        id: org.id,
-        name: org.name,
-        image: org.image,
-        region_url: getRegionTag(org.region_url),
-      })) || []
+      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"
-                              : "#6F6F6F",
+                              : "#C8C8C8"
                        }}
                      >
                       	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"
-                              : "#6F6F6F",
+                              : "#C8C8C8"
                        }}
                      >
                       	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"
-                              : "#6F6F6F",
+                              : "#C8C8C8"
                        }}
                      >
                       	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
-                  .toLowerCase()
-                  .includes(params.inputValue.toLowerCase())
+                normalize(option.name).includes(input) || 
+                normalize(option.region_url).includes(input)
              );
            }}
+                        
            value={userOrgs}
            renderInput={(params) => (
              <Box
@@ -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}`;


@@ -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);
@@ -31,8 +41,22 @@ const Priorities = memo((props) => {
  const [selectedWorkflow, setSelectedWorkflow] = React.useState("NO HIGHLIGHT");
  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
@@ -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 a Singul AI Action", "value": `response = self.create_ticket(app="jira/iris/ticketingsystem", fields={"title": "Test ticket!"})\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 = 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") {
@@ -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,
-        	            maxWidth: isHomePage ? null : isMobile ? 300 : 850,
+        	            minWidth: isHomePage ? null : isMobile ? 300 : 750,
+        	            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", }}>
-							<Typography variant="h4"> Generating the Workflow...
+						<div style={{marginTop: 60, textAlign: "center", }}>
+							<Typography variant="h4"> Generating Workflows...
 							</Typography> 
 							<CircularProgress style={{marginLeft: 0, marginTop: 25, }}/> 
 						</div>
 						:
 						<div>
-							{usecaseDetails === undefined ? null :
-								<Typography variant="h6" style={{marginTop: 75, }}>
-									{usecaseDetails?.description}
+							{usecaseDetails === undefined || usecaseDetails === null || workflow.id !== undefined ? null :
+								<Typography variant="body1" style={{marginTop: 60, }} color="textSecondary">
+									{usecaseDetails?.description} 
 								</Typography> 
 							}
-							<Typography variant="h6" style={{marginTop: 75, }}>
-								{errorMessage !== "" ? errorMessage : ""}
-							</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 === "" ?
-						<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>
+						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"
@@ -898,4 +921,4 @@ const WorkflowTemplatePopup = (props) => {
 	)
 }

-export default WorkflowTemplatePopup 
+export default WorkflowTemplatePopup
@@ -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={
-								<Typography variant="body1" style={{margin: 5, whiteSpace: "pre-line", }}>
-									{middleError}
-								</Typography>
-							}>
+							<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
@@ -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,
@@ -1258,7 +1258,6 @@ const Apps = (props) => {
                style={{
                  width: 150,
                  backgroundColor: theme.palette.surfaceColor,
-                  backgroundColor: inputColor,
                  color: "white",
                  height: 35,
                  marginleft: 10,
@@ -1853,6 +1853,7 @@ const Apps2 = (props) => {
          app={selectedApp}
          userdata={userdata}
          globalUrl={globalUrl}
+          getApps={getApps}
        />
        <AppCreationModal
          open={createAppModalOpen}
@@ -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,

@@ -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}
 										/>

@@ -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.")
@@ -1130,13 +1130,13 @@ const Workflows2 = (props) => {
                                }
                            }

-                            setTimeout(() => {
-                                getAvailableWorkflows()
-                            }, 1000);
-
+							setTimeout(() => {
+								getAvailableWorkflows()
+							}, 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}
+                        : 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>