A ton of workflow related & onboarding changes

2024-08-15 23:22:25 +02:00
parent eaf8acfec0
commit 7d8a52cfff
18 changed files with 1151 additions and 593 deletions
@@ -53,13 +53,15 @@ export const findSpecificApp = (framework, inputcategory) => {
  }

  const category = inputcategory.toLowerCase().split(":")[0].trim()
-
-  //console.log("findSpecificApp: ", category, framework)
  if (category === "edr" || category === "eradication" || category === "edr & av") {
-	  if (framework["EDR & AV"] !== undefined && framework["EDR & AV"].name !== undefined) { 
+	  if (framework["EDR & AV"] !== undefined && framework["EDR & AV"].name !== undefined && framework["EDR & AV"].name !== "") {
 		  return framework["EDR & AV"]	
 	  }

+	  if (framework["edr"] !== undefined && framework["edr"].name !== undefined && framework["edr"].name !== "") {
+		  return framework["edr"]
+	  }
+
 	  return {
 		  name: "EDR :default",
 		  large_image: parsedDatatypeImages()["EDR & AV"],
@@ -68,10 +70,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "communication" || category === "comms") {
-	  if (framework["Comms"] !== undefined && framework["Comms"].name !== undefined) {
+	  if (framework["Comms"] !== undefined && framework["Comms"].name !== undefined && framework["Comms"].name !== "") {
 		  return framework["Comms"]	
 	  }

+	  if (framework["communication"] !== undefined && framework["communication"].name !== undefined && framework["communication"].name !== "") {
+		  return framework["communication"]	
+	  }
+
 	  return {
 		  name: "COMMS :default",
 		  large_image: parsedDatatypeImages()["COMMS"],
@@ -80,10 +86,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "email") {
-	  if (framework["Email"] !== undefined && framework["Email"].name !== undefined) {
+	  if (framework["Email"] !== undefined && framework["Email"].name !== undefined && framework["Email"].name !== "") {
 		  return framework["Email"]	
 	  }

+	  if (framework["email"] !== undefined && framework["email"].name !== undefined && framework["email"].name !== "") {
+		  return framework["email"]	
+	  }
+
 	  return {
 		  name: "COMMS :default",
 		  large_image: parsedDatatypeImages()["COMMS"],
@@ -92,10 +102,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "assets") {
-	  if (framework["Assets"] !== undefined && framework["Assets"].name !== undefined) {
+	  if (framework["Assets"] !== undefined && framework["Assets"].name !== undefined && framework["Assets"].name !== "") {
 		  return framework["Assets"]	
 	  }

+	  if (framework["assets"] !== undefined && framework["assets"].name !== undefined && framework["assets"].name !== "") {
+		  return framework["assets"]	
+	  }
+
 	  return {
 		  name: "ASSETS :default",
 		  large_image: parsedDatatypeImages()["ASSETS"],
@@ -104,10 +118,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "cases") {
-	  if (framework["Cases"] !== undefined && framework["Cases"].name !== undefined) {
+	  if (framework["Cases"] !== undefined && framework["Cases"].name !== undefined && framework["Cases"].name !== "") {
 		  return framework["Cases"]
 	  }

+	  if (framework["cases"] !== undefined && framework["cases"].name !== undefined && framework["cases"].name !== "") {
+		  return framework["cases"]
+	  }
+
 	  return {
 		  name: "CASES :default",
 		  large_image: parsedDatatypeImages()["CASES"],
@@ -116,10 +134,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "iam") {
-	  if (framework["IAM"] !== undefined &&	framework["IAM"].name !== undefined) {
+	  if (framework["IAM"] !== undefined &&	framework["IAM"].name !== undefined && framework["IAM"].name !== "") {
 		  return framework["IAM"]
 	  }

+	  if (framework["iam"] !== undefined &&	framework["iam"].name !== undefined && framework["iam"].name !== "") {
+		  return framework["iam"]
+	  }
+
 	  return {
 		  name: "IAM :default",
 		  large_image: parsedDatatypeImages()["IAM"],
@@ -128,10 +150,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "network") {
-	  if (framework["Network"] !== undefined && framework["Network"].name !== undefined) {
+	  if (framework["Network"] !== undefined && framework["Network"].name !== undefined && framework["Network"].name !== "") {
 		  return framework["Network"]
 	  }

+	  if (framework["network"] !== undefined && framework["network"].name !== undefined && framework["network"].name !== "") {
+		  return framework["network"]
+	  }
+
 	  return {
 		  name: "Network :default",
 		  large_image: parsedDatatypeImages()["NETWORK"],
@@ -140,10 +166,14 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "intel") {
-	  if (framework["Intel"] !== undefined && framework["Intel"].name !== undefined) {
+	  if (framework["Intel"] !== undefined && framework["Intel"].name !== undefined && framework["Intel"].name !== "") {
 		  return framework["Intel"]
 	  }

+	  if (framework["intel"] !== undefined && framework["intel"].name !== undefined && framework["intel"].name !== "") {
+		  return framework["intel"]
+	  }
+
 	  return {
 		  name: "INTEL :default",
 		  large_image: parsedDatatypeImages()["INTEL"],
@@ -152,9 +182,13 @@ export const findSpecificApp = (framework, inputcategory) => {
 		  id: "",
 	  }
  } else if (category === "siem") {
-	  if (framework["SIEM"] !== undefined && framework["SIEM"].name !== undefined) {
+	  if (framework["SIEM"] !== undefined && framework["SIEM"].name !== undefined && framework["SIEM"].name !== "") {
 		  return framework["SIEM"]
 	  }
+	  
+	  if (framework["siem"] !== undefined && framework["siem"].name !== undefined && framework["siem"].name !== "") {
+		  return framework["siem"]
+	  }

 	  return {
 		  name: "SIEM :default",
@@ -47,6 +47,8 @@ const AppSearchButtons = (props) => {
    const [newSelectedApp, setNewSelectedApp] = useState(undefined)

    useEffect(() => {
+		console.log("UPDATED APP: ", newSelectedApp)
+
        if (newSelectedApp !== undefined && setMissing != undefined) {
            const submitAppFramework = {
                "description": newSelectedApp.description,
@@ -136,8 +138,14 @@ const AppSearchButtons = (props) => {

    const icon = foundApp.large_image
 	var foundAppImage = AppImage
-	if (foundApp.name !== undefined && foundApp.name !== null && !foundApp.name.includes(":default")) {
-		foundAppImage = foundApp.large_image
+	if (foundApp.name !== undefined && foundApp.name !== null && foundApp.name.length > 0 && !foundApp.name.includes(":default")) {
+
+		if (AppImage === undefined || AppImage === null || AppImage.length < 10) {
+			foundAppImage = foundApp.large_image
+		}
+	} else {
+		const newapp = findSpecificApp(appFramework, appType) 
+    	// const { userdata, globalUrl, appFramework, moreButton, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, getAppFramework, } = props
 	}

    let xsValue = 12;
@@ -204,9 +212,14 @@ const AppSearchButtons = (props) => {
                                <IconButton
                                    style={{
                                        flex: 1,
+										position: "absolute",
+										right: 0, 
+										top: 10, 
+										height: 10, 
+
                                        // width: 224,
-                                        marginLeft: discoveryData === ("communication") ? 112 : 200,
-                                        width: "100%",
+                                        //marginLeft: discoveryData === ("communication") ? 112 : 200,
+                                        //width: "100%",
                                        marginBottom: 23,
                                        fontSize: 16,
                                        background: "rgba(33, 33, 33, 1)",
@@ -220,6 +233,7 @@ const AppSearchButtons = (props) => {
                                    <Closeicon style={{ width: 16 }} />
                                </IconButton>
                            </Tooltip>
+							{/*
                            <Tooltip
                                title="Delete app"
                                placement="bottom"
@@ -259,6 +273,7 @@ const AppSearchButtons = (props) => {
                                    <DeleteIcon style={{ height: 15, width: 15, }} />
                                </IconButton>
                            </Tooltip>
+							*/}
                        </div>
                    </div>
                    <div
@@ -23,6 +23,7 @@ import {
    Paper,
    TextField,
    Collapse,
+    Fade,
    IconButton,
    Avatar,
    ButtonBase,
@@ -41,10 +42,12 @@ const AppSelection = props => {
        userdata,
        globalUrl,
        appFramework,
+		setAppFramework, 
        setActiveStep,
        defaultSearch,
        setDefaultSearch,
        checkLogin,
+
    } = props;
    const [discoveryData, setDiscoveryData] = React.useState({})
    const [selectionOpen, setSelectionOpen] = React.useState(false)
@@ -57,6 +60,7 @@ const AppSelection = props => {
    const [moreButton, setMoreButton] = useState(false);

    // const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
+  	document.title = "Choose your apps"
    const ref = useRef()
    let navigate = useNavigate();
    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
@@ -98,74 +102,75 @@ const AppSelection = props => {
        else if (discoveryData === "IAM") {
            appFramework.iam = submitNewApp
        }
-        setFrameworkItem(submitNewApp);
-        setSelectionOpen(false);
-        console.log("Selected app changed (effect)");
+
+        setFrameworkItem(submitNewApp)
+        setSelectionOpen(false)
+
+		if (setAppFramework !== undefined) {
+			setAppFramework(appFramework)
+		}
+		GetApps()
    }, [newSelectedApp]);

+	const reloadAppButtons = (framework) => {
+		var tempApps = []
+		const lastApps = {}
+		let endTypes = ["network", "assets", "iam"]
+
+		if (framework === undefined || framework === null || Object.keys(framework).length === 0) {
+			//window.location.href = "/welcome"
+			return
+		}
+
+		Object.entries(framework).forEach(([key, value]) => {
+			// Overwrrite email properly
+			if (key.toLowerCase() === "communication") {
+				value["type"] = "email"
+				framework["email"] = value
+				return
+			}
+
+			if (key.toLowerCase() === "other") {
+				return
+			}
+
+			value.type = key;
+			if (endTypes.includes(value.type.toLowerCase())) {
+				lastApps[value.type] = value
+				return
+			}
+
+			if (lastPosted.type === value.type) {
+				value = lastPosted
+			}
+
+			tempApps.push(JSON.parse(JSON.stringify(value)));
+		});
+
+		tempApps.sort((a, b) => {
+			if (a.type.length > b.type.length) {
+				return -1;
+			} else if (a.type.length < b.type.length) {
+				return 1;
+			}
+		});
+
+		let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
+		if (endTypes.includes(lastType)) {
+			lastApps[lastPosted.type] = lastPosted
+		}
+
+		if (moreButton) {
+			tempApps.push(JSON.parse(JSON.stringify(lastApps["network"])))
+			tempApps.push(JSON.parse(JSON.stringify(lastApps["assets"])))
+			tempApps.push(JSON.parse(JSON.stringify(lastApps["iam"])))
+		}
+
+		setAppButtons(tempApps)
+	}
+
    useEffect(() => {
-        var tempApps = []
-        if (tempApps.length === 0) {
-            // Object.entries(appFramework).forEach(([key, value]) => {
-            //     value.type = key;
-            //     tempApps.push(value);
-            // });
-
-            // // Define the custom sorting order
-            // const customSortingOrder = ["CASES", "SIEM", "ENDPOINT", "INTEL", "EMAIL"];
-
-            const lastApps = {}
-            let endTypes = ["network", "assets", "iam"]
-
-            if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
-                //window.location.href = "/welcome"
-                return
-            }
-
-
-            Object.entries(appFramework).forEach(([key, value]) => {
-                if (key.toLowerCase() === "other" || key.toLowerCase() === "communication") {
-                    return
-                }
-
-                value.type = key;
-
-                if (endTypes.includes(value.type.toLowerCase())) {
-                    lastApps[value.type] = value
-                    return
-                }
-
-                if (lastPosted.type === value.type) {
-                    value = lastPosted
-                }
-
-                tempApps.push(JSON.parse(JSON.stringify(value)));
-            });
-
-            tempApps.sort((a, b) => {
-                if (a.type.length > b.type.length) {
-                    return -1;
-                } else if (a.type.length < b.type.length) {
-                    return 1;
-                }
-            });
-
-            let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
-
-            if (endTypes.includes(lastType)) {
-                lastApps[lastPosted.type] = lastPosted
-            }
-
-            if (moreButton) {
-                tempApps.push(JSON.parse(JSON.stringify(lastApps["network"])))
-                tempApps.push(JSON.parse(JSON.stringify(lastApps["assets"])))
-                tempApps.push(JSON.parse(JSON.stringify(lastApps["iam"])))
-            }
-
-            setAppButtons(tempApps)
-            console.log("Updated appButtons: ", appButtons)
-            GetApps()
-        }
+		reloadAppButtons(appFramework)	
    }, [lastPosted, moreButton])

    if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
@@ -174,11 +179,6 @@ const AppSelection = props => {
    }

    const setFrameworkItem = (data) => {
-        console.log("Setting framework item: ", data, isCloud)
-        // if (!isCloud) {
-        //   activateApp(data.id)
-        // }
-
        fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
            method: "POST",
            headers: {
@@ -241,31 +241,39 @@ const AppSelection = props => {
            body: JSON.stringify(data),
            credentials: "include",
        })
-            .then((responseJson) => {
-                if (responseJson === null) {
-                    console.log("null-response from server")
-                    const pretend_apps = [{
-                        "description": "TBD",
-                        "id": "TBD",
-                        "large_image": "",
-                        "name": "TBD",
-                        "type": "TBD"
-                    }]
+		.then((response) => {
+			return response.json()
+		})
+		.then((responseJson) => {
+			if (responseJson === null || responseJson === undefined) {
+				console.log("null-response from server")
+				const pretend_apps = [{
+					"description": "TBD",
+					"id": "TBD",
+					"large_image": "",
+					"name": "TBD",
+					"type": "TBD"
+				}]

-                    setApps(pretend_apps)
-                    return
-                }
+				setApps(pretend_apps)
+				return
+			}

-                if (responseJson.success === false) {
-                    console.log("error loading apps: ", responseJson)
-                    return
-                }
+			if (responseJson.success === false) {
+				console.log("error loading apps: ", responseJson)
+				return
+			}

-                setApps(responseJson);
-            })
-            .catch((error) => {
-                console.log("App loading error: " + error.toString());
-            })
+			if (setAppFramework !== undefined) {
+				setAppFramework(responseJson)
+			}
+
+			setApps(responseJson)
+			reloadAppButtons(responseJson)
+		})
+		.catch((error) => {
+			console.log("App loading error: " + error.toString());
+		})
    }

    const onNodeSelect = (label) => {
@@ -277,8 +285,6 @@ const AppSelection = props => {
            });
        }

-        console.log("NODESELECT: ", label)
-
        setDiscoveryData(label)
        setSelectionOpen(true)
        setDefaultSearch(label.charAt(0).toUpperCase() + (label.substring(1)).toLowerCase())
@@ -304,209 +310,225 @@ const AppSelection = props => {
    };

    return (
-        <Collapse in={true}>
-            <Tooltip
-                title="Back"
-                placement="top"
-                style={{ zIndex: 10011 }}
-            >
-                <IconButton
-                    style={{
-                    }}
-                    onClick={() => {
-                        navigate('/welcome');
-                        window.location.reload();
-                    }}
-                >
-                    <ArrowBackIcon style={{ width: 20 }} />
-                    <Typography style={{fontSize : 16, marginLeft : 2}}>Back</Typography>
-                </IconButton>
-            </Tooltip>
-            <div
-                style={{
-                    // minHeight: sizing,
-                    // maxHeight: sizing,
-                    marginTop: 10,
-                    width: isMobile ? 350 : 500,
-                    marginBottom: 25,
-                    textAlign: isMobile ? "center" : null,
-                }}
-            >
-                {selectionOpen ? (
-                    <div
-                        style={{
-                            width: isMobile ? 225 : 319,
-                            height: 395,
-                            flexShrink: 0,
-                            marginLeft: 70,
-                            marginTop: 68,
-                            position: "absolute",
-                            zIndex: 100,
-                            borderRadius: 6,
-                            border: "1px solid var(--Container-Stroke, #494949)",
-                            background: "var(--Container, #212121)",
-                            boxShadow: "8px 8px 32px 24px rgba(0, 0, 0, 0.16)",
-                        }}
-                    >
-                        <div style={{ display: "flex" }}>
-                            <div style={{ display: "flex", textAlign: "center", textTransform: "capitalize" }}>
-                                <Typography style={{ padding: 16, color: "#FFFFFF", textTransform: "capitalize" }}> {discoveryData} </Typography>
-                            </div>
-                            <div style={{ display: "flex" }}>
-                                <Tooltip
-                                    title="Close"
-                                    placement="top"
-                                    style={{ zIndex: 10011 }}
-                                >
-                                    <IconButton
-                                        style={{
-                                            flex: 1,
-                                            // width: 224,
-                                            marginLeft: discoveryData === ("communication") ? 112 : 200,
-                                            width: "100%",
-                                            marginBottom: 23,
-                                            fontSize: 16,
-                                            background: "rgba(33, 33, 33, 1)",
-                                            borderColor: "rgba(33, 33, 33, 1)",
-                                            borderRadius: 8,
-                                        }}
-                                        onClick={() => {
-                                            setSelectionOpen(false)
-                                        }}
-                                    >
-                                        <CloseIcon style={{ width: 16 }} />
-                                    </IconButton>
-                                </Tooltip>
-                                <Tooltip
-                                    title="Delete app"
-                                    placement="bottom"
-                                    style={{ zIndex: 10011 }}
-                                >
-                                    <IconButton
-                                        style={{ zIndex: 12501, position: "absolute", top: 32, right: 16 }}
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            setSelectionOpen(false)
-                                            setDefaultSearch("")
-                                            const submitDeletedApp = {
-                                                "description": "",
-                                                "id": "remove",
-                                                "name": "",
-                                                "type": discoveryData
-                                            }
-                                            setFrameworkItem(submitDeletedApp)
-                                            setNewSelectedApp({})
-                                            setTimeout(() => {
-                                                setDiscoveryData({})
-                                                setFrameworkItem(submitDeletedApp)
-                                                setNewSelectedApp({})
-                                            }, 1000)
-                                            //setAppName(discoveryData.cases.name)
-                                        }}
-                                    >
-                                        <DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
-                                    </IconButton>
-                                </Tooltip>
-                            </div>
-                        </div>
-                        <div
-                            style={{ width: "100%", border: "1px #494949 solid" }}
-                        />
-                        <AppSearch
-                            defaultSearch={defaultSearch}
-                            newSelectedApp={newSelectedApp}
-                            setNewSelectedApp={setNewSelectedApp}
-                            userdata={userdata}
-                        // cy={cy}
-                        />
-                    </div>
-                ) : null}
-                <Typography
-                    variant="h4"
-                    style={{
-                        marginLeft: 8,
-                        marginTop: isMobile ? null : 40,
-                        marginRight: 30,
-                        marginBottom: 0,
-                    }}
-                    color="rgba(241, 241, 241, 1)"
-                >
-                    Find your apps
-                </Typography>
-                <Typography
-                    variant="body2"
-                    style={{
-                        marginLeft: 8,
-                        marginTop: 10,
-                        marginRight: 30,
-                        marginBottom: 40,
-                    }}
-                    color="rgba(158, 158, 158, 1)"
-                >
-                    Select the apps you work with and we will connect them for you.
-                </Typography>
-                <Grid rowSpacing={1} columnSpacing={2} container >
-                    {appButtons.map((appData, index) => {
-                        // This is here due to a memory issue with setting apps properly
-                        if (appData.id === "remove") {
-                            console.log("Removed as appdata is overridden: ", appData)
+        <Fade in={true} timeout={1250}>
+			<div>
+				{/*
+            	<Tooltip
+            	    title="Back"
+            	    placement="top"
+            	    style={{ zIndex: 10011 }}
+            	>
+            	    <IconButton
+            	        style={{
+            	        }}
+            	        onClick={() => {
+            	            navigate('/welcome');
+            	            window.location.reload();
+            	        }}
+            	    >
+            	        <ArrowBackIcon style={{ width: 20 }} />
+            	        <Typography style={{fontSize : 16, marginLeft : 2}}>Back</Typography>
+            	    </IconButton>
+            	</Tooltip>
+				*/}
+            	<div
+            	    style={{
+            	        // minHeight: sizing,
+            	        // maxHeight: sizing,
+            	        marginTop: 10,
+            	        width: isMobile ? 350 : 500,
+            	        marginBottom: 25,
+            	        textAlign: isMobile ? "center" : null,
+            	    }}
+            	>
+            	    {selectionOpen ? (
+            	        <div
+            	            style={{
+            	                width: isMobile ? 225 : 319,
+            	                height: 395,
+            	                flexShrink: 0,
+            	                marginLeft: 70,
+            	                marginTop: 68,
+            	                position: "absolute",
+            	                zIndex: 100,
+            	                borderRadius: 6,
+            	                border: "1px solid var(--Container-Stroke, #494949)",
+            	                background: "var(--Container, #212121)",
+            	                boxShadow: "8px 8px 32px 24px rgba(0, 0, 0, 0.16)",
+            	            }}
+            	        >
+            	            <div style={{ display: "flex" }}>
+            	                <div style={{ display: "flex", textAlign: "center", textTransform: "capitalize" }}>
+            	                    <Typography style={{ padding: 16, color: "#FFFFFF", textTransform: "capitalize" }}> {discoveryData} </Typography>
+            	                </div>
+            	                <div style={{ display: "flex" }}>
+            	                    <Tooltip
+            	                        title="Close"
+            	                        placement="top"
+            	                        style={{ zIndex: 10011 }}
+            	                    >
+            	                        <IconButton
+            	                            style={{
+            	                                flex: 1,

-                            appData = {
-                                "count": 0,
-                                "description": "",
-                                "id": "",
-                                "large_image": "",
-                                "name": "",
-                                "type": appData.type,
-                            }
-                        }
+												position: "absolute",
+												top: 0,
+												right: 6,
+            	                            }}
+            	                            onClick={() => {
+            	                                setSelectionOpen(false)
+            	                            }}
+            	                        >
+            	                            <CloseIcon style={{ width: 16 }} />
+            	                        </IconButton>
+            	                    </Tooltip>
+            	                    <Tooltip
+            	                        title="Remove selection"
+            	                        placement="bottom"
+            	                        style={{ zIndex: 10011 }}
+            	                    >
+            	                        <IconButton
+            	                            style={{ zIndex: 12501, position: "absolute", top: 26, right: 6, }}
+            	                            onClick={(e) => {
+            	                                e.preventDefault();
+            	                                setSelectionOpen(false)
+            	                                setDefaultSearch("")
+            	                                const submitDeletedApp = {
+            	                                    "description": "",
+            	                                    "id": "remove",
+            	                                    "name": "",
+            	                                    "type": discoveryData
+            	                                }

-                        const appName = appData.name
-                        const AppImage = appData.large_image
-                        const appType = appData.type
+            	                                setFrameworkItem(submitDeletedApp)
+            	                                setNewSelectedApp({})
+            	                                setTimeout(() => {
+            	                                    setDiscoveryData({})
+            	                                    setFrameworkItem(submitDeletedApp)
+            	                                    setNewSelectedApp({})
+            	                                }, 200)
+            	                                //setAppName(discoveryData.cases.name)
+            	                            }}
+            	                        >
+            	                            <DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
+            	                        </IconButton>
+            	                    </Tooltip>
+            	                </div>
+            	            </div>
+            	            <div
+            	                style={{ width: "100%", border: "1px #494949 solid" }}
+            	            />
+            	            <AppSearch
+            	                defaultSearch={defaultSearch}
+            	                newSelectedApp={newSelectedApp}
+            	                setNewSelectedApp={setNewSelectedApp}
+            	                userdata={userdata}
+            	            // cy={cy}
+            	            />
+            	        </div>
+            	    ) : null}
+            	    <Typography
+            	        variant="h4"
+            	        style={{
+            	            marginLeft: 8,
+            	            marginTop: isMobile ? null : 40,
+            	            marginRight: 30,
+            	            marginBottom: 0,
+            	        }}
+            	        color="rgba(241, 241, 241, 1)"
+            	    >
+            	        Find your apps
+            	    </Typography>
+            	    <Typography
+            	        variant="body2"
+            	        style={{
+            	            marginLeft: 8,
+            	            marginTop: 10,
+            	            marginRight: 30,
+            	            marginBottom: 40,
+            	        }}
+            	        color="rgba(158, 158, 158, 1)"
+            	    >
+            	        Select the apps you work with and we will connect them for you.
+            	    </Typography>
+            	    <Grid rowSpacing={1} columnSpacing={2} container >
+            	        {appButtons.map((appData, index) => {
+            	            // This is here due to a memory issue with setting apps properly
+            	            if (appData.id === "remove") {
+            	                appData = {
+            	                    "count": 0,
+            	                    "description": "",
+            	                    "id": "",
+            	                    "large_image": "",
+            	                    "name": "",
+            	                    "type": appData.type,
+            	                }
+            	            }

-                        return (
-                            <AppSearchButtons
-                                appFramework={appFramework}
-                                index={index}
-                                totalApps={appButtons.length}
-                                appName={appName}
-                                appType={appType}
-                                AppImage={AppImage}
-                                defaultSearch={defaultSearch}
-                                finishedApps={finishedApps}
-                                onNodeSelect={onNodeSelect}
-                                discoveryData={discoveryData}
-                                setDiscoveryData={setDiscoveryData}
-                                setDefaultSearch={setDefaultSearch}
-                                apps={apps}
-                                setMoreButton={setMoreButton}
-                                moreButton={moreButton}
-                            />
-                        )
-                    })}
-                </Grid>
-            </div>
-            {!moreButton ? (
-                <div style={{ width: "100%", marginLeft: isMobile ? 80 : 200, marginBottom: 20, textAlign: isMobile ? "center" : null }}>
-                    <Link style={{ color: "#FF8444" }} onClick={() => {
-                        setMoreButton(true)

-                        setTimeout(() => {
-                            navigate("/welcome?tab=2")
-                        }, 250)
-                    }}
-                    >See More Apps</Link>
-                </div>) : ""}
-            <div style={{ flexDirection: "row", width: isMobile ? 340 : null, textAlign: isMobile ? "center" : null }}>
-                <Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
-                    navigate("/welcome?tab=3")
-                    setActiveStep(2)
-                }}>
-                    Continue
-                </Button>
-            </div>
-        </Collapse>
+							if (appData === undefined || appData === null || appData.name === undefined || appData.name === "") {
+								appData = {
+									"count": 0,
+									"description": "",
+									"id": "",
+									"large_image": "",
+									"name": "",
+									"type": appData.type,
+								}
+							}
+
+							//console.log("APP: ", appData)
+
+            	            const appName = appData.name
+            	            const AppImage = appData.large_image
+            	            const appType = appData.type
+
+            	            return (
+            	                <AppSearchButtons
+            	                    appFramework={appFramework}
+            	                    index={index}
+            	                    totalApps={appButtons.length}
+
+            	                    appName={appName}
+            	                    appType={appType}
+            	                    AppImage={AppImage}
+
+            	                    defaultSearch={defaultSearch}
+            	                    finishedApps={finishedApps}
+            	                    onNodeSelect={onNodeSelect}
+            	                    discoveryData={discoveryData}
+            	                    setDiscoveryData={setDiscoveryData}
+            	                    setDefaultSearch={setDefaultSearch}
+            	                    apps={apps}
+            	                    setMoreButton={setMoreButton}
+            	                    moreButton={moreButton}
+            	                />
+            	            )
+            	        })}
+            	    </Grid>
+            	</div>
+            	{!moreButton ? (
+            	    <div style={{ width: "100%", marginLeft: isMobile ? 80 : 200, marginBottom: 20, textAlign: isMobile ? "center" : null }}>
+            	        <Link style={{ color: "#FF8444" }} onClick={() => {
+            	            setMoreButton(true)
+
+            	            setTimeout(() => {
+            	                navigate("/welcome?tab=2")
+            	            }, 250)
+            	        }}
+            	        >See More Apps</Link>
+            	    </div>) : ""}
+
+            	<div style={{ flexDirection: "row", width: isMobile ? 340 : null, textAlign: isMobile ? "center" : null }}>
+            	    <Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
+            	        navigate("/usecases2")
+            	        setActiveStep(2)
+            	    }}>
+						See usecases
+            	    </Button>
+            	</div>
+			</div>
+        </Fade>
    )
 }

@@ -122,7 +122,7 @@ const Branding = (props) => {
 	return (
 		<div style={{ width: clickedFromOrgTab? 1030: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
 			<h2 style={{marginTop: clickedFromOrgTab ?0:null,}}>
-				Branding
+				Partner Status & Branding
 			</h2>
 			<Typography variant="body1" color="textSecondary" style={{ marginTop: 20, marginBottom: 10 }}>
 				You can customize your organization's branding by uploading a logo, changing the color scheme and a lot more. 
@@ -792,8 +792,6 @@ const ConfigureWorkflow = (props) => {
 	}

 	parsedName = (parsedName.charAt(0).toUpperCase() + parsedName.slice(1)).replaceAll("_", " ");
-
-	console.log("AUTH Action: ", action)
 	return (
 		<ListItem 
 			style={{padding: 0, display: "flex", flexDirection: "column", }}
@@ -63,12 +63,12 @@ import {
 } from "@mui/icons-material";

 const EditWorkflow = (props) => {
-	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, } = props
+	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, apps, saveWorkflow, expanded, } = props

  const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove

  const [submitLoading, setSubmitLoading] = React.useState(false);
-  const [showMoreClicked, setShowMoreClicked] = React.useState(false);
+  const [showMoreClicked, setShowMoreClicked] = React.useState(expanded === true ? true : false);
  const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)

  const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
@@ -80,6 +80,8 @@ 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 [outputMarkdown, setOutputMarkdown] = React.useState(workflow.output_markdown !== undefined && workflow.output_markdown !== null ? workflow.output_markdown : "")

  const classes = useStyles();

@@ -283,6 +285,7 @@ const EditWorkflow = (props) => {
 				}

 				innerWorkflow.input_questions = validfields
+				innerWorkflow.input_markdown = inputMarkdown

 				innerWorkflow.name = name 
 				innerWorkflow.description = description 
@@ -298,7 +301,13 @@ const EditWorkflow = (props) => {
 					innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"]+1}-${dueDate["$D"]}`).getTime()/1000
 				}

-				if (setNewWorkflow !== undefined) {
+				if (saveWorkflow !== undefined) {
+					saveWorkflow(innerWorkflow)
+					
+					if (setWorkflow !== undefined) {
+						setWorkflow(innerWorkflow)
+					}
+				} else if (setNewWorkflow !== undefined) {
 					setNewWorkflow(
 						innerWorkflow.name,
 						innerWorkflow.description,
@@ -804,6 +813,40 @@ const EditWorkflow = (props) => {
 								  <AddIcon style={{}} />
 								</Button>

+								
+								{inputQuestions.length === 0 ? null : 
+									<div>
+										<Typography variant="h6" style={{marginTop: 50, }}>
+											Input Markdown 
+										</Typography>
+										<TextField
+											multiline
+											rows={3}
+											fullWidth
+											color="primary"
+											value={inputMarkdown}
+											onChange={(e) => {
+												setInputMarkdown(e.target.value)
+												workflow.input_markdown = e.target.value
+												setWorkflow(workflow)
+												setUpdate(Math.random())
+											}}
+										/>
+
+										{/*
+										<Typography variant="h6" style={{marginTop: 50, }}>
+											Output Markdown
+										</Typography>
+										<TextField
+											multiLine
+											rows={3}
+											fullWidth
+											color="primary"
+										/>
+										*/}
+									</div>
+								}
+
 								<Divider style={{marginTop: 20, marginBottom: 20, }} />

 								<Typography variant="body1" style={{marginTop: 50, }}>
@@ -171,7 +171,7 @@ const Header = (props) => {
    setTooltipOpen(true);
  };

-  const topbar_var = "topbar_closed2"
+  const topbar_var = "topbar_closed4"

  useEffect(() => {
    const topbar = localStorage.getItem(topbar_var)
@@ -575,15 +575,15 @@ const Header = (props) => {
            //globalUrl = responseJson.region_url
          }
          if (responseJson["reason"] === "SSO_REDIRECT") {
-			setTimeout(() => {
-				toast.info("Redirecting to SSO login page as SSO is required for this organization.")
-				window.location.href = responseJson["url"]
-				return
-			}, 2000)
+            setTimeout(() => {
+              toast.info("Redirecting to SSO login page as SSO is required for this organization.")
+              window.location.href = responseJson["url"]
+              return
+            }, 2000)
          } else {
-          setTimeout(() => {
-            window.location.reload()
-          }, 2000);
+            setTimeout(() => {
+              window.location.reload()
+            }, 2000);
          }
          toast("Successfully changed active organization - refreshing!");
        } else {
@@ -711,7 +711,7 @@ const Header = (props) => {
        	</MenuItem>
 				</Link>
 				*/}
-        <Link to="/usecases" style={hrefStyle}>
+        <Link to="/usecases2" style={hrefStyle}>
          <MenuItem
            onClick={(event) => {
              handleClose();
@@ -858,7 +858,7 @@ const Header = (props) => {
      </List>
      <List className={classes.menuList} component="nav">
        <ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
-          <Link to="/usecases" style={hrefStyle}>
+          <Link to="/usecases2" style={hrefStyle}>
            <Button
              variant="text"
              color="secondary"
@@ -890,7 +890,7 @@ const Header = (props) => {
          </Link>
        </ListItem>
        <ListItem
-          style={{ textAlign: "center",  marginLeft: "0px", paddingRight: 0 }}
+          style={{ textAlign: "center", marginLeft: "0px", paddingRight: 0 }}
        // onMouseEnter={handleMenuOpen}
        // onMouseLeave={handleMenuClose}
        >
@@ -898,7 +898,7 @@ const Header = (props) => {
            variant="text"
            color="secondary"
            className={classes.menuButton}
-            style={{width:200}}
+            style={{ width: 200 }}
            onClick={handleMenuOpen}
          >
            Pricing & Services
@@ -932,11 +932,10 @@ const Header = (props) => {
                Training Courses
              </Link>
            </MenuItem>
-	  		<Divider />
-
-	  		<MenuItem className={classes.dropdownMenuItem} onClick={() => handleMenuItemClick('/partners')}>
+            <div className={classes.divider} />
+            <MenuItem className={classes.dropdownMenuItem} onClick={() => handleMenuItemClick('/partners')}>
              <Link to="/partners" style={hrefStyle}>
-	  			Partner Program
+                Partner Program
              </Link>
            </MenuItem>
          </Menu>
@@ -1031,7 +1030,7 @@ const Header = (props) => {
          margin: "auto",
        }}
      >
-        <div style={{ flexDirection: "row", marginLeft: 0}}>
+        <div style={{ flexDirection: "row", marginLeft: 0 }}>
          <List
            style={{
              height: 56,
@@ -1127,7 +1126,7 @@ const Header = (props) => {
                  </div>
                </Link>
              </ListItem>
-	  		  {/*
+              {/*
              <ListItem style={listItemStyle}>
                <Link to="/admin?admin_tab=billing" style={hrefStyle}>
                  <div
@@ -1407,7 +1406,7 @@ const Header = (props) => {
                      {/* {upgradeHovered ?
                        "Upgrade License"
                        : */}
-                        Upgrade
+                      Upgrade
                      {/* } */}

                    </Button>
@@ -1639,12 +1638,12 @@ const Header = (props) => {

  const topbarHeight = showTopbar ? 40 : 0
  const topbar = !isCloud || !showTopbar ? null :
-    curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/training" || curpath === "/professional-services" ?
+    curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/usecases2" || curpath === "/training" || curpath === "/professional-services" ?
      <span style={{ zIndex: 50001, }}>
        <div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
-          <Typography variant="body1" style={{ paddingTop: 7, margin: "auto", textAlign: "center", color: "white", }}>
+          <Typography style={{ paddingTop: 7, fontSize:16, margin: "auto", textAlign: "center", color: "white", }}>
            {/* Shuffle 1.4.0 is out! Read more about&nbsp; */}
-			New Public&nbsp;
+            New&nbsp;
            <u>
              <span onClick={() => {
                ReactGA.event({
@@ -1655,11 +1654,11 @@ const Header = (props) => {

                navigate("/training")

-              }} style={{ cursor: "pointer", textDecoration: "none", fontWeight: 600, color: "rgba(255,255,255,0.8)" }}>
-				Training Dates Released
+              }} style={{ cursor: "pointer", textDecoration: "none", fontWeight: 600, color: "rgba(255,255,255,0.9)" }}>
+                Public Training
              </span>
            </u>
-            &nbsp;Ahead!
+            &nbsp;Dates Released! 
          </Typography>
          <IconButton color="secondary" style={{ position: "absolute", top: -3, right: 20, }} onClick={(event) => {
            setShowTopbar(false)
@@ -299,12 +299,11 @@ const AuthenticationOauth2 = (props) => {

  const handleOauth2Request = (client_id, client_secret, oauth_url, scopes, admin_consent, prompt, skipScopeReplace) => {

-	  console.log("SKIP SCOPE: ", skipScopeReplace)
 	  if (skipScopeReplace === false || skipScopeReplace === undefined) {

 		  console.log("Selected scopes: ", selectedScopes)
 		  if (selectedScopes !== undefined && selectedScopes !== null && selectedScopes.length > 0) {
-			  toast("Using your scopes instead of the default ones")
+			  //toast("Using your scopes instead of the default ones")
 			  scopes = selectedScopes
 		  }
 	  }
@@ -484,7 +483,27 @@ const AuthenticationOauth2 = (props) => {
 		url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&prompt=admin_consent&scope=${resources}&state=${state}&access_type=offline`;
 	}

+	if (url !== undefined && url !== null && url.length > 0) {
+		if (url.toLowerCase().includes("{tenant")) {
+			// Check location of {tenant, then find the next } and replace with 'common'. Make sure next } is AFTER {tenant 
+			try { 
+				const tenantIndex = url.toLowerCase().indexOf("{tenant")
+				const substring = url.substring(tenantIndex)
+				const nextBracket = substring.indexOf("}")
+				const newUrl = url.substring(0, tenantIndex) + "common" + url.substring(tenantIndex + nextBracket + 1)
+				url = newUrl
+			} catch (e) {
+				console.log("Failed to replace {tenant} with common: ", e)
+			}
+
+		}
+	}
+
+	/*
 	console.log("OAUTH2 URL: ", url)
+	return 
+	*/
+

 	// Force new consent
    //const url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&scope=${resources}&prompt=consent&state=${state}&access_type=offline`;
@@ -600,8 +600,9 @@ const ParsedAction = (props) => {
 			let errorVars = [];
 			if(paramvalue.includes("$")){
 				let actions = workflow.actions?.map((action) => {
-					return "$"+action.label.toLowerCase();
+					return "$"+action.label?.toLowerCase();
 				})
+
 				if(newActionList?.length > 0){
 					let appParentActions = parentActionList?.map(action => "$" + action.name.toLowerCase());
 					let notPresentAction = actions?.filter((action) => !appParentActions?.includes(action))
@@ -629,9 +630,9 @@ const ParsedAction = (props) => {
 				let regex = /(^|[^\\])\$/;
 				if (regex.test(paramvalue)) {
 					if(message.length > 0){
-					message += "\nUse \"\\$\" instead of \"$\".";
+						message += "\nUse \"\\$\" instead of \"$\".";
 					}else{
-					message = "Use \"\\$\" instead of \"$\".";
+						message = "Use \"\\$\" instead of \"$\" to escape variables.";
 					}
 				}
 			}
@@ -640,7 +641,7 @@ const ParsedAction = (props) => {
 		setSelectedActionParameters(newParameters);
        setActionlist(newActionList);
    }, [workflow.execution_variables,paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents,setNewSelectedAction]);
-	console.log("Selected Action:", selectedAction)
+
 	useEffect(() => {
 		selectedNameChange(appActionName)

@@ -1280,12 +1281,14 @@ const ParsedAction = (props) => {
 		}
 	  }

-      var authWritten = false;
+	  var authWritten = false;
 	  var noAppSelected = false 
-	  var paramIndex = selectedAction.parameters.findIndex((param) => param.name === "app_name")
-	  if (paramIndex === -1 || selectedAction.parameters[paramIndex].value === "" || selectedAction.parameters[paramIndex].value === "noapp") {
-	  	// Check the actual value and if it's the same
-	  	noAppSelected = true
+	  if (selectedAction.parameters !== undefined && selectedAction.parameters !== null && selectedAction.parameters.length > 0) {
+		  var paramIndex = selectedAction.parameters.findIndex((param) => param.name === "app_name")
+		  if (paramIndex === -1 || selectedAction.parameters[paramIndex].value === "" || selectedAction.parameters[paramIndex].value === "noapp") {
+			// Check the actual value and if it's the same
+			noAppSelected = true
+		  }
 	  }
 	}

@@ -1320,8 +1323,14 @@ const ParsedAction = (props) => {
 							} 
 						});
              		}
-					  setHiddenDescription(false)
-					  document.activeElement.blur();
+
+					document.activeElement.blur();
+
+					const disabledUiBox = localStorage.getItem("disabled_ui_box")
+					if (disabledUiBox === "true") {
+					} else {
+						setHiddenDescription(false)
+					}
 				}}
 				>
 					<div style={{ display: "flex", marginBottom: 0,}}>
@@ -1874,11 +1883,9 @@ const ParsedAction = (props) => {
 															}
 														}
 														
-														console.log("Old found: ", workflow.actions[key].parameters[subkey].value)
 														const extralength = newname.length-parsedBaseLabel.length
 														param.value = param.value.substring(0, foundindex) + newname + param.value.substring(foundindex-extralength+newname.length, param.value.length)

-														console.log("New: ", workflow.actions[key].parameters[subkey].value)
 													} else { 
 														break
 													}
@@ -1990,18 +1997,25 @@ const ParsedAction = (props) => {
                  selectedAction.authentication_id = "";

                  for (let [key,keyval] in Object.entries(selectedAction.parameters)) {
-                    if (selectedAction.parameters[key].configuration) {
+                    if (selectedAction.parameters[key].configuration === false) {
+						console.log("FIELDSKIP: ", selectedAction.parameters[key].name)
+						continue
+					} 

-					  if (selectedAction.parameters[key].example !== undefined && selectedAction.parameters[key].example !== null && selectedAction.parameters[key].example !== "") {
-		  				if (selectedAction.parameters[key].example.toLowerCase().includes("api") || selectedAction.parameters[key].example.toLowerCase().includes("key") || selectedAction.parameters[key].example.toLowerCase().includes("pass")) {
-                      		selectedAction.parameters[key].value = ""
-						} else {
-                      		selectedAction.parameters[key].value = selectedAction.parameters[key].example
-						}
-					  } else {
-                      	selectedAction.parameters[key].value = ""
-					  }
-                    }
+					if (selectedAction.parameters[key].name === "url" && authenticationType?.type === "oauth2-app" && selectedAction.parameters[key].value.includes("http")) { 
+						continue
+					}
+
+				    if (selectedAction.parameters[key].example !== undefined && selectedAction.parameters[key].example !== null && selectedAction.parameters[key].example !== "") {
+				      if (selectedAction.parameters[key].example.toLowerCase().includes("apik") || selectedAction.parameters[key].example.toLowerCase().includes("key") || selectedAction.parameters[key].example.toLowerCase().includes("pass") || selectedAction.parameters[key].example.toLowerCase().includes("****")) {
+				      	selectedAction.parameters[key].value = ""
+				      } else {
+				      	selectedAction.parameters[key].value = selectedAction.parameters[key].example
+				      }
+
+				    } else {
+				      selectedAction.parameters[key].value = ""
+				    }
                  }
                  setSelectedAction(selectedAction);
                  setUpdate(Math.random());
@@ -2020,7 +2034,11 @@ const ParsedAction = (props) => {
 						for (let [key,keyval] in Object.entries(selectedAction.parameters)) {
 						  //console.log(selectedAction.parameters[key])
 						  if (selectedAction.parameters[key].configuration) {
-							selectedAction.parameters[key].value = "authgroup controlled"
+
+							if (selectedAction.parameters[key].name === "url" && authenticationType?.type === "oauth2-app") {
+							} else {
+								selectedAction.parameters[key].value = "authgroup controlled"
+							}
 						  }
 						}

@@ -2130,6 +2148,14 @@ const ParsedAction = (props) => {
        </div>
      ) : null}

+	  {selectedAction.authentication_id === "authgroups" && (authGroups === undefined || authGroups === null || authGroups.length === 0) ? 
+		<a href="/admin?tab=app_auth" target="_blank" style={{textDecoration: "none", color: "#f85a3e",}}>
+			<Typography variant="body2" style={{marginTop: 5,}}>
+				Create your first Authentication group
+			</Typography>
+		</a>
+	  : null}
+

      {showEnvironment !== undefined && showEnvironment && environments.length > 1 && !isIntegration  ? (
        <div style={{ marginTop: "20px" }}>
@@ -2611,7 +2637,7 @@ const ParsedAction = (props) => {
            marginBottom: hideExtraTypes ? 50 : 200,
          }}
        > {
-			Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0 ? 
+			selectedActionParameters !== undefined && selectedActionParameters !== null && Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0 ? 
 	<div style={{ marginTop: hideExtraTypes ? 10 : 30 }}>
 		  	{isIntegration ? 
 				apps !== undefined && apps !== null && apps.length > 0 ?
@@ -2907,20 +2933,59 @@ const ParsedAction = (props) => {
 			}

 			if (data.value === "authgroup controlled") {
-				return null
+				if (data?.name === "url" && authenticationType?.type === "oauth2-app") {
+				} else {
+					return null
+				}
 			}

-            // selectedAction.selectedAuthentication = e.target.value
-            // selectedAction.authentication_id = e.target.value.id
+			  /*
            if (
              (selectedAction.auth_not_required !== undefined && !selectedAction.auth_not_required) &&
+			  selectedActionParameters[count] !== undefined &&
+			  selectedActionParameters[count] !== null &&
 			  selectedActionParameters[count].value !== undefined &&
+			  selectedAction.parameters[count] !== undefined &&
+			  selectedAction.parameters[count] !== null &&
 			  selectedAction.parameters[count].value !== undefined &&
              selectedAction.selectedAuthentication !== undefined &&
              selectedAction.selectedAuthentication.fields !== undefined &&
              selectedAction.selectedAuthentication.fields[data.name] !==
                undefined
            ) {
+			*/
+
+			/*
+			if (selectedAction.selectedAuthentication !== undefined && selectedAction.selectedAuthentication.fields !== undefined && selectedAction.selectedAuthentication.fields[data.name] !== undefined) {
+
+              // This sets the placeholder in the frontend. (Replaced in backend)
+              selectedActionParameters[count].value = selectedAction.selectedAuthentication.fields[data.name];
+              selectedAction.parameters[count].value = selectedAction.selectedAuthentication.fields[data.name];
+              setSelectedAction(selectedAction);
+              //setUpdate(Math.random())
+
+              if (authWritten) {
+                return null
+              }
+
+              authWritten = true
+              return (
+                <Typography
+                  key={count}
+                  id="skip_auth"
+                  variant="body2"
+                  color="textSecondary"
+                  style={{ marginTop: 5 }}
+                >
+                  Authentication fields are hidden
+                </Typography>
+              )
+            }
+			*/
+
+
+            //!selectedAction.auth_not_required &&
+			if (selectedAction.selectedAuthentication !== undefined && selectedAction.selectedAuthentication.fields !== undefined && selectedAction.selectedAuthentication.fields[data.name] !== undefined) {
              // This sets the placeholder in the frontend. (Replaced in backend)
              selectedActionParameters[count].value =
                selectedAction.selectedAuthentication.fields[data.name];
@@ -2947,6 +3012,7 @@ const ParsedAction = (props) => {
              );
            }

+
 			// Added autofill to make this ALOT simpler
 			if (isCloud && (selectedAction.app_name === "Shuffle Tools" || selectedAction.app_name === "email") && (selectedAction.name === "send_email_shuffle" || selectedAction.name === "send_sms_shuffle") && data.name === "apikey") {
 				if (selectedActionParameters[count].length === 0) {
@@ -3063,6 +3129,7 @@ const ParsedAction = (props) => {
            var rows = "3";
            var openApiHelperText = "This is an OpenAPI specific field";

+
            if (selectedApp.generated && data.name === "headers") {
              //console.log("HEADER: ", data)
              //if (data.value.length === 0) {
@@ -3278,7 +3345,7 @@ const ParsedAction = (props) => {
 			const description = data.description === undefined ? "" : data?.description;
 			
 			const tooltipDescription = (
-				<Box
+			<Box
 				p={1.5}
 				borderRadius={3}
 				boxShadow={2}
@@ -3291,19 +3358,17 @@ const ParsedAction = (props) => {
 						{tmpitem.charAt(0).toUpperCase() + tmpitem.slice(1)}
 					</Typography>
 					<IconButton size="small"
-					 
-					 onMouseDown={(event) => {
-						event.preventDefault();
-						event.stopPropagation();
-					  }}
-					
-					 onClick={() => {
-						setUiBox("closed")
-						const inputElement = document.getElementById(uiBox);
-						if (inputElement) {
-						  inputElement.focus();
-						}
-					}}>
+						 onClick={() => {
+							setUiBox("closed")
+							
+							/*
+							const inputElement = document.getElementById(uiBox);
+							if (inputElement) {
+							  inputElement.focus();
+							}
+							*/
+						}}
+					>
 						<CloseIcon fontSize="small" />
 					</IconButton>
 					</Box>
@@ -3316,7 +3381,7 @@ const ParsedAction = (props) => {
 						<strong>Description:</strong> {description}
 						</Typography>
 						<Typography variant="body2">
-						<strong>Ex. :</strong> {data?.example.length > 0 ? data.example : "No example available"}
+						<strong>Ex. :</strong> {data?.example?.length > 0 ? data.example : "No example available"}
 						</Typography>
 						{
 							data?.configuration === true ?
@@ -3326,15 +3391,31 @@ const ParsedAction = (props) => {
 								</Typography>
 							) : null
 						}
+
+						<div onClick={(e) => {
+							e.preventDefault()
+							e.stopPropagation()
+
+							localStorage.setItem("disabled_ui_box", "true")
+							setUiBox("closed")
+						}}>
+							<Typography style={{marginTop: 10, color: "#f85a3e", cursor: "pointer",}} variant="body2"> 
+								Don't show again
+							</Typography>
+						</div>
 					</Box>
 				</Box>
 			);

+
            var datafield = (
 			<Tooltip 
 				title={tooltipDescription} 
 				placement="right" 
 				open={clickedFieldId === uiBox}
+				style={{
+					zIndex: 0,
+				}}
 				PopperProps={{
 					sx: {
 					  '& .MuiTooltip-tooltip': {
@@ -3348,6 +3429,7 @@ const ParsedAction = (props) => {
 				  }}
 				>
              <TextField
+                id={clickedFieldId}
                disabled={disabled}
                style={{
                  backgroundColor: theme.palette.inputColor,
@@ -3424,7 +3506,6 @@ const ParsedAction = (props) => {
 						setScrollConfig(scrollConfig)
 					}
                }}
-                id={clickedFieldId}
                rows={data.name.startsWith("${") && data.name.endsWith("}") ? 2 : rows}
                color="primary"
                // defaultValue={data.value}
@@ -3458,15 +3539,28 @@ const ParsedAction = (props) => {
 				handleParamChange(event, count, data)
                }}
 				onFocus={(event) => {
-					setUiBox(event.target.id)
-					
+					// Get local storage key "disabled_ui_box" and check if it's true
+					const disabledUiBox = localStorage.getItem("disabled_ui_box")
+					if (disabledUiBox === "true") {
+					} else {
+						//setUiBox(event.target.id)
+					}
 				}}
                onBlur={(event) => {
 					baseHelperText = calculateHelpertext(event.target.value)
 					if (setLastSaved !== undefined) {
 						setLastSaved(false)
 					}
-					setUiBox("closed")
+
+					// Check if we clicked the tooltip or not
+					const tooltipid = "rightside_field_tooltip" + count
+					const foundElement = document.getElementById(tooltipid)
+					if (foundElement !== null && foundElement !== undefined) {
+						console.log("FOUND: ", foundElement)
+					} else {
+						//console.log("TOOLTIP -> NOT FOUND")
+						//setUiBox("closed")
+					}
                }}
              />
 			</Tooltip>
@@ -3664,7 +3758,6 @@ const ParsedAction = (props) => {
 								</div>
 						}

-            //console.log("FIELD VALUE: ", data.value)
            //const regexp = new RegExp("\W+\.", "g")
            //let match
            //while ((match = regexp.exec(data.value)) !== null) {
@@ -3680,15 +3773,13 @@ const ParsedAction = (props) => {
            //	}
            //}

-						// Basic helpertext
-
            if (files !== undefined && files !== null && data.name.toLowerCase() === "file_category") {
-              //selectedActionParameters[count].options.length > 0
-							console.log("FileS: ", files)
-							if (files.namespaces !== undefined && files.namespaces !== null && files.namespaces.length > 0) {
-								data.options = files.namespaces
-							}
-						}
+              	//selectedActionParameters[count].options.length > 0
+				console.log("FileS: ", files)
+				if (files.namespaces !== undefined && files.namespaces !== null && files.namespaces.length > 0) {
+					data.options = files.namespaces
+				}
+			}

            //const keywords = ["len", "lower", "upper", "trim", "split", "length", "number", "parse", "join"]
            if (
@@ -3736,26 +3827,11 @@ const ParsedAction = (props) => {
                  }}
                  onBlur={(event) => {}}
                />
-              );
-              //const fileId = "6daabec1-892b-469c-b603-c902e47223a9"
-              //datafield = `SHOW FILES FROM OTHER NODES? Filename: ${selectedActionParameters[count].value}`
-              /*
-							if (selectedActionParameters[count].value != fileId) {
-								changeActionParameter(fileId, count, data)
-								setUpdate(Math.random())
-
-							}
-							*/
+              )
            } else if (
-              (data.options !== undefined &&
-              data.options !== null &&
-              data.options.length > 0) 
-							||
-              (selectedActionParameters[count].options !== undefined &&
-              selectedActionParameters[count].options !== null &&
-              selectedActionParameters[count].options.length > 0)
-            ) {
-							const parsedoptions = data.options !== undefined && data.options !== null && data.options.length > 0 ? data.options : selectedActionParameters[count].options 
+              (data.options !== undefined && data.options !== null && data.options.length > 0) ||
+              (selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0)) {
+				const parsedoptions = data.options !== undefined && data.options !== null && data.options.length > 0 ? data.options : selectedActionParameters[count].options 

              if (selectedActionParameters[count].value === "") {
                // && selectedActionParameters[count].required) {
@@ -3833,7 +3909,7 @@ const ParsedAction = (props) => {
            }

            if (data.field_active === false) {
-              return null;
+              	return null;
            }


@@ -4212,12 +4288,18 @@ const ParsedAction = (props) => {

 			const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
 			const hasAutocomplete = data?.autocompleted === true
-
-	
 			if (data.variant === undefined || data.variant === null) {
 				data.variant = "STATIC_VALUE"
 			}

+			/*
+			if (data?.configuration === true) {
+				if (data?.name === "url" && authenticationType?.type === "oauth2-app") {
+					data.configuration = false
+				}
+			}
+			*/
+
            return (
              <div key={data.name}>
                {/* {hideBodyButton} */}
@@ -64,6 +64,7 @@ const WelcomeForm = (props) => {
    discoveryWrapper,
    setDiscoveryWrapper,
    appFramework,
+	setAppFramework,
    getFramework,
    activeStep,
    setActiveStep,
@@ -435,20 +436,6 @@ const WelcomeForm = (props) => {
    setSkipped(newSkipped);
  };

-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-
-    if (activeStep === 2) {
-      setDiscoveryWrapper({});
-
-      if (getFramework !== undefined) {
-        getFramework();
-      }
-      navigate("/welcome?tab=2");
-    } else if (activeStep === 1) {
-      navigate("/welcome?tab=1");
-    }
-  };

  const handleReset = () => {
    setActiveStep(0);
@@ -645,6 +632,7 @@ const WelcomeForm = (props) => {
            globalUrl={globalUrl}
            userdata={userdata}
            appFramework={appFramework}
+			setAppFramework={setAppFramework}
            setActiveStep={setActiveStep}
            defaultSearch={defaultSearch}
            setDefaultSearch={setDefaultSearch}
@@ -4,21 +4,28 @@ import { toast } from "react-toastify"

 import { 
 	Tooltip,
+	Chip,
 	Typography,
+	IconButton,

 	Avatar,
 	AvatarGroup,
 } from "@mui/material"

+import {
+	ErrorOutline as ErrorOutlineIcon,
+} from "@mui/icons-material"
+
 import {
 	green,
 	yellow,
 	red,
+	grey,
 } from "../views/AngularWorkflow.jsx"

 import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
 import theme from "../theme.jsx";
-const itemHeight = 40
+const itemHeight = 24

 export const getParentNodes = (workflow, action) => {
    if (action === undefined || action === null) {
@@ -123,6 +130,8 @@ export const getParentNodes = (workflow, action) => {
 const WorkflowValidationTimeline = (props) => {
 	const { workflow, originalWorkflow, apps, getParents, execution} = props

+	const showMiddle = false
+

 	if (workflow === undefined || workflow === null) {
 		return null
@@ -196,6 +205,15 @@ const WorkflowValidationTimeline = (props) => {
 			parents = getParentNodes(workflow, action)
 		}

+		if (action.app_name === "Integration Framework" || action.app_name === "Integration") {
+			for (var paramkey in action.parameters) {
+				const param = action.parameters[paramkey]
+				if (param.name === "app_name") {
+					action.app_name = param.value.charAt(0).toUpperCase() + param.value.slice(1)
+				}
+			}
+		}
+
 		//const parents = getParentNodes(workflow, action)
 		//console.log("PARENTS", key, parents)
 		if (parents !== undefined && parents !== null && parents.length > 0) {
@@ -219,6 +237,20 @@ const WorkflowValidationTimeline = (props) => {
 				continue
 			}

+			for (var branchkey in workflow.branches) {
+				const branch = workflow.branches[branchkey]
+
+				// Checking for OUTBOUND branches from it. 
+				// This will mean it's NOT the last node and is easy to visualize
+				if (branch.source_id !== trigger.id) {
+					continue
+				}
+
+				trigger.order = 2
+			}
+
+
+			// Just in case (:
 			if (workflow.actions.find((element) => element.id === trigger.id) === undefined) {
 				newactions.push(trigger)
 				//workflow.actions.push(trigger)
@@ -242,14 +274,19 @@ const WorkflowValidationTimeline = (props) => {
 	})

 	// FIXME: Add other relevant items as well from subflows (?)
-	var nodecolor = "grey"
-	var branchcolor = "grey"
+	var nodecolor = grey
+	var branchcolor = grey
 	var skipped = false

 	var previousTools = false

+	// Use this variable to control visualization
+	//const showMiddle = false
+	// border: workflow.validation.valid ? `2px solid ${green}` : "1px solid rgba(255,255,255,0.4)",
+	var middleError = ""
+	var startBranchColor = ""
 	return (
-		<div style={{border: workflow.validation.valid ? `2px solid ${green}` : "1px solid rgba(255,255,255,0.4)", padding: "10px 20px 10px 20px", borderRadius: theme.palette.borderRadius, }}>
+		<div style={{ padding: "10px 5px 10px 5px", borderRadius: theme.palette.borderRadius, }}>
 			<div style={{display: "flex", justifyContent: "center", alignItems: "center"}}> 
 			  {relevantactions.map((action, index) => {
 				action.result = {}
@@ -274,13 +311,13 @@ const WorkflowValidationTimeline = (props) => {
 								if (validate.result.success === true) {
 									branchcolor = green
 								} else {
-									branchcolor = "grey" 
+									branchcolor = grey 
 								}
 							}


 						} else if (action.status === "SKIPPED") {
-							branchcolor = "grey"
+							branchcolor = grey
 						} else {
 							if (action.status === undefined) {
 								branchcolor = green
@@ -292,13 +329,13 @@ const WorkflowValidationTimeline = (props) => {
 						previousTools = true 

 						if (startnodeId !== action.id) {
-							return null
+							//return null
 						}
 					} else {
 						if (action.status === "SUCCESS") {
 							nodecolor = green
 						} else if (action.status === "SKIPPED") {
-							nodecolor = "grey"
+							nodecolor = grey
 						} else {
 							if (action.status === undefined) {
 								nodecolor = green
@@ -308,7 +345,7 @@ const WorkflowValidationTimeline = (props) => {
 						}
 					}
 				} else {
-					nodecolor = "grey"
+					nodecolor = grey
 				}

 				if (action.status === "SKIPPED") {
@@ -340,18 +377,44 @@ const WorkflowValidationTimeline = (props) => {
 				}

 				var founderror = ""
+				//console.log("WORKFLOW VALIDATION: ", workflow.validation)
 				if (workflow.validation !== undefined && workflow.validation !== null && workflow.validation.errors !== undefined && workflow.validation.errors !== null) {
 					const foundError = workflow.validation.errors.find((element) => element.action_id === action.id)
 					if (foundError !== undefined) {
 						founderror = foundError.error
-						nodecolor = yellow 
-						branchcolor = yellow
+						nodecolor = red 
+						branchcolor = red 
+					} else {
+						//console.log("NO ERROR: ", action.id)
+					}
+				}
+
+				if (!showMiddle && relevantactions.length > 2 && index > 0 && index === relevantactions.length - 2) {
+					if (founderror.length > 0) {
+						middleError += founderror+"\n"
+					}
+
+					if (index === relevantactions.length-2 && relevantactions.length > 2) {
+
+						const selectedIcon = middleError.length > 0 ? 
+							<Tooltip title={middleError}>
+								<IconButton style={{width: 30, height: 30, backgroundColor: "rgba(255,255,255,0.0)", borderRadius: 30, marginTop: 2, }}>
+									<ErrorOutlineIcon style={{color: "red", }} /> 
+								</IconButton>
+							</Tooltip>
+						: null
+
+						return (
+							selectedIcon
+						)
+					} else {
+						return null
 					}
 				}

 				if (skipped && !lastitem) {
-					nodecolor = "grey"
-					branchcolor = "grey"
+					nodecolor = grey
+					branchcolor = grey
 				}

 				if (previousTools) {
@@ -379,14 +442,60 @@ const WorkflowValidationTimeline = (props) => {

 				}

+
 				var flex = index !== 0 && index !== relevantactions.length - 1 ? 1 : 3
+
+				if (nodecolor === green) {
+					branchcolor = green
+				} else if (nodecolor === yellow) {
+					branchcolor = yellow
+				} else if (nodecolor === red) {
+					branchcolor = red
+				}
+
+				if (index === 0) {
+					startBranchColor = branchcolor
+				}
+
+				if (lastitem && middleError.length === 0) {	
+					branchcolor = startBranchColor
+				}
+
 				const branchTooltip = branchcolor === yellow ? "Check nodes for errors" : ""
+				const appname = action.app_name.replaceAll('_', ' ').slice(0, 16)
+
+				const chipBackground = nodecolor === green ? "rgba(2,203,112, 0.2)" : nodecolor === grey ? "#494949": "rgba(245,52,52,0.8)" 
+				const chipColor = nodecolor === green ? "#02cb70" : nodecolor === grey ? "#CDCDCD" : "white" 
+
+				//const ballcolor = lastitem ? nodecolor : branchcolor 
+				const ballcolor = branchcolor 
+				const ballsize = 8
+				const topMargin = 20
+
+				const chipStyle = {
+					height: 40, 
+					minWidth: 125, 
+					maxWidth: 125, 
+					borderRadius: 50, 
+					color: chipColor, 
+					backgroundColor: chipBackground,
+
+					//border: `2px solid ${chipBackground}`, 
+					//backgroundColor: "rgba(0,0,0,0.0)", 
+				}
+
+				if (image === "") {
+					console.log("MISSING IMAGE: ", appname, image, action)
+				}

 				return (
 					<div style={{display: "flex", flex: flex, justifyContent: "right", }}> 
 						{lastitem ? 
 							<Tooltip title={branchTooltip}>
-								<div style={{marginLeft: 0, marginRight: 0, marginTop: 20, height: 3, width: "100%", backgroundColor: branchcolor, }} />
+								<div style={{display: "flex", width: "100%", position: "relative",}}>
+									<div style={{marginLeft: 0, marginRight: 0, marginTop: topMargin, height: 3, width: "100%", backgroundColor: branchcolor, }} />
+									<div style={{position: "absolute", right: -3, top: topMargin-2.5, backgroundColor: ballcolor, width: ballsize, height: ballsize, borderRadius: 10, }}/>
+								</div>
 							</Tooltip>
 						: null}

@@ -419,30 +528,36 @@ const WorkflowValidationTimeline = (props) => {
 						: 
 							<Tooltip title={
 								<Typography variant="body1" style={{margin: 5, color: "white", }}>
-									{founderror.length > 0 ? founderror : `${action.app_name.replaceAll('_', ' ')}`} 
+									{founderror.length > 0 ? founderror : `App: ${appname}`} 
 								</Typography>
 							} placement="top">

-								<Avatar
-									variant="round"
-									sx={{ backgroundColor: nodecolor, width: itemHeight, height: itemHeight, borderRadius: 50, border: `4px solid ${nodecolor}`,}}
-								>
-									{image !== "" ? 
-										<img 
-											src={image} 
-											style={{
-												width: itemHeight, 
-												height: itemHeight,  
-											}} 
-										/> 
-									: null}
-								</Avatar>
+								<Chip label={`${appname}`} style={chipStyle}  icon={
+									<Avatar
+										variant="round"
+										sx={{ backgroundColor: nodecolor, width: itemHeight, height: itemHeight, borderRadius: 50, border: `1px solid ${nodecolor}`,}}
+									>
+										{image !== "" ? 
+											<img 
+												src={image} 
+												style={{
+													width: itemHeight, 
+													height: itemHeight,  
+												}} 
+											/> 
+										: null}
+									</Avatar>
+								} />
+
 							</Tooltip>
 						}

 						{lastitem ? null :
 							<Tooltip title={branchTooltip}>
-								<div style={{marginLeft: 0, marginRight: 0, marginTop: 20, height: 3, width: "100%", backgroundColor: branchcolor, }} />
+								<div style={{display: "flex", width: "100%", position: "relative",}}>
+									<div style={{position: "absolute", left: -3, top: topMargin-2.5, backgroundColor: ballcolor, color: ballcolor, width: ballsize, height: ballsize, borderRadius: 10, }}/>
+									<div style={{marginLeft: 0, marginRight: 0, marginTop: 20, height: 3, width: "100%", backgroundColor: branchcolor, }} />
+								</div>
 							</Tooltip>
 						}
 					</div>