Fixed another new workflow recommendation issue

frontend/src/components/EditWorkflow.jsx

@@ -3,6 +3,7 @@ import theme from '../theme.jsx';
 import { isMobile } from "react-device-detect" 
 import { MuiChipsInput } from "mui-chips-input";
 import UsecaseSearch from "../components/UsecaseSearch.jsx"
+import WorkflowGrid from "../components/WorkflowGrid.jsx"
 import dayjs from 'dayjs';
 
 import {
@@ -62,12 +63,14 @@ const EditWorkflow = (props) => {
 
   const [submitLoading, setSubmitLoading] = React.useState(false);
   const [showMoreClicked, setShowMoreClicked] = React.useState(false);
-	const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
+  const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
+
   const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
+  const [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "")
+
   const [selectedUsecases, setSelectedUsecases] = React.useState(workflow.usecase_ids !== undefined && workflow.usecase_ids !== null ? JSON.parse(JSON.stringify(workflow.usecase_ids)) : []);
 	const [foundWorkflowId, setFoundWorkflowId] = React.useState("")
 	const [name, setName] = React.useState(workflow.name !== undefined ? workflow.name : "")
-	const [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "")
 	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'))
 
 	// Gets the generated workflow 
@@ -154,58 +157,59 @@ const EditWorkflow = (props) => {
       PaperProps={{
         style: {
           color: "white",
-          minWidth: isMobile ? "90%" : 550,
-          maxWidth: isMobile ? "90%" : 550,
+          minWidth: isMobile ? "90%" : 650,
+          maxWidth: isMobile ? "90%" : 650,
 		  minHeight: 400,
+		  paddingTop: 25, 
           //minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
           //maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
         },
       }}
     >
       <DialogTitle style={{padding: 30, paddingBottom: 0, zIndex: 1000,}}>
-				<div style={{display: "flex"}}>
+		<div style={{display: "flex"}}>
         	<div style={{flex: 1, color: "rgba(255,255,255,0.9)" }}>
-						<div style={{display: "flex"}}>
-							<Typography variant="h6" style={{flex: 9, }}>
-								{newWorkflow ? "New" : "Editing"} workflow
-							</Typography>
-							{newWorkflow === true ? null :
-								<div style={{ marginLeft: 5, flex: 1 }}>
-									<Tooltip title="Open Workflow Form for 'normal' users">
-										<a
-											rel="noopener noreferrer"
-											href={`/workflows/${workflow.id}/run`}
-											target="_blank"
-											style={{
-												textDecoration: "none",
-												color: "#f85a3e",
-												marginLeft: 5,
-												marginTop: 10,
-											}}
-										>
-											<OpenInNewIcon />
-										</a>
-									</Tooltip>
-								</div>
-							}
+				<div style={{display: "flex"}}>
+					<Typography variant="h6" style={{flex: 9, }}>
+						{newWorkflow ? "New" : "Editing"} workflow
+					</Typography>
+					{newWorkflow === true ? null :
+						<div style={{ marginLeft: 5, flex: 1 }}>
+							<Tooltip title="Open Workflow Form for 'normal' users">
+								<a
+									rel="noopener noreferrer"
+									href={`/workflows/${workflow.id}/run`}
+									target="_blank"
+									style={{
+										textDecoration: "none",
+										color: "#f85a3e",
+										marginLeft: 5,
+										marginTop: 10,
+									}}
+								>
+									<OpenInNewIcon />
+								</a>
+							</Tooltip>
 						</div>
-						<Typography variant="body2" color="textSecondary" style={{maxWidth: 440,}}>
-							Workflows can be built from scratch, or from templates. <a href="/usecases" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
-						</Typography>
-						{showUpload === true ? 
-							<div style={{ float: "right" }}>
-								<Tooltip color="primary" title={"Import manually"} placement="top">
-									<Button
-										color="primary"
-										style={{}}
-										variant="text"
-										onClick={() => upload.click()}
-									>
-										<PublishIcon />
-									</Button>
-								</Tooltip>
-        	  	</div>
-						: null}
+					}
+				</div>
+				<Typography variant="body2" color="textSecondary" style={{maxWidth: 440,}}>
+					Workflows can be built from scratch, or from templates. <a href="/usecases" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
+				</Typography>
+				{showUpload === true ? 
+					<div style={{ float: "right" }}>
+						<Tooltip color="primary" title={"Import manually"} placement="top">
+							<Button
+								color="primary"
+								style={{}}
+								variant="text"
+								onClick={() => upload.click()}
+							>
+								<PublishIcon />
+							</Button>
+						</Tooltip>
+        	  		</div>
+				: null}
         	</div>
 					{/*newWorkflow === true ? 
 						<div style={{flex: 1, marginLeft: 45, }}>
@@ -220,8 +224,8 @@ const EditWorkflow = (props) => {
 				</div>
       </DialogTitle>
       <FormControl>
-        <DialogContent style={{paddingTop: 10, display: "flex", minHeight: 350, zIndex: 1001, }}>
-			<div style={{minWidth: newWorkflow ? 450 : 500, maxWidth: newWorkflow ? 450 : 500, }}>
+        <DialogContent style={{paddingTop: 10, display: "flex", minHeight: 300, zIndex: 1001, }}>
+			<div style={{minWidth: newWorkflow ? 500 : 550, maxWidth: newWorkflow ? 450 : 500, }}>
           	<TextField
           	  onChange={(event) => {
 				setName(event.target.value)
@@ -475,7 +479,8 @@ const EditWorkflow = (props) => {
 		</div>
 
         </DialogContent>
-        <DialogActions style={{paddingRight: 20, }}>
+
+        <DialogActions style={{paddingRight: 20,  }}>
           <Button
             style={{}}
             onClick={() => {
@@ -540,6 +545,23 @@ const EditWorkflow = (props) => {
             {submitLoading ? <CircularProgress color="secondary" /> : "Submit"}
           </Button>
         </DialogActions>
+
+		  {newWorkflow === true && name.length > 5 ?
+			<div style={{marginLeft: 30, }}>
+				<WorkflowGrid 
+					maxRows={1}
+					globalUrl={globalUrl}
+					showSuggestions={false}
+					isMobile={isMobile}
+					userdata={userdata}
+					inputsearch={name+description+newWorkflowTags.join(" ")}
+
+					parsedXs={6}
+					alternativeView={false}
+					onlyResults={true}
+				/>
+			</div> 
+		  : null}
       </FormControl>
     </Drawer>
 	)

frontend/src/components/WorkflowGrid.jsx

@@ -25,12 +25,9 @@ import WorkflowPaperNew from "../components/WorkflowPaperNew.jsx"
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const AppGrid = props => {
-	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, }  = props
-
-  const isCloud =
-    window.location.host === "localhost:3002" ||
-    window.location.host === "shuffler.io";
+	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, onlyResults, inputsearch } = props
 
+    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
 	//const [apps, setApps] = React.useState([]);
@@ -38,7 +35,9 @@ const AppGrid = props => {
 	const [formMail, setFormMail] = React.useState("");
 	const [message, setMessage] = React.useState("");
 	const [formMessage, setFormMessage] = React.useState("");
-  const [usecases, setUsecases] = React.useState([]);
+  	const [usecases, setUsecases] = React.useState([]);
+
+	const [localMessage, setLocalMessage] = React.useState("");
 
 	const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
 
@@ -153,10 +152,10 @@ const AppGrid = props => {
         return response.json();
       })
       .then((responseJson) => {
-				if (responseJson.success !== false) {
-					console.log("Usecases: ", responseJson)
-					//handleKeysetting(responseJson, workflows)
-				}
+			if (responseJson.success !== false) {
+				console.log("Usecases: ", responseJson)
+				//handleKeysetting(responseJson, workflows)
+			}
       })
       .catch((error) => {
         //alert.error("ERROR: " + error.toString());
@@ -166,8 +165,10 @@ const AppGrid = props => {
 
 	useEffect(() => {
 		fetchUsecases()
+
 	}, [])
 
+
 	// value={currentRefinement}
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
 		useEffect(() => {
@@ -182,16 +183,23 @@ const AppGrid = props => {
 			}
 		}, [])
 
+		if (localMessage !== inputsearch && inputsearch !== undefined && inputsearch !== null && inputsearch.length > 0) { 
+			console.log("In refinement: ", inputsearch)
+			//setLocalMessage(inputsearch)
+			refine(inputsearch)
+		} else if (onlyResults === true) {
+			// Don't return anything unless refinement works
+			return null
+		}
+
 		return (
 		  <form noValidate action="" role="search">
+		  	{onlyResults !== true ?
 				<TextField 
 					fullWidth
 					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} 
 					InputProps={{
 						style:{
-							color: "white",
-							fontSize: "1em",
-							height: 50,
 						},
 						startAdornment: (
 							<InputAdornment position="start">
@@ -210,8 +218,8 @@ const AppGrid = props => {
 					}}
 					limit={5}
 				/>
-				{/*isSearchStalled ? 'My search is stalled' : ''*/}
-			</form>
+			: null}
+		</form>
 		)
 	}
 
