Fixed oauth2, docs and popups for onboarding

backend/app_sdk/app_base.py

@@ -3585,36 +3585,9 @@ class AppBase:
                                         })
 
                                     break
-
-
-
-                                    #thread = threading.Thread(target=func, args=(**params,))
-                                    #thread.start()
-
-                                    #thread.join(timeout)
-
-                                    #if thread.is_alive():
-                                    #    # The thread is still running, so we need to stop it
-                                    #    # You can handle this as needed, such as raising an exception
-                                    #    timeout_handler()
-
-
-                                    #with Timeout(timeout):
-                                    #    newres = func(**params)
-                                    #    break
-                                    #except Timeout.Timeout as e:
-                                    #    self.logger.info(f"[DEBUG] Timeout error: {e}")
-                                    #    newres = json.dumps({
-                                    #        "success": False,
-                                    #        "reason": "Timeout error within %d seconds. This typically happens if we can't reach the API you're trying to reach." % timeout,
-                                    #        "exception": str(e),
-                                    #    })
-
-                                    #    break
-
                                 except TypeError as e:
                                     newres = ""
-                                    self.logger.info(f"[DEBUG] Got exec type error: {e}")
+                                    self.logger.info(f"[ERROR] Got function exec type error: {e}")
                                     try:
                                         e = json.loads(f"{e}")
                                     except:

frontend/src/components/AppSearchButtons.jsx

