marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved usecase generator

Browse Source
This commit is contained in:
frikky
2023-01-16 00:38:29 +01:00
parent 543fe7f59d
commit 77d86f0eba
1 changed files with 185 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/UsecaseSearch.jsx
+185 -168
View File
@@ -27,7 +27,7 @@ import {
Divider, Divider,
} from "@material-ui/core"; } from "@material-ui/core";
const defaultValue = {"id": "", "name": "", const defaultValue = {"id": "", "name": "Build your own",
"source": {"text": "No trigger selected", "error": ""}, "source": {"text": "No trigger selected", "error": ""},
"destination": {"text": "No subflow selected", "error": ""}, "destination": {"text": "No subflow selected", "error": ""},
"middle": [] "middle": []
@@ -284,7 +284,7 @@ export const subflows = [
] ]
const UsecaseSearch = (props) => { const UsecaseSearch = (props) => {
const { defaultSearch, appFramework, globalUrl, showTitle, canExpand, apps, setFoundWorkflowId, getFramework, userdata, usecaseSearch, setUsecaseSearch, autotry, setCloseWindow, } = props const { defaultSearch, appFramework, globalUrl, showTitle, canExpand, apps, setFoundWorkflowId, getFramework, userdata, usecaseSearch, setUsecaseSearch, autotry, setCloseWindow, sourceapp, destinationapp} = props
const [allusecases, setAllUsecases] = React.useState([ const [allusecases, setAllUsecases] = React.useState([
@@ -371,21 +371,18 @@ const UsecaseSearch = (props) => {
setUpdate(Math.random()) setUpdate(Math.random())
} }
} else { } else {
console.log("NOT FOUND FOR: ", defaultSearch)
setAllUsecases([JSON.parse(JSON.stringify(defaultValue))]) setAllUsecases([JSON.parse(JSON.stringify(defaultValue))])
setUpdate(Math.random()) setUpdate(Math.random())
} }
} }
if (defaultSearch !== undefined && defaultSearch !== null && defaultSearch !== searchType) { if (defaultSearch !== undefined && defaultSearch !== null && defaultSearch !== searchType) {
console.log("Setting searchtype to", defaultSearch)
setSearchType(defaultSearch) setSearchType(defaultSearch)
setUsecaseIndex(0) setUsecaseIndex(0)
rerunWorkflowCheck(defaultSearch, usecaseSearch) rerunWorkflowCheck(defaultSearch, usecaseSearch)
} }
//if (defaultSearch !== undefined && defaultSearch.length > 0 && allusecases[usecaseIndex].name === "") { //if (defaultSearch !== undefined && defaultSearch.length > 0 && allusecases[usecaseIndex].name === "") {
// rerunWorkflowCheck() // rerunWorkflowCheck()
//} //}
@@ -442,10 +439,10 @@ const UsecaseSearch = (props) => {
var usecases = JSON.parse(JSON.stringify(allusecases)) var usecases = JSON.parse(JSON.stringify(allusecases))
const imagestyle = { const imagestyle = {
height: 50, height: 40,
width: 50, width: 40,
borderRadius: 25, borderRadius: 25,
border: "1px solid rgba(255,255,255,0.3)", border: "1px solid rgba(255,255,255,0.7)",
cursor: "pointer", cursor: "pointer",
} }
@@ -869,8 +866,8 @@ const UsecaseSearch = (props) => {
} }
const mergeWorkflowUsecases = (usecasedata) => { const mergeWorkflowUsecases = (usecasedata) => {
//const url = `${globalUrl}/api/v1/workflows/merge`; // To properly handle multiple-locations
const url = `https://shuffler.io/api/v1/workflows/merge`; const url = isCloud ? `${globalUrl}/api/v1/workflows/merge` : `https://shuffler.io/api/v1/workflows/merge`;
fetch(url, { fetch(url, {
mode: "cors", mode: "cors",
method: "POST", method: "POST",
@@ -981,7 +978,6 @@ const UsecaseSearch = (props) => {
} else if (isCloud) { } else if (isCloud) {
if (responseJson.workflow_id !== null && responseJson.workflow_id !== undefined) { if (responseJson.workflow_id !== null && responseJson.workflow_id !== undefined) {
if (responseJson.added_auth !== undefined && responseJson.added_auth !== null && responseJson.added_auth.length > 0) { if (responseJson.added_auth !== undefined && responseJson.added_auth !== null && responseJson.added_auth.length > 0) {
console.log("SHOULD HANDLE AUTH: ", responseJson.added_auth)
setConfigureWorkflowAuth(responseJson.added_auth) setConfigureWorkflowAuth(responseJson.added_auth)
if (setFoundWorkflowId !== undefined) { if (setFoundWorkflowId !== undefined) {
@@ -1021,7 +1017,11 @@ const UsecaseSearch = (props) => {
}); });
} }
//console.log("Filled in: ", appFramework, usecases) // Autosearch in framework & set it?
if (sourceapp !== undefined && destinationapp !== undefined) {
console.log("FIND APPS", sourceapp, destinationapp)
}
if (appFramework !== undefined && usecases !== undefined) { if (appFramework !== undefined && usecases !== undefined) {
for (var key in usecases) { for (var key in usecases) {
@@ -1180,10 +1180,10 @@ const UsecaseSearch = (props) => {
mergeWorkflowUsecases(data) mergeWorkflowUsecases(data)
} }
if (autotry === true && firstRequest === true) { if (autotry === true && firstRequest === true && appFramework !== undefined && usecases !== undefined && isUploading === false) {
console.log("Should autotry the usecase! Make sure data is in order first. Usecase: ", usecases) console.log("Should autotry the usecase! Make sure data is in order first. Usecase: ", usecases)
if (usecases !== undefined && usecases !== null && usecases.length > 0 && usecases[0].name !== "") { if (usecases !== undefined && usecases !== null && usecases.length > 0 && usecases[0].name !== "Build your own" && usecases[0].name !== "") {
setFirstRequest(false) setFirstRequest(false)
createWorkflowFromTemplate(usecases[0]) createWorkflowFromTemplate(usecases[0])
} }
@@ -1332,44 +1332,38 @@ const UsecaseSearch = (props) => {
const looplist = type === "source" ? triggerlist : type === "destination" ? subflows : midflows const looplist = type === "source" ? triggerlist : type === "destination" ? subflows : midflows
const hasError = data.error !== undefined && data.error !== null && data.error.length > 0 const hasError = data.error !== undefined && data.error !== null && data.error.length > 0
const borderColor = hasError ? theme.palette.primary.main : "rgba(255,255,255,0.3)" const borderColor = hasError ? theme.palette.primary.main : "rgba(255,255,255,0.3)"
const startText = miditem ? "" : type === "source" ? "When" : "Then"
if (data.text.includes(startText)) {
data.text = data.text.replace(startText, "")
}
return ( return (
<div style={{border: `1px solid ${borderColor}`, backgroundColor: theme.palette.platformColor, borderRadius: theme.palette.borderRadius, width: miditem === true ? "75%" : "100%", marginLeft: miditem === true ? 25 : 0, }}> <div style={{display: "flex", }}>
<Typography variant="body1" style={{color: "rgba(255,255,255,0.5)", marginRight: 20, marginTop: 13, }}>
{startText}
</Typography>
<div style={{border: `1px solid ${borderColor}`, backgroundColor: theme.palette.surfaceColor, width: miditem === true ? "65%" : "85%", marginLeft: miditem === true ? 125 : 0, borderRadius: expanded ? theme.palette.borderRadius : 50, maxHeight: expanded || hasError ? 500 : 50, minHeight: 50, }}>
{selectionOpen === true ? {selectionOpen === true ?
<AppsearchPopout <AppsearchPopout
paperTitle={paperTitle} paperTitle={paperTitle}
setPaperTitle={setPaperTitle} setPaperTitle={setPaperTitle}
newSelectedApp={newSelectedApp} newSelectedApp={newSelectedApp}
setNewSelectedApp={setNewSelectedApp} setNewSelectedApp={setNewSelectedApp}
selectionOpen={selectionOpen} selectionOpen={selectionOpen}
setSelectionOpen={setSelectionOpen} setSelectionOpen={setSelectionOpen}
discoveryData={discoveryData} discoveryData={discoveryData}
setDiscoveryData={setDiscoveryData} setDiscoveryData={setDiscoveryData}
userdata={userdata} userdata={userdata}
/> />
: null} : null}
<div style={{display: "flex", margin: 10, }}> <div style={{display: "flex", margin: 4, }}>
<div style={{display: "flex", width: "75%",}}> <div style={{display: "flex", width: "75%",}}>
<Tooltip title={data.text}> <Tooltip title={data.text}>
<img src={data.image} alt={data.app_name} style={imagestyle} onClick={() => { <img src={data.image} alt={data.app_name} style={imagestyle} onClick={() => {
if (data.type === undefined || data.type === null || data.type === "") {
setexpanded(true)
console.log("No type. Skipping window open.")
return
}
changeAppType()
}}/>
</Tooltip>
<div>
<Typography variant="h6" color="textSecondary" style={{marginLeft: 20, marginTop: hasError ? 0 : 10, maxWidth: 250, overflow: "hidden", }}>
{data.text}
</Typography>
{hasError ?
<Typography variant="body2" color="textSecondary" style={{color: theme.palette.primary.main, marginLeft: 20, cursor: "pointer", }} onClick={() => {
if (data.type === undefined || data.type === null || data.type === "") { if (data.type === undefined || data.type === null || data.type === "") {
setexpanded(true) setexpanded(true)
console.log("No type. Skipping window open.") console.log("No type. Skipping window open.")
@@ -1377,140 +1371,161 @@ const UsecaseSearch = (props) => {
} }
changeAppType() changeAppType()
}}> }}/>
{data.error} </Tooltip>
<div>
<Typography variant="body1" color="textSecondary" style={{marginLeft: 20, marginTop: hasError ? 0 : 8, maxWidth: 250, overflow: "hidden", }}>
{data.text}
</Typography> </Typography>
: {hasError ?
null} <Typography variant="body2" color="textSecondary" style={{color: theme.palette.primary.main, marginLeft: 20, cursor: "pointer", }} onClick={() => {
if (data.type === undefined || data.type === null || data.type === "") {
setexpanded(true)
console.log("No type. Skipping window open.")
return
}
changeAppType()
}}>
{data.error}
</Typography>
:
null}
</div>
</div>
<div style={{display: "flex", }}>
<Tooltip
color="secondary"
title={`See documentation for how to make the usecase '${data.text.toLowerCase()}'`}
placement="top"
>
<span>
<IconButton
disabled={true}
style={{marginTop: 0, paddingTop: 8,}}
onClick={() => {
}}
>
<span>
<a
href={`https://shuffler.io/docs/creators#${data.text.toLowerCase()}`}
rel="norefferer"
target="_blank"
style={{ textDecoration: "none", }}
>
<DescriptionIcon style={{color: "grey", }}/>
</a>
</span>
</IconButton>
</span>
</Tooltip>
{type === "middle" ?
<IconButton
onClick={() => {
allusecases[index][type] = []
setAllUsecases(allusecases)
setUpdate(Math.random())
}}
style={{marginTop: 0, paddingTop: 8,}}
>
<DeleteIcon />
</IconButton>
: null}
<Tooltip
color="secondary"
title={`See ${expanded ? "less" : "more"} options`}
placement="top"
>
<span>
<IconButton
disabled={canExpand === false}
style={{marginTop: 0, paddingTop: 8,}}
onClick={() => {
setexpanded(!expanded)
}}
>
{expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</IconButton>
</span>
</Tooltip>
</div> </div>
</div> </div>
<div style={{display: "flex", }}>
<Tooltip {expanded ?
color="secondary" looplist.map((subdata, curindex) => {
title={`See documentation for how to make the usecase '${data.text.toLowerCase()}'`} if (appFramework === undefined) {
placement="top" subdata.image = theme.palette.defaultImage
> } else {
<span> const srctype = getType(subdata.type)
<IconButton const srcinfo = appFramework[srctype]
disabled={true}
onClick={() => { if (srcinfo !== undefined && srcinfo.large_image !== undefined && srcinfo.large_image !== "" && (subdata.app_name === undefined || subdata.app_name === "")) {
}} subdata.image = srcinfo.large_image
> subdata.app_id = srcinfo.id
<span> subdata.app_name = srcinfo.name
<a } else {
href={`https://shuffler.io/docs/creators#${data.text.toLowerCase()}`} subdata.image = theme.palette.defaultImage
rel="norefferer" }
target="_blank" }
style={{ textDecoration: "none", }}
> return (
<DescriptionIcon style={{color: "grey", }}/> <div key={curindex} style={{display: "flex", maxHeight: 40, minHeight: 40, borderTop: "1px solid rgba(255,255,255,0.3)", }} onClick={() => {
</a> if (subdata.disabled === true) {
</span> //alert.info("Usecase not available yet.")
</IconButton> return
</span> }
</Tooltip>
{type === "middle" ? if (type === "middle") {
<IconButton allusecases[index][type][subindex] = subdata
onClick={() => { } else {
allusecases[index][type] = [] allusecases[index][type] = subdata
}
setAllUsecases(allusecases) setAllUsecases(allusecases)
setUpdate(Math.random()) setUpdate(Math.random())
}} setexpanded(false)
> }}>
<DeleteIcon /> <img src={subdata.image} alt={subdata.app_name} style={{
</IconButton> height: 24,
: null} width: 24,
<Tooltip borderRadius: 15,
color="secondary" border: "1px solid rgba(255,255,255,0.3)",
title={`See ${expanded ? "less" : "more"} options`} margin: 7,
placement="top" marginLeft: 24,
> cursor: subdata.disabled === true ? "auto": "pointer",
<span> }} onClick={() => {
<IconButton }}/>
disabled={canExpand === false} <Typography variant="body2" color={subdata.disabled === true ? "textSecondary" : "textPrimary"} style={{cursor: "pointer", margin: 7, marginTop: 10,}}>
onClick={() => { {subdata.text}
setexpanded(!expanded) </Typography>
}} </div>
> )
{expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />} })
</IconButton> :
</span> null
</Tooltip> }
</div>
</div> </div>
{expanded ?
looplist.map((subdata, curindex) => {
if (appFramework === undefined) {
subdata.image = theme.palette.defaultImage
} else {
const srctype = getType(subdata.type)
const srcinfo = appFramework[srctype]
if (srcinfo !== undefined && srcinfo.large_image !== undefined && srcinfo.large_image !== "" && (subdata.app_name === undefined || subdata.app_name === "")) {
subdata.image = srcinfo.large_image
subdata.app_id = srcinfo.id
subdata.app_name = srcinfo.name
} else {
subdata.image = theme.palette.defaultImage
}
}
return (
<div key={curindex} style={{display: "flex", maxHeight: 40, minHeight: 40, borderTop: "1px solid rgba(255,255,255,0.3)", }} onClick={() => {
if (subdata.disabled === true) {
//alert.info("Usecase not available yet.")
return
}
if (type === "middle") {
allusecases[index][type][subindex] = subdata
} else {
allusecases[index][type] = subdata
}
setAllUsecases(allusecases)
setUpdate(Math.random())
setexpanded(false)
}}>
<img src={subdata.image} alt={subdata.app_name} style={{
height: 24,
width: 24,
borderRadius: 15,
border: "1px solid rgba(255,255,255,0.3)",
margin: 7,
marginLeft: 24,
cursor: subdata.disabled === true ? "auto": "pointer",
}} onClick={() => {
}}/>
<Typography variant="body2" color={subdata.disabled === true ? "textSecondary" : "textPrimary"} style={{cursor: "pointer", margin: 7, marginTop: 10,}}>
{subdata.text}
</Typography>
</div>
)
})
:
null
}
</div> </div>
) )
} }
//console.log("ALLUSECASES: ", allusecases) //console.log("ALLUSECASES: ", allusecases)
// <b>{defaultSearch}: {allusecases[usecaseIndex].name}</b>
//console.log("UseCase: ", usecases)
return ( return (
<div style={{maxWidth: "100%", minWidth: "100%", }}> <div style={{maxWidth: "100%", minWidth: "100%", border: "1px solid rgba(255,255,255,0)", borderRadius: theme.palette.borderRadius,}}>
{configureWorkflowModal} {configureWorkflowModal}
{authenticationModal} {authenticationModal}
{showTitle !== false && defaultSearch !== undefined ? {showTitle !== false && defaultSearch !== undefined ?
<Typography variant="h6" style={{marginBottom: 10, textAlign: "center",}}> <Typography variant="h6" style={{marginBottom: 10, textAlign: "center",}}>
<b>{defaultSearch}: {allusecases[usecaseIndex].name}</b> <b>{allusecases[usecaseIndex].name}</b>
</Typography> </Typography>
: null} : null}
{usecases.map((data, index) => { {usecases.map((data, index) => {
return ( return (
<div key={index} style={{}}> <div key={index} style={{width: "100%",}}>
<ShowBox data={data.source} type={"source"} index={index} /> <ShowBox data={data.source} type={"source"} index={index} />
{data.middle !== undefined && data.middle !== null && data.middle.length > 0 ? {data.middle !== undefined && data.middle !== null && data.middle.length > 0 ?
@@ -1551,19 +1566,17 @@ const UsecaseSearch = (props) => {
<ShowBox data={data.destination} type={"destination"} index={index} /> <ShowBox data={data.destination} type={"destination"} index={index} />
{showTitle !== false && workflow.id === undefined ? {showTitle !== false && workflow.id === undefined ?
<Button <Button
fullWidth style={{borderRadius: 25, width: 200, marginLeft: 160, marginTop: 35, }}
style={{marginTop: 50,}}
variant={"contained"} variant={"contained"}
color="primary" color="primary"
onClick={() => { onClick={() => {
createWorkflowFromTemplate(data) createWorkflowFromTemplate(data)
}} }}
> >
{isUploading ? {isUploading ?
<CircularProgress style={{height: 25, width: 25, marginLeft: "auto", marginRight: "auto", }} /> <CircularProgress style={{height: 25, width: 25, marginLeft: "auto", marginRight: "auto", }} />
: :
"Try this Workflow Template" "Try it out"
} }
</Button> </Button>
: null} : null}
@@ -1576,9 +1589,13 @@ const UsecaseSearch = (props) => {
target="_blank" target="_blank"
style={{ textDecoration: "none", }} style={{ textDecoration: "none", }}
> >
<Button fullWidth style={{marginTop: 50,}} variant={"contained"} color="secondary" onClick={() => { <Button
}}> style={{borderRadius: 25, marginLeft: 114, marginTop: 35, }}
Check out your new Workflow variant={"outlined"}
color="secondary"
onClick={() => {
}}>
Check out the Workflow
</Button> </Button>
</a> </a>
} }