Merge branch '1.3.0'

frontend/src/views/Admin.jsx

@@ -980,6 +980,22 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 							leads.push("customer")
 						}
 
+						if (responseJson.lead_info.old_customer) {
+							leads.push("old customer")
+						}
+
+						if (responseJson.lead_info.tech_partner) {
+							leads.push("tech partner")
+						}
+
+						if (responseJson.lead_info.creator) {
+							leads.push("creator")
+						}
+
+						if (responseJson.lead_info.opensource) {
+							leads.push("open source")
+						}
+
 						if (responseJson.lead_info.demo_done) {
 							leads.push("demo done")
 						}
@@ -2412,7 +2428,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 										renderValue={(selected) => selected.join(', ')}
 										MenuProps={MenuProps}
 									>
-										{["contacted", "lead", "pov", "demo done", "customer", "student", "internal"].map((name) => (
+										{["contacted", "lead", "demo done", "pov", "customer", "open source", "student", "internal", "old customer", "creator", "tech partner"].map((name) => (
 											<MenuItem key={name} value={name}>
 												<Checkbox checked={selectedStatus.indexOf(name) > -1} />
 												<ListItemText primary={name} />
@@ -2528,7 +2544,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 							/>
 							<Tab
 								label=<span>
-									Licensing (Beta)
+									Licensing 
 								</span>
 							/>
 							<Tab
@@ -3000,7 +3016,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
     curTab === 1 ? (
       <div>
         <div style={{ marginTop: 20, marginBottom: 20 }}>
-          <h2 style={{ display: "inline" }}>User management</h2>
+          <h2 style={{ display: "inline" }}>User Management</h2>
           <span style={{ marginLeft: 25 }}>
             Add, edit, block or change passwords.{" "}
             <a
@@ -3080,7 +3096,11 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
             ) : null}
             <ListItemText
               primary="Actions"
-              style={{ minWidth: 180, maxWidth: 180 }}
+              style={{ minWidth: 100, maxWidth: 100, }}
+            />
+            <ListItemText
+              primary="Last Login"
+              style={{ minWidth: 150, maxWidth: 150, }}
             />
           </ListItem>
           {users === undefined || users === null
@@ -3091,6 +3111,24 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                   bgColor = "#1f2023";
                 }
 
+				const timeNow = new Date().getTime();
+				
+				// Get the highest timestamp in data.login_info
+				var lastLogin = "N/A" 
+				if (data.login_info !== undefined && data.login_info !== null) {
+					var loginInfo = 0
+					for (var i = 0; i < data.login_info.length; i++) {
+						if (data.login_info[i].timestamp > loginInfo) {
+							loginInfo = data.login_info[i].timestamp
+						}
+					}
+
+					if (loginInfo > 0) {
+						console.log("SETTING LAST LOGIN: " + loginInfo)
+						lastLogin = new Date(loginInfo * 1000).toISOString().slice(0, 10) + " (" + data.login_info.length + ")"
+					}
+				}
+
                 return (
                   <ListItem key={index} style={{ backgroundColor: bgColor }}>
                     <ListItemText
@@ -3242,7 +3280,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                         }
                       />
                     ) : null}
-                    <ListItemText style={{ display: "flex" }}>
+                    <ListItemText style={{ display: "flex", minWidth: 100, maxWidth: 100,  }}>
                       <IconButton
                         onClick={() => {
                           setSelectedUserModalOpen(true);
@@ -3300,6 +3338,11 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 						New apikey 
 					</Button>*/}
                     </ListItemText>
+				    <ListItemText 
+				      style={{ minWidth: 150, maxWidth: 150,  }}
+				      primary={lastLogin}
+				    ><span/>
+				    </ListItemText>
                   </ListItem>
                 );
               })}

frontend/src/views/AngularWorkflow.jsx

@@ -977,14 +977,17 @@ const AngularWorkflow = (defaultprops) => {
             tmpView = execution_id;
           }
 