@@ -47,8 +47,6 @@ const AppSearchButtons = (props) => {
     const [newSelectedApp, setNewSelectedApp] = useState(undefined)
 
     useEffect(() => {
-        console.log("AppSearchButtons: newSelectedApp: " + JSON.stringify(newSelectedApp))
-
         if (newSelectedApp !== undefined && setMissing != undefined) {
             console.log("AppSearchButtons: setMissing is defined!")
 
@@ -131,9 +129,12 @@ const AppSearchButtons = (props) => {
                 //setFrameworkLoaded(true)
             })
     }
+
     const icon = foundApp.large_image
-    console.log("index:", moreButton)
+	var foundAppImage = AppImage
-    console.log("totalApps:", totalApps)
+	if (foundApp.name !== undefined && foundApp.name !== null && !foundApp.name.includes(":default")) {
+		foundAppImage = foundApp.large_image
+	}
 
     let xsValue = 12;
     if (index === totalApps - 1 || index === totalApps - 2 || index === totalApps - 3 || index === totalApps - 4) {
@@ -142,6 +143,8 @@ const AppSearchButtons = (props) => {
     if (index === totalApps - 5) {
         xsValue = 12;
     }
+
+	// This is silly huh
     if (moreButton) {
         switch (index) {
           case totalApps - 1:
@@ -159,7 +162,6 @@ const AppSearchButtons = (props) => {
             xsValue = 12;
             break;
           default:
-            // Handle other cases if needed
         }
       }
       
@@ -221,10 +223,11 @@ const AppSearchButtons = (props) => {
                             >
                                 <IconButton
                                     style={{ zIndex: 12501, position: "absolute", top: 32, right: 16 }}
+									disabled
                                     onClick={(e) => {
                                         e.preventDefault();
                                         setLocalSearchOpen(false)
-                                        setDefaultSearch("")
+
                                         const submitDeletedApp = {
                                             "description": "",
                                             "id": "remove",
@@ -233,15 +236,23 @@ const AppSearchButtons = (props) => {
                                         }
                                         setFrameworkItem(submitDeletedApp)
                                         setNewSelectedApp({})
+
+										if (setDefaultSearch !== undefined) {
+                                        	setDefaultSearch("")
+										}
+
                                         setTimeout(() => {
-                                            setDiscoveryData({})
+											if (setDiscoveryData !== undefined) {
+                                            	setDiscoveryData({})
+											}
+
                                             setFrameworkItem(submitDeletedApp)
                                             //setNewSelectedApp({})
                                         }, 1000)
                                         //setAppName(discoveryData.cases.name)
                                     }}
                                 >
-                                    <DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
+                                    <DeleteIcon style={{ height: 15, width: 15, }} />
                                 </IconButton>
                             </Tooltip>
                         </div>
@@ -283,12 +294,12 @@ const AppSearchButtons = (props) => {
                     }}
                 >
                     <div style={{ display: "flex", textAlign: "center", justifyContent: "center", alignItems: "center", marginRight: "auto" }}>
-                        {AppImage === undefined || AppImage === null || AppImage.length === 0 ?
+                        {foundAppImage === undefined || foundAppImage === null || foundAppImage.length === 0 ?
-                            <div style={{ width: 40, height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign: "center" }}>
+                            <div style={{ width: 40, height: 40, borderRadius: 40, backgroundColor: "#2F2F2F", textAlign: "center" }}>
                                 <img style={{ paddingLeft: 11, paddingTop: 11, width: 40, height: 40, flexShrink: 0, }} src={icon} />
                             </div>
                             :
-                            <img style={{ marginRight: 8, width: 35, height: 35, flexShrink: 0, borderRadius: 40, }} src={AppImage} />
+                            <img style={{ marginRight: 8, width: 35, height: 35, flexShrink: 0, borderRadius: 40, }} src={foundAppImage} />
                         }
                         <div style={{ marginLeft: 8, }}>
                             <Typography style={{

frontend/src/components/Oauth2Auth.jsx

@@ -112,20 +112,21 @@ const AuthenticationOauth2 = (props) => {
       authenticationType.client_secret.length > 0
   );	
 
-  const [clientId, setClientId] = React.useState(
+  console.log("AUTH: ", authenticationType)
-    defaultConfigSet ? authenticationType.client_id : ""
+
-  );
+  const [clientId, setClientId] = React.useState(defaultConfigSet ? authenticationType.client_id : "");
-  const [clientSecret, setClientSecret] = React.useState(
+  const [clientSecret, setClientSecret] = React.useState(defaultConfigSet ? authenticationType.client_secret : "");
-    defaultConfigSet ? authenticationType.client_secret : ""
+
-  );
+  const [username, setUsername] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  
   const [oauthUrl, setOauthUrl] = React.useState("");
   const [buttonClicked, setButtonClicked] = React.useState(false);
-
   const [offlineAccess, setOfflineAccess] = React.useState(true);
-  const allscopes = authenticationType.scope !== undefined ? authenticationType.scope : [];
     
+  const allscopes = authenticationType.scope !== undefined && authenticationType.scope !== null ? authenticationType.scope : [];
+  const [selectedScopes, setSelectedScopes] = React.useState(allscopes !== null && allscopes !== undefined ? allscopes.length > 0 && allscopes.length <= 3 ? [allscopes[0]] : [] : [])
 
-  const [selectedScopes, setSelectedScopes] = React.useState(allscopes.length > 0 && allscopes.length <= 3 ? [allscopes[0]] : [])
   const [manuallyConfigure, setManuallyConfigure] = React.useState(
     defaultConfigSet ? false : true
   );
@@ -158,6 +159,7 @@ const AuthenticationOauth2 = (props) => {
     return null;
   }
 
+
 	const startOauth2Request = (admin_consent) => {
 		// Admin consent also means to add refresh tokens
 		console.log("Inside oauth2 request for app: ", selectedApp.name)
@@ -319,6 +321,32 @@ const AuthenticationOauth2 = (props) => {
 			"value": authenticationType.token_uri,
 		}]
 
+		if (authenticationType.grant_type !== undefined && authenticationType.grant_type !== null && authenticationType.grant_type.length > 0) {
+			if (authenticationType.grant_type === "client_credentials") {
+				parsedFields.push({
+					"key": "grant_type",
+					"value": authenticationType.grant_type,
+				})
+			} else if (authenticationType.grant_type === "password") {
+				parsedFields.push({
+					"key": "grant_type",
+					"value": authenticationType.grant_type,
+				})
+
+				parsedFields.push({
+					"key": "username",
+					"value": username,
+				})
+
+				parsedFields.push({
+					"key": "password",
+					"value": password,
+				})
+			} else {
+				toast("Unknown grant type: " + authenticationType.grant_type)
+			}
+		}
+
 		const appAuthData = {
 			"label": "OAuth2 for " + selectedApp.name,
 			"app": {
@@ -478,8 +506,6 @@ const AuthenticationOauth2 = (props) => {
     }
 
     return;
-    //do {
-    //} while (
   };
 
   authenticationOption.app.actions = [];
@@ -647,7 +673,7 @@ const AuthenticationOauth2 = (props) => {
 				)}
 			</Button>
 
-	if (authButtonOnly === true) {
+	if (authButtonOnly === true && (authenticationType.grant_type === undefined || authenticationType.grant_type === null || authenticationType.grant_type === "")) {
 		return autoAuthButton
 	}
 
@@ -872,8 +898,51 @@ const AuthenticationOauth2 = (props) => {
                 //authenticationOption.label = event.target.value
               }}
             />
-            {allscopes.length === 0 ? null : "Scopes (access rights)"}
+
-            {allscopes.length === 0 ? null : (
+			{authenticationType.grant_type !== "password" ? null : 
+				<div>
+					<TextField
+					  style={{
+						backgroundColor: theme.palette.inputColor,
+						borderRadius: theme.palette.borderRadius,
+					  }}
+					  InputProps={{
+						style: {
+						},
+					  }}
+					  fullWidth
+					  color="primary"
+					  label={"Username"}
+					  placeholder={"Username"}
+					  onChange={(event) => {
+						setUsername(event.target.value);
+						//authenticationOption.label = event.target.value
+					  }}
+					/>
+					<TextField
+					  style={{
+						backgroundColor: theme.palette.inputColor,
+						borderRadius: theme.palette.borderRadius,
+						marginBottom: 10, 
+					  }}
+					  InputProps={{
+						style: {
+						},
+					  }}
+					  fullWidth
+					  color="primary"
+					  label={"Password"}
+					  placeholder={"Password"}
+					  onChange={(event) => {
+						setPassword(event.target.value);
+						//authenticationOption.label = event.target.value
+					  }}
+					/>
+				</div>
+			}
+
+            {allscopes === undefined || allscopes === null || allscopes.length === 0 ? null : "Scopes (access rights)"}
+            {allscopes === undefined || allscopes === null || allscopes.length === 0 ? null : (
 							<div style={{width: "100%", marginTop: 10, display: "flex"}}>
 								<span>
 									<Select
@@ -931,7 +1000,7 @@ const AuthenticationOauth2 = (props) => {
             borderRadius: theme.palette.borderRadius,
           }}
           disabled={
-            clientSecret.length === 0 || clientId.length === 0 || buttonClicked || selectedScopes.length === 0
+            clientSecret.length === 0 || clientId.length === 0 || buttonClicked || (allscopes.length !== 0 && selectedScopes.length === 0)
           }
           variant="contained"
           fullWidth

frontend/src/components/SearchData.jsx

@@ -50,6 +50,7 @@ const SearchData = props => {
     const [value, setValue] = useState("");
 	const [userTyped, setUserTyped] = useState(false)
 
+
     if (serverside === true) {
         return null
     }
@@ -59,25 +60,16 @@ const SearchData = props => {
     //}
 
     const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
-
-    //if (window.location.pathname !== oldPath) {
-    //    setSearchOpen(false)
-    //    setOldPath(window.location.pathname)
-    //}
-
-    //if (window.location.pathname === "/search") {
-    //    setModalOpen(true)
-    //}
     // if (window.location.pathname === "/docs" || window.location.pathname === "/apps" || window.location.pathname === "/usecases"  ) {
     //     setModalOpen(false)
     // }
 
-    //useEffect(() => {
+    // useEffect(() => {
-    //	if (searchOpen) {
+    // 	if (searchOpen) {
-    //		var tarfield = document.getElementById("shuffle_search_field")
+    // 		var tarfield = document.getElementById("shuffle_search_field")
-    //		tarfield.focus()
+    // 		tarfield.focus()
-    //	}
+    // 	}
-    //}, searchOpen)
+    // }, searchOpen)
 
     const SearchBox = ({ currentRefinement, refine, isSearchStalled, }) => {
         const keyPressHandler = (e) => {
@@ -85,9 +77,11 @@ const SearchData = props => {
             if (e.which === 13) {
                 // alert("You pressed enter!");
                 navigate("/search?q=" + currentRefinement, { state: value, replace: true });
-				setSearchOpen(false)
+
-				setModalOpen(false)
+				        setSearchOpen(false)
-				return
+				        setModalOpen(false)
+				        return
+
             }
         };
         /*
@@ -104,10 +98,11 @@ const SearchData = props => {
 
         return (
             <form id="search_form" noValidate type="searchbox" action="" role="search" onClick={() => {
-            }}>
+            }}
+            >
                 <TextField
                     fullWidth
-                    style={{ backgroundColor: theme.palette.surfaceColor, borderRadius: borderRadius, minWidth: "100%", maxWidth: "100%", }}
+                    style={{ zIndex: 1100, marginTop:-20,marginBottom: 200, position:"fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 685, }}
                     InputProps={{
                         style: {
                             color: "white",
@@ -120,7 +115,7 @@ const SearchData = props => {
                         disableUnderline: true,
                         startAdornment: (
                             <InputAdornment position="start">
-                            <SearchIcon style={{ marginLeft: 5, marginRight: 10, color: "#f86a3e", }} />
+                                <SearchIcon style={{ marginLeft: 5, marginRight: 10, color: "#f86a3e", }} />
                             </InputAdornment>
                         ),
                         endAdornment: (
@@ -188,8 +183,8 @@ const SearchData = props => {
         const baseImage = <CodeIcon />
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10,marginTop:50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
-                <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", }}>
+                <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 105 }}>
                     Workflows
                 </Typography>
 
@@ -349,13 +344,13 @@ const SearchData = props => {
         const baseImage = <LibraryBooksIcon />
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, width: "100%", left: -30, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 999, backgroundColor: theme.palette.inputColor, width: 685, boxShadows: "none", }}>
                 {/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
                     setSearchOpen(false)
                 }}>
                     <CloseIcon />
                 </IconButton> */}
-                <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", }}>
+                <Typography variant="h6" style={{ margin: "40px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 50 }}>
                     Apps
                 </Typography>
 
@@ -392,7 +387,6 @@ const SearchData = props => {
                             const name = hit.name === undefined ?
                                 hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
                                 (hit.name.charAt(0).toUpperCase() + hit.name.slice(1)).replaceAll("_", " ")
-
                             var secondaryText = hit.data !== undefined ? hit.data.slice(0, 40) + "..." : ""
                             const avatar = hit.image_url === undefined ?
                                 baseImage
@@ -401,7 +395,6 @@ const SearchData = props => {
                                     src={hit.image_url}
                                     variant="rounded"
                                 />
-
                             //console.log(hit)
                             if (hit.categories !== undefined && hit.categories !== null && hit.categories.length > 0) {
                                 secondaryText = hit.categories.slice(0, 3).map((data, index) => {
@@ -520,13 +513,13 @@ const SearchData = props => {
         //console.log(type, hits.length, hits)
 
         return (
-            <Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
+            <Card elevation={0} style={{ marginRight: 10,marginTop:50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
                 {/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
                     setSearchOpen(false)
                 }}>
                     <CloseIcon />
                 </IconButton> */}
-                <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", }}>
+                <Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 152}}>
                     Documentation
                 </Typography>
                 {/*
@@ -643,42 +636,14 @@ const SearchData = props => {
             </Card>
         )
     }
-
+    const gettingStartData = !searchOpen ? ( 
-    const CustomSearchBox = connectSearchBox(SearchBox)
-    const CustomAppHits = connectHits(AppHits)
-    const CustomWorkflowHits = connectHits(WorkflowHits)
-    const CustomDocHits = connectHits(DocHits)
-
-    const modalView = (
-        <div>
-            <Grid container style={{ display: "contents" }}>
-                <Grid item xs="auto" style={{ marginTop: 12 }}>
-                    <Index indexName="appsearch">
-                        <CustomAppHits />
-                    </Index>
-                </Grid>
-                <Grid item xs="auto" style={{ marginTop: 12 }}>
-                    <Index indexName="workflows">
-                        <CustomWorkflowHits />
-                    </Index>
-                </Grid>
-                <Grid item xs="auto" style={{ marginTop: 12 }}>
-                    <Index indexName="documentation">
-                        <CustomDocHits />
-                    </Index>
-                </Grid>
-            </Grid>
-        </div>
-    )
-
-    const gettingStartData = (
         <Grid
             container
             direction="row"
             alignItems="center"
         // justify="space-evenly"
         >
-            <Grid item xs={6} style={{ alignItems: "center", flexDirection: "row" }}>
+            <Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", marginTop: 70,  }}>
                 <List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)" }}>
                     <ListItem>
                         <ArticleIcon style={{ marginRight: 10, display: "flex", width: 22 }} />
@@ -715,7 +680,7 @@ const SearchData = props => {
                     </div>
                 </List>
             </Grid>
-            <Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", width: 22 }}>
+            <Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", width: 22, marginTop: 70 }}>
                 <List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)", }}>
                     <ListItem>
                         <ManageSearchIcon style={{ marginRight: 10, display: "flex" }} />
@@ -749,29 +714,6 @@ const SearchData = props => {
                     </div>
                 </List>
             </Grid>
-            {/* <Grid item xs={12} style={{ alignItems: "center", flexDirection: "row", width: 22 }}>
-                <List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)", }}>
-                    <ListItem>
-                        <ManageSearchIcon style={{ marginRight: 10, display: "flex" }} />
-                        <Typography variant="body1" style={{ display: "flex", fontSize: 16 }}>Popular searches</Typography>
-                    </ListItem>
-                    <div style={{ marginLeft: 35 }}>
-                        <ListItem>
-
-                            <Typography variant="body1" style={{ fontSize: 16,  }}>Apps</Typography>
-                            <KeyboardArrowRightIcon />
-                        </ListItem>
-                        <ListItem>
-                            <Typography variant="body1" style={{ fontSize: 16,  }}>Workflows</Typography>
-                            <KeyboardArrowRightIcon />
-                        </ListItem>
-                        <ListItem>
-                            <Typography variant="body1" style={{ fontSize: 16,  }}>Creator</Typography>
-                            <KeyboardArrowRightIcon />
-                        </ListItem>
-                    </div>
-                </List>
-            </Grid> */}
             <Grid style={{ textAlign: "end", width: "100%", textTransform: 'capitalize', }}>
                 <Button style={{ textAlign: "center", textTransform: 'capitalize' }}
                     onClick={() => { window.location = "/search"; }} >
@@ -779,12 +721,38 @@ const SearchData = props => {
                 </Button>
             </Grid>
         </Grid>
+    ): null
+
+    const CustomSearchBox = connectSearchBox(SearchBox)
+    const CustomAppHits = connectHits(AppHits)
+    const CustomWorkflowHits = connectHits(WorkflowHits)
+    const CustomDocHits = connectHits(DocHits)
+
+    const modalView = (
+        <div>
+            <Grid container style={{ display: "contents", }}>
+                <Grid item xs="auto" style={{ }}>
+                    <Index indexName="appsearch">
+                        <CustomAppHits />
+                    </Index>
+                </Grid>
+                <Grid item xs="auto" style={{ }}>
+                    <Index indexName="workflows">
+                        <CustomWorkflowHits />
+                    </Index>
+                </Grid>
+                <Grid item xs="auto" style={{ }}>
+                    <Index indexName="documentation">
+                        <CustomDocHits />
+                    </Index>
+                </Grid>
+            </Grid>
+        </div>
     )
 
     return (
-        <div ref={node} style={{ width: "100%", maxWidth: "100%", margin: "auto", position: "relative", }}>
+        <div ref={node} style={{ width: "100%", maxWidth: "100%", margin: "auto", }}>
             <InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
-                console.log("CLICKED 1")
             }}>
                 <Configure clickAnalytics />
                 <CustomSearchBox onClick={() => {

frontend/src/components/Searchfield.jsx

@@ -90,8 +90,8 @@ const SearchField = props => {
 				},
 			}}
 		>
-			{isHeader ? <div style={{ display: "flex" }}>
+			{isHeader ? <div style={{ display: "flex"}}>
-				<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search Shuffle</DialogTitle>
+				<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for docs, apps, workflows and more</DialogTitle>
 				<Button fullWidth style={{ marginLeft: 470 }} onClick={() => {
 					setModalOpen(false);
 				}}><CloseIcon /></Button>
@@ -101,12 +101,11 @@ const SearchField = props => {
 				<SearchBox setModalOpen={setModalOpen} modalOpen={modalOpen} serverside={serverside} userdata={userdata} />
 			</DialogContent>
 			<Divider style={{overflow: "hidden"}}/>
-			<span style={{display:"flex", width:"100%"}}>
+			<span style={{display:"flex", width:"100%", height:30}}>
-				<div style={{display: "flex", marginTop: 6, marginBottom: 6, marginRight: 100, marginLeft: 20, alignItems: "center"}}>
+				{/* <div style={{display: "flex", marginTop: 6, marginBottom: 6, marginRight: 100, marginLeft: 20, alignItems: "center"}}>
-				{/* <Typography variant="body2" style={{ fontSize: 16, fontWidth: 550, color: "var(--Paragraph-text, #C8C8C8)"}}>
+				<Typography variant="body2" style={{ fontSize: 16, fontWidth: 550, color: "var(--Paragraph-text, #C8C8C8)"}}>
 					Discord 
-				</Typography> */}
+
-				{/*
 				<a rel="noopener noreferrer" href="https://discord.com/invite/B2CBzUm" target="_blank" style={{ textDecoration: "none", color: "white" }}>
 					<img src={"/images/social/discode.svg"} alt="Algolia logo" style={{ height: 22, marginLeft: 5, marginTop: 3, }} />
 				</a>
@@ -118,8 +117,9 @@ const SearchField = props => {
 				<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{ textDecoration: "none", color: "white" }}>
 					<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{ height: 17, marginLeft: 5, marginTop: 3, }} />
 				</a>
-				*/}
 				</div>
+				*/}
+
 			</span>
 		</Dialog>
 	);

frontend/src/components/WorkflowTemplatePopup.jsx

@@ -44,7 +44,6 @@ const WorkflowTemplatePopup = (props) => {
   	const [missingDestination, setMissingDestination] = React.useState(undefined);
 
 	useEffect(() => {
-		console.log("Source & Dest check:", missingSource, missingDestination)
 	}, [missingSource, missingDestination])
 
   	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
@@ -392,7 +391,7 @@ const WorkflowTemplatePopup = (props) => {
 								appFramework={appFramework}
 
 								appType={missingSource.type}
-								appImage={missingSource.image}
+								AppImage={missingSource.image}
 
 								setMissing={setMissingSource}
 							/>
@@ -406,7 +405,7 @@ const WorkflowTemplatePopup = (props) => {
 								appFramework={appFramework}
 
 								appType={missingDestination.type}
-								appImage={missingDestination.image}
+								AppImage={missingDestination.image}
 
 								setMissing={setMissingDestination}
 							/>
@@ -443,7 +442,7 @@ const WorkflowTemplatePopup = (props) => {
 	if (title.length > maxlength) {
 		parsedTitle = title.substring(0, maxlength) + "..."
 	}
-	console.log("isHomePage", isHomePage)
+	
 	parsedTitle = parsedTitle.replaceAll("_", " ")
 
 	const parsedDescription = description !== undefined && description !== null ? description.replaceAll("_", " ") : ""

frontend/src/views/AngularWorkflow.jsx

@@ -11,7 +11,7 @@ import { useNavigate, Link, useParams } from "react-router-dom";
 import { useBeforeunload } from "react-beforeunload";
 import ReactJson from "react-json-view";
 import { NestedMenuItem } from 'mui-nested-menu';
-import ReactMarkdown from "react-markdown";
+import Markdown from "react-markdown";
 //import { useAlert
 import { ToastContainer, toast } from "react-toastify" 
 import { isMobile } from "react-device-detect"
@@ -635,7 +635,11 @@ const AngularWorkflow = (defaultprops) => {
         if (responseJson.success === true) {
           if (responseJson.reason !== undefined && responseJson.reason !== undefined && responseJson.reason.length > 0) {
             if (!responseJson.reason.includes("404: Not Found") && responseJson.reason.length > 25) {
-              selectedApp.documentation = responseJson.reason
+			  // Translate <img> into markdown ![]()
+			  const imgRegex = /<img.*?src="(.*?)"/g;
+			  const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
+
+              selectedApp.documentation = newdata 
               setSelectedApp(selectedApp)
               setUpdate(Math.random())
             }
@@ -978,8 +982,6 @@ const AngularWorkflow = (defaultprops) => {
             tmpView = execution_id;
           }
 
-		  console.log("TMPVIEW: ", tmpView);
-
 		  // Compare with currently selected item
           if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
 			// Don't clean up if it's already open
@@ -1669,7 +1671,7 @@ const AngularWorkflow = (defaultprops) => {
       if (hasSaved === false) {
         setExecutionRequestStarted(true);
         saveWorkflow(workflow, executionArgument, startNode);
-        console.log("FIXME: Might have forgotten to save before executing.");
+        //console.log("FIXME: Might have forgotten to save before executing.");
         return;
       }
 
@@ -3783,6 +3785,8 @@ const AngularWorkflow = (defaultprops) => {
           //}
           curaction.app_id = curapp.id
 
+		  console.log("CURAPP: ", curapp.authentication)
+
           setAuthenticationType(
             curapp.authentication.type === "oauth2" && curapp.authentication.redirect_uri !== undefined && curapp.authentication.redirect_uri !== null ? {
               type: "oauth2",
@@ -3792,6 +3796,7 @@ const AngularWorkflow = (defaultprops) => {
               scope: curapp.authentication.scope,
               client_id: curapp.authentication.client_id,
               client_secret: curapp.authentication.client_secret,
+			  grant_type: curapp.authentication.grant_type,
             } : {
               type: "",
             }
@@ -16955,7 +16960,7 @@ const AngularWorkflow = (defaultprops) => {
               )}
             </span>
           ) : (
-		    <ReactMarkdown
+		    <Markdown
 		      components={{
 		      	img: Img,
 		      	code: CodeHandler,
@@ -16974,7 +16979,7 @@ const AngularWorkflow = (defaultprops) => {
 		      }}
 		    >
 			  {selectedApp.documentation}
-		    </ReactMarkdown>
+		    </Markdown>
           )}
         </div>
       </div>

frontend/src/views/AppCreator.jsx

@@ -398,7 +398,6 @@ const AppCreator = (defaultprops) => {
     apikeySelection.length > 0 ? apikeySelection[0] : ""
   );
   const [refreshUrl, setRefreshUrl] = useState("");
-  const [oauth2Scopes, setOauth2Scopes] = useState([]);
   const [projectCategories, setProjectCategories] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState("");
 
@@ -411,7 +410,10 @@ const AppCreator = (defaultprops) => {
   const [appBuilding, setAppBuilding] = useState(false);
   const [fileDownloadEnabled, setFileDownloadEnabled] = useState(false);
   const [actionAmount, setActionAmount] = useState(increaseAmount);
-  const [oauth2Type, setOauth2Type] = useState("application");
+
+  const [oauth2Scopes, setOauth2Scopes] = useState([]);
+  const [oauth2Type, setOauth2Type] = useState("delegated");
+  const [oauth2GrantType, setOauth2GrantType] = useState("client_credentials");
   const defaultAuth = {
     name: "",
     type: "header",
@@ -1748,17 +1750,25 @@ const AppCreator = (defaultprops) => {
       	    //console.log("FLOW-1: ", value)
       	    const flowkey = value.flow === undefined ? "flows" : "flow";
       	    //console.log("FLOW: ", value[flowkey])
-      	    const basekey = value[flowkey].authorizationCode !== undefined
+			
-      	        ? "authorizationCode"
+
-      	        : "implicit";
+		    // Doesn't seem to be used for now
+      	    const basekey = value[flowkey].authorizationCode !== undefined ? "authorizationCode" : "implicit";
+			  
+		    // Kind of fucked up, but it works for now?
+		    if (value["x-grant-type"] !== undefined && value["x-grant-type"] !== null && value["x-grant-type"].length !== 0) {
+		        setOauth2Type(value["x-grant-type"])
+		    }
 
       	    //console.log("FLOW2: ", value[flowkey][basekey])
       	    if (value[flowkey] !== undefined && value[flowkey][basekey] !== undefined
       	    ) {
-      	      if (value[flowkey][basekey].authorizationUrl !== undefined && parameterName.length === 0) {
+			  var newparamname = parameterName
+      	      if (value[flowkey][basekey].authorizationUrl !== undefined && value[flowkey][basekey].authorizationUrl !== null && value[flowkey][basekey].authorizationUrl.length !== 0 && parameterName.length === 0) {
       	          setParameterName(value[flowkey][basekey].authorizationUrl);
-				//  } else {
+			  } else {
-				//	  setOauth2Type("application")
+				  setOauth2Type("application")
+
 			  }
 
       	      var tokenUrl = "";
@@ -2519,6 +2529,14 @@ const AppCreator = (defaultprops) => {
           },
         },
       };
+
+
+	  //if (value[flowkey][basekey]["x-grant-type"] !== undefined && value[flowkey][basekey]["x-grant-type"] !== null && value[flowkey][basekey]["x-grant-type"].length !== 0) {
+	  if (oauth2GrantType.length > 0) { 
+		  data.components.securitySchemes["Oauth2"]["x-grant-type"] = oauth2GrantType;
+	  }
+
+		console.log("SECURITYSCHEMES: ", data.components);
     }
 
     if (setExtraAuth.length > 0) {
@@ -3082,7 +3100,7 @@ const AppCreator = (defaultprops) => {
 			},
 		  }}
 		  style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
-		  placeholder="Available Oauth2 Scopes (enter to add)"
+		  placeholder="Available Oauth2 Scopes"
 		  color="primary"
 		  fullWidth
 		  value={oauth2Scopes}
@@ -5957,36 +5975,67 @@ const AppCreator = (defaultprops) => {
 						</Select>
 					</FormControl>
 					{authenticationOption === "Oauth2" ? 
-						<FormControl style={{ marginLeft: 350, maxWidth: 200, }} variant="outlined">
+						<FormControl style={{ marginLeft: 310, maxWidth: 240, }} variant="outlined">
 							{/*
 							<Typography variant="body2">
 								- Delegated: The user will get a popup for access their personal data.
 								- Application: Permissions are set by the app creator in the 3rd party platform. 
 							</Typography>
 							*/}
-							<Select
+							<div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", }}>
-								fullWidth
+								<Typography variant="body2" style={{ marginTop: 10, marginRight: 10, }} color="textSecondary">Oauth2 type</Typography>
-								label="Oauth2 type"
+								<Select
-								onChange={(e) => {
+									fullWidth
-									setOauth2Type(e.target.value);
+									onChange={(e) => {
-								}}
+										setOauth2Type(e.target.value);
-								value={oauth2Type}
+									}}
-								style={{
+									value={oauth2Type}
-									backgroundColor: inputColor,
+									style={{
-									color: "white",
+										backgroundColor: inputColor,
-									height: "50px",
+										color: "white",
-								}}
+										height: "50px",
-							>
+									}}
-								{["delegated", "application"].map((data, index) => (
+								>
-									<MenuItem
+									{["delegated", "application"].map((data, index) => (
-										key={index}
+										<MenuItem
-										style={{ backgroundColor: inputColor, color: "white" }}
+											key={index}
-										value={data}
+											style={{ backgroundColor: inputColor, color: "white" }}
+											value={data}
+										>
+											{data}
+										</MenuItem>
+									))}
+								</Select>
+							</div>
+
+							{oauth2Type === "application" ?
+								<div style={{display: "flex", }}>
+									<Typography variant="body2" style={{ marginTop: 10, marginRight: 10, }} color="textSecondary">Grant Type</Typography>
+									<Select
+										fullWidth
+										label="Grant Type"
+										onChange={(e) => {
+											setOauth2GrantType(e.target.value);
+										}}
+										value={oauth2GrantType}
+										style={{
+											backgroundColor: inputColor,
+											color: "white",
+											height: "50px",
+										}}
 									>
-										{data}
+										{["client_credentials", "password"].map((data, index) => (
-									</MenuItem>
+											<MenuItem
-								))}
+												key={index}
-							</Select>
+												style={{ backgroundColor: inputColor, color: "white" }}
+												value={data}
+											>
+												{data}
+											</MenuItem>
+										))}
+									</Select>
+								</div>
+							: null}
 						</FormControl>
 					: null}
 	  				</span> 

frontend/src/views/Dashboard.jsx

@@ -102,6 +102,8 @@ const UsecaseListComponent = (props) => {
 	const [expandedItem, setExpandedItem] = useState(-1);
 	const [inputUsecase, setInputUsecase] = useState({});
 
+	const [prevSubcase, setPrevSubcase] = useState({})
+
 	const [editing, setEditing] = useState(false);
 	const [description, setDescription] = useState("");
 	const [video, setVideo] = useState("");
@@ -117,6 +119,42 @@ const UsecaseListComponent = (props) => {
 
 	const [mitreTags, setMitreTags] = useState([]);
 
+	const parseUsecase = (subcase) => {
+	  const srcdata = findSpecificApp(frameworkData, subcase.type)
+	  const dstdata = findSpecificApp(frameworkData, subcase.last)
+	
+	  if (srcdata !== undefined && srcdata !== null) { 
+		subcase.srcimg = srcdata.large_image 
+		subcase.srcapp = srcdata.name
+	  }
+
+	  if (dstdata !== undefined && dstdata !== null) {
+		  subcase.dstimg = dstdata.large_image
+		  subcase.dstapp = dstdata.name
+	  }
+
+	  return subcase 
+  }
+
+	useEffect(() => {
+		console.log("In frameworkData useEffect: frameworkData: ", frameworkData)
+		if (frameworkData === undefined || prevSubcase === undefined) {
+			return
+		}
+
+		console.log("PAST!")
+
+		var parsedUsecase = inputUsecase
+		const subcase = parseUsecase(prevSubcase)
+
+		parsedUsecase.srcimg = subcase.srcimg
+		parsedUsecase.srcapp = subcase.srcapp
+		parsedUsecase.dstimg = subcase.dstimg
+		parsedUsecase.dstapp = subcase.dstapp
+
+		setInputUsecase(parsedUsecase)
+	}, [frameworkData])
+
 	const loadApps = () => {
 		fetch(`${globalUrl}/api/v1/apps`, {
 		  method: "GET",
@@ -166,32 +204,11 @@ const UsecaseListComponent = (props) => {
 	}	
 
   
-  const parseUsecase = (subcase) => {
-	  //console.log("parseUsecase: ", subcase)
-	  const srcdata = findSpecificApp(frameworkData, subcase.type)
-	  const dstdata = findSpecificApp(frameworkData, subcase.last)
-	
-	  if (srcdata !== undefined && srcdata !== null) { 
-		subcase.srcimg = srcdata.large_image 
-		subcase.srcapp = srcdata.name
-	  }
-
-	  if (dstdata !== undefined && dstdata !== null) {
-		  subcase.dstimg = dstdata.large_image
-		  subcase.dstapp = dstdata.name
-	  }
-
-	  return subcase 
-  }
-
 
+  // Timeout 50ms to delay it slightly 
   const getUsecase = (subcase, index, subindex) => {
 	subcase = parseUsecase(subcase)
-
+	setPrevSubcase(subcase)
-	// Timeout 50ms to delay it slightly 
-	//setTimeout(() => {
-	//	setInputUsecase(subcase)
-	//}, 50)
 
     fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase.name.replaceAll(" ", "_"))}`, {
       method: "GET",
@@ -214,8 +231,6 @@ const UsecaseListComponent = (props) => {
 		if (responseJson.success === false) {
 			parsedUsecase = subcase
 		} else {
-			console.log("FOUND: ", JSON.parse(JSON.stringify(responseJson)))
-
 			parsedUsecase = responseJson
 
 			parsedUsecase.srcimg = subcase.srcimg
@@ -314,7 +329,7 @@ const UsecaseListComponent = (props) => {
 			})
       .catch((error) => {
         //toast(error.toString());
-				//setFrameworkLoaded(true)
+		//setFrameworkLoaded(true)
       })
 	}
 
@@ -416,15 +431,16 @@ const UsecaseListComponent = (props) => {
 
 								return (
       								<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
+										if (fixedName === "increase authentication") {
+											getUsecase(subcase, index, subindex) 
+											return
+										}
 
 										//setSelectedWorkflows([])
 										if (selectedItem) {
 										} else {
 											getUsecase(subcase, index, subindex) 
 											navigate(`/usecases?selected_object=${fixedName}`)
-
-											//const newitem = removeParam("selected_object", cursearch);
-											//navigate(curpath + newitem)
 										}
 									}}>
 										<Paper style={{padding: 25, minHeight: isCloud ? 75 : 122, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
@@ -594,11 +610,12 @@ const UsecaseListComponent = (props) => {
           									>
           									  <IconButton
           									    style={{}}
+												index="close_selection"
           									    onClick={(e) => {
-																	setExpandedItem(-1)
+													setExpandedItem(-1)
-																	setExpandedIndex(-1)
+													setExpandedIndex(-1)
-																	setEditing(false)
+													setEditing(false)
-																	setInputUsecase({})
+													setInputUsecase({})
           									    }}
           									  >
           									    <CloseIcon style={{ color: "white" }} />
@@ -1172,13 +1189,28 @@ const Dashboard = (props) => {
 		if (foundQuery !== null && foundQuery !== undefined) {
 			setSelectedUsecaseCategory(foundQuery)
 
-      const newitem = removeParam("selected", cursearch);
+      	const newitem = removeParam("selected", cursearch);
 			navigate(curpath + newitem)
 		}
 
+		const baseItem = document.getElementById("increase authentication")
+		if (baseItem !== undefined && baseItem !== null) {
+			baseItem.click()
+
+			// Find close window button -> go to top
+			const foundButton = document.getElementById("close_selection")
+			if (foundButton !== undefined && foundButton !== null) {
+				foundButton.click()
+			}
+
+			// Scroll back to top
+			window.scrollTo(0, 0)
+		}
+
 		const foundQuery2 = params["selected_object"]
 		if (foundQuery2 !== null && foundQuery2 !== undefined) {
-			//console.log("Got selected_object: ", foundQuery2)
+			// Take a random object, quickly click it, then go to this one
+			// Something is weird with loading apps without it
 
 			const queryName = foundQuery2.toLowerCase().replaceAll("_", " ")
 			// Waiting a bit for it to render
@@ -1198,7 +1230,7 @@ const Dashboard = (props) => {
 				} else { 
 					//console.log("Couldn't find item with name ", queryName)
 				}
-			}, 100);
+			}, 1000);
 		}
 
 	}
@@ -1251,6 +1283,7 @@ const Dashboard = (props) => {
       })
 	}
 
+
   const getAvailableWorkflows = () => {
     fetch(globalUrl + "/api/v1/workflows", {
       method: "GET",
@@ -1385,8 +1418,7 @@ const Dashboard = (props) => {
 
   useEffect(() => {
   	getAvailableWorkflows() 
-		getFramework() 
+	getFramework() 
-		//fetchUsecases()
   }, []);
 
   const fetchdata = (stats_id) => {

frontend/src/views/Docs.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
 
-import ReactMarkdown from "react-markdown";
+import Markdown from 'react-markdown'
+
 import { BrowserView, MobileView } from "react-device-detect";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 import theme from '../theme.jsx';
-import remarkGfm from 'remark-gfm'
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import {
   Grid,
@@ -29,6 +27,8 @@ import {
 import {
   Link as LinkIcon,
   Edit as EditIcon,
+  KeyboardArrowRight as KeyboardArrowRightIcon,
+  ExpandMore as ExpandMoreIcon,
 } from "@mui/icons-material";
 
 const Body = {
@@ -166,8 +166,11 @@ const Docs = (defaultprops) => {
     })
       .then((response) => response.json())
       .then((responseJson) => {
-        if (responseJson.success) {
+        if (responseJson.success && responseJson.reason !== undefined) {
-          setData(responseJson.reason);
+		  // Find <img> tags and translate them into ![]() format
+		  const imgRegex = /<img.*?src="(.*?)"/g;
+		  const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
+          setData(newdata)
           if (docId === undefined) {
             document.title = "Shuffle documentation introduction";
           } else {
@@ -376,7 +379,6 @@ const Docs = (defaultprops) => {
   };
 
   function OuterLink(props) {
-    console.log("Link: ", props.href)
     if (props.href.includes("http") || props.href.includes("mailto")) {
       return (
         <a
@@ -402,7 +404,7 @@ const Docs = (defaultprops) => {
   }
 
   function CodeHandler(props) {
-    console.log("PROPS: ", props)
+    //console.log("Codehandler PROPS: ", props)
 
     const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
 
@@ -603,7 +605,6 @@ const Docs = (defaultprops) => {
 
     const [hover, setHover] = useState(false);
 
-    console.log("Link: ", link)
     if (link === undefined || link === null) {
       return null
     }
@@ -681,60 +682,20 @@ const Docs = (defaultprops) => {
           <b>Organize.</b> Whether an organization of 1000 or 1, management tools are necessary. In Shuffle we offer full user management, MFA and single-signon options, multi-tenancy and a lot more - for free!
         </Typography>
       </div>
-
-      {/*
-				<Grid container spacing={2} style={{marginTop: 50, }}>
-					{list.map((data, index) => {
-						const item = data.name;
-						if (item === undefined) {
-							return null;
-						}
-
-						const path = "/docs/" + item;
-						const newname =
-							item.charAt(0).toUpperCase() +
-							item.substring(1).split("_").join(" ").split("-").join(" ");
-
-						const itemMatching = props.match.params.key === undefined ? false : 
-							props.match.params.key.toLowerCase() === item.toLowerCase();
-
-						return (
-							<Grid key={index} item xs={4}>
-								<DocumentationButton key={index} item={newname} link={"/docs/"+data.name} />
-							</Grid>
-						)
-					})}
-				</Grid>
-				*/}
-
-      {/*
-				<TextField
-					required
-					style={{
-						flex: "1", 
-						backgroundColor: theme.palette.inputColor,
-						height: 50, 
-					}}
-					InputProps={{
-						style:{
-							color: "white",
-							height: 50, 
-						},
-					}}
-					placeholder={"Search Knowledgebase"}
-					color="primary"
-					fullWidth={true}
-					type="firstname"
-					id={"Searchfield"}
-					margin="normal"
-					variant="outlined"
-					onChange={(event) => {
-						console.log("Change: ", event.target.value)
-					}}
-				/>
-				*/}
     </div>
 
+  const markdownComponents = {
+  	img: Img,
+  	code: CodeHandler,
+  	h1: Heading,
+  	h2: Heading,
+  	h3: Heading,
+  	h4: Heading,
+  	h5: Heading,
+  	h6: Heading,
+  	a: OuterLink,
+  }
+
   // PostDataBrowser Section
   const postDataBrowser =
     list === undefined || list === null ? null : (
@@ -812,32 +773,22 @@ const Docs = (defaultprops) => {
             mainpageInfo
             :
             <div id="markdown_wrapper_outer" style={markdownStyle}>
-              <ReactMarkdown
+              <Markdown
-                components={{
+				components={markdownComponents}
-                  img: Img,
-                  code: CodeHandler,
-                  h1: Heading,
-                  h2: Heading,
-                  h3: Heading,
-                  h4: Heading,
-                  h5: Heading,
-                  h6: Heading,
-                  a: OuterLink,
-                }}
                 id="markdown_wrapper"
                 escapeHtml={false}
+			    skipHtml={false}
                 style={{
                   maxWidth: "100%", minWidth: "100%",
                 }}
               >
                 {data}
-              </ReactMarkdown>
+              </Markdown>
             </div>
           }
         </div>
       </div>
     );
-  // remarkPlugins={[remarkGfm]}
 
   const mobileStyle = {
     color: "white",
@@ -849,6 +800,7 @@ const Docs = (defaultprops) => {
     flexDirection: "column",
   };
 
+
   const postDataMobile =
     list === undefined || list === null ? null : (
       <div style={mobileStyle}>
@@ -899,18 +851,8 @@ const Docs = (defaultprops) => {
           mainpageInfo
           :
           <div id="markdown_wrapper_outer" style={markdownStyle}>
-            <ReactMarkdown
+            <Markdown
-              components={{
+              components={markdownComponents}
-                img: Img,
-                code: CodeHandler,
-                h1: Heading,
-                h2: Heading,
-                h3: Heading,
-                h4: Heading,
-                h5: Heading,
-                h6: Heading,
-                a: OuterLink,
-              }}
               id="markdown_wrapper"
               escapeHtml={false}
               style={{
@@ -918,7 +860,7 @@ const Docs = (defaultprops) => {
               }}
             >
               {data}
-            </ReactMarkdown>
+            </Markdown>
           </div>
         }
         <Divider
@@ -941,15 +883,9 @@ const Docs = (defaultprops) => {
       </div>
     );
 
-  //const imageModal =
-  //	<Dialog modal
-  //		open={imageModalOpen}
-  //	</Dialog>
-  // {imageModal}
-
   // Padding and zIndex etc set because of footer in cloud.
   const loadedCheck = (
-    <div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
+    <div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, maxWidth: 1920, minWidth: 1366, margin: "auto", }}>
       <BrowserView>{postDataBrowser}</BrowserView>
       <MobileView>{postDataMobile}</MobileView>
     </div>