Fixed file category loading and small workflow changes

frontend/src/components/WorkflowTemplatePopup.jsx

@@ -5,6 +5,7 @@ import theme from '../theme.jsx';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import AppSearchButtons from "../components/AppSearchButtons.jsx";
 import { isMobile } from "react-device-detect";
+import RenderCytoscape from "../components/RenderCytoscape.jsx";
 import {
 	Button,
 	Typography,
@@ -43,6 +44,8 @@ const WorkflowTemplatePopup = (props) => {
   	const [missingDestination, setMissingDestination] = React.useState(undefined);
   	const [configurationFinished, setConfigurationFinished] = React.useState(false);
 	const [appSetupDone, setAppSetupDone] = React.useState(false)
+
+	const [requestSent, setRequestSent] = React.useState(false)
   	
 	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	let navigate = useNavigate();
@@ -294,6 +297,9 @@ const WorkflowTemplatePopup = (props) => {
 		// middle:[]
 		// name: "Email analysis"
 		// source:{app_id: "accdaaf2eeba6a6ed43b2efc0112032d", app_name
+		if (requestSent === true) {
+			return
+		}
 		
 
 		if (srcapp.includes(":default") || dstapp.includes(":default")) {
@@ -331,6 +337,7 @@ const WorkflowTemplatePopup = (props) => {
 			},
 		}
 
+		setRequestSent(true)
 		const url = isCloud ? `${globalUrl}/api/v1/workflows/merge` : `https://shuffler.io/api/v1/workflows/merge`
 		fetch(url, {
 			method: "POST",
@@ -344,6 +351,7 @@ const WorkflowTemplatePopup = (props) => {
 		.then((response) => {
 			if (response.status !== 200) {
 				//console.log("Status not 200 for framework!");
+				setRequestSent(false)
 			}
 
 			setWorkflowLoading(false)
@@ -361,6 +369,7 @@ const WorkflowTemplatePopup = (props) => {
 
 			if (responseJson.success === false) {
 				//console.log("Error in workflow template: ", responseJson.error);
+				setRequestSent(false)
 
 				const defaultMessage = "Failed to generate workflow the workflow - the Shuffle team has been notified. Contact support@shuffler.io for further assistance."
 				if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason !== "") {
@@ -386,6 +395,7 @@ const WorkflowTemplatePopup = (props) => {
 		})
 		.catch((error) => {
 			console.log("err in framework: ", error.toString());
+			setRequestSent(false)
 			setWorkflowLoading(false)
 		})
 	}
@@ -422,6 +432,9 @@ const WorkflowTemplatePopup = (props) => {
 			return null
 		}
 
+		const divHeight = 500 
+		const divWidth = 500 
+
 		return (
         	<Drawer
 				anchor={"left"}
@@ -559,12 +572,29 @@ const WorkflowTemplatePopup = (props) => {
 					  setConfigurationFinished={setConfigurationFinished}
 					/>
 
+
+					{/*workflow !== undefined && workflow !== null && workflow.id !== undefined && workflow.id !== null && workflow.id !== "" ? 
+						<div style={{position: "fixed", right: "5%", top: "20%", border: "1px solid rgba(255,255,255,0.3)", height: divHeight, width: divWidth, borderRadius: theme.palette.borderRadius, }}>
+							<RenderCytoscape
+								inworkflow={workflow}
+								height={divHeight}
+								width={divWidth}
+							/>
+						</div>
+					: null*/}
+
 					{errorMessage === "" && configurationFinished === true && workflow.id !== undefined && workflowLoading === false ?
-						<Tooltip title="Workflow generated!" placement="top">
-							<span style={{display: "flex", }}>
+						<Tooltip title="Click to explore the workflow" placement="top">
+							<span 
+								style={{position: "fixed", display: "flex", right: "10%", top: "20%", border: "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, padding: "15px 30px 15px 30px", backgroundColor: theme.palette.platformColor, cursor: "pointer", }}
+								onClick={() => {
+									// Open in new tab
+									window.open("/workflows/" + workflow.id, "_blank")
+								}}
+							>
 								{/*<CheckIcon color="primary" sx={{ borderRadius: 4 }} /> */}
-								<Typography variant="h6" style={{ marginLeft: 20, }}>
-									Workflow generated!
+								<Typography variant="h5" style={{ }}>
+									Workflow Successfully Generated!
 								</Typography>
 							</span>
 						</Tooltip>
@@ -686,6 +716,7 @@ const WorkflowTemplatePopup = (props) => {
 						<CheckIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", color: theme.palette.green, top: 10, right: 10, }} /> 
 					: ""}
 				</div>
+
 			</div>