+		  console.log("TMPVIEW: ", tmpView);
+
 		  // Compare with currently selected item
           if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
 			// Don't clean up if it's already open
 		    if (executionModalOpen === true) {
+				console.log("Execution modal already open, not cleaning up")
 		        return
 		    }
 
-            const execution = responseJson.find((data) => data.execution_id === tmpView);
+            const execution = responseJson.executions.find((data) => data.execution_id === tmpView);
 
 		    setExecutionModalOpen(true) 
             if (execution !== null && execution !== undefined) {
@@ -16678,28 +16681,29 @@ const AngularWorkflow = (defaultprops) => {
         >
           <CloseIcon />
         </IconButton>
-        <ConfigureWorkflow
-          userdata={userdata}
-          alert={alert}
-          theme={theme}
-          setAuthenticationType={setAuthenticationType}
-          globalUrl={globalUrl}
-          workflow={workflow}
-          setSelectedAction={setSelectedAction}
-          setSelectedApp={setSelectedApp}
-          setAuthenticationModalOpen={setAuthenticationModalOpen}
-          appAuthentication={appAuthentication}
-          selectedAction={selectedAction}
-          apps={apps}
-          setConfigureWorkflowModalOpen={setConfigureWorkflowModalOpen}
-          saveWorkflow={saveWorkflow}
-          newWebhook={newWebhook}
-          submitSchedule={submitSchedule}
-          referenceUrl={referenceUrl}
-          workflowExecutions={workflowExecutions}
-          getWorkflowExecution={getWorkflowExecution}
-          isCloud={isCloud}
-        />
+		<div style={{height: 75, width: "100%", background: `linear-gradient(to right, #f86a3e, #fc3922)`, position: "relative",}} />
+		<div style={{ padding: "50px 0px 50px 0px", }}>
+			<ConfigureWorkflow
+			  workflow={workflow}
+			  userdata={userdata}
+			  globalUrl={globalUrl}
+			  apps={apps}
+			  setAuthenticationType={setAuthenticationType}
+			  setSelectedAction={setSelectedAction}
+			  setSelectedApp={setSelectedApp}
+			  setAuthenticationModalOpen={setAuthenticationModalOpen}
+			  appAuthentication={appAuthentication}
+			  selectedAction={selectedAction}
+			  setConfigureWorkflowModalOpen={setConfigureWorkflowModalOpen}
+			  saveWorkflow={saveWorkflow}
+			  newWebhook={newWebhook}
+			  submitSchedule={submitSchedule}
+			  referenceUrl={referenceUrl}
+			  workflowExecutions={workflowExecutions}
+			  getWorkflowExecution={getWorkflowExecution}
+			  isCloud={isCloud}
+			/>
+		</div>
       </Dialog>
     ) : null;
 

frontend/src/views/AppCreator.jsx

@@ -929,9 +929,9 @@ const AppCreator = (defaultprops) => {
             }
           }
 					
-					if (path === "/files/{file_id}/content") {
-						//console.log("FILE DOWNLOAD Method: ", path, method, methodvalue)
-					}
+			if (path === "/files/{file_id}/content") {
+				//console.log("FILE DOWNLOAD Method: ", path, method, methodvalue)
+			}
 
 
           // Typescript? I think not ;)
