From b4cb7856510e305454e40baf26d460b373f1331b Mon Sep 17 00:00:00 2001 From: frikky Date: Fri, 22 Jul 2022 16:47:16 +0200 Subject: [PATCH] Fixed more autocompletion pieces for the code editor and added header field parsing --- .../src/components/DetectionFramework.jsx | 9 +- frontend/src/components/Header.js | 4 +- frontend/src/components/ParsedAction.jsx | 197 ++++++++- frontend/src/components/Searchfield.js | 3 +- frontend/src/components/ShuffleCodeEditor.jsx | 401 ++++++++++++++++-- frontend/src/components/WelcomeForm.jsx | 2 +- frontend/src/views/Admin.jsx | 8 +- frontend/src/views/AngularWorkflow.jsx | 2 +- frontend/src/views/Workflows.jsx | 4 - 9 files changed, 587 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/DetectionFramework.jsx b/frontend/src/components/DetectionFramework.jsx index d2a922d4..de86655a 100644 --- a/frontend/src/components/DetectionFramework.jsx +++ b/frontend/src/components/DetectionFramework.jsx @@ -552,13 +552,18 @@ const Framework = (props) => { const nodes = cy.nodes().jsons() for (var key in nodes) { const node = nodes[key] - //console.log("NOD: ", node.data, discoveryWrapper.id) - if (node.data.id === discoveryWrapper.id) { + var newSearchName = discoveryWrapper.id.valueOf() + if (newSearchName === "EMAIL") { + newSearchName = "COMMS" + } + + if (node.data.id === newSearchName) { const tmpnode = cy.getElementById(node.data.id) if (tmpnode !== undefined) { tmpnode.select() } + setDefaultSearch(discoveryWrapper.id) setPaperTitle(discoveryWrapper.id) } } diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index b6f0299f..337580ef 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -522,7 +522,7 @@ const Header = (props) => { {!isLoaded ? null : userdata.chat_disabled === true ? null : -
+
} @@ -628,7 +628,7 @@ const Header = (props) => {
{!isLoaded ? null : userdata.chat_disabled === true ? null : -
+
} diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 1cbe354d..cd283d29 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -1302,6 +1302,8 @@ const ParsedAction = (props) => { if (data.value.length === 0) { if (data.name.toLowerCase() === "headers") { + console.log("Should show headers field instead with + and -!") + data.value = data.example } } @@ -1665,6 +1667,198 @@ const ParsedAction = (props) => { }} /> ); + + // Finds headers from a string to be used for autocompletion + const findHeaders = (inputdata) => { + const splitdata = inputdata.split("\n") + + var foundnewline = false + var allValues = [] + for (var key in splitdata) { + const line = splitdata[key] + if (line === "") { + foundnewline = true + continue + } + + const splitvalue = "" + if (line.includes(":")) { + splitvalue = ":" + } + + if (line.includes("=")) { + splitvalue = "=" + } + + if (splitvalue.length === 0){ + allValues.push({ + key: line, + value: "", + }) + continue + } + + const splitKeys = line.split(splitvalue) + if (splitKeys.length > 1) { + allValues.push({ + key: splitKeys[0].trim(), + value: splitKeys[1].trim(), + }) + } else { + console.log("No keys for ", line) + } + } + + // Just add one + if (foundnewline) { + allValues.push({ + key: "", + value: "", + }) + } + + return allValues + } + + if (data.name.toLowerCase() === "headers") { + //var tmpheaders = findHeaders(data.value) + var tmpheaders = findHeaders(selectedActionParameters[count].value) + datafield = +
+ {tmpheaders.map((inputdata, index) => { + const oldkey = inputdata.key + const oldval = inputdata.value + + return ( + +
+ { + console.log("Change from oldkey to new: ", oldkey, e.target.value) + + // Find the right line to replace! + //const newval = selectedActionParameters[count].value.replace(oldval, e.target.value, 1) + const tmpsplit = selectedActionParameters[count].value.split("\n") + var valsplit = [] + var add_empty = false + for (var key in tmpsplit) { + if (tmpsplit[key] === "") { + add_empty = true + continue + } + + valsplit.push(tmpsplit[key]) + } + + if (add_empty) { + valsplit.push("") + } + console.log("Split: ", valsplit) + + var newarr = [] + for (var key in valsplit) { + const line = valsplit[key] + + if (key == index) { + if (oldkey === "") { + if (line.includes("=") || line.includes(":")) { + newarr.push(e.target.value + line) + } else { + newarr.push(e.target.value + ": " + line) + } + } else { + newarr.push(line.replace(oldkey, e.target.value, 1)) + } + + } else { + newarr.push(line) + } + } + + const newval = newarr.join("\n") + console.log("Fixed: ", newval) + + selectedActionParameters[count].value = newval + selectedAction.parameters[count].value = newval + setSelectedAction(selectedAction) + setSelectedActionParameters(selectedActionParameters) + }} + /> + { + console.log("Change from oldval to new: ", oldval, e.target.value) + + // Find the right line to replace! + //const newval = selectedActionParameters[count].value.replace(oldval, e.target.value, 1) + const tmpsplit = selectedActionParameters[count].value.split("\n") + var valsplit = [] + var add_empty = false + for (var key in tmpsplit) { + if (tmpsplit[key] === "") { + add_empty = true + continue + } + + valsplit.push(tmpsplit[key]) + } + + if (add_empty) { + valsplit.push("") + } + console.log("Split: ", valsplit) + + var newarr = [] + for (var key in valsplit) { + const line = valsplit[key] + + if (key == index) { + if (oldval === "") { + if (line.includes("=") || line.includes(":")) { + newarr.push(line + e.target.value) + } else { + newarr.push(line + ": " + e.target.value) + } + } else { + newarr.push(line.replace(oldval, e.target.value, 1)) + } + + } else { + newarr.push(line) + } + } + + const newval = newarr.join("\n") + console.log("Fixed: ", newval) + + selectedActionParameters[count].value = newval + selectedAction.parameters[count].value = newval + setSelectedAction(selectedAction) + setSelectedActionParameters(selectedActionParameters) + }} + /> +
+ + ) + })} + +
+ } //console.log("FIELD VALUE: ", data.value) //const regexp = new RegExp("\W+\.", "g") @@ -2223,7 +2417,6 @@ const ParsedAction = (props) => { const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}` const hasAutocomplete = data.autocompleted === true - console.log("AUTOCOMPLeTe: ", hasAutocomplete) return (
{hideBodyButton} @@ -2550,8 +2743,8 @@ const ParsedAction = (props) => { onClick={() => {}} > diff --git a/frontend/src/components/Searchfield.js b/frontend/src/components/Searchfield.js index b27afbc4..2e5302e4 100644 --- a/frontend/src/components/Searchfield.js +++ b/frontend/src/components/Searchfield.js @@ -83,7 +83,7 @@ const SearchField = props => { */ return ( -
} + + { + handleMenuClose(); + }} + open={!!menuPosition} + style={{ + color: "white", + marginTop: 2, + maxHeight: 650, + }} + > + {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 handleActionHover = (inside, actionId) => { + }; + + 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); + } else if (innerdata.type === "action") { + handleActionHover(false, innerdata.id); + } + }; + + var parsedPaths = []; + if (typeof innerdata.example === "object") { + parsedPaths = GetParsedPaths(innerdata.example, ""); + } + + const coverColor = "#82ccc3" + //menuPosition.left -= 50 + //menuPosition.top -= 250 + //console.log("POS: ", menuPosition1) + var menuPosition1 = menuPosition + if (menuPosition1 === null) { + menuPosition1 = { + "left": 0, + "top": 0, + } + } else if (menuPosition1.top === null || menuPosition1.top === undefined) { + menuPosition1.top = 0 + } else if (menuPosition1.left === null || menuPosition1.left === undefined) { + menuPosition1.left = 0 + } + + //console.log("POS1: ", menuPosition1) + + return parsedPaths.length > 0 ? ( + + {icon} {innerdata.name} +
+ } + parentMenuOpen={!!menuPosition} + style={{ + color: "white", + minWidth: 250, + maxWidth: 250, + maxHeight: 50, + overflow: "hidden", + }} + onClick={() => { + console.log("CLICKED: ", innerdata); + console.log(innerdata.example) + handleItemClick([innerdata]); + }} + > + + { + //console.log("HOVER: ", pathdata); + }} + onClick={() => { + handleItemClick([innerdata]); + }} + > + + {innerdata.name} + + + {parsedPaths.map((pathdata, index) => { + // FIXME: Should be recursive in here + // + const icon = + pathdata.type === "value" ? ( + + ) : pathdata.type === "list" ? ( + + ) : ( + + ); + // + + const indentation_count = (pathdata.name.match(/\./g) || []).length+1 + const baseIndent =
+ //const boxPadding = pathdata.type === "object" ? "10px 0px 0px 0px" : 0 + const boxPadding = 0 + const namesplit = pathdata.name.split(".") + const newname = namesplit[namesplit.length-1] + return ( + { + //console.log("HOVER: ", pathdata); + }} + onClick={() => { + handleItemClick([innerdata, pathdata]); + }} + > + +
+ {Array(indentation_count).fill().map((subdata, subindex) => { + return ( + baseIndent + ) + })} + {icon} {newname} + {pathdata.type === "list" ? { + e.preventDefault() + e.stopPropagation() + + console.log("INNER: ", innerdata, pathdata) + + // Removing .list from autocomplete + var newname = pathdata.name + if (newname.length > 5) { + newname = newname.slice(0, newname.length-5) + } + + //selectedActionParameters[count].value += `{{ $${innerdata.name}.${newname} | size }}` + //selectedAction.parameters[count].value = selectedActionParameters[count].value; + //setSelectedAction(selectedAction); + //setShowDropdown(false); + setMenuPosition(null); + + // innerdata.name + // pathdata.name + //handleItemClick([innerdata, newpathdata]) + //console.log("CLICK LENGTH!") + }} /> : null} +
+ + + ); + })} + + + ) : ( + handleMouseover()} + onMouseOut={() => { + handleMouseOut(); + }} + onClick={() => { + handleItemClick([innerdata]); + }} + > + +
+ {icon} {innerdata.name} +
+ + + ); + })} + + +
} { onChange={(value) => { setlocalcodedata(value.getValue()) expectedOutput(value.getValue()) - // console.log(allVariable) - // console.log(value.getValue().split('\n')[value.getCursor().line]) - // console.log(value.getCursor()) - // console.log(value) - // console.log(value.getValue().indexOf('$')) - // console.log(value.display.input.prevInput) + if(value.display.input.prevInput.startsWith('$') || value.display.input.prevInput.endsWith('$')){ setEditorPopupOpen(true) - // console.log(findIndex(value.getValue())) - // console.log(findlocation(findIndex(value.getValue()))) - // setCurrentLocation(findlocation(findIndex(value.getValue()))) - // console.log(currentLocation) - // console.log(findVariables(findlocation(findIndex(value.getValue())), value.getValue())) - // setCurrentVariable(findVariables(findlocation(findIndex(value.getValue())), value.getValue())) - // console.log(actionlist) } - // setVariableOccurences(findIndex(value.getValue())) - // setCurrentVariable(findVariables(value.getValue())) - // console.log(currentLocation) - // console.log(currentVariable) + // console.log(findIndex(value.getValue())) // highlight_variables(value) }} diff --git a/frontend/src/components/WelcomeForm.jsx b/frontend/src/components/WelcomeForm.jsx index 63247e20..7e8c4082 100644 --- a/frontend/src/components/WelcomeForm.jsx +++ b/frontend/src/components/WelcomeForm.jsx @@ -425,7 +425,7 @@ const WelcomeForm = (props) => { - diff --git a/frontend/src/views/Admin.jsx b/frontend/src/views/Admin.jsx index 087fdffd..46d37baf 100644 --- a/frontend/src/views/Admin.jsx +++ b/frontend/src/views/Admin.jsx @@ -3765,6 +3765,7 @@ const Admin = (props) => { uploadFiles(files); }; + const filesView = curTab === 3 ? ( { bgColor = "#1f2023"; } + const isDisabledButton = isCloud || file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true + return ( { > { setOpenEditor(true) @@ -4089,8 +4092,7 @@ const Admin = (props) => { > { } for (var key in workflow.errors) { - alert.info(workflow.errors[key]); + //alert.info(workflow.errors[key]); } setWorkflow(workflow); diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index 177fbf18..0f9799e4 100644 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -412,7 +412,6 @@ export const validateJson = (showResult) => { jsonvalid = false } } catch (e) { - console.log("Bug1: ", e) showResult = showResult.split("'").join('"'); try { @@ -420,7 +419,6 @@ export const validateJson = (showResult) => { jsonvalid = false; } } catch (e) { - console.log("Bug2: ", e) jsonvalid = false; } @@ -430,7 +428,6 @@ export const validateJson = (showResult) => { try { result = jsonvalid ? JSON.parse(showResult, {"storeAsString": true}) : showResult; } catch (e) { - console.log("Bug3: ", e) ////console.log("Failed parsing JSON even though its valid: ", e) jsonvalid = false; } @@ -448,7 +445,6 @@ export const validateJson = (showResult) => { result = JSON.parse(newstr) jsonvalid = true } catch (e) { - console.log("Bug4: ", e) //console.log("Failed parsing JSON even though its valid (2): ", e) jsonvalid = false