Frontend fixes for release

frontend/src/views/AngularWorkflow.jsx

@@ -16678,28 +16678,29 @@ const AngularWorkflow = (defaultprops) => {
         >
           <CloseIcon />
         </IconButton>
-        <ConfigureWorkflow
-          userdata={userdata}
-          alert={alert}
-          theme={theme}
-          setAuthenticationType={setAuthenticationType}
-          globalUrl={globalUrl}
-          workflow={workflow}
-          setSelectedAction={setSelectedAction}
-          setSelectedApp={setSelectedApp}
-          setAuthenticationModalOpen={setAuthenticationModalOpen}
-          appAuthentication={appAuthentication}
-          selectedAction={selectedAction}
-          apps={apps}
-          setConfigureWorkflowModalOpen={setConfigureWorkflowModalOpen}
-          saveWorkflow={saveWorkflow}
-          newWebhook={newWebhook}
-          submitSchedule={submitSchedule}
-          referenceUrl={referenceUrl}
-          workflowExecutions={workflowExecutions}
-          getWorkflowExecution={getWorkflowExecution}
-          isCloud={isCloud}
-        />
+		<div style={{height: 75, width: "100%", background: `linear-gradient(to right, #f86a3e, #fc3922)`, position: "relative",}} />
+		<div style={{ padding: "50px 0px 50px 0px", }}>
+			<ConfigureWorkflow
+			  workflow={workflow}
+			  userdata={userdata}
+			  globalUrl={globalUrl}
+			  apps={apps}
+			  setAuthenticationType={setAuthenticationType}
+			  setSelectedAction={setSelectedAction}
+			  setSelectedApp={setSelectedApp}
+			  setAuthenticationModalOpen={setAuthenticationModalOpen}
+			  appAuthentication={appAuthentication}
+			  selectedAction={selectedAction}
+			  setConfigureWorkflowModalOpen={setConfigureWorkflowModalOpen}
+			  saveWorkflow={saveWorkflow}
+			  newWebhook={newWebhook}
+			  submitSchedule={submitSchedule}
+			  referenceUrl={referenceUrl}
+			  workflowExecutions={workflowExecutions}
+			  getWorkflowExecution={getWorkflowExecution}
+			  isCloud={isCloud}
+			/>
+		</div>
       </Dialog>
     ) : null;
 

frontend/src/views/AppCreator.jsx

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

frontend/src/views/Dashboard.jsx

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

frontend/src/views/Welcome.jsx

@@ -47,10 +47,7 @@ const Welcome = (props) => {
 		}
 	}, [activeStep])
 
-  	const isCloud =
-			window.location.host === "localhost:3002" ||
-			window.location.host === "shuffler.io";
-
+  	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 		const [steps, setSteps] = useState([
 			"Help us get to know you", 
 			"Find your Apps", 
@@ -512,7 +509,7 @@ const Welcome = (props) => {
 										navigate("/workflows?message=Skipped intro")
 									}}>
 										<CardActionArea style={actionObject}>
-											<img src={experienced_image} style={{padding: experienced_image === defaultImage ? 2 : 10, objectFit: "scale-down", minHeight: experienced_image === defaultImage ? 40 : 70, maxHeight: experienced_image === defaultImage ? 40 : 70, bordeRadius: theme.palette.borderRadius, marginBottom: experienced_image === defaultImage ? 24 : 2 }} />
+											<img src={experienced_image} style={{padding: experienced_image === defaultImage ? 2 : 10, objectFit: "scale-down", minHeight: experienced_image === defaultImage ? 40 : 70, maxHeight: experienced_image === defaultImage ? 40 : 70, bordeRadius: theme.palette.borderRadius*2, marginBottom: experienced_image === defaultImage ? 24 : 2 }} />
 											<Typography variant="h4" style={{color: "#F1F1F1"}}> 
 												Experienced 
 											</Typography>										

frontend/src/views/Workflows.jsx

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