Fixed another new workflow recommendation issue

This commit is contained in:
Frikky
2023-08-17 02:13:38 +02:00
parent b693b960cc
commit 1461d6ad6b
3 changed files with 126 additions and 89 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
module shuffle-shared module shuffle-shared
//replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared
go 1.19 go 1.19
+70 -48
View File
@@ -3,6 +3,7 @@ import theme from '../theme.jsx';
import { isMobile } from "react-device-detect" import { isMobile } from "react-device-detect"
import { MuiChipsInput } from "mui-chips-input"; import { MuiChipsInput } from "mui-chips-input";
import UsecaseSearch from "../components/UsecaseSearch.jsx" import UsecaseSearch from "../components/UsecaseSearch.jsx"
import WorkflowGrid from "../components/WorkflowGrid.jsx"
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { import {
@@ -62,12 +63,14 @@ const EditWorkflow = (props) => {
const [submitLoading, setSubmitLoading] = React.useState(false); const [submitLoading, setSubmitLoading] = React.useState(false);
const [showMoreClicked, setShowMoreClicked] = 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 [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 [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 [foundWorkflowId, setFoundWorkflowId] = React.useState("")
const [name, setName] = React.useState(workflow.name !== undefined ? workflow.name : "") 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')) 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 // Gets the generated workflow
@@ -154,58 +157,59 @@ const EditWorkflow = (props) => {
PaperProps={{ PaperProps={{
style: { style: {
color: "white", color: "white",
minWidth: isMobile ? "90%" : 550, minWidth: isMobile ? "90%" : 650,
maxWidth: isMobile ? "90%" : 550, maxWidth: isMobile ? "90%" : 650,
minHeight: 400, minHeight: 400,
paddingTop: 25,
//minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550, //minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
//maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550, //maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
}, },
}} }}
> >
<DialogTitle style={{padding: 30, paddingBottom: 0, zIndex: 1000,}}> <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={{flex: 1, color: "rgba(255,255,255,0.9)" }}>
<div style={{display: "flex"}}> <div style={{display: "flex"}}>
<Typography variant="h6" style={{flex: 9, }}> <Typography variant="h6" style={{flex: 9, }}>
{newWorkflow ? "New" : "Editing"} workflow {newWorkflow ? "New" : "Editing"} workflow
</Typography> </Typography>
{newWorkflow === true ? null : {newWorkflow === true ? null :
<div style={{ marginLeft: 5, flex: 1 }}> <div style={{ marginLeft: 5, flex: 1 }}>
<Tooltip title="Open Workflow Form for 'normal' users"> <Tooltip title="Open Workflow Form for 'normal' users">
<a <a
rel="noopener noreferrer" rel="noopener noreferrer"
href={`/workflows/${workflow.id}/run`} href={`/workflows/${workflow.id}/run`}
target="_blank" target="_blank"
style={{ style={{
textDecoration: "none", textDecoration: "none",
color: "#f85a3e", color: "#f85a3e",
marginLeft: 5, marginLeft: 5,
marginTop: 10, marginTop: 10,
}} }}
> >
<OpenInNewIcon /> <OpenInNewIcon />
</a> </a>
</Tooltip> </Tooltip>
</div>
}
</div> </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> </div>
</Typography> <Typography variant="body2" color="textSecondary" style={{maxWidth: 440,}}>
{showUpload === true ? 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>
<div style={{ float: "right" }}> </Typography>
<Tooltip color="primary" title={"Import manually"} placement="top"> {showUpload === true ?
<Button <div style={{ float: "right" }}>
color="primary" <Tooltip color="primary" title={"Import manually"} placement="top">
style={{}} <Button
variant="text" color="primary"
onClick={() => upload.click()} style={{}}
> variant="text"
<PublishIcon /> onClick={() => upload.click()}
</Button> >
</Tooltip> <PublishIcon />
</div> </Button>
: null} </Tooltip>
</div>
: null}
</div> </div>
{/*newWorkflow === true ? {/*newWorkflow === true ?
<div style={{flex: 1, marginLeft: 45, }}> <div style={{flex: 1, marginLeft: 45, }}>
@@ -220,8 +224,8 @@ const EditWorkflow = (props) => {
</div> </div>
</DialogTitle> </DialogTitle>
<FormControl> <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 <TextField
onChange={(event) => { onChange={(event) => {
setName(event.target.value) setName(event.target.value)
@@ -475,7 +479,8 @@ const EditWorkflow = (props) => {
</div> </div>
</DialogContent> </DialogContent>
<DialogActions style={{paddingRight: 20, }}>
<DialogActions style={{paddingRight: 20, }}>
<Button <Button
style={{}} style={{}}
onClick={() => { onClick={() => {
@@ -540,6 +545,23 @@ const EditWorkflow = (props) => {
{submitLoading ? <CircularProgress color="secondary" /> : "Submit"} {submitLoading ? <CircularProgress color="secondary" /> : "Submit"}
</Button> </Button>
</DialogActions> </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> </FormControl>
</Drawer> </Drawer>
) )
+55 -40
View File
@@ -25,12 +25,9 @@ import WorkflowPaperNew from "../components/WorkflowPaperNew.jsx"
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240") const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
const AppGrid = props => { 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 rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
//const [apps, setApps] = React.useState([]); //const [apps, setApps] = React.useState([]);
@@ -38,7 +35,9 @@ const AppGrid = props => {
const [formMail, setFormMail] = React.useState(""); const [formMail, setFormMail] = React.useState("");
const [message, setMessage] = React.useState(""); const [message, setMessage] = React.useState("");
const [formMessage, setFormMessage] = 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,} 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(); return response.json();
}) })
.then((responseJson) => { .then((responseJson) => {
if (responseJson.success !== false) { if (responseJson.success !== false) {
console.log("Usecases: ", responseJson) console.log("Usecases: ", responseJson)
//handleKeysetting(responseJson, workflows) //handleKeysetting(responseJson, workflows)
} }
}) })
.catch((error) => { .catch((error) => {
//alert.error("ERROR: " + error.toString()); //alert.error("ERROR: " + error.toString());
@@ -166,8 +165,10 @@ const AppGrid = props => {
useEffect(() => { useEffect(() => {
fetchUsecases() fetchUsecases()
}, []) }, [])
// value={currentRefinement} // value={currentRefinement}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => { const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => { 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 ( return (
<form noValidate action="" role="search"> <form noValidate action="" role="search">
{onlyResults !== true ?
<TextField <TextField
fullWidth fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{ InputProps={{
style:{ style:{
color: "white",
fontSize: "1em",
height: 50,
}, },
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
@@ -210,8 +218,8 @@ const AppGrid = props => {
}} }}
limit={5} limit={5}
/> />
{/*isSearchStalled ? 'My search is stalled' : ''*/} : null}
</form> </form>
) )
} }
@@ -228,29 +236,35 @@ const AppGrid = props => {
var counted = 0 var counted = 0
return ( return (
<Grid container spacing={4} style={paperAppContainer}> <div>
{hits.map((data, index) => { {onlyResults === true && hits.length > 0 ?
workflowDelay += 50 <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) { if (counted === 12/xs*rowHandler) {
return null return null
} }
counted += 1 counted += 1
return ( 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 ? {alternativeView === true ?
<WorkflowPaperNew key={index} data={data} /> <WorkflowPaperNew key={index} data={data} />
: :
<WorkflowPaper key={index} data={data} /> <WorkflowPaper key={index} data={data} />
} }
</Grid> </Grid>
</Zoom> )
) })}
})} </Grid>
</Grid> </div>
) )
} }
@@ -331,11 +345,11 @@ const AppGrid = props => {
fullWidth={true} fullWidth={true}
placeholder="What apps do you want to see?" placeholder="What apps do you want to see?"
type="" type=""
id="standard-required" id="standard-required"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
autoComplete="off" autoComplete="off"
onChange={e => setMessage(e.target.value)} onChange={e => setMessage(e.target.value)}
/> />
</div> </div>
<Button <Button
@@ -353,15 +367,16 @@ const AppGrid = props => {
</div> </div>
: null : null
} }
{onlyResults === true ? null :
<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}> <span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
<Typography variant="body2" color="textSecondary" style={{}}> <Typography variant="body2" color="textSecondary" style={{}}>
Search by Search by
</Typography> </Typography>
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}> <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,}} /> <img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
</a> </a>
</span> </span>
}
</div> </div>
) )
} }