Fixed asearch grid linking to shuffler.io properly for public items

frontend/src/components/AppGrid.jsx

@@ -148,6 +148,8 @@ const AppGrid = props => {
 		//	setInnerHits(hits)
 		//}
 
+		console.log("In appgrid")
+
 		return (
 			<Grid container spacing={2}>
 				{hits.map((data, index) => {
@@ -184,11 +186,11 @@ const AppGrid = props => {
 					}
 					
 					parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
-
+					const appUrl = isCloud ? `/apps/${data.objectID}?queryID=${data.__queryID}` : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`
 					return (
 						<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
 							<Grid item xs={xs} key={index}>
-								<Link to={`/apps/${data.objectID}?queryID=${data.__queryID}`} style={{textDecoration: "none", color: "#f85a3e"}}>
+								<a href={appUrl} rel="noopener noreferrer" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>
 									<Paper elevation={0} style={paperStyle} onMouseOver={() => {
 										setMouseHoverIndex(index)
 										/*
@@ -254,7 +256,7 @@ const AppGrid = props => {
 											</Tooltip>
 										}
 									</Paper>
-								</Link>
+								</a>
 							</Grid>
 						</Zoom>
 					)

frontend/src/components/CreatorGrid.jsx

@@ -53,6 +53,10 @@ const CreatorGrid = props => {
 
 	const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
 
+	const isCloud =
+		window.location.host === "localhost:3002" ||
+		window.location.host === "shuffler.io";
+
 	const innerColor = "rgba(255,255,255,0.65)"
 	const borderRadius = 3
 	window.title = "Shuffle | Workflows | Discover your use-case"
@@ -159,62 +163,64 @@ const CreatorGrid = props => {
 					}
 
 					counted += 1
+					const creatorUrl = !isCloud ? `https://shuffler.io/creators/${data.username}` : `/creators/${data.username}`
 
 					return (
 						<Zoom key={index} in={true} style={{}}>
 							<Grid item xs={xs} style={{ padding: "12px 10px 12px 10px", }}>
 								<Card style={{border: "1px solid rgba(255,255,255,0.3)", minHeight: 177, maxHeight: 177,}}>
-						  		<CardActionArea component={Link} to={"/creators/"+data.username} style={{padding: "5px 10px 5px 10px", minHeight: 177, maxHeight: 177,}}>
+									<a href={creatorUrl} rel="noopener noreferrer" target="_blank" style={{textDecoration: "none", color: "inherit",}}>
-										<CardContent sx={{ flex: '1 0 auto', minWidth: 160, maxWidth: 160, overflow: "hidden", padding: 0, }}>
+						  			<CardActionArea style={{padding: "5px 10px 5px 10px", minHeight: 177, maxHeight: 177,}}>
-											<div style={{display: "flex"}}>
+											<CardContent sx={{ flex: '1 0 auto', minWidth: 160, maxWidth: 160, overflow: "hidden", padding: 0, }}>
-												<img style={{height: 74, width: 74, borderRadius: 100, }} alt={"Creator profile of "+data.username} src={data.image} />
+												<div style={{display: "flex"}}>
-												<Typography component="div" variant="body1" style={{marginTop: 20, marginLeft: 15, }}>
+													<img style={{height: 74, width: 74, borderRadius: 100, }} alt={"Creator profile of "+data.username} src={data.image} />
-													@{data.username}
+													<Typography component="div" variant="body1" style={{marginTop: 20, marginLeft: 15, }}>
-												</Typography>
+														@{data.username}
-												<span style={{marginTop: "auto", marginBottom: "auto", marginLeft: 10, }}>
+													</Typography>
-													{data.verified === true ? 
+													<span style={{marginTop: "auto", marginBottom: "auto", marginLeft: 10, }}>
-														<Tooltip title="Verified and earning from Shuffle contributions" placement="top">
+														{data.verified === true ? 
-															<VerifiedUserIcon style={{}}/>
+															<Tooltip title="Verified and earning from Shuffle contributions" placement="top">
-														</Tooltip>
+																<VerifiedUserIcon style={{}}/>
-													: 
-													null
-													}
-												</span>
-											</div>
-											<Typography variant="body1" color="textSecondary" style={{marginTop: 10, }}>
-												<b>{data.apps === undefined || data.apps === null ? 0 : data.apps}</b> apps <span style={{marginLeft: 15, }}/><b>{data.workflows === null || data.workflows === undefined ? 0 : data.workflows}</b> workflows
-											</Typography> 
-										{data.specialized_apps !== undefined && data.specialized_apps !== null && data.specialized_apps.length > 0 ? 
-											<AvatarGroup max={10} style={{flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left", marginTop: 3,}}>
-												{data.specialized_apps.map((app, index) => {
-													// Putting all this in secondary of ListItemText looked weird.
-													return (
-														<div
-															key={index}
-															style={{
-																height: 24,
-																width: 24,
-																filter: "brightness(0.6)",
-																cursor: "pointer",
-															}}
-															onClick={() => {
-																console.log("Click")
-																//navigate("/apps/"+app.id)
-															}}
-														>
-															<Tooltip color="primary" title={app.name} placement="bottom">
-																<Avatar alt={app.name} src={app.image} style={{width: 24, height: 24}}/>
 															</Tooltip>
-														</div>
+														: 
-													)
+														null
-												})}
+														}
-											</AvatarGroup>
+													</span>
-											: 
+												</div>
-											null}
+												<Typography variant="body1" color="textSecondary" style={{marginTop: 10, }}>
-										</CardContent>
+													<b>{data.apps === undefined || data.apps === null ? 0 : data.apps}</b> apps <span style={{marginLeft: 15, }}/><b>{data.workflows === null || data.workflows === undefined ? 0 : data.workflows}</b> workflows
-									</CardActionArea>
+												</Typography> 
+											{data.specialized_apps !== undefined && data.specialized_apps !== null && data.specialized_apps.length > 0 ? 
+												<AvatarGroup max={10} style={{flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left", marginTop: 3,}}>
+													{data.specialized_apps.map((app, index) => {
+														// Putting all this in secondary of ListItemText looked weird.
+														return (
+															<div
+																key={index}
+																style={{
+																	height: 24,
+																	width: 24,
+																	filter: "brightness(0.6)",
+																	cursor: "pointer",
+																}}
+																onClick={() => {
+																	console.log("Click")
+																	//navigate("/apps/"+app.id)
+																}}
+															>
+																<Tooltip color="primary" title={app.name} placement="bottom">
+																	<Avatar alt={app.name} src={app.image} style={{width: 24, height: 24}}/>
+																</Tooltip>
+															</div>
+														)
+													})}
+												</AvatarGroup>
+												: 
+												null}
+											</CardContent>
+										</CardActionArea>
+									</a>
 								</Card>
-
 							</Grid>
 						</Zoom>
 					)

frontend/src/components/WorkflowPaper.jsx

@@ -63,6 +63,10 @@ const WorkflowPaper = (props) => {
     const [anchorEl, setAnchorEl] = React.useState(null);
 		const appGroup = data.action_references === undefined || data.action_references === null ? [] : data.action_references
 
+  	const isCloud =
+			window.location.host === "localhost:3002" ||
+			window.location.host === "shuffler.io";
+
 		//console.log("Workflow: ", data)
     var boxColor = "#86c142";
 
@@ -96,6 +100,10 @@ const WorkflowPaper = (props) => {
 			parsedUrl += `?queryID=${data.__queryID}`
 		}
 
+		if (!isCloud) {
+			parsedUrl = `https://shuffler.io${parsedUrl}`
+		}
+
     return (
 			<div style={{width: "100%", position: "relative",}}>
         <Paper square style={paperAppStyle}>
@@ -137,12 +145,14 @@ const WorkflowPaper = (props) => {
                     flex: 10,
                   }}
                 >
-                  <Link
+                  <a
-                    to={parsedUrl}
+                    href={parsedUrl}
+										rel="norefferer"
+										target="_blank"
                     style={{ textDecoration: "none", color: "inherit" }}
                   >
                     {parsedName}
-                  </Link>
+                  </a>
                 </Typography>
               </Tooltip>
             </Grid>