Multiple minor fixes for 2.0.1 release to improve general usability

frontend/src/components/LeftSideBar.jsx

@@ -526,7 +526,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
         <Divider style={{ marginBottom: 10, }} />
 
         <Typography color="textSecondary" align="center" style={{ marginTop: 5, marginBottom: 5, fontSize: 18 }}>
-          Version: 2.0.0
+          Version: 2.0.1
         </Typography>
       </Menu>
     </span>
@@ -773,6 +773,9 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
   }, [window?.location?.pathname]);
 
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+
   return (
     <div
       style={{
@@ -785,8 +788,9 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
         transition: "width 0.3s ease",
         boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.2)" ,
         resize: 'both',
-
+        zoom: isSafari ? undefined : 0.8,
-		zoom: 0.8, 
+        transform: isSafari ? "scale(0.8)" : undefined,
+        transformOrigin: isSafari ? "top left" : undefined,
         height: "calc((100vh - 32px)*1.2)",
       }}
     >

frontend/src/components/LicencePopup.jsx

@@ -909,21 +909,23 @@ const LicencePopup = (props) => {
         const priceItem =
 			window.location.origin === "https://shuffler.io/" || "https://sandbox.shuffler.io/"
 				? shuffleVariant === 0
-					? "app_executions"
+					? "price_1PWI3uDzMUgUjxHSffUBwWCy"
-					: "cores"
+					: "price_1PWI8EDzMUgUjxHSfEhUB7oL"
+
 				: shuffleVariant === 0
 					? "price_1PZPSSEJjT17t98NLJoTMYja"
 					: "price_1PZPQuEJjT17t98N3yORUtd9";
 
         const successUrl = `${window.location.origin}/admin?admin_tab=billingstats&payment=success`
         const failUrl = `${window.location.origin}/admin?admin_tab=billingstats&payment=failure`
+		const quantity = shuffleVariant === 0 ? selectedValue / 100 : selectedValue
 
-        console.log("Priceitem: ", priceItem, shuffleVariant)
+        console.log("Priceitem: ", priceItem, quantity, shuffleVariant)
         var checkoutObject = {
             lineItems: [
                 {
                     price: priceItem,
-                    quantity: shuffleVariant === 0 ? selectedValue / 100 : selectedValue,
+                    quantity: quantity,
                 },
             ],
             mode: "subscription",
@@ -1141,6 +1143,7 @@ const LicencePopup = (props) => {
                 >
                     View all plans
                 </Button>
+
                 <Button
                     variant="contained"
                     style={{ borderRadius: 4, textTransform: "capitalize", color: "#1a1a1a", backgroundColor: "#ff8544", width: "100%", fontSize: 16}}

frontend/src/components/Navbar.jsx

@@ -48,7 +48,7 @@ const menuData = {
       title: "Shuffle",
       description:
         "The most versatile automation engine with focus on security.",
-      icon: "images/icons/shuffleLogo.svg",
+      icon: "/images/icons/shuffleLogo.svg",
       path: "/docs/about",
       gaData: {
         category: "navbar",

frontend/src/components/OrgHeaderexpandedNew.jsx

@@ -307,17 +307,16 @@ const OrgHeaderexpandedNew = (props) => {
 	const setSelectedRegion = (region) => {
 
 		// send a POST request to /api/v1/orgs/{org_id}/region with the region as the body
-		if (region === "US") {
+		const regionMap = {
-			region = "us-west2"
+			"US": "us-west2",
-		} else if (region === "EU") {
+			"EU": "europe-west2",
-			region = "europe-west2"
+			"CA": "northamerica-northeast1",
-		} else if (region === "CA") {
+			"UK": "europe-west2",
-			region = "northamerica-northeast1"
+			"EU-2": "europe-west3",
-		} else if (region === "UK") {
+			"AUS": "australia-southeast1"
-			region = "europe-west2"
+		  };
-		} else if (region === "EU-2") {
+
-			region = "europe-west3"
+		region = regionMap[region] || region;
-		}
 
 		var data = {
 			dst_region: region
@@ -336,7 +335,11 @@ const OrgHeaderexpandedNew = (props) => {
 			timeOut: 1000
 		}).then((response) => {
 			if (response.status !== 200) {
-				toast("Failed to change region!")
+				response.json().then((reason) => {
+					toast.error("Failed to change region: " + reason.reason)
+				}).catch((err) => {
+					toast.error("Failed to change region")
+				});
 			}
 			else {
 				toast("Region changed successfully! Reloading in 5 seconds..")
@@ -347,7 +350,7 @@ const OrgHeaderexpandedNew = (props) => {
 
 			}
 
-			return response.json();
+			// return responseJson
 		})
 	}
 
@@ -1091,6 +1094,7 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 		"EU-2": "eu",
 		"CA": "ca",
 		"UK": "gb",
+		"AUS": "au",
 	};
 
 	//let regiontag = "UK";
@@ -1112,6 +1116,9 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 		} else if (regiontag === "ca") {
 			regiontag = "CA";
 			regionCode = "ca";
+		} else if (regiontag === "austrailia") {
+			regiontag = "AUS";
+			regionCode = "au"
 		}
 	}
 
@@ -1124,11 +1131,12 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 				value={regiontag}
 				style={{ minWidth: 120, height: 35, borderRadius: 4 }}
 				onChange={(e) => {
-					if (userdata?.support) {
+					// if (userdata?.support) {
-						setSelectedRegion(e.target.value)
+					// 	setSelectedRegion(e.target.value)
-					} else {
+					// } else {
-						handleSendChangeRegionMail(e.target.value)
+					// 	handleSendChangeRegionMail(e.target.value)
-					}
+					// }
+					setSelectedRegion(e.target.value)
 				}}
 			>
 				{Object.keys(regionMapping).map((region, index) => {
@@ -1138,6 +1146,10 @@ const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userd
 						selectedOrganization.region = "europe-west2";
 					}
 
+					if (region === "AUS") {
+						region = "AUS (test)"
+					}
+
 					// Check if the current region matches the selected region
 					if (region === selectedOrganization.region) {
 						// If the region matches, set the MenuItem as selected

frontend/src/components/ParsedAction.jsx

@@ -2551,7 +2551,7 @@ const ParsedAction = (props) => {
 
 			{workflow.execution_variables !== undefined && workflow.execution_variables !== null && workflow.execution_variables.length > 0 ? (
 				<div style={{ marginTop: "20px" }}>
-					<Typography>Execution variable (optional)</Typography>
+					<Typography color="textSecondary">Runtime variable (optional)</Typography>
 					<Select
 						MenuProps={{
 							disableScrollLock: true,

frontend/src/components/ShuffleCodeEditor1.jsx

@@ -2476,7 +2476,8 @@ const CodeEditor = (props) => {
 						var fixedcodedata = localcodedata
 						const valid = validateJson(localcodedata, true)
 						if (valid.valid) {
-							fixedcodedata = JSON.stringify(valid.result, null, 2)
+							//fixedcodedata = JSON.stringify(valid.result, null, 2)
+							fixedcodedata = JSON.stringify(valid.result)
 						}
 
 						// console.log(codedata)

frontend/src/components/WorkflowValidationTimeline.jsx

@@ -398,8 +398,9 @@ const WorkflowValidationTimeline = (props) => {
 									nodecolor = green
 									branchcolor = green
 								} else {
-									nodecolor = grey 
+									// Green by default
-									branchcolor = grey 
+									nodecolor = green 
+									branchcolor = green 
 								}
 							} else {
 								nodecolor = green
@@ -561,8 +562,6 @@ const WorkflowValidationTimeline = (props) => {
 					nodecolor = green
 					branchcolor = green
 				} 
-				
-
 
 				var flex = index !== 0 && index !== relevantactions.length - 1 ? 1 : 3
 				if (nodecolor === green) {
@@ -609,6 +608,8 @@ const WorkflowValidationTimeline = (props) => {
 				const ballsize = 8
 				const topMargin = 20
 
+				console.log("CHIP: ", index, chipColor, chipBackground)
+
 				const chipStyle = {
 					height: 40, 
 					minWidth: 125, 
@@ -676,7 +677,6 @@ const WorkflowValidationTimeline = (props) => {
 									{founderror.length > 0 ? founderror : `App: ${appname} - Action: ${action.label}`} 
 								</Typography>
 							} placement="top">
-
 								<Chip label={`${appname}`} style={chipStyle}  icon={
 									<Avatar
 										variant="round"

frontend/src/theme.jsx

@@ -81,7 +81,7 @@ const theme = createTheme(adaptV4Theme({
 	singulBlackWhite: "/images/singul_black_white.png",
   },
   typography: {
-    fontFamily: `"Roboto", "Helvetica", "Arial", "inter", sans-serif`,
+    fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`,
     useNextVariants: true,
     fontWeightLight: 300,
     fontWeightRegular: 400,

frontend/src/views/AngularWorkflow.jsx

@@ -386,6 +386,8 @@ const useStyles = makeStyles({
 
 const splitter = "|~|";
 const svgSize = 24;
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 //const referenceUrl = "https://shuffler.io/functions/webhooks/"
 //const referenceUrl = window.location.origin+"/api/v1/hooks/"
 
@@ -1320,33 +1322,45 @@ const AngularWorkflow = (defaultprops) => {
 			const allTriggersInOne = useTriggers.pipelines.concat(useTriggers.schedules).concat(useTriggers.webhooks) 
 			for (let triggerkey in allTriggersInOne) {
 				const curtrigger = allTriggersInOne[triggerkey]
-				if (curtrigger.id === selectedTrigger.id) {
+				if (curtrigger.id !== selectedTrigger.id) {
-					if (curtrigger.status === undefined || curtrigger.status === null) {
+					continue
-						continue
-					}
-
-					if (curtrigger.running === undefined || curtrigger.running === null) {
-						continue
-					}
-
-					var changed = false
-					if (curtrigger.status !== selectedTrigger.status) {
-						changed = true
-						selectedTrigger.status = curtrigger.status
-					}
-
-					if (curtrigger.running !== selectedTrigger.running) {
-						changed = true
-						selectedTrigger.running = curtrigger.running
-					}
-
-					if (changed) {
-						//console.log("TRIGGER FIX: ", selectedTrigger)
-						setSelectedTrigger(selectedTrigger)
-					}
-
-					break
 				}
+
+				if (curtrigger.status === undefined || curtrigger.status === null) {
+					continue
+				}
+
+				var changed = false
+				if (selectedTrigger?.parameters === undefined || selectedTrigger?.parameters === null) {
+					changed = true
+
+					if (selectedTrigger?.trigger_type === "SCHEDULE" && curtrigger?.frequency !== undefined && curtrigger?.frequency !== null) {
+						selectedTrigger.parameters = [{
+							name: "cron",
+							value: curtrigger.frequency,
+						},
+						{
+							name: "execution_argument",
+							value: curtrigger.argument,
+						}]
+					}
+				}
+
+				if (curtrigger.status !== selectedTrigger.status) {
+					changed = true
+					selectedTrigger.status = curtrigger.status
+				}
+
+				if (curtrigger.running !== selectedTrigger.running) {
+					changed = true
+					selectedTrigger.running = curtrigger.running
+				}
+
+				if (changed) {
+					setSelectedTrigger(selectedTrigger)
+				}
+
+				break
 			}
 		}
 	}
@@ -2799,11 +2813,11 @@ const AngularWorkflow = (defaultprops) => {
 
       // FIXME: Check if any node contains $exec in a param
       // If they do, show a popup asking if they want to execute it without an execution argument, or to use a previous one
-      if (skip_popup !== true && executionArgument === undefined || executionArgument === null || executionArgument.length === 0)
+      if (skip_popup !== true && executionArgument === undefined || executionArgument === null || executionArgument?.length === 0)
 
-        if (workflow.actions !== undefined && workflow.actions !== null && workflow.actions.length > 0) {
+        if (workflow?.actions !== undefined && workflow?.actions !== null && workflow?.actions?.length > 0) {
           var foundmissing = false
-          for (let actionkey in workflow.actions) {
+          for (let actionkey in workflow?.actions) {
             if (workflow.actions[actionkey].parameters === undefined || workflow.actions[actionkey].parameters === null || workflow.actions[actionkey].parameters.length === 0) {
               continue
             }
@@ -12236,7 +12250,9 @@ const AngularWorkflow = (defaultprops) => {
     overflowAnchor: "none",
     minWidth: minSize,
     width: isMobile ? "100%" : minSize,
-    zoom: 0.9,
+    zoom: isSafari ? undefined : 0.9,
+    transform: isSafari ? "scale(0.9)" : undefined,
+    transformOrigin: isSafari ? "top right" : undefined,
   };
 
   const setTriggerFolderWrapperMulti = (event) => {
@@ -18011,10 +18027,10 @@ const AngularWorkflow = (defaultprops) => {
   const topBarStyle = {
     position: "absolute",
 
-    top: isMobile ? 30 : 25,
+    top: isMobile ? 30 : isSafari ? 15 : 25,
     transform: isMobile ? "translateX(20px)" : `translateX(${leftBarSize}px)`,
     transition: "all 0.3s ease",
-    zoom: 0.9,
+    zoom: isSafari ? undefined : 0.9,
   }
 
   const TopCytoscapeBar = (props) => {
@@ -21834,13 +21850,23 @@ const AngularWorkflow = (defaultprops) => {
                 const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
                 const chosenNodeId = new URLSearchParams(cursearch).get("node");
                 const highlightNode = chosenNodeId !== null && chosenNodeId !== undefined && chosenNodeId !== "" && chosenNodeId === data.action.id
+				var relevant_errors = []
+				if (data?.action?.parameters !== undefined && data?.action?.parameters !== null && data?.action?.parameters.length > 0) {
+					for (var i = 0; i < data.action.parameters.length; i++) {
+						// Specific error patterns in params
+						const param = data.action.parameters[i]
+						if (param?.name?.endsWith("_error") && (param?.name?.startsWith("shuffle_") || param?.name?.startsWith("liquid_"))) {
+							relevant_errors.push(param)
+						}
+					}
+				}
 
                 return (
                   <div
                     key={index}
                     style={{
                       marginBottom: 20,
-                      border: highlightNode ? "2px solid red"
+                      border: highlightNode ? `2px solid ${red}`
                         :
                         data.action.sub_action === true
                           ? "1px solid rgba(255,255,255,0.3)"
@@ -21913,11 +21939,17 @@ const AngularWorkflow = (defaultprops) => {
                         >
                           <Tooltip
                             color="primary"
-                            title="Expand result window"
+                            title={
+								<Typography variant="body1">
+									Expand result window. Errors: {relevant_errors.length}
+								</Typography>
+							}
                             placement="top"
                             style={{ zIndex: 50000 }}
                           >
-                            <ArrowLeftIcon style={{ color: "white" }} />
+                            <ArrowLeftIcon style={{ 
+								color: relevant_errors.length > 0 ? yellow : "rgba(255,255,255,0.7)",
+							}} />
                           </Tooltip>
                         </IconButton>
                         {actionimg}
@@ -22087,6 +22119,11 @@ const AngularWorkflow = (defaultprops) => {
     const checked = validateJson(data.value.trim())
 
     if (data.name === "shuffle_action_logs" && data.value !== undefined && data.value !== null && data.value.length > 0 && data.value.includes("add env SHUFFLE_LOGS_DISABLED")) {
+
+		if (isCloud) {
+			return null
+		}
+
 		  return (
 			<div style={{ maxWidth: 600, marginTop: 75, overflowX: "hidden", }}>
 			  <Typography

frontend/src/views/Docs.jsx

@@ -166,12 +166,13 @@ export const OuterLink = (props) => {
 
 export const Img = (props) => {
 	// Find parent container and check width
-    const isArticlePage = window.location.pathname.includes("/articles/");
+    const isArticlePage = window.location.pathname.includes("/articles/")
+    const isFormPage = window.location.pathname.includes("/forms/")
 	var height = "auto" 
-	var width = isArticlePage ? 1000 : 750
+	var width = isArticlePage ? 1000 : isFormPage ? 400: 750
 
     const docsImageStyle = {
-        border: "1px solid rgba(255,255,255,0.3)", 
+		border: isFormPage ? null : "1px solid rgba(255,255,255,0.3)", 
         borderRadius: theme.palette?.borderRadius, 
         width: width, 
         maxWidth: width, 

frontend/src/views/RunWorkflow.jsx

@@ -1197,6 +1197,7 @@ const RunWorkflow = (defaultprops) => {
       				<form onSubmit={(e) => {onSubmit(e)}} style={{margin: "25px 0px 15px 0px",}}>
 						{workflowQuestion !== "" || (workflow.form_control.input_markdown !== undefined && workflow.form_control.input_markdown !== null && workflow.form_control.input_markdown.length > 0) ? null : 
 						<div>
+							{/*
 							<img
 								alt={workflow.name}
 								src={image}
@@ -1211,6 +1212,7 @@ const RunWorkflow = (defaultprops) => {
 									left: 200,
 								}}
 							/>
+							*/}
 
 							<Typography variant="h6" style={{marginBottom: 10, marginTop: 50, textAlign: "center", }}>
 								{organization}

frontend/src/views/Workflows2.jsx

@@ -724,6 +724,8 @@ const Workflows2 = (props) => {
 
     const [apps, setApps] = React.useState([]);
 
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
     document.title = "Shuffle - Workflows";
 
     useEffect(() => {
@@ -2327,7 +2329,7 @@ const Workflows2 = (props) => {
                     key={"explore forms"}
                 >
                     <EditNoteIcon style={{ marginLeft: 0, marginRight: 8 }} />
-                    {"Create Form"}
+                    {"Edit Form"}
                 </MenuItem>
 
                 <Divider />
@@ -4289,7 +4291,7 @@ const Workflows2 = (props) => {
                         display: "flex",
                         flexDirection: "column",
                         width: "100%",
-                        maxWidth: "70%",
+                        maxWidth: isSafari ? "100%" : "70%",
                         margin: "auto",
                     }}>
                         <Typography variant="h4" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none', fontFamily: theme?.typography?.fontFamily }}>
@@ -5061,8 +5063,9 @@ const Workflows2 = (props) => {
             </iframe>
         </Dialog>
 
+    //isLoaded && isLoggedIn && workflowDone ? (
     const loadedCheck =
-        isLoaded && isLoggedIn && workflowDone ? (
+        workflowDone ? (
             <div>
                 {/*
 				<ShepherdTour steps={newSteps} tourOptions={tourOptions}>
@@ -5129,8 +5132,14 @@ const Workflows2 = (props) => {
             </div>
         );
 
+    const safariStyle = {
+        transform: 'scale(0.7)',
+        transformOrigin: 'top',
+        width: '100%',
+        height: '100%',
+    }
     // Maybe use gridview or something, idk
-    return <div style={{zoom: 0.7, }}>{loadedCheck}</div>;
+    return <div style={isSafari ? safariStyle : {zoom: 0.7, minHeight: "80vh",}}>{loadedCheck}</div>;
 };