@@ -228,29 +236,35 @@ const AppGrid = props => {
 		var counted = 0
 
 		return (
-      <Grid container spacing={4} style={paperAppContainer}>
-				{hits.map((data, index) => {
-					workflowDelay += 50
+			<div>
+				{onlyResults === true && hits.length > 0 ?
+					<Typography variant="h6" style={{paddingBottom: 0, }}>
+						Relevant Workflows
+					</Typography>
+				: null}
+				<Grid container spacing={4} style={paperAppContainer}>
+					{hits.map((data, index) => {
+						workflowDelay += 50
 
-					if (counted === 12/xs*rowHandler) {
-						return null
-					}
+						if (counted === 12/xs*rowHandler) {
+							return null
+						}
 
-					counted += 1
+						counted += 1
 
-					return (
-						<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px" }}>
+						return (
+							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px",}}>
+						{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
 								{alternativeView === true ? 
 									<WorkflowPaperNew key={index} data={data} />
 								: 
 									<WorkflowPaper key={index} data={data} />
 								}
 							</Grid>
-						</Zoom>
-					)
-				})}
-			</Grid>
+						)
+					})}
+				</Grid>
+			</div>
 		)
 	}
 
@@ -331,11 +345,11 @@ const AppGrid = props => {
 							fullWidth={true}
 							placeholder="What apps do you want to see?"
 							type=""
-						  id="standard-required"
+						    id="standard-required"
 							margin="normal"
 							variant="outlined"
 							autoComplete="off"
-      	 			onChange={e => setMessage(e.target.value)}
+      	 					onChange={e => setMessage(e.target.value)}
 						/>
 					</div>
 					<Button
@@ -353,15 +367,16 @@ const AppGrid = props => {
 				</div>
 				: null
 			}
-
-			<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
-				<Typography variant="body2" color="textSecondary" style={{}}>
-					Search by 
-				</Typography>
-				<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>
-			</span>
+			{onlyResults === true ? null : 
+				<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
+					<Typography variant="body2" color="textSecondary" style={{}}>
+						Search by 
+					</Typography>
+					<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>
+				</span>
+			}
 		</div>
 	)
 }