From ddba12bbc8a9d9e44d9979810a13739764c42305 Mon Sep 17 00:00:00 2001 From: frikky Date: Wed, 9 Dec 2020 11:16:41 +0100 Subject: [PATCH] #133: Added autocomplete to OpenAPI body --- backend/app_sdk/app_base.py | 4 +- backend/app_sdk/build.sh | 2 +- frontend/src/views/AngularWorkflow.jsx | 340 ++++++++++++++----------- 3 files changed, 195 insertions(+), 151 deletions(-) diff --git a/backend/app_sdk/app_base.py b/backend/app_sdk/app_base.py index 72408a7a..2e6f2867 100644 --- a/backend/app_sdk/app_base.py +++ b/backend/app_sdk/app_base.py @@ -1236,11 +1236,11 @@ class AppBase: print("Normal parsing (not looping) with data %s" % 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)) try: 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"]) except KeyError as e: print("KEYERROR: %s" % e) diff --git a/backend/app_sdk/build.sh b/backend/app_sdk/build.sh index 4532a20e..2260c6dc 100644 --- a/backend/app_sdk/build.sh +++ b/backend/app_sdk/build.sh @@ -1,6 +1,6 @@ #!/bin/bash NAME=shuffle-app_sdk -VERSION=0.8.2 +VERSION=0.8.3 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 diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index b8afebd0..0c0ba474 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -978,6 +978,7 @@ const AngularWorkflow = (props) => { } else { //alert.info("Can't edit branches from triggers") + console.log("IN HERE!") } 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 (!showDropdown) { setShowAutocomplete(false) @@ -2737,6 +2768,7 @@ const AngularWorkflow = (props) => { } } + //console.log("CURSTRING: ", curstring) if (curstring.length > 0 && actionlist !== null) { // Search back in the action list curstring = curstring.split(" ").join("_").toLowerCase() @@ -2911,7 +2943,6 @@ const AngularWorkflow = (props) => { if (selectedApp.generated && selectedApp.activated && data.name === "body") { const regex = /\${(\w+)}/g const found = placeholder.match(regex) - console.log("THERE MAY BE THINGS INSIDE THE BODY, NO: ", found) if (found === null) { //setExtraBodyFields([]) } else { @@ -2957,6 +2988,8 @@ const AngularWorkflow = (props) => { if (changed) { setSelectedActionParameters(selectedActionParameters) } + + return } } @@ -2997,36 +3030,7 @@ const AngularWorkflow = (props) => { type={placeholder.includes("***") ? "password" : "text"} placeholder={placeholder} onChange={(event) => { - 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) - } - } else { - changeActionParameter(event, count) - } + changeActionParameter(event, count, data) }} helperText={selectedApp.generated && selectedApp.activated && data.name === "body" ? @@ -3089,7 +3093,7 @@ const AngularWorkflow = (props) => { type={"text"} placeholder={"The file ID to get"} onChange={(event) => { - changeActionParameter(event, count) + changeActionParameter(event, count, data) }} onBlur={(event) => { }} @@ -3098,7 +3102,7 @@ const AngularWorkflow = (props) => { //datafield = `SHOW FILES FROM OTHER NODES? Filename: ${selectedActionParameters[count].value}` /* if (selectedActionParameters[count].value != fileId) { - changeActionParameter(fileId, count) + changeActionParameter(fileId, count, data) setUpdate(Math.random()) } @@ -3112,7 +3116,7 @@ const AngularWorkflow = (props) => { } } - changeActionParameter(e, count) + changeActionParameter(e, count, data) } datafield = @@ -3126,7 +3130,7 @@ const AngularWorkflow = (props) => { fullWidth onChange={(e) => { console.log("VAL: ", e.target.value) - changeActionParameter(e, count) + changeActionParameter(e, count, data) setUpdate(Math.random()) }} style={{backgroundColor: surfaceColor, color: "white", height: "50px"}} @@ -3189,7 +3193,7 @@ const AngularWorkflow = (props) => { helperText={
Example: $.body will get "data" from {'{"body": "data"}'}
} placeholder="Action variable ($.)" onChange={(event) => { - changeActionParameter(event, count) + changeActionParameter(event, count, data) }} /> @@ -3270,6 +3274,40 @@ const AngularWorkflow = (props) => { 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 selectedAction.parameters[count].value = selectedActionParameters[count].value setSelectedAction(selectedAction) @@ -3284,134 +3322,132 @@ const AngularWorkflow = (props) => { } return ( -
- { - handleMenuClose() - }} - open={!!menuPosition} - style={{ - border: `2px solid #f85a3e`, - color: "white", - marginTop: 2, - }} - > - {actionlist.map(innerdata => { - const icon = innerdata.type === "action" ? : innerdata.type === "workflow_variable" || innerdata.type === "execution_variable" ? : + { + handleMenuClose() + }} + open={!!menuPosition} + style={{ + border: `2px solid #f85a3e`, + color: "white", + marginTop: 2, + }} + > + {actionlist.map(innerdata => { + const icon = innerdata.type === "action" ? : innerdata.type === "workflow_variable" || innerdata.type === "execution_variable" ? : - const handleExecArgumentHover = (inside) => { - var exec_text_field = document.getElementById("execution_argument_input_field") - if (exec_text_field !== null) { - if (inside) { - exec_text_field.style.border = "2px solid #f85a3e" - } else { - exec_text_field.style.border = "" - } + const handleExecArgumentHover = (inside) => { + var exec_text_field = document.getElementById("execution_argument_input_field") + if (exec_text_field !== null) { + if (inside) { + exec_text_field.style.border = "2px solid #f85a3e" + } else { + exec_text_field.style.border = "" } + } - // Also doing arguments - if (workflow.triggers !== undefined && workflow.triggers !== null && workflow.triggers.length > 0) { - for (var key in workflow.triggers) { - const item = workflow.triggers[key] + // Also doing arguments + if (workflow.triggers !== undefined && workflow.triggers !== null && workflow.triggers.length > 0) { + for (var key in workflow.triggers) { + const item = workflow.triggers[key] - var node = cy.getElementById(item.id) - if (node.length > 0) { - if (inside) { - node.addClass('shuffle-hover-highlight') - } else { - node.removeClass('shuffle-hover-highlight') - } + var node = cy.getElementById(item.id) + if (node.length > 0) { + if (inside) { + node.addClass('shuffle-hover-highlight') + } else { + node.removeClass('shuffle-hover-highlight') } - } + } } + } - const handleActionHover = (inside, actionId) => { - var node = cy.getElementById(actionId) - if (node.length > 0) { - if (inside) { - node.addClass('shuffle-hover-highlight') - } else { - node.removeClass('shuffle-hover-highlight') - } + const handleActionHover = (inside, actionId) => { + var node = cy.getElementById(actionId) + if (node.length > 0) { + if (inside) { + node.addClass('shuffle-hover-highlight') + } else { + node.removeClass('shuffle-hover-highlight') } } + } - const handleMouseover = () => { - if (innerdata.type === "Execution Argument") { - handleExecArgumentHover(true) - } else if (innerdata.type === "action") { - handleActionHover(true, innerdata.id) - } - } - - const handleMouseOut = () => { - if (innerdata.type === "Execution Argument") { - handleExecArgumentHover(false) + const handleMouseover = () => { + if (innerdata.type === "Execution Argument") { + handleExecArgumentHover(true) } 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 = [] - if (typeof(innerdata.example) === "object") { - parsedPaths = GetParsedPaths(innerdata.example, "") - } + var parsedPaths = [] + if (typeof(innerdata.example) === "object") { + parsedPaths = GetParsedPaths(innerdata.example, "") + } - return ( - parsedPaths.length > 0 ? - - {icon} {innerdata.name} -
- } - parentMenuOpen={!!menuPosition} - style={{backgroundColor: inputColor, color: "white", minWidth: 250,}} - onClick={() => { - handleItemClick([innerdata]) - }} - > - {parsedPaths.map((pathdata, index) => { - // FIXME: Should be recursive in here - const icon = pathdata.type === "value" ? : pathdata.type === "list" ? : - return ( - {}} - onClick={() => { - handleItemClick([innerdata, pathdata]) - }} - > - -
- {icon} {pathdata.name} -
- - - ) + return ( + parsedPaths.length > 0 ? + + {icon} {innerdata.name} + + } + parentMenuOpen={!!menuPosition} + style={{backgroundColor: inputColor, color: "white", minWidth: 250,}} + onClick={() => { + handleItemClick([innerdata]) + }} + > + {parsedPaths.map((pathdata, index) => { + // FIXME: Should be recursive in here + const icon = pathdata.type === "value" ? : pathdata.type === "list" ? : + return ( + {}} + onClick={() => { + handleItemClick([innerdata, pathdata]) + }} + > + +
+ {icon} {pathdata.name} +
+ + + ) - })} - - : - handleMouseover()} onMouseOut={() => {handleMouseOut()}} - onClick={() => { - handleItemClick([innerdata]) - }} - > - -
- {icon} {innerdata.name} -
- - - - ) - })} - - + })} + + : + handleMouseover()} onMouseOut={() => {handleMouseOut()}} + onClick={() => { + handleItemClick([innerdata]) + }} + > + +
+ {icon} {innerdata.name} +
+ + + + ) + })} + ) } @@ -3419,6 +3455,14 @@ const AngularWorkflow = (props) => { if (!data.required) { 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 (
@@ -3434,7 +3478,7 @@ const AngularWorkflow = (props) => {
}
- {data.name.charAt(0).toUpperCase()+data.name.substring(1)} + {tmpitem}
{selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null :