Biiig changes for 2.0 :))

frontend/src/components/AppFramework.jsx

@@ -1972,14 +1972,14 @@ const AppFramework = (props) => {
 						{data.name}
 					</Typography>
 					<div style={{display: "flex", width: 200, margin: "auto", marginTop: 15, }}>
-						<div style={{backgroundColor: theme.palette.inputColor, height: 75, width: 75, borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.7)", marginRight: 15, position: "relative",}}>
+						<div style={{backgroundColor: theme.palette.inputColor, height: 75, width: 75, borderRadius: theme.palette?.borderRadius, border: "1px solid rgba(255,255,255,0.7)", marginRight: 15, position: "relative",}}>
 							{parsedLeftImage}
 							{parsedLeftText}
 						</div>
-						<div style={{backgroundColor: theme.palette.inputColor, maxHeight: 30, maxWidth: 30, height: 30, width: 30, borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.7)", marginTop: 22, padding: "10px 0px 0px 9px",}}>
+						<div style={{backgroundColor: theme.palette.inputColor, maxHeight: 30, maxWidth: 30, height: 30, width: 30, borderRadius: theme.palette?.borderRadius, border: "1px solid rgba(255,255,255,0.7)", marginTop: 22, padding: "10px 0px 0px 9px",}}>
 							{svgIcon}
 						</div>
-						<div style={{backgroundColor: theme.palette.inputColor, height: 75, width: 75, borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0.7)", marginLeft: 15, position: "relative",}}>
+						<div style={{backgroundColor: theme.palette.inputColor, height: 75, width: 75, borderRadius: theme.palette?.borderRadius, border: "1px solid rgba(255,255,255,0.7)", marginLeft: 15, position: "relative",}}>
 							{parsedRightImage}
 							{parsedRightText}
 						</div>

frontend/src/components/Appsearch.jsx

@@ -27,9 +27,6 @@ const Appsearch = props => {
     const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
-	//const theme = useTheme();
-	//const [apps, setApps] = React.useState([]);
-	//const [filteredApps, setFilteredApps] = React.useState([]);
 	const [formMail, setFormMail] = React.useState("");
 	const [message, setMessage] = React.useState("");
 	const [formMessage, setFormMessage] = React.useState("");

frontend/src/components/AuthenticationItem.jsx

@@ -152,7 +152,7 @@ const AuthenticationItem = (props) => {
 						src={data.app.large_image}
 						style={{
 							maxWidth: 50,
-							borderRadius: theme.palette.borderRadius,
+							borderRadius: theme.palette?.borderRadius,
 						}}
 					/>
 					style={{ minWidth: 75, maxWidth: 75 }}

frontend/src/components/AuthenticationNormal.jsx

@@ -222,7 +222,7 @@ const AuthenticationData = (props) => {
 				<TextField
 					style={{
 						backgroundColor: theme.palette.inputColor,
-						borderRadius: theme.palette.borderRadius,
+						borderRadius: theme.palette?.borderRadius,
 					}}
 					InputProps={{
 						style: {
@@ -304,7 +304,7 @@ const AuthenticationData = (props) => {
 								<TextField
 									style={{
 										backgroundColor: theme.palette.inputColor,
-										borderRadius: theme.palette.borderRadius,
+										borderRadius: theme.palette?.borderRadius,
 									}}
 									InputProps={{
 										style: {

frontend/src/components/AuthenticationWindow.jsx

@@ -294,7 +294,7 @@ const AuthenticationData = (props) => {
 					<TextField
 						style={{
 							backgroundColor: theme.palette.inputColor,
-							borderRadius: theme.palette.borderRadius,
+							borderRadius: theme.palette?.borderRadius,
 						}}
 						InputProps={{
 							style: {
@@ -328,7 +328,7 @@ const AuthenticationData = (props) => {
 
 	const authenticationButtons = <span>
 		<Button
-			style={{ borderRadius: theme.palette.borderRadius, marginTop: authFieldsOnly ? 20 : 0 }}
+			style={{ borderRadius: theme.palette?.borderRadius, marginTop: authFieldsOnly ? 20 : 0 }}
 			onClick={() => {
 				setAuthenticationOptions(authenticationOption);
 				handleSubmitCheck();
@@ -437,7 +437,7 @@ const AuthenticationData = (props) => {
 				<TextField
 					style={{
 						backgroundColor: theme.palette.inputColor,
-						borderRadius: theme.palette.borderRadius,
+						borderRadius: theme.palette?.borderRadius,
 					}}
 					InputProps={{
 						style: {

frontend/src/components/Billing.jsx

@@ -179,7 +179,7 @@ const Billing = (props) => {
 		height: 480,
 		// width: "100%",
 		backgroundColor: theme.palette.platformColor,
-		borderRadius: theme.palette.borderRadius * 2,
+		borderRadius: theme.palette?.borderRadius * 2,
 		border: "1px solid rgba(255,255,255,0.3)",
 		marginRight: 10,
 		marginTop: 15,
@@ -583,7 +583,7 @@ const Billing = (props) => {
 								margin: "auto",
 								width: 100,
 								backgroundColor: "white",
-								borderRadius: theme.palette.borderRadius,
+								borderRadius: theme.palette?.borderRadius,
 							}}
 						/>
 						: null}
@@ -653,7 +653,7 @@ const Billing = (props) => {
 												value={feature.split("Worker License: ")[1]}
 												style={{
 													backgroundColor: theme.palette.inputColor,
-													borderRadius: theme.palette.borderRadius,
+													borderRadius: theme.palette?.borderRadius,
 												}}
 												id={fieldId}
 												onClick={() => { }}
@@ -1041,7 +1041,7 @@ const Billing = (props) => {
 				width: 340,
 				height: 480,
 				backgroundColor: hovered ? "#232427" : theme.palette.platformColor,
-				borderRadius: theme.palette.borderRadius * 2,
+				borderRadius: theme.palette?.borderRadius * 2,
 				border: "1px solid rgba(255,255,255,0.3)",
 				marginRight: 10,
 				marginTop: 15,
@@ -1315,7 +1315,7 @@ const Billing = (props) => {
 					// maxWidth: 400,
 					width: 340,
 					backgroundColor: hovered ? "#232427" : theme.palette.platformColor,
-					borderRadius: theme.palette.borderRadius * 2,
+					borderRadius: theme.palette?.borderRadius * 2,
 					border: "1px solid rgba(255,255,255,0.3)",
 					marginRight: 10,
 					marginTop: 15,

frontend/src/components/BillingStats.jsx

@@ -43,7 +43,7 @@ const LineChartWrapper = ({keys, inputname, height, width}) => {
 	const inputdata = keys.data === undefined ? keys : keys.data
 	
 	return (
-		<div style={{color: "white", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, padding: 30, marginTop: 15, backgroundColor: theme.palette.platformColor, overflow: "hidden", }}>
+		<div style={{color: "white", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, padding: 30, marginTop: 15, backgroundColor: theme.palette.platformColor, overflow: "hidden", }}>
 			<Typography variant="h6" style={{marginBotton: 15, }}>
 				{inputname}
 			</Typography>

frontend/src/components/ConfigureWorkflow.jsx

@@ -147,12 +147,12 @@ const ConfigureWorkflow = (props) => {
   }
 
   if (apps === undefined || apps === null) {
-	  console.log("Apps is undefined or null: ", apps)
+	  //console.log("Apps is undefined or null: ", apps)
       return null
   }
 
   if (appAuthentication === undefined || appAuthentication === null) {
-	  console.log("App authentication is undefined or null: ", appAuthentication)
+	  //console.log("App authentication is undefined or null: ", appAuthentication)
       return null
   }
 
@@ -427,7 +427,6 @@ const ConfigureWorkflow = (props) => {
 		  trigger.index = key;
 
 		  if (trigger.trigger_type === "WEBHOOK") {
-		  	console.log("Found webhook: ", trigger)
 
 		  	if (trigger.app_association !== undefined && trigger.app_association.name !== null && trigger.app_association.name !== "") {
 		  		const findapp = trigger.app_association.name.toLowerCase()
@@ -599,7 +598,7 @@ const ConfigureWorkflow = (props) => {
             <TextField
               style={{
                 backgroundColor: theme.palette.inputColor,
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
               }}
               InputProps={{
                 endAdornment: <InputAdornment position="end"></InputAdornment>,
@@ -800,7 +799,7 @@ 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: "pointer", 
 				}}
 				id="app-config"
 			>
@@ -997,7 +996,7 @@ const ConfigureWorkflow = (props) => {
 				justifyContent: "flex-start",
 				backgroundColor: action.auth_done ? theme.palette.surfaceColor : theme.palette.inputColor,
 				color: action.auth_done ? "#686a6c" : "#ffffff",
-				borderRadius: theme.palette.borderRadius,
+				borderRadius: theme.palette?.borderRadius,
 				minWidth: 350, 
 				maxHeight: 50,
 				overflow: "hidden",
@@ -1037,7 +1036,7 @@ const ConfigureWorkflow = (props) => {
 		>
 			<img
 				alt={action.app_name}
-				style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette.borderRadius, }}
+				style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
 				src={action.large_image}
 			/>
 			<Typography style={{ margin: 0, marginLeft: 10 }} variant="body1">
@@ -1057,7 +1056,7 @@ const ConfigureWorkflow = (props) => {
 							justifyContent: "flex-start",
 							backgroundColor: action.auth_done ? theme.palette.surfaceColor : theme.palette.inputColor,
 							color: action.auth_done ? "#686a6c" : "#ffffff",
-							borderRadius: theme.palette.borderRadius,
+							borderRadius: theme.palette?.borderRadius,
 							minWidth: 350, 
 							maxHeight: 50,
 							overflow: "hidden",
@@ -1088,7 +1087,7 @@ const ConfigureWorkflow = (props) => {
           >
 						<img
 							alt={action.app_name}
-							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette.borderRadius, }}
+							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
 							src={action.large_image}
 						/>
 						<Typography style={{ margin: 0, marginLeft: 10 }} variant="body1">
@@ -1108,7 +1107,7 @@ const ConfigureWorkflow = (props) => {
 								justifyContent: "flex-start",
 								backgroundColor: action.auth_done ? theme.palette.surfaceColor : theme.palette.inputColor,
 								color: action.auth_done ? "#686a6c" : "#ffffff",
-								borderRadius: theme.palette.borderRadius,
+								borderRadius: theme.palette?.borderRadius,
 								minWidth: 350, 
 								maxHeight: 50,
 								overflow: "hidden",
@@ -1123,7 +1122,7 @@ const ConfigureWorkflow = (props) => {
 					>
 						<img
 							alt={action.app_name}
-							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette.borderRadius, }}
+							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
 							src={action.large_image}
 						/>
 						<Typography style={{ margin: 0, marginLeft: 10 }} variant="body1">
@@ -1275,7 +1274,7 @@ const ConfigureWorkflow = (props) => {
 		const [finishCount, setFinishCount] = useState(0)
 
 		return (
-			<div style={{backgroundColor: hovered ? theme.palette.inputColor : "inherit", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, cursor: "pointer", }} 
+			<div style={{backgroundColor: hovered ? theme.palette.inputColor : "inherit", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, cursor: "pointer", }} 
 			>
 				<div style={{display: "flex", marginLeft: 15, marginTop: 15, marginBottom: 15, }} 
 					onClick={() => {

frontend/src/components/Detection.jsx

@@ -100,7 +100,7 @@ const Detection = (props)  => {
 	  	  width: "100%", 
 		  padding: 50, 
 	  	  backgroundColor: theme.palette.backgroundColor,
-		  borderRadius: theme.palette.borderRadius,
+		  borderRadius: theme.palette?.borderRadius,
 	    }}
 	  >
         <Box

frontend/src/components/DetectionExplorer.jsx

@@ -10,10 +10,12 @@ import {
   Paper, 
   Divider,
   IconButton,
+  Tooltip,
 } from "@mui/material";
 
 import {
 	OpenInNew as OpenInNewIcon,
+  	FmdGood as FmdGoodIcon,
 } from "@mui/icons-material"
 
 import { toast } from "react-toastify";
@@ -68,6 +70,7 @@ const DetectionExplorer = (props)  => {
   const [detectionWorkflowId, setDetectionWorkflowId] = useState("")
   const [isDetectionValid, setIsDetectionValid] = useState(false)
   const [availableDetection, setAvailableDetection] = React.useState([]);
+  const [environmentList, setEnvironmentList] = React.useState([])
 
   const loadUsecases = () => {
 	  const url = `${globalUrl}/api/v1/workflows/usecases`
@@ -146,7 +149,7 @@ const DetectionExplorer = (props)  => {
 	}
 
     setLoading(true);
-    const url = `${globalUrl}/api/v1/detections/${detectionInfo?.category}/connect`;
+    const url = `${globalUrl}/api/v1/detections/${detectionInfo?.category}/connect`
 
     fetch(url, {
       method: "GET",
@@ -177,7 +180,11 @@ const DetectionExplorer = (props)  => {
 		  if (responseJson.reason !== undefined && responseJson.reason !== null) {
 			  toast(responseJson.reason)
 		  } else {
-		  	toast(`Failed to connect to ${detectionInfo?.category}`);
+			  if (responseJson.workflow_id === "" && responseJson.workflow_valid === false) {
+		  	  	toast.info(`Sent job to generate a Detection Workflow and enable ${detectionInfo?.category}. Please wait a minute and reload this UI.`);
+			  } else {
+		  	  	toast.error(`Failed to connect to ${detectionInfo?.category}`);
+			  }
 		  }
 
 		  if (responseJson.action !== undefined && responseJson.actio !== null && responseJson.action.length > 0) {
@@ -193,16 +200,52 @@ const DetectionExplorer = (props)  => {
 	.catch((error) => {
 	  setLoading(false);
 	  console.log(`Error in connecting to ${detectionInfo?.category}: `, error);
-	  toast(`An error occurred while connecting to ${detectionInfo?.category}`);
+	  toast.error(`An error occurred while connecting to ${detectionInfo?.category}`);
 	});
   }
 
+  const loadEnvironments = () => {
+	  const url = `${globalUrl}/api/v1/getenvironments`
+	  fetch(url, {
+		method: "GET",
+		credentials: "include",
+		headers: {
+		  "Content-Type": "application/json",
+		},
+	  })
+	  .then((response) => {
+		  return response.json()
+	  })
+	  .then((responseJson) => {
+		  if (responseJson.success === false) {
+			  return
+		  }
+
+		  if (responseJson.length == 0) {
+			  return
+		  }
+
+		  setEnvironmentList(responseJson)
+	  })
+	  .catch((error) => {
+		console.log(`Error in loading environments: `, error);
+	  })
+  }
 
   useEffect(() => {
   	loadUsecases() 
+	loadEnvironments()
   }, [])
 
   useEffect(() => {
+	  if (detectionInfo === undefined || detectionInfo === null) {
+		  return
+	  }
+
+	  if (detectionInfo.category === undefined || detectionInfo.category === null || detectionInfo.category === "") {
+		  return
+	  }
+
 	  handleConnectClick()
   }, [detectionInfo])
 
@@ -211,6 +254,8 @@ const DetectionExplorer = (props)  => {
     rule.description.toLowerCase().includes(searchQuery.toLowerCase())
   )
 
+  const lakeNodes = environmentList !== undefined && environmentList !== null ? environmentList.filter((env) => env?.data_lake?.enabled === true).length : 0
+
   return (
     <Container>
       <Paper
@@ -219,7 +264,7 @@ const DetectionExplorer = (props)  => {
 	  	  width: "100%", 
 		  padding: 50, 
 	  	  backgroundColor: theme.palette.backgroundColor,
-		  borderRadius: theme.palette.borderRadius,
+		  borderRadius: theme.palette?.borderRadius,
 	    }}
 	  >
         <Box
@@ -234,6 +279,7 @@ const DetectionExplorer = (props)  => {
 	  		{detectionInfo?.title} {filteredRules === undefined || filteredRules === null ? null : `(${filteredRules?.length} rules)`}
           </Typography>
 
+	  	  <div style={{display: "flex", }}>
 		  {workflow !== undefined && workflow !== null && workflow.id !== undefined && workflow.id !== null && workflow.id.length > 0 ?
 			  <div style={{display: "flex", }}>
 			  	  <div style={{minWidth: 400, maxWidth: 400, }}>
@@ -282,6 +328,16 @@ const DetectionExplorer = (props)  => {
 					isDetectionValid ? `Connected to ${detectionInfo?.category}` : `Fix ${detectionInfo?.category} connection`}
 			  </Button>
 		  }
+
+	      {detectionInfo?.category === "SIGMA" || detectionInfo?.category === "SIEM" ?
+			  <Tooltip title={`You have ${lakeNodes} available Data Lake node(s)`}>
+				<a href="/admin?tab=environments" style={{textDecoration: "none", color: "inherit", }} target="_blank" rel="noreferrer">
+                	<FmdGoodIcon style={{marginLeft: 15, marginTop: 5, color: lakeNodes > 0 ? green : red}} />
+				</a>
+			  </Tooltip>
+		  : null}
+	  	  </div>
+	  	
         </Box>
         {filteredRules?.length > 0 ?
         <Box

frontend/src/components/DetectionRuleCard.jsx

@@ -98,7 +98,7 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, i
 
   return (
     <Card style={{
-		borderRadius: theme.palette.borderRadius,
+		borderRadius: theme.palette?.borderRadius,
 		minHeight: 100, 
 		marginBottom: 10, 
 		paddingBottom: 0, 
@@ -145,7 +145,7 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, i
 					backgroundColor: theme.palette.inputColor,
 					color: "white",
 					height: 40,
-					borderRadius: theme.palette.borderRadius,
+					borderRadius: theme.palette?.borderRadius,
 				  }}
 				>
 				  <MenuItem
@@ -197,7 +197,7 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, i
 			overflow: 'visible', 
 			zIndex: 10,
 			//border: "1px solid rgba(255,255,255,0.3)", 
-			borderRadius: theme.palette.borderRadius,
+			borderRadius: theme.palette?.borderRadius,
 			marginTop: 5, 
 
 			minHeight: 40,

frontend/src/components/EditWorkflow.jsx

@@ -43,6 +43,7 @@ import {
 	RadioGroup,
 	FormControl,
 	FormLabel,
+	Slider,
 
 } from "@mui/material";
 
@@ -65,7 +66,7 @@ import {
 } from "@mui/icons-material";
 
 const EditWorkflow = (props) => {
-	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, saveWorkflow, expanded, scrollTo, setRealtimeMarkdown, } = props
+	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, saveWorkflow, expanded, scrollTo, setRealtimeMarkdown, boxWidth, setBoxWidth, } = props
 
   const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
 
@@ -82,12 +83,19 @@ const EditWorkflow = (props) => {
 	const [dueDate, setDueDate] = React.useState(workflow.due_date !== undefined && workflow.due_date !== null && workflow.due_date !== 0 ? dayjs(workflow.due_date*1000) : dayjs().subtract(1, 'day'))
 
     const [inputQuestions, setInputQuestions] = React.useState(workflow.input_questions !== undefined && workflow.input_questions !== null ? JSON.parse(JSON.stringify(workflow.input_questions)) : []) 
-	const [inputMarkdown, setInputMarkdown] = React.useState(workflow.input_markdown !== undefined && workflow.input_markdown !== null ? workflow.input_markdown : "")
+	const [inputMarkdown, setInputMarkdown] = React.useState(workflow?.form_control?.input_markdown !== undefined && workflow?.form_control?.input_markdown !== null ? workflow?.form_control?.input_markdown : "")
 	const [scrollDone, setScrollDone] = React.useState(false)
-	const [selectedYieldActions, setSelectedYieldActions] = React.useState(workflow.output_yields !== undefined && workflow.output_yields !== null ? JSON.parse(JSON.stringify(workflow.output_yields)) : [])
+	const [selectedYieldActions, setSelectedYieldActions] = React.useState(workflow?.form_control?.output_yields !== undefined && workflow?.form_control?.output_yields !== null ? JSON.parse(JSON.stringify(workflow?.form_control?.output_yields)) : [])
+	const [formWidth, setFormWidth] = React.useState(boxWidth === undefined || boxWidth === null ? 500 : boxWidth)
 
   const classes = useStyles();
 
+	useEffect(() => {
+		if (setBoxWidth !== undefined && boxWidth !== formWidth) {
+			setBoxWidth(formWidth)
+		}
+	}, [formWidth])
+
   if (scrollTo !== undefined && scrollTo !== null && scrollTo.length > 0 && scrollDone === false) {
 	  setTimeout(() => {
 		  const foundScroll = document.getElementById(scrollTo)
@@ -308,9 +316,14 @@ const EditWorkflow = (props) => {
 				}
 
 				innerWorkflow.input_questions = validfields
-				innerWorkflow.input_markdown = inputMarkdown
 
-				innerWorkflow.output_yields = selectedYieldActions
+				if (innerWorkflow.form_control === undefined || innerWorkflow.form_control === null) {
+					innerWorkflow.form_control = {}
+				}
+
+				innerWorkflow.form_control.input_markdown = inputMarkdown
+				innerWorkflow.form_control.output_yields = selectedYieldActions
+				innerWorkflow.form_control.form_width = formWidth
 
 				innerWorkflow.name = name 
 				innerWorkflow.description = description 
@@ -1049,13 +1062,34 @@ const EditWorkflow = (props) => {
 									}
 
 									setInputMarkdown(e.target.value)
-									workflow.input_markdown = e.target.value
+									workflow.form_control.input_markdown = e.target.value
 									setWorkflow(workflow)
 									setUpdate(Math.random())
 								}}
 							/>
 						</div>
 
+						<div id="form_size">
+							<Typography variant="h6" style={{marginTop: 50, }}>
+								Form Size
+							</Typography>
+							<Typography variant="body2" color="textSecondary" style={{marginBottom: 20, }}>
+								Control the width of the form. It will grow vertically as needed.
+							</Typography>
+							<Slider
+								defaultValue={formWidth}
+								aria-labelledby="discrete-slider"
+								valueLabelDisplay="auto"
+								step={10}
+								marks
+								min={300}
+								max={1000}
+								onChange={(e, value) => {
+									setFormWidth(value)
+								}}
+							/>
+						</div>
+
 						<div id="output_control">
 							<Typography variant="h6" style={{marginTop: 50, }}>
 								Output Control ({selectedYieldActions.length === 0 ? "No Returns" : selectedYieldActions.length === 1 ? "Returning 1 node" : `Returning ${selectedYieldActions.length} nodes`})
@@ -1117,7 +1151,7 @@ const EditWorkflow = (props) => {
 
 			<Tooltip color="primary" title={"Add more details"} placement="top">
 				<Button
-					style={{ margin: "auto", marginTop: 50, textAlign: "center",  textTransform: "none", }}
+					style={{ margin: "auto", marginTop: 50, marginBottom: 100, textAlign: "center",  textTransform: "none", }}
 					variant="outlined"
 					disabled={newWorkflow === true}
 					color="secondary"

frontend/src/components/ExploreWorkflow.jsx

@@ -227,7 +227,7 @@ const ExploreWorkflow = (props) => {
                                 <ArrowBackIosNewIcon />
                             </IconButton>
                         </Tooltip>
-                        <div style={{ minWidth: 554, maxWidth: 554, borderRadius: theme.palette.borderRadius, }}>
+                        <div style={{ minWidth: 554, maxWidth: 554, borderRadius: theme.palette?.borderRadius, }}>
                             <AliceCarousel
                                 style={{ backgroundColor: theme.palette.surfaceColor, minHeight: 750, maxHeight: 750, }}
                                 items={formattedCarousel}
@@ -320,7 +320,7 @@ const ExploreWorkflow = (props) => {
 
             <div style={{ marginTop: 0, }}>
                 <div className="thumbs" style={{ display: "flex" }}>
-                    <div style={{ minWidth: isMobile ? 300 : 554, maxWidth: isMobile ? 300 : 554, borderRadius: theme.palette.borderRadius, }}>
+                    <div style={{ minWidth: isMobile ? 300 : 554, maxWidth: isMobile ? 300 : 554, borderRadius: theme.palette?.borderRadius, }}>
                         <Grid item xs={11} style={{}}>
 							{suggestedUsecases.length === 0 && usecasesSet ? 
 								<Typography variant="h6" style={{ marginTop: 30, marginBottom: 50, }} color="rgba(158, 158, 158, 1)">

frontend/src/components/FixWorkflowValidationErrors.jsx

@@ -325,7 +325,7 @@ const FixWorkflowValidationErrors = (props) => {
 						width: 25, 
 						height: 25, 
 						marginRight: 10, 
-						borderRadius: theme.palette.borderRadius, 
+						borderRadius: theme.palette?.borderRadius, 
 						border: `1px solid ${theme.palette.borderColor}`,
 					}} 
 				/>
@@ -467,7 +467,7 @@ const FixWorkflowValidationErrors = (props) => {
 					backgroundColor: theme.palette.inputColor,
 					color: "white",
 					height: 40,
-					borderRadius: theme.palette.borderRadius,
+					borderRadius: theme.palette?.borderRadius,
 				  }}
 				>
 				  <MenuItem
@@ -559,7 +559,7 @@ const FixWorkflowValidationErrors = (props) => {
 						justifyContent: !validating ? "flex-start" : "center",
 						textTransform: "none",
 						fontSize: 18,
-						borderRadius: theme.palette.borderRadius,
+						borderRadius: theme.palette?.borderRadius,
 					}}
 					onClick={() => {
 						toast("Validating app")

frontend/src/components/Header.jsx

@@ -50,8 +50,6 @@ const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
 const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
-	//const theme = useTheme();
-	//const alert = useAlert()
 
 
 	const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
@@ -829,7 +827,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 										},
 									}}
 									style={{
-										borderRadius: theme.palette.borderRadius, 
+										borderRadius: theme.palette?.borderRadius, 
 										backgroundColor: theme.palette.surfaceColor, 
 										marginRight: 15, 
 										color: "white", 
@@ -904,7 +902,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 
 												<Tooltip color="primary" title={parsedTitle} placement="left">
 													<div style={{display: "flex"}}>
-														{isCloud?<Typography variant="body2" style={{borderRadius: theme.palette.borderRadius, float: "left", margin: "0 0 0 0", marginRight: 25, }}>{regiontag}</Typography>:null} {image} <span style={{marginLeft: 8}}>{data.name}</span> 
+														{isCloud?<Typography variant="body2" style={{borderRadius: theme.palette?.borderRadius, float: "left", margin: "0 0 0 0", marginRight: 25, }}>{regiontag}</Typography>:null} {image} <span style={{marginLeft: 8}}>{data.name}</span> 
 													</div>
 												</Tooltip>
 											</MenuItem>
@@ -935,7 +933,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 							null
 							:
 							<Tooltip title={`Amount of executions left: ${userdata.app_execution_usage} / ${userdata.app_execution_limit}. When the limit is reached, you can still use Shuffle normally, but your Workflow triggers may stop working. Reach out to support@shuffler.io to extend this limit.`}>
-								<div style={{maxHeight: 30, minHeight: 30, padding: 8, textAlign: "center", cursor: "pointer", borderRadius: theme.palette.borderRadius, marginRight: 10, marginTop: 12, backgroundColor: theme.palette.surfaceColor, minWidth: 60, maxWidth: 60, border: userdata.app_execution_usage/userdata.app_execution_limit >= 0.9 ? "#f86a3e" : null, }} onClick={() => {
+								<div style={{maxHeight: 30, minHeight: 30, padding: 8, textAlign: "center", cursor: "pointer", borderRadius: theme.palette?.borderRadius, marginRight: 10, marginTop: 12, backgroundColor: theme.palette.surfaceColor, minWidth: 60, maxWidth: 60, border: userdata.app_execution_usage/userdata.app_execution_limit >= 0.9 ? "#f86a3e" : null, }} onClick={() => {
 										console.log(userdata.appe_execution_usage/userdata.app_execution_limit)
 										if (window.drift !== undefined) {
 											window.drift.api.startInteraction({ interactionId: 326905 })

frontend/src/components/LicencePopup.jsx

@@ -87,7 +87,7 @@ const LicencePopup = (props) => {
 
     const paperStyle = {
         padding: 20,
-        borderRadius: theme.palette.borderRadius,
+        borderRadius: theme.palette?.borderRadius,
         height: "100%",
     }
 
@@ -193,7 +193,7 @@ const LicencePopup = (props) => {
 
         return (
             <Tooltip
-                style={{ borderRadius: theme.palette.borderRadius, }}
+                style={{ borderRadius: theme.palette?.borderRadius, }}
                 placement="bottom"
             >
                 <div style={{}}>
@@ -319,7 +319,7 @@ const LicencePopup = (props) => {
                                         margin: "auto",
                                         width: 100,
                                         backgroundColor: "white",
-                                        // borderRadius: theme.palette.borderRadius,
+                                        // borderRadius: theme.palette?.borderRadius,
                                     }}
                                 />
                                 : null}
@@ -389,7 +389,7 @@ const LicencePopup = (props) => {
                                                         value={feature.split("Worker License: ")[1]}
                                                         style={{
                                                             // backgroundColor: theme.palette.inputColor,
-                                                            // borderRadius: theme.palette.borderRadius,
+                                                            // borderRadius: theme.palette?.borderRadius,
                                                         }}
                                                         id={fieldId}
                                                         onClick={() => { }}
@@ -823,7 +823,7 @@ const LicencePopup = (props) => {
                         {errorMessage.length > 0 ? <Typography variant="h4">Error: {errorMessage}</Typography> : null}
                         <Card style={{
                             padding: 20,
-                            borderRadius: theme.palette.borderRadius,
+                            borderRadius: theme.palette?.borderRadius,
                             border: "1px solid #f85a3e",
                         }}>
                             <div>

frontend/src/components/NewHeader.jsx

@@ -65,7 +65,6 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   dropdownMenu: {
-    marginTop: theme.spacing(1),
     borderRadius: "12px !important",
     zIndex: 10,
     "& .MuiPaper-root": {
@@ -88,7 +87,6 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   dropdownMenuItem: {
-    padding: theme.spacing(2, 3),
     fontSize: "16px",
     fontWeight: 400,
     color: "#fff",
@@ -503,7 +501,7 @@ const Header = (props) => {
           minHeight: 370,
           padding: 20,
           backgroundColor: "rgba(0, 0, 0, 1)",
-          borderRadius: theme.palette.borderRadius,
+          borderRadius: theme.palette?.borderRadius,
         },
       }}
     >
@@ -928,7 +926,7 @@ const Header = (props) => {
                     },
                   }}
                   style={{
-                    borderRadius: theme.palette.borderRadius,
+                    borderRadius: theme.palette?.borderRadius,
                     backgroundColor: theme.palette.surfaceColor,
                     marginRight: 15,
                     color: "white",
@@ -1056,7 +1054,7 @@ const Header = (props) => {
                               <Typography
                                 variant="body2"
                                 style={{
-                                  borderRadius: theme.palette.borderRadius,
+                                  borderRadius: theme.palette?.borderRadius,
                                   float: "left",
                                   margin: "0 0 0 0",
                                   marginRight: 25,
@@ -1165,7 +1163,7 @@ const Header = (props) => {
                     padding: 8,
                     textAlign: "center",
                     cursor: "pointer",
-                    borderRadius: theme.palette.borderRadius,
+                    borderRadius: theme.palette?.borderRadius,
                     marginTop: 5,
                     backgroundColor: theme.palette.surfaceColor,
                     minWidth: 60,

frontend/src/components/Newsletter.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
-import { useTheme } from '@mui/styles';
 import {isMobile} from "react-device-detect";
 import ReactGA from 'react-ga4';
+import theme from '../theme.jsx';
 
 import {
 	TextField, 
@@ -12,7 +12,6 @@ import {
 const Newsletter = (props) => {
   const { globalUrl, } = props;
 
-	const theme = useTheme();
   const [email, setEmail] = useState("");
   const [msg, setMsg] = useState("");
   const [buttonActive, setButtonActive] = useState(true);

frontend/src/components/Oauth2Auth.jsx

@@ -696,7 +696,7 @@ const AuthenticationOauth2 = (props) => {
 					justifyContent: "flex-start",
 					backgroundColor: "#ffffff",
 					color: "#2f2f2f",
-					borderRadius: theme.palette.borderRadius,
+					borderRadius: theme.palette?.borderRadius,
 					minWidth:  300, 
 					maxWidth: 300,
 					maxHeight: 50,
@@ -721,7 +721,7 @@ const AuthenticationOauth2 = (props) => {
 					<span style={{display: "flex"}}>
 						<img
 							alt={selectedAction.app_name}
-							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette.borderRadius, }}
+							style={{ margin: 4, minHeight: 30, maxHeight: 30, borderRadius: theme.palette?.borderRadius, }}
 							src={selectedAction.large_image}
 						/>
 						<Typography style={{ margin: 0, marginLeft: 10, marginTop: 5,}} variant="body1">
@@ -803,7 +803,7 @@ const AuthenticationOauth2 = (props) => {
 					</span>
 				: null}
         {/*<TextField
-						style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}} 
+						style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette?.borderRadius,}} 
 						InputProps={{
 							style:{
 							},
@@ -893,7 +893,7 @@ const AuthenticationOauth2 = (props) => {
                     <TextField
                       style={{
                         backgroundColor: theme.palette.inputColor,
-                        borderRadius: theme.palette.borderRadius,
+                        borderRadius: theme.palette?.borderRadius,
                       }}
                       InputProps={{
                         style: {
@@ -924,7 +924,7 @@ const AuthenticationOauth2 = (props) => {
               style={{
                 marginTop: 20,
                 backgroundColor: theme.palette.inputColor,
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
               }}
               InputProps={{
                 style: {
@@ -942,7 +942,7 @@ const AuthenticationOauth2 = (props) => {
             <TextField
               style={{
                 backgroundColor: theme.palette.inputColor,
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
 								marginBottom: 10, 
               }}
               InputProps={{
@@ -964,7 +964,7 @@ const AuthenticationOauth2 = (props) => {
 					<TextField
 					  style={{
 						backgroundColor: theme.palette.inputColor,
-						borderRadius: theme.palette.borderRadius,
+						borderRadius: theme.palette?.borderRadius,
 					  }}
 					  InputProps={{
 						style: {
@@ -982,7 +982,7 @@ const AuthenticationOauth2 = (props) => {
 					<TextField
 					  style={{
 						backgroundColor: theme.palette.inputColor,
-						borderRadius: theme.palette.borderRadius,
+						borderRadius: theme.palette?.borderRadius,
 						marginBottom: 10, 
 					  }}
 					  InputProps={{
@@ -1061,7 +1061,7 @@ const AuthenticationOauth2 = (props) => {
           style={{
             marginBottom: 40,
             marginTop: 20,
-            borderRadius: theme.palette.borderRadius,
+            borderRadius: theme.palette?.borderRadius,
           }}
           disabled={
             clientSecret.length === 0 || clientId.length === 0 || buttonClicked || (allscopes.length !== 0 && selectedScopes.length === 0)
@@ -1092,7 +1092,7 @@ const AuthenticationOauth2 = (props) => {
             <Button
               style={{
                 marginLeft: 10,
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
               }}
               disabled={clientSecret.length === 0 || clientId.length === 0}
               variant="text"

frontend/src/components/OrgHeaderexpanded.jsx

@@ -438,7 +438,7 @@ const OrgHeaderexpanded = (props) => {
 									style={{
 										backgroundColor: theme.palette.inputColor,
 										height: 50,
-										borderRadius: theme.palette.borderRadius,
+										borderRadius: theme.palette?.borderRadius,
 									}}
 									onChange={(event, newValue) => {
 										console.log("Found value: ", newValue)
@@ -470,7 +470,7 @@ const OrgHeaderexpanded = (props) => {
 											<Tooltip arrow placement="left" 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, }} />
+														<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}
@@ -498,7 +498,7 @@ const OrgHeaderexpanded = (props) => {
 											<TextField
 												style={{
 													backgroundColor: theme.palette.inputColor,
-													borderRadius: theme.palette.borderRadius,
+													borderRadius: theme.palette?.borderRadius,
 												}}
 												{...params}
 												label="Find a notification workflow"

frontend/src/components/PaperComponent.jsx

@@ -2,7 +2,7 @@ import React, {useState, useEffect, useLayoutEffect} from 'react';
 
 import Draggable from "react-draggable";
 import {
-		Paper
+	Paper
 } from "@mui/material";
 
 const PaperComponent = (props) => {
@@ -11,7 +11,9 @@ const PaperComponent = (props) => {
       handle="#draggable-dialog-title"
       cancel={'[class*="MuiDialogContent-root"]'}
     >
-      <Paper {...props} />
+      <Paper 
+	  	{...props} 
+	  />
     </Draggable>
   )
 }

frontend/src/components/ParsedAction.jsx

@@ -1431,7 +1431,7 @@ const ParsedAction = (props) => {
                         )
 
                         if (foundResult === undefined || foundResult === null) {
-                          continue;
+                          continue
                         }
 
 						const oldstartnode = cy.getElementById(selectedAction.id);
@@ -1444,12 +1444,12 @@ const ParsedAction = (props) => {
 
                         setSelectedResult(foundResult);
                         if (setCodeModalOpen !== undefined) {
-                          setCodeModalOpen(true);
+                          setCodeModalOpen(true)
                       	
 						  found = true
                         }
 
-                        break;
+                        break
                       }
 
 					  if (!found) {
@@ -1497,13 +1497,13 @@ const ParsedAction = (props) => {
                   }}
 		  		  disabled={autoCompleting}
                   onClick={() => {
-					  //if (setAiQueryModalOpen !== undefined) {
-					  //  setAiQueryModalOpen(true)
-					  //} else {
-					  	aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
-					  //}
-  					  setAutocompleting(true)
-
+					  if (setAiQueryModalOpen !== undefined) {
+					    setAiQueryModalOpen(true)
+					  } else {
+						  aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
+					  }
+						
+					  setAutocompleting(true)
 					  setTimeout(() => {
 						  setAutocompleting(false)
 					  }, 3000)
@@ -1511,7 +1511,7 @@ const ParsedAction = (props) => {
                 >
                   <Tooltip
                     color="primary"
-                    title={"Autocomplete fields. Uses the name of the current action, the fields and previous actions' results"}
+                    title={"Autocomplete the action"}
                     placement="top"
                   >
 		  			{autoCompleting ? 
@@ -1568,7 +1568,7 @@ const ParsedAction = (props) => {
                     color: "white",
                     height: 35,
                     marginleft: 10,
-                    borderRadius: theme.palette.borderRadius,
+                    borderRadius: theme.palette?.borderRadius,
                   }}
                   SelectDisplayProps={{
                     style: {
@@ -1963,7 +1963,7 @@ const ParsedAction = (props) => {
                 color: "white",
                 height: 50,
                 maxWidth: rightsidebarStyle.maxWidth - 80,
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
               }}
             >
               <MenuItem
@@ -2066,7 +2066,7 @@ const ParsedAction = (props) => {
 	  : null}
 
 
-      {showEnvironment !== undefined && showEnvironment && environments.length > 1 && !isIntegration  ? (
+      {/*showEnvironment !== undefined && showEnvironment && environments.length > 1 && !isIntegration  ? (
         <div style={{ marginTop: "20px" }}>
           <Typography style={{color: "rgba(255,255,255,0.7)"}}>Environment</Typography>
           <Select
@@ -2097,7 +2097,7 @@ const ParsedAction = (props) => {
               backgroundColor: theme.palette.inputColor,
               color: "white",
               height: "50px",
-              borderRadius: theme.palette.borderRadius,
+              borderRadius: theme.palette?.borderRadius,
             }}
           >
             {environments.map((data, index) => {
@@ -2153,15 +2153,9 @@ const ParsedAction = (props) => {
             })}
           </Select>
 
-		  {/*selectedActionEnvironment.running_ip === "" && selectedActionEnvironment.Name !== "Cloud" && selectedActionEnvironment.Name !== "cloud" ?
-			  <a href={`/admin?tab=environment&env=${selectedActionEnvironment.Name}`} target="_blank" style={{textDecoration: "none", color: "#f85a3e",}}>
-				<Typography style={{}}>
-				  Configure the environment
-				</Typography>
-			  </a>
-		  : null*/}
-	</div>
-      ) : null}
+		</div>
+      ) : null*/}
+
       {workflow.execution_variables !== undefined &&
       workflow.execution_variables !== null &&
       workflow.execution_variables.length > 0 ? (
@@ -2201,7 +2195,7 @@ const ParsedAction = (props) => {
               backgroundColor: theme.palette.inputColor,
               color: "white",
               height: "50px",
-              borderRadius: theme.palette.borderRadius,
+              borderRadius: theme.palette?.borderRadius,
             }}
           >
             <MenuItem
@@ -2294,7 +2288,7 @@ const ParsedAction = (props) => {
             style={{
               backgroundColor: theme.palette.inputColor,
               height: 50,
-              borderRadius: theme.palette.borderRadius,
+              borderRadius: theme.palette?.borderRadius,
             }}
             onChange={(event, newValue) => {
               // Workaround with event lol
@@ -2476,7 +2470,7 @@ const ParsedAction = (props) => {
 							variant="body1"
 							style={{
 								backgroundColor: theme.palette.inputColor,
-								borderRadius: theme.palette.borderRadius,
+								borderRadius: theme.palette?.borderRadius,
 							}}
 							label={isIntegration ? "Choose a category" : "Find Actions"}
 							variant="outlined"
@@ -2496,7 +2490,7 @@ const ParsedAction = (props) => {
 						value={selectedAction.name}
 						fullWidth
 						onChange={setNewSelectedAction}
-						style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, borderRadius: theme.palette.borderRadius,}}
+						style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, borderRadius: theme.palette?.borderRadius,}}
 						SelectDisplayProps={{
 							style: {
 								marginLeft: 10,
@@ -2724,7 +2718,7 @@ const ParsedAction = (props) => {
           		  style={{
           		    backgroundColor: theme.palette.inputColor,
           		    height: 50,
-          		    borderRadius: theme.palette.borderRadius,
+          		    borderRadius: theme.palette?.borderRadius,
           		  }}
           		  onChange={(event, newValue) => {
 					console.log("SELECT: ", event, newValue)
@@ -2786,7 +2780,7 @@ const ParsedAction = (props) => {
 						<TextField
 							style={{
 								backgroundColor: theme.palette.inputColor,
-								borderRadius: theme.palette.borderRadius,
+								borderRadius: theme.palette?.borderRadius,
 							}}
 							{...params}
 							label="Find App to Translate"
@@ -2801,7 +2795,7 @@ const ParsedAction = (props) => {
 						<div
 							style={{
 								border: "1px solid rgba(255,255,255,0.6)",
-								borderRadius: theme.palette.borderRadius,
+								borderRadius: theme.palette?.borderRadius,
 								marginTop: 15,
 								marginBottom: 10,
 								maxHeight: 70,
@@ -2838,7 +2832,7 @@ const ParsedAction = (props) => {
 			if (selectedAction.parameters === undefined || selectedAction.parameters === null || selectedAction.parameters.length !== selectedActionParameters.length) {
 
 				//selectedAction.parameters = selectedActionParameters
-				console.log("PARAM BUG: ", selectedAction)
+				console.log("PARAM BUG - length change(?): ", selectedAction)
 			}
 
             //!selectedAction.auth_not_required &&
@@ -3008,7 +3002,7 @@ const ParsedAction = (props) => {
 			 		marginTop: 50,
 			 		border: "1px solid rgba(255,255,255,0.7)",
 			 		borderTop: "1px solid rgba(255,255,255,0.7)",
-			 		borderRadius: theme.palette.borderRadius,
+			 		borderRadius: theme.palette?.borderRadius,
 			 		alignItems: "center",
 			 		textAlign: "center",
 			 	  }}
@@ -3284,11 +3278,13 @@ const ParsedAction = (props) => {
 				  }}
 				>
               <TextField
+				autofill="off"
+				autoComplete="off"
                 id={clickedFieldId}
                 disabled={disabled}
                 style={{
                   backgroundColor: theme.palette.inputColor,
-                  borderRadius: theme.palette.borderRadius,
+                  borderRadius: theme.palette?.borderRadius,
                   border:
                     selectedActionParameters[count].required ||
                     selectedActionParameters[count].configuration
@@ -3323,6 +3319,8 @@ const ParsedAction = (props) => {
 										"field_number": count,
 										"actionlist": actionlist,
 										"field_id": clickedFieldId,
+
+										"example": selectedActionParameters[count].example,
 									})
 								}}
 							/>
@@ -3646,7 +3644,7 @@ const ParsedAction = (props) => {
                 <TextField
                   style={{
                     backgroundColor: theme.palette.inputColor,
-                    borderRadius: theme.palette.borderRadius,
+                    borderRadius: theme.palette?.borderRadius,
                   }}
                   InputProps={{
                     endAdornment: hideExtraTypes ? null : (
@@ -3730,7 +3728,7 @@ const ParsedAction = (props) => {
                     backgroundColor: theme.palette.surfaceColor,
                     color: "white",
                     height: "50px",
-                    borderRadius: theme.palette.borderRadius,
+                    borderRadius: theme.palette?.borderRadius,
                   }}
                 >
                   {parsedoptions.map(
@@ -4307,7 +4305,7 @@ const ParsedAction = (props) => {
                         color: "white",
                         height: 50,
                         marginTop: 2,
-                        borderRadius: theme.palette.borderRadius,
+                        borderRadius: theme.palette?.borderRadius,
                       }}
                       onChange={(e) => {
 						  console.log("SELECT ONCHANGE DONE")

frontend/src/components/Priorities.jsx

@@ -286,7 +286,7 @@ const Priorities = (props) => {
     	      borderBottom: "1px solid rgba(255,255,255,0.4)",
 			  marginBottom: 20, 
 			  border: highlighted ? "2px solid #f85a3e" : null,
-			  borderRadius: theme.palette.borderRadius,
+			  borderRadius: theme.palette?.borderRadius,
     	    }}
     	  >
 			<div style={{display: "flex", }}>

frontend/src/components/Priority.jsx

@@ -121,7 +121,7 @@ const Priority = (props) => {
 	const srcSize = realignedSrc ? 35 : 30 
 	const dstSize = realignedDst ? 35 : 30
 	return (
-		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" :  clickedFromOrgTab ?null:"1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding:  clickedFromOrgTab ? 24:15, textAlign: "center", minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: clickedFromOrgTab ?  "#1A1A1A": theme.palette.surfaceColor, display: "flex", }}>
+		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" :  clickedFromOrgTab ?null:"1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, marginTop: 10, marginBottom: 10, padding:  clickedFromOrgTab ? 24:15, textAlign: "center", minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: clickedFromOrgTab ?  "#1A1A1A": theme.palette.surfaceColor, display: "flex", }}>
 			<div style={{flex: 2, overflow: "hidden",}}>
 				<span style={{display: "flex", }}>
 					{priority.type === "usecase" || priority.type == "apps" ? <AutoFixHighIcon style={{height: 19, width: 19, marginLeft: 3, marginRight: 10, }}/> : null} 
@@ -131,7 +131,7 @@ const Priority = (props) => {
 				</span>
 				{priority.type === "usecase" && priority.description.includes("&") ?
 					<span style={{display: "flex", marginTop: 10,  }}>
-						<img src={newdescription.split("&")[1]} alt={priority.name} style={{height: srcSize, width: srcSize, marginRight: realignedSrc ? isCloud ? 0 : -10 : 10, borderRadius: theme.palette.borderRadius-3, marginTop: realignedSrc ?  5 : 0 }} />
+						<img src={newdescription.split("&")[1]} alt={priority.name} style={{height: srcSize, width: srcSize, marginRight: realignedSrc ? isCloud ? 0 : -10 : 10, borderRadius: theme.palette?.borderRadius-3, marginTop: realignedSrc ?  5 : 0 }} />
 						<Typography variant="body2" color="textSecondary" style={{marginTop: 3, }}>
 							{newdescription.split("&")[0]} 
 						</Typography>
@@ -139,7 +139,7 @@ const Priority = (props) => {
 						{newdescription.split("&").length > 3 ?
 							<span style={{display: "flex", }}>
 								<ArrowForwardIcon style={{marginLeft: 15, marginRight: 15, }}/>
-								<img src={newdescription.split("&")[3]} alt={priority.name+"2"} style={{height: dstSize, width: dstSize, marginRight: realignedDst ? -5 : 10,	borderRadius: theme.palette.borderRadius-3, marginTop: realignedDst ? 5 : 0 }} />
+								<img src={newdescription.split("&")[3]} alt={priority.name+"2"} style={{height: dstSize, width: dstSize, marginRight: realignedDst ? -5 : 10,	borderRadius: theme.palette?.borderRadius-3, marginTop: realignedDst ? 5 : 0 }} />
 								<Typography variant="body2" color="textSecondary" style={{marginTop: 3}}>
 									{newdescription.split("&")[2]} 
 								</Typography>

frontend/src/components/RecentWorkflow.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 
+import { Link } from "react-router-dom";
 import { 
 	Avatar, 
 	Box, 
@@ -20,7 +21,6 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
     const navigate = useNavigate();
 
 	const [hovered, setHovered] = React.useState(false)
-
 	if (workflow === undefined || workflow === null) {
 		console.log("No workflow")
 		return null
@@ -39,12 +39,11 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 
 	// Check if workflow.input_markdown has an image in it
 	// If it does, show it as the main thing
-	//
 	var relevantImageUrl = ""
-	if (workflow.input_markdown !== undefined && workflow.input_markdown !== null && workflow.input_markdown !== "") {
+	if (workflow?.form_control?.input_markdown !== undefined && workflow?.form_control?.input_markdown !== null && workflow?.form_control?.input_markdown !== "") {
 		// Look for <img> tag or ![alt](src) markdown
 		// html > markdown
-		const imgTag = workflow.input_markdown.match(/<img[^>]+>/g)
+		const imgTag = workflow?.form_control?.input_markdown.match(/<img[^>]+>/g)
 
 		if (imgTag !== null) {
 			const src = imgTag[0].match(/src="([^"]+)"/)
@@ -52,7 +51,7 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 				relevantImageUrl = src[1]
 			}
 		} else {
-			const markdownTag = workflow.input_markdown.match(/!\[.*\]\(.*\)/g)
+			const markdownTag = workflow?.form_control?.input_markdown.match(/!\[.*\]\(.*\)/g)
 
 			if (markdownTag !== null) {
 				const src = markdownTag[0].match(/\(([^)]+)\)/)
@@ -68,15 +67,13 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 			onMouseEnter={() => setHovered(true)}
 			onMouseLeave={() => setHovered(false)}
 		>
+			<Link to={`/workflows/` + workflow?.id} style={{textDecoration: "none"}}>
 			<Button
-			  onClick={() => {
+			  onClick={(e) => {
 				if (onclickHandler !== undefined) {
+					e.preventDefault()
+					e.stopPropagation()
 					onclickHandler()
-				} else {
-					navigate(`/workflows/` + workflow?.id)
-					setTimeout(() => {
-					  window.location.reload()
-					}, 100)
 				}
 			  }}
 			  style={{
@@ -89,7 +86,7 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 				opacity: expandLeftNav ? 1 : 0,
 				transition: "opacity 0.1s",
 
-				borderRadius: theme.palette.borderRadius, 
+				borderRadius: theme.palette?.borderRadius, 
 				backgroundColor: hovered || currentWorkflowId === workflow.id ? "#1f1f1f" : "transparent",
 			  }}
 			  disableRipple
@@ -150,6 +147,7 @@ const RecentWorkflow = ({ workflow, onclickHandler, leftNavOpen, currentWorkflow
 				}
 			  </Box>
 			</Button>
+			</Link> 
 		</div>
 	)
 }

frontend/src/components/RuntimeDebugger.jsx

@@ -35,6 +35,7 @@ import {
     PlayArrow as PlayArrowIcon,
 	Insights as InsightsIcon, 
 	Replay as ReplayIcon, 
+	EditNote as EditNoteIcon,
 } from '@mui/icons-material';
 
 import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'
@@ -76,6 +77,10 @@ const RuntimeDebugger = (props) => {
 		{"id": "", "name": "All Workflows",}
 	])
 
+	if (document != undefined) { 
+		document.title = "Workflow Run Debugger"
+	}
+
 	// Shitty workflow search on purpose :)
 	const handleWorkflowUsageCount = (workflows) => {
 		if (workflows === undefined || workflows === null || workflows.length === 0) {
@@ -219,7 +224,7 @@ const RuntimeDebugger = (props) => {
 	}
 
 
-	  const getAvailableWorkflows = () => {
+	  const getAvailableWorkflows = (workflowId) => {
 		fetch(globalUrl + "/api/v1/workflows", {
 		  method: "GET",
 		  headers: {
@@ -240,6 +245,15 @@ const RuntimeDebugger = (props) => {
 			  var foundWorkflows = [{"id": "", "name": "All Workflows",}]
 			  foundWorkflows.push(...responseJson)
 			  setWorkflows(foundWorkflows)
+
+			  if (workflowId !== undefined && workflowId !== null && workflowId !== "" && workflowId.length === 36) {
+				  for (var key in responseJson) {
+					  if (responseJson[key].id === workflowId) {
+						  setWorkflow(responseJson[key])
+						  break
+					  }
+				  }
+			  }
 		  }
 		})
 		.catch((error) => {
@@ -248,7 +262,6 @@ const RuntimeDebugger = (props) => {
 	  }
 
 	useEffect(() => {
-	  	getAvailableWorkflows()
 
 		// Find workflow_id in url query
 		const urlParams = new URLSearchParams(window.location.search);
@@ -265,6 +278,8 @@ const RuntimeDebugger = (props) => {
 			}
 		}
 
+	  	getAvailableWorkflows(workflowId)
+
 		const foundStatus = urlParams.get('status');
 		if (foundStatus !== undefined && foundStatus !== null && foundStatus !== "") {
 			setStatus(foundStatus)
@@ -314,15 +329,17 @@ const RuntimeDebugger = (props) => {
 
 				var source = params.row.execution_source
 				if (source === "schedule") {
-					foundSource = <img src={alltriggers[1].large_image} alt="schedule" style={{borderRadius: theme.palette.borderRadius, height: imageSize, width: imageSize, }} />
+					foundSource = <img src={alltriggers[1].large_image} alt="schedule" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
 				} else if (source === "webhook") {
-					foundSource = <img src={alltriggers[0].large_image} alt="webhook" style={{borderRadius: theme.palette.borderRadius, height: imageSize, width: imageSize, }} />
+					foundSource = <img src={alltriggers[0].large_image} alt="webhook" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
 				} else if (source === "subflow" || source.length === 36) {
-					foundSource = <img src={alltriggers[4].large_image} alt="subflow" style={{borderRadius: theme.palette.borderRadius, height: imageSize, width: imageSize, }} />
+					foundSource = <img src={alltriggers[3].large_image} alt="subflow" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
 					source = "subflow"
 				} else if (source === "rerun" || source.length === 36) {
 					foundSource = <ReplayIcon style={{color: theme.palette.primary.secondary, height: imageSize, width: imageSize, }} />
 					source = "rerun of a previous run"
+				} else if (source === "form") { 
+					foundSource = <EditNoteIcon style={{color: theme.palette.primary.secondary, height: imageSize, width: imageSize, }} />
 				} else {
 					source = "manual"
 				}
@@ -888,13 +905,13 @@ const RuntimeDebugger = (props) => {
 				{userdata.support === true ? 
 					<Button
 						variant={ignoreOrg ? "contained" : "outlined"}
-						color="primary"
-						style={{maxHeight: 40, marginTop: 25, }}
+						color="secondary"
+						style={{marginLeft: 100, maxHeight: 40, marginTop: 25, }}
 						onClick={() => {
 							setIgnoreOrg(!ignoreOrg)
 						}}
 					>
-						{ignoreOrg ? "Ignoring Org" : "Ignore Org"}
+						{ignoreOrg ? "Ignoring Org" : "Ignore Org (Support Only)"}
 					</Button>
 				: null}
 			</div>
@@ -942,11 +959,8 @@ const RuntimeDebugger = (props) => {
 					},
 				  }}
 				  getOptionLabel={(option) => {
-					if (
-					  option === undefined ||
-					  option === null ||
-					  option.name === undefined ||
-					  option.name === null
+					if (option === undefined || option === null ||
+					  option.name === undefined || option.name === null
 					) {
 					  return "No Workflow Selected";
 					}
@@ -961,7 +975,7 @@ const RuntimeDebugger = (props) => {
 				  style={{
 					backgroundColor: theme.palette.inputColor,
 					height: 50,
-					borderRadius: theme.palette.borderRadius,
+					borderRadius: theme.palette?.borderRadius,
 					marginTop: 5, 
 					marginLeft: 5,
 				  }}
@@ -995,13 +1009,13 @@ const RuntimeDebugger = (props) => {
 					  <Tooltip arrow placement="left" 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, }} />
+							<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
 						  style={{
 							backgroundColor: theme.palette.inputColor,
@@ -1023,7 +1037,7 @@ const RuntimeDebugger = (props) => {
 					  <TextField
 						style={{
 						  backgroundColor: theme.palette.inputColor,
-						  borderRadius: theme.palette.borderRadius,
+						  borderRadius: theme.palette?.borderRadius,
 						}}
 						{...params}
 						label="Workflow"

frontend/src/components/SearchData.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 
 import theme from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
@@ -33,6 +33,8 @@ import {
     AvatarGroup,
 } from "@mui/material"
 
+import { Context } from '../context/ContextApi.jsx';
+
 import { Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material'
 
 import algoliasearch from 'algoliasearch/lite';
@@ -47,8 +49,9 @@ const chipStyle = {
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const SearchData = props => {
-    const { serverside, globalUrl, userdata, searchBarModalOpen, setSearchBarModalOpen } = props
+    const { serverside, globalUrl, userdata } = props
     let navigate = useNavigate();
+    const { searchBarModalOpen, setSearchBarModalOpen } = useContext(Context);
     const borderRadius = 3
     const node = useRef()
     const [searchOpen, setSearchOpen] = useState(false)
@@ -547,8 +550,6 @@ const SearchData = props => {
 												e.preventDefault()
 												e.stopPropagation()
 
-												console.log("OBJECT CHANGE: ", hit.objectID)
-
 												// This does nothing rofl
 												if (userdata.active_apps === undefined || userdata.active_apps === null) {
 													activateApp(hit.name, hit.objectID, "activate")

frontend/src/components/Searchfield.jsx

@@ -4,7 +4,7 @@ import theme from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import SearchBox from "../components/SearchData.jsx";
 
-import { Context } from '../context/contextApi.jsx';
+import { Context } from '../context/ContextApi.jsx';
 
 import {
 	Chip,
@@ -101,7 +101,7 @@ const SearchField = props => {
 			</div>
 				: null}
 			<DialogContent className='dialog-content' style={{}}>
-				<SearchBox globalUrl={globalUrl} setSearchBarModalOpen={setSearchBarModalOpen} modalOpen={searchBarModalOpen} serverside={serverside} userdata={userdata} />
+				<SearchBox globalUrl={globalUrl} serverside={serverside} userdata={userdata} />
 			</DialogContent>
 			<Divider style={{overflow: "hidden"}}/>
 			<span style={{display:"flex", width:"100%", height:30}}>
@@ -131,7 +131,7 @@ const SearchField = props => {
 		<div style={{ marginTop: "auto", marginLeft: !isLoggedIn ? 0: "auto", marginRight: !isLoggedIn ? 0 : "auto", width: !isLoggedIn ? "auto" : 410, }}>
 			{modalView}
 			<TextField
-				style={{ backgroundColor: "#212121", height: 48, borderRadius: rounded === true ? 25 : theme.palette.borderRadius, minWidth: fieldWidth, maxWidth: fieldWidth, }}
+				style={{ backgroundColor: "#212121", height: 48, borderRadius: rounded === true ? 25 : theme.palette?.borderRadius, minWidth: fieldWidth, maxWidth: fieldWidth, }}
 				InputProps={{
 					style: {
 						color: "white",

frontend/src/components/ShuffleCodeEditor1.jsx

@@ -40,6 +40,7 @@ import {
 
 	Close as CloseIcon,
 	DragIndicator as DragIndicatorIcon, 
+	RestartAlt as RestartAltIcon,
 } from '@mui/icons-material';
 
 
@@ -56,6 +57,7 @@ import { tags as t } from '@lezer/highlight';
 import AceEditor from "react-ace";
 import ace from "ace-builds";
 import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/mode-json';
 //import 'ace-builds/src-noconflict/theme-twilight';
 //import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-gruvbox';
@@ -109,6 +111,9 @@ const CodeEditor = (props) => {
 		setActiveDialog,
 		fieldname,
 		contentLoading,
+		editorData, 
+							
+		setAiQueryModalOpen,
 	} = props
 
 	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
@@ -163,6 +168,11 @@ const CodeEditor = (props) => {
 		setMenuPosition(null);
 	}
 
+	useEffect(() => {
+		highlight_variables(localcodedata)
+		expectedOutput(localcodedata)
+	}, [localcodedata])
+
 	let navigate = useNavigate();
 
 	useEffect(() => {
@@ -811,11 +821,7 @@ const CodeEditor = (props) => {
 	}
 
   const handleItemClick = (values) => {
-		if (
-			values === undefined ||
-			values === null ||
-			values.length === 0
-		) {
+		if (values === undefined || values === null || values.length === 0) {
 			return;
 		}
 
@@ -830,7 +836,11 @@ const CodeEditor = (props) => {
 			toComplete += values[key].autocomplete;
 		}
 
-		setlocalcodedata(localcodedata+toComplete)
+
+		handleClick({
+			"value": toComplete
+		})
+		//setlocalcodedata(localcodedata+toComplete)
 		setMenuPosition(null)
 	}
 
@@ -839,10 +849,37 @@ const CodeEditor = (props) => {
 			return
 		}
 
-		if (!item.value.includes("{%") && !item.value.includes("{{")) {
-			setlocalcodedata(localcodedata+" | "+item.value+" }}")
-		} else {
-			setlocalcodedata(localcodedata+item.value)
+		// Injects it in the right spot instead of random
+		var edited = false
+		if (currentCharacter !== undefined && currentCharacter !== null && currentCharacter !== -1 && currentLine !== undefined && currentLine !== null && currentLine !== -1) {
+			// Input at the right spot
+			var codedatasplit = localcodedata.split('\n')
+			if (codedatasplit.length > currentLine) {
+				var currentLineData = codedatasplit[currentLine]
+
+				// Remove newlines from item.value
+				if (item.value.includes("% python %")) {
+					item.value = item.value.replaceAll("\n", ";")
+					item.value = item.value.replaceAll("python %};", "python %}")
+				} else {
+					item.value = item.value.replaceAll("\n", "")
+				}
+
+				currentLineData = currentLineData.slice(0, currentCharacter) + item.value + currentLineData.slice(currentCharacter)
+				codedatasplit[currentLine] = currentLineData
+
+				setlocalcodedata(codedatasplit.join('\n'))
+
+				edited = true 
+			}
+		}
+
+		if (edited === false) {
+			if (!item.value.includes("{%") && !item.value.includes("{{")) {
+				setlocalcodedata(localcodedata+" | "+item.value+" }}")
+			} else {
+				setlocalcodedata(localcodedata+item.value)
+			}
 		}
 
 		setAnchorEl(null)
@@ -946,14 +983,19 @@ const CodeEditor = (props) => {
 
 
     // Define a custom completer for the Ace Editor
-	const customVariables = availableVariables
     const customCompleter = {
       getCompletions: function(editor, session, pos, prefix, callback) {
-        callback(null, customVariables.map((variable) => ({
-      	caption: variable,
-      	value: variable,
-      	meta: 'custom',
-        })));
+		console.log("CUSTOM COMPLETER: ", prefix)
+
+        callback(null, availableVariables.map((variable) => {
+			console.log("CUSTOM VAR: ", variable)
+
+			return ({
+				caption: variable,
+				value: variable,
+				meta: 'custom',
+        	})
+		}))
       }
     }
 
@@ -1338,6 +1380,8 @@ const CodeEditor = (props) => {
 										onClick={() => {
 											console.log("CLICKED: ", innerdata);
 											console.log(innerdata.example)
+
+											//const handleClick = (item) => {
 											handleItemClick([innerdata]);
 										}}
 									>
@@ -1482,14 +1526,37 @@ const CodeEditor = (props) => {
 							width: 50, 
 							marginLeft: 100, 
 						}}
-						disabled={isAiLoading}
+						disabled={editorData === undefined || editorData.example === undefined || editorData.example === null || editorData.example.length === 0}
 						onClick={() => {
-							autoFormat(localcodedata) 
+							setlocalcodedata(editorData.example)
+						}}
+						color="secondary"
+					>
+						<Tooltip
+							title={"Reset to example body"}
+							placement="top"
+						>
+							<RestartAltIcon /> 
+						</Tooltip>
+					</IconButton>
+					<IconButton
+						style={{
+							height: 50, 
+							width: 50, 
+							marginLeft: 0, 
+						}}
+						disabled={isAiLoading || editorData.name !== "body"}
+						onClick={() => {
+						  	if (setAiQueryModalOpen !== undefined) {
+								setAiQueryModalOpen(true)
+							} else {
+								autoFormat(localcodedata) 
+							}
 						}}
 					>
 						<Tooltip
 							color="primary"
-							title={"Auto format data"}
+							title={"Format with AI"}
 							placement="top"
 						>
 							{isAiLoading ? 
@@ -1504,7 +1571,7 @@ const CodeEditor = (props) => {
 			}
 					
 			<div style={{
-				borderRadius: theme.palette.borderRadius,
+				borderRadius: theme.palette?.borderRadius,
 				position: "relative",
 				paddingTop: 0, 
 				// minHeight: 548,
@@ -1512,8 +1579,10 @@ const CodeEditor = (props) => {
 			}}>
 				{(availableVariables !== undefined && availableVariables !== null && availableVariables.length > 0) || isFileEditor ? (
 					<AceEditor
+						id="shuffle-codeeditor"
+						name="shuffle-codeeditor"
 						value={localcodedata}
-						mode={selectedAction === undefined ? "" : selectedAction.name === "execute_python" ? "python" : ""}
+						mode={selectedAction === undefined ? "json" : selectedAction.name === "execute_python" ? "python" : "json"}
 						theme="gruvbox"
 						height={isFileEditor ? 450 : 550} 
 						width={isFileEditor ? 650 : "100%"}
@@ -1538,12 +1607,10 @@ const CodeEditor = (props) => {
 							highlight_variables(localcodedata)
 						}}
 						onCursorChange={(cursorPosition, editor, value) => {
-							setCurrentCharacter(cursorPosition.column)
-							setCurrentLine(cursorPosition.row)
+							setCurrentCharacter(cursorPosition.cursor.column)
+							setCurrentLine(cursorPosition.cursor.row)
 							findIndex(cursorPosition.row, cursorPosition.column)
 
-							//highlight_variables(localcodedata)
-							//console.log("VALUE CURSOR: ", value)
 						}}
 						onChange={(value, editor) => {
 							// setlocalcodedata(value)
@@ -1666,7 +1733,7 @@ const CodeEditor = (props) => {
 												padding: 10,
 												marginTop: -2,
 												border: `2px solid ${theme.palette.inputColor}`,
-												borderRadius: theme.palette.borderRadius,
+												borderRadius: theme.palette?.borderRadius,
 												maxHeight: 450,
 												minHeight: 450, 
 												overflow: "auto", 

frontend/src/components/SuggestedWorkflows.jsx

@@ -102,7 +102,7 @@ const SuggestedWorkflows = (props) => {
 				placement="top"
 				style={{ zIndex: 10011 }}
 			>
-				<div key={index} style={{cursor: finished ? "auto" : "pointer", marginTop: 10, padding: 10, borderRadius: theme.palette.borderRadius, border: `1px solid ${bordercolor}`, display: "flex", backgroundColor: hovering === true ? theme.palette.inputColor : theme.palette.surfaceColor, }} onMouseOver={() => {
+				<div key={index} style={{cursor: finished ? "auto" : "pointer", marginTop: 10, padding: 10, borderRadius: theme.palette?.borderRadius, border: `1px solid ${bordercolor}`, display: "flex", backgroundColor: hovering === true ? theme.palette.inputColor : theme.palette.surfaceColor, }} onMouseOver={() => {
 					setHovering(true)
 				}} onMouseOut={() => {
 					setHovering(false)
@@ -140,7 +140,7 @@ const SuggestedWorkflows = (props) => {
 
 	//<Paper style={{width: 275, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
 	return (
-		<Paper style={{margin: "auto", position: "relative", backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette.borderRadius, zIndex: foundZindex, border: "1px solid rgba(255,255,255,0.2)", top: 100, left: 85,}}>
+		<Paper style={{margin: "auto", position: "relative", backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, zIndex: foundZindex, border: "1px solid rgba(255,255,255,0.2)", top: 100, left: 85,}}>
 			<Dialog
 					open={usecaseSearch.length > 0 && usecaseSearchType.length > 0}
 					onClose={() => {
@@ -193,7 +193,7 @@ const SuggestedWorkflows = (props) => {
 					apps={apps}
 				/>
 			</Dialog>
-			<div style={{minWidth: 250, maxWidth: 250, padding: 15, borderRadius: theme.palette.borderRadius, position: "relative", }}>
+			<div style={{minWidth: 250, maxWidth: 250, padding: 15, borderRadius: theme.palette?.borderRadius, position: "relative", }}>
 				<Typography variant="body1" style={{textAlign: "center"}}>
 					Suggested Workflows ({finishedUsecases.length}/{usecaseSuggestions.length})
 				</Typography>

frontend/src/components/UsecaseSearch.jsx

@@ -594,7 +594,7 @@ const UsecaseSearch = (props) => {
                 width: 30,
                 height: 30,
                 border: "2px solid rgba(255,255,255,0.6)",
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
                 maxHeight: 30,
                 maxWidth: 30,
                 overflow: "hidden",
@@ -616,7 +616,7 @@ const UsecaseSearch = (props) => {
                 width: 30,
                 height: 30,
                 border: "2px solid rgba(255,255,255,0.6)",
-                borderRadius: theme.palette.borderRadius,
+                borderRadius: theme.palette?.borderRadius,
                 maxWidth: 30,
                 maxHeight: 30,
                 overflow: "hidden",
@@ -1266,9 +1266,11 @@ const UsecaseSearch = (props) => {
 			.then((responseJson) => {
 				if (responseJson.success === false) {
 					var msgString = "Failed to activate the app"
+
 					if (responseJson.reason !== undefined) {
 						msgString += ": " + responseJson.reason
 					}
+
 					toast(msgString)
 				} else {
 					//toast("App activated for your organization! Refresh the page to use the app.")
@@ -1388,7 +1390,7 @@ const UsecaseSearch = (props) => {
 				<Typography variant="body1" style={{color: "rgba(255,255,255,0.5)", marginRight: 20, marginTop: 13, }}>
 					{startText}
 				</Typography>
-				<div style={{border: `1px solid ${borderColor}`, backgroundColor: theme.palette.surfaceColor, width: miditem === true ? "65%" : "85%", marginLeft: miditem === true ? 125 : 0, borderRadius: expanded ? theme.palette.borderRadius : 50, maxHeight: expanded || hasError ? 500 : 50, minHeight: 50, }}>
+				<div style={{border: `1px solid ${borderColor}`, backgroundColor: theme.palette.surfaceColor, width: miditem === true ? "65%" : "85%", marginLeft: miditem === true ? 125 : 0, borderRadius: expanded ? theme.palette?.borderRadius : 50, maxHeight: expanded || hasError ? 500 : 50, minHeight: 50, }}>
 
 					{selectionOpen === true ?
 						<AppsearchPopout 
@@ -1560,7 +1562,7 @@ const UsecaseSearch = (props) => {
 	// <b>{defaultSearch}: {allusecases[usecaseIndex].name}</b>
 	//console.log("UseCase: ", usecases)
 	return (
-		<div style={{maxWidth: "100%", minWidth: "100%",  border: "1px solid rgba(255,255,255,0)", borderRadius: theme.palette.borderRadius,}}>
+		<div style={{maxWidth: "100%", minWidth: "100%",  border: "1px solid rgba(255,255,255,0)", borderRadius: theme.palette?.borderRadius,}}>
       {configureWorkflowModal}
 			{authenticationModal}
 			{showTitle !== false && defaultSearch !== undefined ?

frontend/src/components/WelcomeForm2.jsx

@@ -648,7 +648,7 @@ const WelcomeForm = (props) => {
 
               <div style={{ marginTop: 0, }}>
                 <div className="thumbs" style={{ display: "flex" }}>
-                  <div style={{ minWidth: isMobile ? 300 :  554, maxWidth: isMobile ? 300 : 554, borderRadius: theme.palette.borderRadius, }}>
+                  <div style={{ minWidth: isMobile ? 300 :  554, maxWidth: isMobile ? 300 : 554, borderRadius: theme.palette?.borderRadius, }}>
                     <ExploreWorkflow
                       globalUrl={globalUrl}
 					  isLoggedIn={isLoggedIn}

frontend/src/components/WorkflowTemplatePopup.jsx

@@ -585,7 +585,7 @@ const WorkflowTemplatePopup = (props) => {
 					{/*errorMessage === "" && configurationFinished === true && workflow.id !== undefined && workflowLoading === false ?
 						<Tooltip title="Click to explore the workflow" placement="top">
 							<span 
-								style={{position: "fixed", display: "flex", right: "10%", top: "20%", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, padding: "15px 30px 15px 30px", backgroundColor: theme.palette.platformColor, cursor: "pointer", }}
+								style={{position: "fixed", display: "flex", right: "10%", top: "20%", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, padding: "15px 30px 15px 30px", backgroundColor: theme.palette.platformColor, cursor: "pointer", }}
 								onClick={() => {
 									// Open in new tab
 									window.open("/workflows/" + workflow.id, "_blank")

frontend/src/components/WorkflowTemplatePopup2.jsx

@@ -759,7 +759,7 @@ const WorkflowTemplatePopup = (props) => {
 	const borderStyle = isHomePage ? null : isHovered && isActive ? errorMessage !== "" ? "1px solid red" : `2px solid ${theme.palette.green}` : isHovered ? `1px solid ${highlightColor}` : "1px solid rgba(33, 33, 33, 1)"
 
 	return (
-		<div style={{ display: "flex", height: boxHeight, borderRadius: theme.palette.borderRadius, justifyContent: isMobile ? null : "center" }}
+		<div style={{ display: "flex", height: boxHeight, borderRadius: theme.palette?.borderRadius, justifyContent: isMobile ? null : "center" }}
 		>
 			<ModalView />
 

frontend/src/components/WorkflowValidationTimeline.jsx

@@ -319,7 +319,7 @@ const WorkflowValidationTimeline = (props) => {
 		<div 
 			style={{ 
 				padding: "10px 5px 10px 5px", 
-				borderRadius: theme.palette.borderRadius, 
+				borderRadius: theme.palette?.borderRadius, 
 
 				border: hovering === true && showHoverForClick === true ? `1px solid ${decidedColor}` : "1px solid rgba(255,255,255,0.0)",
 				cursor: hovering === true && showHoverForClick === true ? "pointer" : "default",