@@ -2137,7 +2137,7 @@ const AppCreator = (defaultprops) => {
           }
 
           if (queryitem.name.toLowerCase() == "file_id") {
-						item.queries[querykey].name = "fileid"
+			item.queries[querykey].name = "fileid"
             continue;
             //skipped = true
             //break
@@ -2525,8 +2525,8 @@ const AppCreator = (defaultprops) => {
       for (let authkey in extraAuth) {
         const curauth = extraAuth[authkey];
 
-        if (curauth.name.toLowerCase() == "url") {
-          toast("Can't add extra auth with Name URL");
+        if (curauth.name.length === 0 || curauth.name.toLowerCase() == "url") {
+          toast("Can't add extra auth with empty name or Name URL");
           setAppBuilding(false);
           return;
         }

frontend/src/views/Apps.jsx

@@ -1660,7 +1660,6 @@ const Apps = (props) => {
 
               refine(event.currentTarget.value)
             }}
-            limit={5}
           />
           {/*isSearchStalled ? 'My search is stalled' : ''*/}
         </form>

frontend/src/views/Dashboard.jsx

@@ -95,7 +95,9 @@ const useStyles = makeStyles({
 
 
 
-const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData, isLoggedIn, workflows, setWorkflows}) => {
+const UsecaseListComponent = (props) => {
+	const { keys, userdata, isCloud, globalUrl, frameworkData, isLoggedIn, workflows, setWorkflows, } = props
+
 	const [expandedIndex, setExpandedIndex] = useState(-1);
 	const [expandedItem, setExpandedItem] = useState(-1);
 	const [inputUsecase, setInputUsecase] = useState({});
@@ -165,12 +167,9 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 
 
   const parseUsecase = (subcase) => {
-	  console.log("parseUsecase: ", subcase)
+	  //console.log("parseUsecase: ", subcase)
 	  const srcdata = findSpecificApp(frameworkData, subcase.type)
 	  const dstdata = findSpecificApp(frameworkData, subcase.last)
-
-	  console.log("srcdata: ", srcdata)
-	  console.log("dstdata: ", dstdata)
 	
 	  if (srcdata !== undefined && srcdata !== null) { 
 		subcase.srcimg = srcdata.large_image 
@@ -185,13 +184,14 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 	  return subcase 
   }
 
+
   const getUsecase = (subcase, index, subindex) => {
 	subcase = parseUsecase(subcase)
 
 	// Timeout 50ms to delay it slightly 
-	setTimeout(() => {
-		setInputUsecase(subcase)
-	}, 50)
+	//setTimeout(() => {
+	//	setInputUsecase(subcase)
+	//}, 50)
 
     fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase.name.replaceAll(" ", "_"))}`, {
       method: "GET",
@@ -209,12 +209,13 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 		return response.json();
 	})
 	.then((responseJson) => {
-		console.log("In responseJson for usecase: ", responseJson)
 		var parsedUsecase = responseJson
 
 		if (responseJson.success === false) {
 			parsedUsecase = subcase
 		} else {
+			console.log("FOUND: ", JSON.parse(JSON.stringify(responseJson)))
+
 			parsedUsecase = responseJson
 
 			parsedUsecase.srcimg = subcase.srcimg
@@ -229,19 +230,21 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 		setExpandedItem(subindex)
 
 		setTimeout(() => {
-			//console.log("Scroll!")
 			const found = document.getElementById("selected_box");
 			if (found !== undefined && found !== null) {
 				//console.log("FOUND!!")
-				found.scrollTo({
-					top: 100,
-					behavior: "smooth",
-				})
+
+				//found.scrollTo({
+				//	top: 100,
+				//	behavior: "smooth",
+				//})
+			} else {
+				//console.log("NOT FOUND!!")
 			}
 
 			setFirstLoad(true)
 			setSelectedWorkflows([])
-		}, 100);
+		}, 100)
 	})
 	.catch((error) => {
 		//toast(error.toString());
@@ -412,7 +415,7 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 								const fixedName = subcase.name.toLowerCase().replace("_", " ")
 
 								return (
-      						<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
+      								<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
 
 										//setSelectedWorkflows([])
 										if (selectedItem) {
@@ -784,7 +787,6 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
           													    borderRadius: theme.palette.borderRadius,
           													  }}
           													  onChange={(event, newValue) => {
-																console.log("CLICK: ", newValue)
 																//handleWorkflowSelectionUpdate({ target: { value: newValue} })
 																//setSelectedWorkflows=
 																//var newvalue = []
@@ -801,7 +803,6 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 																		if (workflows[key]["usecase_ids"] !== undefined && workflows[key]["usecase_ids"] !== null && workflows[key]["usecase_ids"].includes(subcase.name)) {
 																			const filtered = workflows[key]["usecase_ids"].filter(data => data !== subcase.name)
 																			if (filtered !== undefined && filtered !== null) {
-																				//console.log("Removing: ", workflows[key].name, workflows[key])
 																				workflows[key]["usecase_ids"] = filtered
 																	
 																				setWorkflow(workflows[key]) 
@@ -813,19 +814,16 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 
 																	if (workflows[key]["usecase_ids"] === undefined || workflows[key]["usecase_ids"] === null) {
 																		workflows[key]["usecase_ids"] = [subcase.name]
-																		console.log("Setting: ", workflows[key].name)
 																		setWorkflow(workflows[key]) 
 
 																	} else if (!workflows[key]["usecase_ids"].includes(subcase.name)) {
 																		workflows[key]["usecase_ids"].push(subcase.name)
-																		console.log("Adding: ", workflows[key].name)
 																		setWorkflow(workflows[key]) 
 
 																	}
 																}
 
 																setWorkflows(workflows)
-																console.log("New: ", newValue)
 																setSelectedWorkflows(newValue)
                 												//setUpdate(Math.random())
           													  }}
@@ -887,19 +885,23 @@ const UsecaseListComponent = ({userdata, keys, isCloud, globalUrl, frameworkData
 																>
 																	Try it out:
 																</Typography>
-																<WorkflowTemplatePopup 
-																	userdata={userdata}
+																{frameworkData !== undefined && frameworkData !== null && Object.keys(frameworkData).length > 0 ?
+																	<WorkflowTemplatePopup 
+																		isLoggedIn={isLoggedIn}
+																		appFramework={frameworkData}
+																		userdata={userdata}
 
-																	globalUrl={globalUrl}
-																	img1={inputUsecase.srcimg}
-																	srcapp={inputUsecase.srcapp}
-																	img2={inputUsecase.dstimg}
-																	dstapp={inputUsecase.dstapp}
-																	title={inputUsecase.name}
-																	description={inputUsecase.description}
+																		globalUrl={globalUrl}
+																		img1={inputUsecase.srcimg}
+																		srcapp={inputUsecase.srcapp}
+																		img2={inputUsecase.dstimg}
+																		dstapp={inputUsecase.dstapp}
+																		title={inputUsecase.name}
+																		description={inputUsecase.description}
 
-																	apps={apps}
-																/>
+																		apps={apps}
+																	/>
+																: null}
 															</span>
 															{/*
 
@@ -1125,7 +1127,7 @@ const RadialChart = ({keys, setSelectedCategory}) => {
 // This is the start of a dashboard that can be used.
 // What data do we fill in here? Idk
 const Dashboard = (props) => {
-  const { globalUrl, isLoggedIn } = props;
+  const { globalUrl, isLoggedIn, userdata } = props;
   //const alert = useAlert();
   const [bigChartData, setBgChartData] = useState("data1");
   const [dayAmount, setDayAmount] = useState(7);
@@ -1176,7 +1178,7 @@ const Dashboard = (props) => {
 
 		const foundQuery2 = params["selected_object"]
 		if (foundQuery2 !== null && foundQuery2 !== undefined) {
-			console.log("Got selected_object: ", foundQuery2)
+			//console.log("Got selected_object: ", foundQuery2)
 
 			const queryName = foundQuery2.toLowerCase().replaceAll("_", " ")
 			// Waiting a bit for it to render
@@ -1184,6 +1186,15 @@ const Dashboard = (props) => {
 				const foundItem = document.getElementById(queryName)
 				if (foundItem !== undefined && foundItem !== null) { 
 					foundItem.click()
+					// Scroll to it
+
+					setTimeout(() => {
+						foundItem.scrollIntoView({
+							behavior: "smooth", 
+							block: "center", 
+							inline: "center"
+						})
+					}, 100)
 				} else { 
 					//console.log("Couldn't find item with name ", queryName)
 				}
@@ -1194,12 +1205,12 @@ const Dashboard = (props) => {
 
 	useEffect(() => {
 		if (usecases.length > 0) {
-			console.log(usecases)
+			//console.log(usecases)
 			checkSelectedParams()
 		}
 	}, [usecases])
 
-	const getFramework = () => {
+  const getFramework = () => {
     fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
       method: "GET",
       headers: {
@@ -1216,20 +1227,29 @@ const Dashboard = (props) => {
         return response.json();
       })
       .then((responseJson) => {
-				if (responseJson.success === false) {
-					if (responseJson.reason !== undefined) {
-						//toast("Failed loading: " + responseJson.reason)
-					} else {
-						//toast("Failed to load framework for your org.")
-					}
-				} else {
-					setFrameworkData(responseJson)
+			if (responseJson.success === false) {
+				const preparedData = {
+					"siem": findSpecificApp({}, "SIEM"), 
+					"communication": findSpecificApp({}, "COMMUNICATION"),
+					"assets": findSpecificApp({}, "ASSETS"),
+					"cases": findSpecificApp({}, "CASES"),
+					"network": findSpecificApp({}, "NETWORK"),
+					"intel": findSpecificApp({}, "INTEL"),
+					"edr": findSpecificApp({}, "EDR"),
+					"iam": findSpecificApp({}, "IAM"),
+					"email": findSpecificApp({}, "EMAIL"),
 				}
-			})
+
+				console.log("Got error for framework! ", preparedData) 
+				setFrameworkData(preparedData)
+			} else {
+				setFrameworkData(responseJson)
+			}
+	  })
       .catch((error) => {
         toast(error.toString());
       })
-		}
+	}
 
   const getAvailableWorkflows = () => {
     fetch(globalUrl + "/api/v1/workflows", {
@@ -1659,6 +1679,7 @@ const Dashboard = (props) => {
 			: null}
 
 			<UsecaseListComponent 
+	  			userdata={userdata}
 				isLoggedIn={isLoggedIn}
 				frameworkData={frameworkData}
 				keys={selectedUsecases} 

frontend/src/views/Search.jsx

@@ -21,20 +21,13 @@ import {
 } from "@mui/icons-material";
 
 
-const bodyDivStyle = {
-	margin: "auto",
-	maxWidth: 1024,
-	scrollX: "hidden",
-	overflowX: "hidden",
-}
-
 // Should be different if logged in :|
 const Search = (props) => {
-  const { globalUrl, isLoaded, serverside, userdata, hidemargins, } = props;
+  const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader} = props;
 	let navigate = useNavigate();
 
   const [curTab, setCurTab] = useState(0);
-  const iconStyle = { marginRight: 10 };
+  const iconStyle = { marginRight: isHeader ? null : 10 };
 
 	useEffect(() => {
 		if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
@@ -58,15 +51,23 @@ const Search = (props) => {
 		return null
 	}
 
+	const bodyDivStyle = {
+		margin: "auto",
+		maxWidth: 1024,
+		scrollX: "hidden",
+		overflowX: "hidden",
+		justifyContent: isHeader ? "center" : null, 
+	}
+
 	const boxStyle = {
 		color: "white",
 		flex: "1",
-		marginLeft: 10,
-		marginRight: 10,
-		paddingLeft: 30,
-		paddingRight: 30,
-		paddingBottom: 30,
-		paddingTop: hidemargins === true ? 0 : 30,
+		marginLeft: isHeader ? null : 10,
+		marginRight: isHeader ? null : 10,
+		paddingLeft: isHeader ? null : 30,
+		paddingRight: isHeader ? null : 30,
+		paddingBottom: isHeader ? null : 30,
+		paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
 		display: "flex", 
 		flexDirection: "column",
 		overflowX: "hidden",
@@ -121,7 +122,7 @@ const Search = (props) => {
 		<div style={{paddingBottom: hidemargins === true ? 0 : 100, color: "white", }}>
 			<div style={boxStyle}>
 				<Tabs
-					style={{width: 610, margin: "auto", marginTop: hidemargins === true ? 0 : 25, }}
+					style={{width: isHeader ? 765 : 610, margin: isHeader? null :"auto", marginTop: hidemargins === true ? 0 : isHeader ? null : 25, }}
 					value={curTab}
 					indicatorColor="primary"
 					textColor="secondary"
@@ -152,7 +153,7 @@ const Search = (props) => {
 					/>
 				</Tabs>
 				{curTab === 0 ? 
-					<AppGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
+					<AppGrid maxRows={3} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
 				: 
 				curTab === 1 ?
     			window.location.pathname === "/search" ? 
@@ -164,7 +165,7 @@ const Search = (props) => {
 					<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				: 
 				curTab === 3 ?
-					<CreatorGrid parsedXs={4} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
+					<CreatorGrid parsedXs={4} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile}  userdata={userdata} />
 				: 
 				null}
 			</div>

frontend/src/views/Welcome.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import ReactGA from 'react-ga4';
 import WelcomeForm2 from "../components/WelcomeForm2.jsx";
 import AppFramework from "../components/AppFramework.jsx";
-
+import {isMobile} from "react-device-detect";
 import {
 	ArrorForwardIos as ArrowForwardIosIcon,
 } from '@mui/icons-material';
@@ -47,10 +47,7 @@ const Welcome = (props) => {
 		}
 	}, [activeStep])
 
-  	const isCloud =
-			window.location.host === "localhost:3002" ||
-			window.location.host === "shuffler.io";
-
+  	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 		const [steps, setSteps] = useState([
 			"Help us get to know you", 
 			"Find your Apps", 
@@ -272,22 +269,22 @@ const Welcome = (props) => {
 			getApps()
 			getAvailableWorkflows() 
 
-			if (
-				window.location.search !== undefined &&
-				window.location.search !== null
-			) {
+			if (window.location.search !== undefined && window.location.search !== null) {
 				const urlSearchParams = new URLSearchParams(window.location.search);
 				const params = Object.fromEntries(urlSearchParams.entries());
 				const foundTab = params["tab"];
+
+				// Make foundtab into a number
+				console.log("foundTab: ", foundTab, activeStep+1)
 				if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab) && foundTab >= 1 && foundTab <= 3) {
+					console.log("SETTING TAB TO: ", foundTab)
+
 					setShowWelcome(true)
 					if (foundTab === 3 || foundTab === "3") {
 						handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
 					}
 
 					setActiveStep(foundTab-1)
-				} else { 
-					navigate(`/welcome?tab=2`)
 				}
 			}
 		}, [])
@@ -300,8 +297,8 @@ const Welcome = (props) => {
 			flex: 1, 
 			padding: 0, 
 			textAlign: "center",
-			maxWidth: 275,
-			minWidth: 275,
+			maxWidth: isMobile ? null : 275,
+			minWidth: isMobile ? null : 275, 
 			backgroundColor: theme.palette.surfaceColor,
 			color: "white",
 			borderRadius: theme.palette.borderRadius,
@@ -326,7 +323,7 @@ const Welcome = (props) => {
 		const buttonStyle = { 
 			borderRadius: 200, 
 			height: 51, 
-			width: 464, 
+			width: isMobile ? 300 : 464, 
 			fontSize: 16, 
 			// background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)", 
 			background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
@@ -334,7 +331,7 @@ const Welcome = (props) => {
 			top: 105, 
 			margin: "auto",
 			itemAlign: "center",
-			marginLeft: "65px",
+			marginLeft: isMobile? null : "65px",
 		}
 
 		const defaultImage = "/images/experienced.png"
@@ -382,7 +379,7 @@ const Welcome = (props) => {
 										})}
 								</Stepper>
 							</div> */}
-        			<Grid container spacing={1} style={{ padding: 0, maxWidth: 500, minWidth: 500, marginRight : "auto" , marginLeft: "auto" }}>
+        			<Grid container spacing={1} style={{ padding: isMobile ? 10 : 0, maxWidth: isMobile ? null : 500, minWidth: isMobile ? null : 500, marginRight : "auto" , marginLeft: "auto" }}>
           		  <Grid item xs={window.location.href.includes("tab=2") ? 6 : 12}>
 									<div>
 											{/*
@@ -394,6 +391,7 @@ const Welcome = (props) => {
 											/>
 											*/}
 											<WelcomeForm2
+												isLoggedIn={isLoggedIn}
 												checkLogin={checkLogin}
 												userdata={userdata}
 												globalUrl={globalUrl}
@@ -417,49 +415,11 @@ const Welcome = (props) => {
 											/>
 									</div>
           		  </Grid>
-								{/* {frameworkData === undefined || window.location.href.includes("tab=1") || window.location.href.includes("tab=3") ? null :
-									<div style={{marginTop: 25, }}>
-										<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
-											App Framework
-										</Typography>
-										<Fade>
-												<AppFramework
-													inputUsecase={inputUsecase}
-													frameworkData={frameworkData}
-													setFrameworkData={setFrameworkData}
-													selectedOption={"Draw"}
-													showOptions={false}
-													isLoaded={true}
-													isLoggedIn={true}
-													globalUrl={globalUrl}
-													size={0.78}
-													color={theme.palette.backgroundColor}
-													discoveryWrapper={discoveryWrapper}
-													setDiscoveryWrapper={setDiscoveryWrapper}
-													apps={apps}
-													inputUsecases={usecases}
-													setInputUsecases={setUsecases}
-												/>
-										</Fade>
-									</div>
-								} */}
 							</Grid>
 						</div>
 						: 
 						<Fade in={true}>
-							<div style={{maxWidth: 590, margin: "auto", marginTop: 50, }}>
-								
-							{/* <div style={{display:"flex"}}>
-								<ArrowBackIosIcon style={{color: "#9E9E9E", width: "16px",}} onClick={() => {
-										navigate("/workflows")
-									}}/>
-								<Typography variant="h8" style={{color: "#9E9E9E",textAlign: "center", marginBottom: 20, paddingRight: "366px"}} onClick={() => {
-										navigate("/workflows")
-									}}>
-								Back
-								</Typography>
-							</div> */}
-								
+							<div style={{maxWidth: isMobile ? null : 590, margin: "auto", marginTop: 50, }}>
 								<Typography variant="h4" style={{color: "#F1F1F1", marginTop: 50, fontSize: 32}}>
 									Help us get to know you
 								</Typography>
@@ -469,7 +429,7 @@ const Welcome = (props) => {
 								{/* <Typography variant="body1" style={{color: "#9E9E9E", marginTop: 12 ,marginBottom: 50, fontSize: 16}}>
 									We will use this information to personalize your automation
 								</Typography> */}
-								<div style={{display: "flex", marginTop: 70, width: 700, margin: "auto",}}>
+								<div style={{display: isMobile ? null : "flex", marginTop: 70, width: isMobile ? 280 : 700, margin: "auto",}}>
 									<div style={{border: "2px solid #806BFF", borderRadius: theme.palette.borderRadius, }}>
 										<Card style={paperObject} onClick={() => {
 											if (isCloud) {
@@ -482,6 +442,7 @@ const Welcome = (props) => {
 												//setActiveStep(1)
 											}
 
+											navigate("/welcome?tab=2")
 											setShowWelcome(true)
 										}}>
 											<CardActionArea style={actionObject}>
@@ -490,12 +451,13 @@ const Welcome = (props) => {
 													New to Shuffle 
 												</Typography>
 												<Typography variant="body1" style={{marginTop: 10, color: "rgba(255,255,255,0.8)"}}>
-														Let us guide you for an easier experience
+													Let us guide you for an easier experience
 												</Typography>
 											</CardActionArea>
 										</Card>
 									</div>
-									<div style={{marginLeft: 25, marginRight: 25, }}>
+									<div style={{marginLeft: 25, marginRight: 25, 
+			marginTop: isMobile ? 30 : null, }}>
 										{/* <Typography style={{marginTop: 200, }}>
 											OR
 										</Typography> */}
@@ -512,7 +474,7 @@ const Welcome = (props) => {
 										navigate("/workflows?message=Skipped intro")
 									}}>
 										<CardActionArea style={actionObject}>
-											<img src={experienced_image} style={{padding: experienced_image === defaultImage ? 2 : 10, objectFit: "scale-down", minHeight: experienced_image === defaultImage ? 40 : 70, maxHeight: experienced_image === defaultImage ? 40 : 70, bordeRadius: theme.palette.borderRadius, marginBottom: experienced_image === defaultImage ? 24 : 2 }} />
+											<img src={experienced_image} style={{padding: experienced_image === defaultImage ? 2 : 10, objectFit: "scale-down", minHeight: experienced_image === defaultImage ? 40 : 70, maxHeight: experienced_image === defaultImage ? 40 : 70, bordeRadius: theme.palette.borderRadius*2, marginBottom: experienced_image === defaultImage ? 24 : 2 }} />
 											<Typography variant="h4" style={{color: "#F1F1F1"}}> 
 												Experienced 
 											</Typography>										
@@ -524,10 +486,11 @@ const Welcome = (props) => {
 								</div>
 
 								
-								<div style={{ flexDirection: "row", }}>
+								<div style={{ flexDirection: "row", textAlign: isMobile ? "center" : null, margin: isMobile ? "auto" : null }}>
 									<Button variant="contained" type="submit" fullWidth style={buttonStyle} onClick={() => {
 										navigate(`/welcome?tab=2`)
 										setActiveStep(1)
+										setShowWelcome(true)
 										ReactGA.event({
 											category: "welcome",
 											action: "click_welcome_continue",
@@ -537,20 +500,6 @@ const Welcome = (props) => {
 										Continue
 									</Button>
 								</div>
-								
-
-								
-								{/* <div style={{margin: "auto", borderRadius: theme.palette.borderRadius, marginTop: 50, width: 200, overflow: "wrap", padding: 25, cursor: "pointer", }} onClick={() => {
-									if (window.drift !== undefined) {
-										window.drift.api.startInteraction({ interactionId: 340045 })
-									} else {
-										console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
-									}
-								}}>
-									<Typography variant="body1" style={{margin: "auto", textAlign: "center"}}>
-										Want a demo instead?
-									</Typography>
-								</div> */}
 							</div>
 						</Fade>
 					}

frontend/src/views/Workflows.jsx

@@ -530,6 +530,7 @@ export const validateJson = (showResult) => {
 
 const Workflows = (props) => {
   const { globalUrl, isLoggedIn, isLoaded, userdata, checkLogin } = props;
+
   document.title = "Shuffle - Workflows";
 	let navigate = useNavigate();
 
@@ -3419,11 +3420,11 @@ const Workflows = (props) => {
 													>
 														<img
 															style={{
-																height: imgSize+4,
-																width: imgSize+4,
+																height: isCloud ? imgSize : imgSize+4,
+																width: isCloud ? imgSize : imgSize+4,
 																position: "absolute",
-																top: -2,
-																left: -2,
+																top: isCloud ? -1 : -2,
+																left: isCloud ? -1 : -2,
 																cursor: "pointer",
 																zIndex: 99,
 																border: "2px solid rgba(255,255,255,0.7)",
@@ -3488,6 +3489,7 @@ const Workflows = (props) => {
 					{foundPriority != null && workflows.length < 6 ? 
 						<Priority
 							globalUrl={globalUrl}
+							userdata={userdata}
 							priority={foundPriority}
 							checkLogin={checkLogin}
 							appFramework={appFramework}