Fixed another new workflow recommendation issue

backend/go-app/go.mod

@@ -1,6 +1,6 @@
 module shuffle-shared
 
-//replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
+replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
 
 go 1.19
 

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 {
@@ -63,11 +64,13 @@ const EditWorkflow = (props) => {
   const [submitLoading, setSubmitLoading] = React.useState(false);
   const [showMoreClicked, setShowMoreClicked] = React.useState(false);
   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,9 +157,10 @@ const EditWorkflow = (props) => {
       PaperProps={{
         style: {
           color: "white",
-          minWidth: isMobile ? "90%" : 550,
+          minWidth: isMobile ? "90%" : 650,
-          maxWidth: isMobile ? "90%" : 550,
+          maxWidth: isMobile ? "90%" : 650,
 		  minHeight: 400,
+		  paddingTop: 25, 
           //minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
           //maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
         },
@@ -220,8 +224,8 @@ const EditWorkflow = (props) => {
 				</div>
       </DialogTitle>
       <FormControl>
-        <DialogContent style={{paddingTop: 10, display: "flex", minHeight: 350, zIndex: 1001, }}>
+        <DialogContent style={{paddingTop: 10, display: "flex", minHeight: 300, zIndex: 1001, }}>
-			<div style={{minWidth: newWorkflow ? 450 : 500, maxWidth: newWorkflow ? 450 : 500, }}>
+			<div style={{minWidth: newWorkflow ? 500 : 550, maxWidth: newWorkflow ? 450 : 500, }}>
           	<TextField
           	  onChange={(event) => {
 				setName(event.target.value)
@@ -475,6 +479,7 @@ const EditWorkflow = (props) => {
 		</div>
 
         </DialogContent>
+
         <DialogActions style={{paddingRight: 20,  }}>
           <Button
             style={{}}
@@ -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 { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, onlyResults, inputsearch } = props
-
-  const isCloud =
-    window.location.host === "localhost:3002" ||
-    window.location.host === "shuffler.io";
 
+    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
 	//const [apps, setApps] = React.useState([]);
@@ -40,6 +37,8 @@ const AppGrid = props => {
 	const [formMessage, setFormMessage] = 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,}
 
 	const innerColor = "rgba(255,255,255,0.65)"
@@ -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,7 +218,7 @@ const AppGrid = props => {
 					}}
 					limit={5}
 				/>
-				{/*isSearchStalled ? 'My search is stalled' : ''*/}
+			: null}
 		</form>
 		)
 	}
@@ -228,6 +236,12 @@ const AppGrid = props => {
 		var counted = 0
 
 		return (
+			<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
@@ -239,18 +253,18 @@ const AppGrid = props => {
 						counted += 1
 
 						return (
-						<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px",}}>
-							<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>
+			</div>
 		)
 	}
 
@@ -353,7 +367,7 @@ const AppGrid = props => {
 				</div>
 				: null
 			}
-
+			{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 
@@ -362,6 +376,7 @@ const AppGrid = props => {
 						<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
 					</a>
 				</span>
+			}
 		</div>
 	)
 }