Fixed more autocompletion pieces for the code editor and added header field parsing

This commit is contained in:
frikky
2022-07-22 16:47:16 +02:00
parent 32a0508a12
commit b4cb785651
9 changed files with 587 additions and 43 deletions
@@ -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)
}
}
+2 -2
View File
@@ -522,7 +522,7 @@ const Header = (props) => {
</List>
{!isLoaded ? null :
userdata.chat_disabled === true ? null :
<div style={{flex: 1, marginTop: 5,}}>
<div style={{flex: 1, }}>
<SearchField serverside={false} userdata={userdata} />
</div>
}
@@ -628,7 +628,7 @@ const Header = (props) => {
</div>
{!isLoaded ? null :
userdata.chat_disabled === true ? null :
<div style={{flex: 1, marginTop: 5,}}>
<div style={{flex: 1, }}>
<SearchField serverside={false} userdata={userdata} />
</div>
}
+195 -2
View File
@@ -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 =
<div>
{tmpheaders.map((inputdata, index) => {
const oldkey = inputdata.key
const oldval = inputdata.value
return (
<span key={index}>
<div style={{display: "flex"}}>
<TextField
placeholder="Key"
style={{flex: 5}}
defaultValue={inputdata.key}
onBlur={(e) => {
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)
}}
/>
<TextField
placeholder="Value"
style={{flex: 6}}
defaultValue={inputdata.value}
onBlur={(e) => {
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)
}}
/>
</div>
</span>
)
})}
<Button variant="outlined" fullWidth onClick={() => {
console.log("Add header")
selectedActionParameters[count].value += "\n"
selectedAction.parameters[count].value += "\n"
setSelectedActionParameters(selectedActionParameters)
setSelectedAction(selectedAction)
setUpdate(Math.random())
}}>
<AddIcon style={{ marginRight: 10 }} /> Add header
</Button>
</div>
}
//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 (
<div key={data.name}>
{hideBodyButton}
@@ -2550,8 +2743,8 @@ const ParsedAction = (props) => {
onClick={() => {}}
>
<a
rel="norefferer"
href="https://shuffler.io/docs/workflows#nodes"
rel="norefferer"
target="_blank"
style={{ textDecoration: "none", color: "#f85a3e" }}
>
+1 -2
View File
@@ -83,7 +83,7 @@ const SearchField = props => {
*/
return (
<form id="search_form" noValidate type="searchbox" action="" role="search" onClick={() => {
<form id="search_form" noValidate type="searchbox" action="" role="search" style={{margin: isCloud ? 10 : 0, }} onClick={() => {
}}>
<TextField
fullWidth
@@ -202,7 +202,6 @@ const SearchField = props => {
const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
const avatar = baseImage
console.log("CLOUD: ", isCloud)
var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
parsedUrl += `?queryID=${hit.__queryID}`
+375 -26
View File
@@ -17,10 +17,19 @@ import Checkbox from '@mui/material/Checkbox';
import { orange } from '@mui/material/colors';
import { isMobile } from "react-device-detect"
import { GetParsedPaths } from "../views/Apps.jsx";
import NestedMenuItem from "material-ui-nested-menu-item";
import {
FullscreenExit as FullscreenExitIcon,
} from "@material-ui/icons";
Extension as ExtensionIcon,
Apps as AppsIcon,
FavoriteBorder as FavoriteBorderIcon,
Schedule as ScheduleIcon,
FormatListNumbered as FormatListNumberedIcon,
SquareFoot as SquareFootIcon,
Circle as CircleIcon,
Add as AddIcon,
} from '@mui/icons-material';
import {
AutoFixHigh as AutoFixHighIcon, CompressOutlined, QrCodeScannerOutlined,
@@ -38,6 +47,7 @@ import 'codemirror/theme/gruvbox-dark.css';
import 'codemirror/theme/duotone-light.css';
import { padding, textAlign } from '@mui/system';
import data from '../frameworkStyle.jsx';
import { useNavigate, Link, useParams } from "react-router-dom";
const liquidFilters = [
{"name": "Size", "value": "size", "example": ""},
@@ -78,10 +88,21 @@ const CodeEditor = (props) => {
const [anchorEl3, setAnchorEl3] = React.useState(null);
const [mainVariables, setMainVariables] = React.useState([]);
const [availableVariables, setAvailableVariables] = React.useState([]);
const [menuPosition, setMenuPosition] = useState(null);
const [showAutocomplete, setShowAutocomplete] = React.useState(false);
const liquidOpen = Boolean(anchorEl);
const mathOpen = Boolean(anchorEl2);
const pythonOpen = Boolean(anchorEl3);
const handleMenuClose = () => {
setShowAutocomplete(false);
setMenuPosition(null);
}
let navigate = useNavigate();
// console.log("is it file editor? - ", isFileEditor);
useEffect(() => {
@@ -323,21 +344,61 @@ const CodeEditor = (props) => {
const found = input.match(/[$]{1}([a-zA-Z0-9_-]+\.?){1}([a-zA-Z0-9#_-]+\.?){0,}/g)
//console.log(found)
// Whelp this is inefficient af. Single loop pls
try{
// When the found array is empty.
for (var i = 0; i < found.length; i++) {
// console.log(found[i]);
found[i] = found[i].toLowerCase()
var valuefound = false
for (var j = 0; j < actionlist.length; j++) {
if(found[i].slice(1,).toLowerCase() === actionlist[j].autocomplete.toLowerCase()){
input = input.replace(found[i], JSON.stringify(actionlist[j].example));
// console.log(input)
// console.log(actionlist[j].example)
valuefound = true
try {
input = input.replace(found[i], JSON.stringify(actionlist[j].example));
} catch (e) {
input = input.replace(found[i], actionlist[j].example)
}
} else {
}
}
if (!valuefound && availableVariables.includes(found[i])) {
var shouldbreak = false
for (var k=0; k < actionlist.length; k++){
var parsedPaths = []
if (typeof actionlist[k].example === "object") {
parsedPaths = GetParsedPaths(actionlist[k].example, "");
}
for (var key in parsedPaths) {
const fullpath = "$"+actionlist[k].autocomplete.toLowerCase()+parsedPaths[key].autocomplete
if (fullpath === found[i]) {
//if (actionlist[k].example === undefined) {
// actionlist[k].example = "TMP"
//}
try {
input = input.replace(found[i], JSON.stringify(actionlist[k].example))
} catch (e) {
input = input.replace(found[i], actionlist[k].example)
}
shouldbreak = true
console.log("New input: ", input)
break
}
}
if (shouldbreak) {
break
}
}
// console.log(actionlist[j].autocomplete);
}
}
} catch (e) {}
} catch (e) {
console.log("Replace error: ", e)
}
const tmpValidation = validateJson(input.valueOf())
//setValidation(true)
@@ -350,6 +411,29 @@ const CodeEditor = (props) => {
}
}
const handleItemClick = (values) => {
if (
values === undefined ||
values === null ||
values.length === 0
) {
return;
}
var toComplete = localcodedata.trim().endsWith("$") ? values[0].autocomplete : "$" + values[0].autocomplete;
toComplete = toComplete.toLowerCase().replaceAll(" ", "_");
for (var key in values) {
if (key == 0 || values[key].autocomplete.length === 0) {
continue;
}
toComplete += values[key].autocomplete;
}
setlocalcodedata(localcodedata+toComplete)
setMenuPosition(null)
}
const handleClick = (item) => {
if (item === undefined || item.value === undefined || item.value === null) {
@@ -430,7 +514,30 @@ const CodeEditor = (props) => {
</DialogTitle>
<IconButton
style={{
marginLeft: isMobile ? "80%" : 400,
marginLeft: isMobile ? "80%" : 350,
height: 50,
width: 50,
}}
onClick={() => {
}}
>
<Tooltip
color="primary"
title={"Test Liquid in the playground"}
placement="top"
>
<a
href="https://pwwang.github.io/liquidpy/playground/"
rel="norefferer"
target="_blank"
>
<ExtensionIcon style={{color: "rgba(255,255,255,0.7)"}}/>
</a>
</Tooltip>
</IconButton>
<IconButton
style={{
height: 50,
width: 50,
}}
@@ -557,7 +664,264 @@ const CodeEditor = (props) => {
)
})}
</Menu>
</div> }
<Button
id="basic-button"
aria-haspopup="true"
aria-controls={!!menuPosition ? 'basic-menu' : undefined}
aria-expanded={!!menuPosition ? 'true' : undefined}
variant="outlined"
style={{
textTransform: "none",
width: 130,
marginLeft: 170,
}}
onClick={(event) => {
setMenuPosition({
top: event.pageY,
left: event.pageX,
})
}}
>
<AddIcon /> Autocomplete
</Button>
<Menu
anchorReference="anchorPosition"
anchorPosition={menuPosition}
onClose={() => {
handleMenuClose();
}}
open={!!menuPosition}
style={{
color: "white",
marginTop: 2,
maxHeight: 650,
}}
>
{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 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 ? (
<NestedMenuItem
key={innerdata.name}
label={
<div style={{ display: "flex", marginLeft: 0, }}>
{icon} {innerdata.name}
</div>
}
parentMenuOpen={!!menuPosition}
style={{
color: "white",
minWidth: 250,
maxWidth: 250,
maxHeight: 50,
overflow: "hidden",
}}
onClick={() => {
console.log("CLICKED: ", innerdata);
console.log(innerdata.example)
handleItemClick([innerdata]);
}}
>
<Paper style={{minHeight: 500, maxHeight: 500, minWidth: 275, maxWidth: 275, position: "fixed", top: menuPosition1.top-200, left: menuPosition1.left-270, padding: "10px 0px 10px 10px", backgroundColor: theme.palette.inputColor, overflow: "hidden", overflowY: "auto", border: "1px solid rgba(255,255,255,0.3)",}}>
<MenuItem
key={innerdata.name}
style={{
backgroundColor: theme.palette.inputColor,
marginLeft: 15,
color: "white",
minWidth: 250,
maxWidth: 250,
padding: 0,
position: "relative",
}}
value={innerdata}
onMouseOver={() => {
//console.log("HOVER: ", pathdata);
}}
onClick={() => {
handleItemClick([innerdata]);
}}
>
<Typography variant="h6" style={{paddingBottom: 5}}>
{innerdata.name}
</Typography>
</MenuItem>
{parsedPaths.map((pathdata, index) => {
// FIXME: Should be recursive in here
//<VpnKeyIcon style={iconStyle} />
const icon =
pathdata.type === "value" ? (
<span style={{marginLeft: 9, }} />
) : pathdata.type === "list" ? (
<FormatListNumberedIcon style={{marginLeft: 9, marginRight: 10, }} />
) : (
<CircleIcon style={{marginLeft: 9, marginRight: 10, color: coverColor}}/>
);
//<ExpandMoreIcon style={iconStyle} />
const indentation_count = (pathdata.name.match(/\./g) || []).length+1
const baseIndent = <div style={{marginLeft: 20, height: 30, width: 1, backgroundColor: coverColor,}} />
//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 (
<MenuItem
key={pathdata.name}
style={{
backgroundColor: theme.palette.inputColor,
color: "white",
minWidth: 250,
maxWidth: 250,
padding: boxPadding,
}}
value={pathdata}
onMouseOver={() => {
//console.log("HOVER: ", pathdata);
}}
onClick={() => {
handleItemClick([innerdata, pathdata]);
}}
>
<Tooltip
color="primary"
title={`Ex. value: ${pathdata.value}`}
placement="left"
>
<div style={{ display: "flex", height: 30, }}>
{Array(indentation_count).fill().map((subdata, subindex) => {
return (
baseIndent
)
})}
{icon} {newname}
{pathdata.type === "list" ? <SquareFootIcon style={{marginleft: 10, }} onClick={(e) => {
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}
</div>
</Tooltip>
</MenuItem>
);
})}
</Paper>
</NestedMenuItem>
) : (
<MenuItem
key={innerdata.name}
style={{
backgroundColor: theme.palette.inputColor,
color: "white",
minWidth: 250,
maxWidth: 250,
marginRight: 0,
}}
value={innerdata}
onMouseOver={() => handleMouseover()}
onMouseOut={() => {
handleMouseOut();
}}
onClick={() => {
handleItemClick([innerdata]);
}}
>
<Tooltip
color="primary"
title={`Value: ${innerdata.value}`}
placement="left"
>
<div style={{ display: "flex" }}>
{icon} {innerdata.name}
</div>
</Tooltip>
</MenuItem>
);
})}
</Menu>
</div> }
<span style={{
border: `2px solid ${theme.palette.inputColor}`,
borderRadius: theme.palette.borderRadius,
@@ -579,26 +943,11 @@ const CodeEditor = (props) => {
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)
}}
+1 -1
View File
@@ -425,7 +425,7 @@ const WelcomeForm = (props) => {
<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<NewReleasesIcon />} onClick={(event) => { onNodeSelect("INTEL") }} >
Intel
</Button>
<Button disabled={finishedApps.includes("COMMS")} variant={defaultSearch === "COMMS" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("COMMS") }} >
<Button disabled={finishedApps.includes("COMMS")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("EMAIL") }} >
Email
</Button>
</div>
+5 -3
View File
@@ -3765,6 +3765,7 @@ const Admin = (props) => {
uploadFiles(files);
};
const filesView =
curTab === 3 ? (
<Dropzone
@@ -3965,6 +3966,8 @@ const Admin = (props) => {
bgColor = "#1f2023";
}
const isDisabledButton = isCloud || file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true
return (
<ListItem
key={index}
@@ -4079,7 +4082,7 @@ const Admin = (props) => {
>
<span>
<IconButton
disabled={isCloud || file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true ? false: true}
disabled={isDisabledButton ? false : true}
style = {{padding: "6px"}}
onClick={() => {
setOpenEditor(true)
@@ -4089,8 +4092,7 @@ const Admin = (props) => {
>
<EditIcon
style={{
color:
file.filesize < 100000 && file.status === ("active") && allowedFileTypes.includes(file.filename.split(".")[1]) === true
color: isDisabledButton === true
? "white"
: "grey",
}}
+1 -1
View File
@@ -1259,7 +1259,7 @@ const AngularWorkflow = (defaultprops) => {
}
for (var key in workflow.errors) {
alert.info(workflow.errors[key]);
//alert.info(workflow.errors[key]);
}
setWorkflow(workflow);
-4
View File
@@ -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