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

#133: Added autocomplete to OpenAPI body

Browse Source
This commit is contained in:
frikky
2020-12-09 11:16:41 +01:00
parent 1232fc0287
commit ddba12bbc8
3 changed files with 195 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app_sdk/app_base.py
+2 -2
View File
@@ -1236,11 +1236,11 @@ class AppBase:
print("Normal parsing (not looping) with data %s" % value) print("Normal parsing (not looping) with data %s" % value)
value = parse_wrapper_start(value) value = parse_wrapper_start(value)
if parameter["id"] = "body_replacement": if parameter["id"] == "body_replacement":
print("Should run body replacement in index %d with %s" % (bodyindex, parameter)) print("Should run body replacement in index %d with %s" % (bodyindex, parameter))
try: try:
print("PREBODY: %s" % params["body"]) print("PREBODY: %s" % params["body"])
params["body"].replace(parameter["name"], parameter["value"]) params["body"] = params["body"].replace(parameter["name"], parameter["value"], -1)
print("POSTBODY: %s" % params["body"]) print("POSTBODY: %s" % params["body"])
except KeyError as e: except KeyError as e:
print("KEYERROR: %s" % e) print("KEYERROR: %s" % e)
backend/app_sdk/build.sh
+1 -1
View File
@@ -1,6 +1,6 @@
#!/bin/bash #!/bin/bash
NAME=shuffle-app_sdk NAME=shuffle-app_sdk
VERSION=0.8.2 VERSION=0.8.3
docker rmi docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION --force docker rmi docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION --force
docker build . -t frikky/shuffle:app_sdk -t frikky/$NAME:$VERSION -t docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION -t ghcr.io/frikky/$NAME:$VERSION docker build . -t frikky/shuffle:app_sdk -t frikky/$NAME:$VERSION -t docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION -t ghcr.io/frikky/$NAME:$VERSION
frontend/src/views/AngularWorkflow.jsx
+192 -148
View File
@@ -978,6 +978,7 @@ const AngularWorkflow = (props) => {
} else { } else {
//alert.info("Can't edit branches from triggers") //alert.info("Can't edit branches from triggers")
console.log("IN HERE!")
} }
setSelectedAction({}) setSelectedAction({})
@@ -2690,7 +2691,37 @@ const AngularWorkflow = (props) => {
} }
}) })
const changeActionParameter = (event, count) => { const changeActionParameter = (event, count, data) => {
if (data.name.startsWith("${") && data.name.endsWith("}")) {
// PARAM FIX - Gonna use the ID field, even though it's a hack
const paramcheck = selectedAction.parameters.find(param => param.name === "body")
if (paramcheck !== undefined) {
if (paramcheck["value_replace"] === undefined) {
paramcheck["value_replace"] = [{
"key": data.name,
"value": event.target.value,
}]
} else {
const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
if (subparamindex === -1) {
paramcheck["value_replace"].push({
"key": data.name,
"value": event.target.value,
})
} else {
paramcheck["value_replace"][subparamindex]["value"] = event.target.value
}
}
//console.log("PARAM: ", paramcheck)
selectedActionParameters[count]["value_replace"] = paramcheck
selectedAction.parameters[count]["value_replace"] = paramcheck
setSelectedAction(selectedAction)
return
}
}
if (event.target.value[event.target.value.length-1] === "$") { if (event.target.value[event.target.value.length-1] === "$") {
if (!showDropdown) { if (!showDropdown) {
setShowAutocomplete(false) setShowAutocomplete(false)
@@ -2737,6 +2768,7 @@ const AngularWorkflow = (props) => {
} }
} }
//console.log("CURSTRING: ", curstring)
if (curstring.length > 0 && actionlist !== null) { if (curstring.length > 0 && actionlist !== null) {
// Search back in the action list // Search back in the action list
curstring = curstring.split(" ").join("_").toLowerCase() curstring = curstring.split(" ").join("_").toLowerCase()
@@ -2911,7 +2943,6 @@ const AngularWorkflow = (props) => {
if (selectedApp.generated && selectedApp.activated && data.name === "body") { if (selectedApp.generated && selectedApp.activated && data.name === "body") {
const regex = /\${(\w+)}/g const regex = /\${(\w+)}/g
const found = placeholder.match(regex) const found = placeholder.match(regex)
console.log("THERE MAY BE THINGS INSIDE THE BODY, NO: ", found)
if (found === null) { if (found === null) {
//setExtraBodyFields([]) //setExtraBodyFields([])
} else { } else {
@@ -2957,6 +2988,8 @@ const AngularWorkflow = (props) => {
if (changed) { if (changed) {
setSelectedActionParameters(selectedActionParameters) setSelectedActionParameters(selectedActionParameters)
} }
return <Divider key={Math.random()} />
} }
} }
@@ -2997,36 +3030,7 @@ const AngularWorkflow = (props) => {
type={placeholder.includes("***") ? "password" : "text"} type={placeholder.includes("***") ? "password" : "text"}
placeholder={placeholder} placeholder={placeholder}
onChange={(event) => { onChange={(event) => {
if (data.name.startsWith("${") && data.name.endsWith("}")) { changeActionParameter(event, count, data)
// PARAM FIX - Gonna use the ID field, even though it's a hack
const paramcheck = selectedAction.parameters.find(param => param.name === "body")
if (paramcheck !== undefined) {
if (paramcheck["value_replace"] === undefined) {
paramcheck["value_replace"] = [{
"key": data.name,
"value": event.target.value,
}]
} else {
const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
if (subparamindex === -1) {
paramcheck["value_replace"].push({
"key": data.name,
"value": event.target.value,
})
} else {
paramcheck["value_replace"][subparamindex]["value"] = event.target.value
}
}
//console.log("PARAM: ", paramcheck)
selectedActionParameters[count]["value_replace"] = paramcheck
selectedAction.parameters[count]["value_replace"] = paramcheck
setSelectedAction(selectedAction)
}
} else {
changeActionParameter(event, count)
}
}} }}
helperText={selectedApp.generated && selectedApp.activated && data.name === "body" ? helperText={selectedApp.generated && selectedApp.activated && data.name === "body" ?
<span style={{color:"white", marginBottom: 5, marginleft: 5,}}> <span style={{color:"white", marginBottom: 5, marginleft: 5,}}>
@@ -3089,7 +3093,7 @@ const AngularWorkflow = (props) => {
type={"text"} type={"text"}
placeholder={"The file ID to get"} placeholder={"The file ID to get"}
onChange={(event) => { onChange={(event) => {
changeActionParameter(event, count) changeActionParameter(event, count, data)
}} }}
onBlur={(event) => { onBlur={(event) => {
}} }}
@@ -3098,7 +3102,7 @@ const AngularWorkflow = (props) => {
//datafield = `SHOW FILES FROM OTHER NODES? Filename: ${selectedActionParameters[count].value}` //datafield = `SHOW FILES FROM OTHER NODES? Filename: ${selectedActionParameters[count].value}`
/* /*
if (selectedActionParameters[count].value != fileId) { if (selectedActionParameters[count].value != fileId) {
changeActionParameter(fileId, count) changeActionParameter(fileId, count, data)
setUpdate(Math.random()) setUpdate(Math.random())
} }
@@ -3112,7 +3116,7 @@ const AngularWorkflow = (props) => {
} }
} }
changeActionParameter(e, count) changeActionParameter(e, count, data)
} }
datafield = datafield =
@@ -3126,7 +3130,7 @@ const AngularWorkflow = (props) => {
fullWidth fullWidth
onChange={(e) => { onChange={(e) => {
console.log("VAL: ", e.target.value) console.log("VAL: ", e.target.value)
changeActionParameter(e, count) changeActionParameter(e, count, data)
setUpdate(Math.random()) setUpdate(Math.random())
}} }}
style={{backgroundColor: surfaceColor, color: "white", height: "50px"}} style={{backgroundColor: surfaceColor, color: "white", height: "50px"}}
@@ -3189,7 +3193,7 @@ const AngularWorkflow = (props) => {
helperText={<div style={{marginLeft: "5px", color:"white", marginBottom: "2px",}}>Example: $.body will get "data" from {'{"body": "data"}'}</div>} helperText={<div style={{marginLeft: "5px", color:"white", marginBottom: "2px",}}>Example: $.body will get "data" from {'{"body": "data"}'}</div>}
placeholder="Action variable ($.)" placeholder="Action variable ($.)"
onChange={(event) => { onChange={(event) => {
changeActionParameter(event, count) changeActionParameter(event, count, data)
}} }}
/> />
</div> </div>
@@ -3270,6 +3274,40 @@ const AngularWorkflow = (props) => {
toComplete += values[key].autocomplete toComplete += values[key].autocomplete
} }
// Handles the fields under OpenAPI body to be parsed.
if (data.name.startsWith("${") && data.name.endsWith("}")) {
// PARAM FIX - Gonna use the ID field, even though it's a hack
const paramcheck = selectedAction.parameters.find(param => param.name === "body")
if (paramcheck !== undefined) {
if (paramcheck["value_replace"] === undefined) {
paramcheck["value_replace"] = [{
"key": data.name,
"value": toComplete,
}]
} else {
const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
if (subparamindex === -1) {
paramcheck["value_replace"].push({
"key": data.name,
"value": toComplete,
})
} else {
paramcheck["value_replace"][subparamindex]["value"] += toComplete
}
}
selectedActionParameters[count]["value_replace"] = paramcheck
selectedAction.parameters[count]["value_replace"] = paramcheck
setSelectedAction(selectedAction)
setUpdate(Math.random())
setShowDropdown(false)
setMenuPosition(null)
return
}
}
selectedActionParameters[count].value += toComplete selectedActionParameters[count].value += toComplete
selectedAction.parameters[count].value = selectedActionParameters[count].value selectedAction.parameters[count].value = selectedActionParameters[count].value
setSelectedAction(selectedAction) setSelectedAction(selectedAction)
@@ -3284,134 +3322,132 @@ const AngularWorkflow = (props) => {
} }
return ( return (
<div > <Menu
<Menu anchorReference="anchorPosition"
anchorReference="anchorPosition" anchorPosition={menuPosition}
anchorPosition={menuPosition} onClose={() => {
onClose={() => { handleMenuClose()
handleMenuClose() }}
}} open={!!menuPosition}
open={!!menuPosition} style={{
style={{ border: `2px solid #f85a3e`,
border: `2px solid #f85a3e`, color: "white",
color: "white", marginTop: 2,
marginTop: 2, }}
}} >
> {actionlist.map(innerdata => {
{actionlist.map(innerdata => { const icon = innerdata.type === "action" ? <AppsIcon style={{marginRight: 10}} /> : innerdata.type === "workflow_variable" || innerdata.type === "execution_variable" ? <FavoriteBorderIcon style={{marginRight: 10}} /> : <ScheduleIcon style={{marginRight: 10}} />
const icon = innerdata.type === "action" ? <AppsIcon style={{marginRight: 10}} /> : innerdata.type === "workflow_variable" || innerdata.type === "execution_variable" ? <FavoriteBorderIcon style={{marginRight: 10}} /> : <ScheduleIcon style={{marginRight: 10}} />
const handleExecArgumentHover = (inside) => { const handleExecArgumentHover = (inside) => {
var exec_text_field = document.getElementById("execution_argument_input_field") var exec_text_field = document.getElementById("execution_argument_input_field")
if (exec_text_field !== null) { if (exec_text_field !== null) {
if (inside) { if (inside) {
exec_text_field.style.border = "2px solid #f85a3e" exec_text_field.style.border = "2px solid #f85a3e"
} else { } else {
exec_text_field.style.border = "" exec_text_field.style.border = ""
}
} }
}
// Also doing arguments // Also doing arguments
if (workflow.triggers !== undefined && workflow.triggers !== null && workflow.triggers.length > 0) { if (workflow.triggers !== undefined && workflow.triggers !== null && workflow.triggers.length > 0) {
for (var key in workflow.triggers) { for (var key in workflow.triggers) {
const item = workflow.triggers[key] const item = workflow.triggers[key]
var node = cy.getElementById(item.id) var node = cy.getElementById(item.id)
if (node.length > 0) { if (node.length > 0) {
if (inside) { if (inside) {
node.addClass('shuffle-hover-highlight') node.addClass('shuffle-hover-highlight')
} else { } else {
node.removeClass('shuffle-hover-highlight') node.removeClass('shuffle-hover-highlight')
}
} }
} }
} }
} }
}
const handleActionHover = (inside, actionId) => { const handleActionHover = (inside, actionId) => {
var node = cy.getElementById(actionId) var node = cy.getElementById(actionId)
if (node.length > 0) { if (node.length > 0) {
if (inside) { if (inside) {
node.addClass('shuffle-hover-highlight') node.addClass('shuffle-hover-highlight')
} else { } else {
node.removeClass('shuffle-hover-highlight') node.removeClass('shuffle-hover-highlight')
}
} }
} }
}
const handleMouseover = () => { const handleMouseover = () => {
if (innerdata.type === "Execution Argument") { if (innerdata.type === "Execution Argument") {
handleExecArgumentHover(true) handleExecArgumentHover(true)
} else if (innerdata.type === "action") {
handleActionHover(true, innerdata.id)
}
}
const handleMouseOut = () => {
if (innerdata.type === "Execution Argument") {
handleExecArgumentHover(false)
} else if (innerdata.type === "action") { } else if (innerdata.type === "action") {
handleActionHover(false, innerdata.id) handleActionHover(true, innerdata.id)
} }
}
const handleMouseOut = () => {
if (innerdata.type === "Execution Argument") {
handleExecArgumentHover(false)
} else if (innerdata.type === "action") {
handleActionHover(false, innerdata.id)
} }
}
var parsedPaths = [] var parsedPaths = []
if (typeof(innerdata.example) === "object") { if (typeof(innerdata.example) === "object") {
parsedPaths = GetParsedPaths(innerdata.example, "") parsedPaths = GetParsedPaths(innerdata.example, "")
} }
return ( return (
parsedPaths.length > 0 ? parsedPaths.length > 0 ?
<NestedMenuItem <NestedMenuItem
key={innerdata.name} key={innerdata.name}
label={ label={
<div style={{display: "flex"}}> <div style={{display: "flex"}}>
{icon} {innerdata.name} {icon} {innerdata.name}
</div> </div>
} }
parentMenuOpen={!!menuPosition} parentMenuOpen={!!menuPosition}
style={{backgroundColor: inputColor, color: "white", minWidth: 250,}} style={{backgroundColor: inputColor, color: "white", minWidth: 250,}}
onClick={() => { onClick={() => {
handleItemClick([innerdata]) handleItemClick([innerdata])
}} }}
> >
{parsedPaths.map((pathdata, index) => { {parsedPaths.map((pathdata, index) => {
// FIXME: Should be recursive in here // FIXME: Should be recursive in here
const icon = pathdata.type === "value" ? <VpnKeyIcon style={iconStyle} /> : pathdata.type === "list" ? <FormatListNumberedIcon style={iconStyle} /> : <ExpandMoreIcon style={iconStyle} /> const icon = pathdata.type === "value" ? <VpnKeyIcon style={iconStyle} /> : pathdata.type === "list" ? <FormatListNumberedIcon style={iconStyle} /> : <ExpandMoreIcon style={iconStyle} />
return ( return (
<MenuItem key={pathdata.name} style={{backgroundColor: inputColor, color: "white", minWidth: 250,}} value={pathdata} onMouseOver={() => {}} <MenuItem key={pathdata.name} style={{backgroundColor: inputColor, color: "white", minWidth: 250,}} value={pathdata} onMouseOver={() => {}}
onClick={() => { onClick={() => {
handleItemClick([innerdata, pathdata]) handleItemClick([innerdata, pathdata])
}} }}
> >
<Tooltip color="primary" title={`Ex. value: ${pathdata.value}`} placement="left"> <Tooltip color="primary" title={`Ex. value: ${pathdata.value}`} placement="left">
<div style={{display: "flex"}}> <div style={{display: "flex"}}>
{icon} {pathdata.name} {icon} {pathdata.name}
</div> </div>
</Tooltip> </Tooltip>
</MenuItem> </MenuItem>
) )
})} })}
</NestedMenuItem> </NestedMenuItem>
: :
<MenuItem key={innerdata.name} style={{backgroundColor: inputColor, color: "white"}} value={innerdata} onMouseOver={() => handleMouseover()} onMouseOut={() => {handleMouseOut()}} <MenuItem key={innerdata.name} style={{backgroundColor: inputColor, color: "white"}} value={innerdata} onMouseOver={() => handleMouseover()} onMouseOut={() => {handleMouseOut()}}
onClick={() => { onClick={() => {
handleItemClick([innerdata]) handleItemClick([innerdata])
}} }}
> >
<Tooltip color="primary" title={`Value: ${innerdata.value}`} placement="left"> <Tooltip color="primary" title={`Value: ${innerdata.value}`} placement="left">
<div style={{display: "flex"}}> <div style={{display: "flex"}}>
{icon} {innerdata.name} {icon} {innerdata.name}
</div> </div>
</Tooltip> </Tooltip>
</MenuItem> </MenuItem>
) )
})} })}
</Menu> </Menu>
</div>
) )
} }
@@ -3419,6 +3455,14 @@ const AngularWorkflow = (props) => {
if (!data.required) { if (!data.required) {
itemColor = "#ffeb3b" itemColor = "#ffeb3b"
} }
var tmpitem = data.name.valueOf()
if (data.name.startsWith("${") && data.name.endsWith("}")) {
tmpitem = tmpitem.slice(2, data.name.length-1)
}
tmpitem = tmpitem.charAt(0).toUpperCase()+tmpitem.substring(1)
return ( return (
<div key={data.name}> <div key={data.name}>
<div style={{marginTop: 20, marginBottom: 7, display: "flex"}}> <div style={{marginTop: 20, marginBottom: 7, display: "flex"}}>
@@ -3434,7 +3478,7 @@ const AngularWorkflow = (props) => {
<div style={{width: 17, height: 17, borderRadius: 17 / 2, backgroundColor: itemColor, marginRight: 10}}/> <div style={{width: 17, height: 17, borderRadius: 17 / 2, backgroundColor: itemColor, marginRight: 10}}/>
} }
<div style={{flex: "10"}}> <div style={{flex: "10"}}>
<b>{data.name.charAt(0).toUpperCase()+data.name.substring(1)} </b> <b>{tmpitem} </b>
</div> </div>
{selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null : {selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null :