UI fixes across the board :)

frontend/src/components/AppGrid.jsx

@@ -225,7 +225,7 @@ const AppGrid = (props) => {
           }}
           autoComplete="off"
           color="primary"
-          placeholder="Find Apps"
+          placeholder="Search more than 2500 Apps"
           id="shuffle_search_field"
           onChange={(event) => {
             setSearchQuery(event.currentTarget.value);
@@ -989,7 +989,7 @@ const AppGrid = (props) => {
           }}
           autoComplete="off"
           color="primary"
-          placeholder="Find Apps"
+          placeholder="Search more than 2500 Apps"
           id="shuffle_search_field"
           onChange={(event) => {
             setSearchQuery(event.currentTarget.value);

frontend/src/components/EditWorkflow.jsx

@@ -22,6 +22,7 @@ import {
   IconButton,
   Menu,
   MenuItem,
+  Link,
   FormControlLabel,
   Chip,
   Switch,
@@ -543,6 +544,7 @@ const EditWorkflow = (props) => {
 									margin="dense"
 									fullWidth
 								/>
+
 								<TextField
 									onBlur={(event) => {
 										innerWorkflow.default_return_value = event.target.value
@@ -563,6 +565,106 @@ const EditWorkflow = (props) => {
 									fullWidth
 								/>
 
+								<Typography variant="body2" style={{marginTop: 50, }}>
+									MSSP Suborg Distribution (beta - contact support@shuffler.io)
+								</Typography>
+								{userdata !== undefined && userdata !== null && userdata.orgs !== undefined && userdata.orgs !== null && userdata.orgs.length > 0 ?
+									userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).length === 0 ?
+										<Typography variant="body2" style={{marginTop: 10, color: "rgba(255,255,255,0.7)"}}>
+											You can only distribute to suborgs from a parent org.
+										</Typography>
+									:
+									<Select
+										multiple
+										style={{marginTop: 10, }}
+										value={innerWorkflow.suborg_distribution === undefined || innerWorkflow.suborg_distribution === null ? ["none"] : innerWorkflow.suborg_distribution}
+										onChange={(e) => {
+											var newvalue = e.target.value
+											if (newvalue.length > 1 && newvalue[0] === "none") {
+												newvalue = newvalue.filter(value => value !== "none")
+											}
+
+											console.log("NEWVALUE: ", newvalue)
+
+											if (newvalue.includes("none")) {
+												newvalue  = ["none"]
+											} else if (newvalue.includes("all")) {
+												newvalue  = userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).map(org => org.id)
+											}
+
+											innerWorkflow.suborg_distribution = newvalue
+											setInnerWorkflow(innerWorkflow)
+											setUpdate(Math.random())
+										}}
+										label="Suborg Distribution"
+										fullWidth
+									>
+										<MenuItem value="none">
+											None
+										</MenuItem>
+										<MenuItem value="all">
+											All	
+										</MenuItem>
+										{userdata.orgs.map((data, index) => {
+                                           	var skipOrg = false;
+                                           	if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org === userdata.active_org.id) {
+                                           	  // Finds the parent org
+                                           	} else {
+												return null
+											}
+
+                    						const imagesize = 22
+											const imageStyle = {
+											  width: imagesize,
+											  height: imagesize,
+											  pointerEvents: "none",
+											  marginRight: 10,
+											  marginLeft:
+												data.creator_org !== undefined &&
+												  data.creator_org !== null &&
+												  data.creator_org.length > 0
+												  ? data.id === userdata.active_org.id
+													? 0
+													: 20
+												  : 0,
+											}
+
+											const image =
+											  data.image === "" ? (
+												<img
+												  alt={data.name}
+												  src={theme.palette.defaultImage}
+												  style={imageStyle}
+												/>
+											  ) : (
+												<img
+												  alt={data.name}
+												  src={data.image}
+												  style={imageStyle}
+												/>
+											  )
+
+
+											return (
+												<MenuItem key={index} value={data.id}>
+												  <Checkbox checked={innerWorkflow.suborg_distribution !== undefined && innerWorkflow.suborg_distribution !== null && innerWorkflow.suborg_distribution.includes(data.id)} />
+													  {image}{" "}
+													  <span style={{ marginLeft: 8 }}>
+														{data.name}
+													  </span>
+												</MenuItem>
+											)
+										})}
+									</Select>
+								: 
+									<Link to={"/admin?tab=suborgs"} style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">
+										<Typography variant="body2" style={{marginTop: 10, }}>
+											Create a sub-org to distribute workflows to suborgs.
+										</Typography>
+									</Link>
+								}
+									
+
 								<Typography variant="h6" style={{marginTop: 50, }}>
 									Input fields
 								</Typography>

frontend/src/components/NewHeader.jsx

@@ -27,6 +27,7 @@ import {
 } from "@mui/material";
 
 import {
+  Close as CloseIcon,
   MeetingRoom as MeetingRoomIcon,
   HelpOutline as HelpOutlineIcon,
   Settings as SettingsIcon,
@@ -40,6 +41,7 @@ import {
   Add as AddIcon,
   Analytics as AnalyticsIcon,
   Lightbulb as LightbulbIcon,
+  ExpandMore as ExpandMoreIcon,
 } from "@mui/icons-material";
 
 const hoverColor = "#f85a3e";
@@ -58,8 +60,11 @@ const Header = (props) => {
     isMobile,
     serverside,
     setModalOpen,
+
+    curpath,
   } = props;
 
+
   const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
   const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
   const [LoginHoverColor, setLoginHoverColor] = useState(hoverOutColor);
@@ -70,6 +75,7 @@ const Header = (props) => {
   const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
   const [subAnchorEl, setSubAnchorEl] = React.useState(null);
   const [upgradeHovered, setUpgradeHovered] = React.useState(false);
+  const [showTopbar, setShowTopbar] = useState(false)
   let navigate = useNavigate();
 
   const handleClick = (event) => {
@@ -188,7 +194,15 @@ const Header = (props) => {
         removeCookie("session_token", { path: "/" });
         removeCookie("session_token", { path: "/" });
         removeCookie("session_token", { path: "/" });
+
+        removeCookie("__session", { path: "/" });
+        removeCookie("__session", { path: "/" });
+        removeCookie("__session", { path: "/" });
+
+        removeCookie("__session", { path: "/" });
         window.location.pathname = "/";
+
+		localStorage.setItem("globalUrl", "")
       })
       .catch((error) => {
         console.log(error);
@@ -266,7 +280,7 @@ const Header = (props) => {
               : null,
           cursor: "pointer",
           marginRight: 10,
-        };
+        }
 
         image =
           foundOrg.image === "" ? (
@@ -355,14 +369,13 @@ const Header = (props) => {
           setAnchorEl(event.currentTarget);
         }}
       >
-        <Badge badgeContent={notifications.filter((n) => n.read === false).length} color="primary">
+	    {/*<Badge badgeContent={notifications.filter((n) => n.read === false).length} color="primary">*/}
           <NotificationsIcon
             color="secondary"
             style={{ height: 30, width: 30 }}
             alt="Your username here"
             src=""
           />
-        </Badge>
       </IconButton>
       <Menu
         id="simple-menu"
@@ -393,10 +406,10 @@ const Header = (props) => {
           }}
         >
           <div style={{ display: "flex", marginBottom: 5 }}>
-            <Typography variant="body1">
+            <Typography variant="body1" style={{flex: 1, }}>
               Notifications ({notifications.filter((data) => !data.read).length})
             </Typography>
-	   		<ButtonGroup style={{height: 40, marginLeft: 50, }}>
+	   		<ButtonGroup style={{height: 40, flex: 1, }}>
 				{notifications.length > 1 ? (
 				  <Button
 					color="primary"
@@ -420,7 +433,7 @@ const Header = (props) => {
 			  </Button>
 	  		</ButtonGroup>
           </div>
-          <Typography variant="body2">
+          <Typography variant="body2" color="textSecondary" style={{ marginTop: 5, }}>
             Notifications generated made by Shuffle to help you discover issues or
             improvements. <a href="/docs/organizations#notifications" target="_blank" rel="noopener noreferrer" style={{ color: "#f86a3e", textDecoration: "none", }}>
               Learn more</a>
@@ -462,6 +475,8 @@ const Header = (props) => {
       .then(function (response) {
         if (response.status !== 200) {
           console.log("Error in response");
+        } else {
+		  localStorage.setItem("apps", [])
 		}
 
         return response.json();
@@ -502,7 +517,7 @@ const Header = (props) => {
         rel="noopener noreferrer"
         target="_blank"
       >
-        <Tooltip color="primary" title={"Join the community"} placement="left">
+        <Tooltip color="primary" title={"Join the Shuffle Automation Community"} placement="left">
           <IconButton
             color="primary"
             style={{}}
@@ -527,7 +542,7 @@ const Header = (props) => {
       userdata.avatar !== null &&
       userdata.avatar.length > 0
       ? userdata.avatar
-      : "";
+      : ""
 
   const avatarMenu = (
     <span>
@@ -545,6 +560,7 @@ const Header = (props) => {
           alt="Your username here"
           src={parsedAvatar}
         />
+  		<ExpandMoreIcon style={{color: "rgba(255,255,255,0.4)", }}/>
       </IconButton>
       <Menu
         id="simple-menu"
@@ -562,7 +578,7 @@ const Header = (props) => {
               handleClose();
             }}
           >
-            <BusinessIcon style={{ marginRight: 5 }} /> Organisation
+            <BusinessIcon style={{ marginRight: 5 }} /> Organization
           </MenuItem>
         </Link>
         <Link to="/settings" style={hrefStyle}>
@@ -574,6 +590,18 @@ const Header = (props) => {
             <SettingsIcon style={{ marginRight: 5 }} /> Account
           </MenuItem>
         </Link>
+
+        <Link to="/admin?admin_tab=priorities" style={hrefStyle}>
+          <MenuItem
+            onClick={(event) => {
+              handleClose();
+            }}
+          >
+            <NotificationsIcon style={{ marginRight: 5 }} /> Notifications 
+          </MenuItem>
+        </Link>
+
+              {/*notificationMenu*/}
         <Divider style={{ marginTop: 10, marginBottom: 10, }} />
         <Link to="/docs" style={hrefStyle}>
           <MenuItem
@@ -944,8 +972,8 @@ const Header = (props) => {
               }}
             >
               {avatarMenu}
-              {notificationMenu}
+              {/*notificationMenu*/}
-              {/*supportMenu*/}
+              {supportMenu}
               {logoCheck}
             </span>
 
@@ -1050,7 +1078,7 @@ const Header = (props) => {
                           src={data.image}
                           style={imageStyle}
                         />
-                      );
+                      )
 
                     var regiontag = "eu";
                     if (
@@ -1164,32 +1192,20 @@ const Header = (props) => {
                       onMouseOver={() => { setUpgradeHovered(true) }}
                       onMouseOut={() => { setUpgradeHovered(false) }}
                       onClick={() => {
-                        // if (isCloud) {
+                        if (isCloud) {
-                        //   ReactGA.event({
+                          ReactGA.event({
-                        //     category: "header",
+                            category: "header",
-                        //     action: "pricing_upgrade_click",
+                            action: "upgrade_popup_click",
-                        //     label: "",
+                          })
-                        //   });
+                        }
-                        // }
-                        setModalOpen(true);
 
-                        // if (window.drift !== undefined) {
+                        setModalOpen(true)
-                        //   if (isCloud) {
-                        // 	  window.drift.api.startInteraction({
-                        // 		interactionId: 386404,
-                        // 	  })
-                        //   } else {
-                        // 	  window.drift.api.startInteraction({
-                        // 		interactionId: 386403,
-                        // 	  })
-                        //   }
-                        // }
                       }}
                     >
                       {upgradeHovered ?
-                        isCloud ? "Upgrade License" : "Upgrade License"
+                        "Upgrade License"
                         :
-                        isCloud ? "Upgrade" : "Upgrade"
+                        "Upgrade"
                       }
 
                     </Button>
@@ -1420,8 +1436,82 @@ const Header = (props) => {
     </div>
     :
     */
+
+    const topbarHeight = showTopbar ? 40 : 0
+	const topbar = !showTopbar ? null : 
+		curpath === "/" || curpath.includes("/docs/") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" ?
+			<span style={{ zIndex: 50001, }}>
+				<div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
+					<Typography variant="body1" style={{ paddingTop: 7, margin: "auto", textAlign: "center", color: "white", }}>
+						Shuffle 1.4 is out! Read more about&nbsp;
+						<u>
+							<a href="https://github.com/Shuffle/Shuffle" style={{ color: "inherit", }} onClick={() => {
+								ReactGA.event({
+									category: "landingpage",
+									action: "click_header_features",
+									label: "",
+								})
+
+								//if (window.drift !== undefined) {
+								//	window.drift.api.startInteraction({ interactionId: 341911 })
+								//} else {
+								//	console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
+								//}
+							}} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
+								Features
+							</a>
+						</u>
+						,&nbsp;
+						<u>
+							<span onClick={() => {
+								ReactGA.event({
+									category: "landingpage",
+									action: "click_header_pricing",
+									label: "",
+								})
+
+								navigate("/pricing")
+
+								//if (window.drift !== undefined) {
+								//	window.drift.api.startInteraction({ interactionId: 341911 })
+								//} else {
+								//	console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
+								//}
+							}} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
+								Pricing
+							</span>
+						</u>
+						&nbsp;and&nbsp;
+						<u>
+							<span onClick={() => {
+								ReactGA.event({
+									category: "landingpage",
+									action: "click_header_creators",
+									label: "",
+								})
+
+								navigate("/creators")
+
+								//if (window.drift !== undefined) {
+								//	window.drift.api.startInteraction({ interactionId: 341911 })
+								//} else {
+								//	console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
+								//}
+							}} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
+								Earning as a Creator
+							</span>
+						</u>
+					</Typography>
+					<IconButton color="secondary" style={{ position: "absolute", top: -3, right: 20, }} onClick={(event) => { setShowTopbar(false) }}>
+						<CloseIcon />
+					</IconButton>
+				</div>
+			</span>
+			:
+			null
+ 
   return !isMobile ?
-	<div style={{}}>
+	<div style={{marginTop: 0, }}>
 		<AppBar
 		  color="transparent"
 		  elevation={0}
@@ -1433,6 +1523,9 @@ const Header = (props) => {
 			  backgroundColor: theme.palette.backgroundColor, 
 		  }}
 		>
+
+			{topbar} 
+
 			<div style={{position: "sticky", top: 0, }}>
 				{loginTextBrowser}
 			</div>

frontend/src/components/Oauth2Auth.jsx

@@ -407,7 +407,7 @@ const AuthenticationOauth2 = (props) => {
 			if (offlineAccess === true && !scopes.includes("offline_access")) {
 
 				console.log("IN scope 2")
-				if (!authenticationType.redirect_uri.includes("google")) {
+				if (!authenticationType.redirect_uri.includes("google") && !authenticationType.redirect_uri.includes("slack")) {
 					console.log("Appending offline access")
 					scopes.push("offline_access")
 				}

frontend/src/components/ParsedAction.jsx

@@ -3237,16 +3237,23 @@ const ParsedAction = (props) => {
 				  }}
                   defaultValue={selectedAction.app_version}
                   onChange={(event) => {
-					console.log("VAL: ", event.target.value)
-					console.log("App: ", selectedApp)
                     const newversion = selectedApp.versions.find(
                       (tmpApp) => tmpApp.version == event.target.value
-                    );
+                    )
 
-                    console.log("NEWVERSION: ", newversion);
                     if (newversion !== undefined && newversion !== null) {
-                      getApp(newversion.id, true);
+                      getApp(newversion.id, true)
                     }
+
+					// Change in all actions in the workflow at the same time and add a toast.success() about it
+					for (var actionkey in workflow.actions) {
+						const action = workflow.actions[actionkey]
+						if (action.app_name === selectedAction.app_name) {
+							workflow.actions[actionkey].app_version = event.target.value
+						}
+					}
+
+					toast.success("Changed version of all nodes to "+event.target.value)
                   }}
                   style={{
                     marginTop: 10,

frontend/src/components/SearchData.jsx

@@ -24,6 +24,11 @@ import {
 import ArticleIcon from '@mui/icons-material/Article';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import ManageSearchIcon from '@mui/icons-material/ManageSearch';
+
+import {
+  VerifiedUser as VerifiedUserIcon,
+} from '@mui/icons-material'
+
 import {
     AvatarGroup,
 } from "@mui/material"
@@ -233,9 +238,11 @@ const SearchData = props => {
                             const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
                             const avatar = baseImage
 
+
                             var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
 
                             parsedUrl += `?queryID=${hit.__queryID}`
+							const validated = hit.validated !== undefined && hit.validate !== null ? hit.validated : false
 
                             // <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
                             return (
@@ -271,7 +278,15 @@ const SearchData = props => {
                                         setMouseHoverIndex(index)
                                     }}>
                                         <ListItemAvatar>
+											{validated === true ? 
+												<Tooltip title="The functionality of this workflow manually verified by the Shuffle automation team" placement="top">
+													<VerifiedUserIcon style={{marginLeft: 0, marginRight: 20, }} />
+												</Tooltip>
+										  		: 
+												<Tooltip title="Community-built workflow" placement="top">
 													{avatar}
+												</Tooltip>
+											}
                                         </ListItemAvatar>
                                         <div style={{}}>
                                             <ListItemText

frontend/src/components/Searchfield.jsx

@@ -92,7 +92,7 @@ const SearchField = props => {
 		>
 			{isHeader ? <div style={{ display: "flex"}}>
 				<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for Docs, Apps, Workflows and more</DialogTitle>
-				<Button fullWidth style={{ marginLeft:180, }} onClick={() => {
+				<Button color="secondary" fullWidth style={{ marginLeft:180, }} onClick={() => {
 					setModalOpen(false);
 				}}><CloseIcon /></Button>
 			</div>

frontend/src/components/ShuffleCodeEditor1.jsx

@@ -1698,7 +1698,7 @@ const CodeEditor = (props) => {
 										<Typography variant="body2">
 											<b>Test output</b>
 										</Typography>
-										<Typography variant="body2">
+										<Typography variant="body2" style={{whiteSpace: 'pre-line', }}>
 											{executionResult.result}
 										</Typography> 
 									</span>

frontend/src/defaultCytoscapeStyle.jsx

@@ -8,7 +8,7 @@ const data = [
 			  return ""
 		  } 
 
-		  elementname = elementname.replace("_", " ", -1)
+		  elementname = elementname.replaceAll("_", " ", -1)
 		  elementname = elementname.charAt(0).toUpperCase() + elementname.slice(1)
 		  return elementname
 	  },

frontend/src/views/Admin.jsx

@@ -1608,6 +1608,8 @@ If you're interested, please let me know a time that works for you, or set up a
       .then(function (response) {
         if (response.status !== 200) {
           console.log("Error in response");
+        } else {
+			localStorage.setItem("apps", [])
 		}
 
         return response.json();

frontend/src/views/Apps.jsx

@@ -676,11 +676,16 @@ const Apps = (props) => {
     }
 
 	if (data.actions === undefined || data.actions === null) {
+		// Check if data type undefined/bool
+		if (typeof data === "boolean") {
+			data = {}
+		}
+		
 		data.actions = []
 	}
 
     if (data === undefined || data.actions === undefined || data.actions === null || data.actions.length === 0) {
-      valid = "false";
+      valid = "false"
     }
 
     var description = data.description;

frontend/src/views/Workflows.jsx

@@ -2009,11 +2009,11 @@ const Workflows = (props) => {
             style={{ display: "flex", flexDirection: "column", width: "100%" }}
           >
             <Grid item style={{ display: "flex", maxHeight: 34 }}>
-              <Tooltip title={`Org "${orgName}"`} placement="bottom">
+              <Tooltip title={`Org "${orgName}". Click to edit image.`} placement="bottom">
                 <div
                   styl={{ cursor: "pointer" }}
                   onClick={() => {
-                    addFilter(orgId);
+					navigate("/admin")
                   }}
                 >
                   {image}
@@ -2025,10 +2025,10 @@ const Workflows = (props) => {
 						<img src={data.image} alt={data.name} style={{backgroundColor: theme.palette.surfaceColor, maxWidth: 300, minWidth: 250, borderRadius: theme.palette.borderRadius, }} />
 					: null}
 					<Typography>
-							Edit {data.name}
+						Edit '{data.name}'
 					</Typography>
 				</div>
-				} placement="left">
+				} placement="right">
 				<Typography
                   variant="body1"
                   style={{