Added magic parser configuration to frontend with basic app sdk parsing
This commit is contained in:
@@ -164,7 +164,10 @@ const ConfigureWorkflow = (props) => {
|
||||
newaction.must_authenticate = true;
|
||||
newaction.action_ids.push(action.id);
|
||||
}
|
||||
}
|
||||
} else if (action.authentication_id !== "" && app.authentication.required === true) {
|
||||
console.log("Should verify authentication ID ", action.authentication_id)
|
||||
|
||||
}
|
||||
|
||||
newaction.app = app;
|
||||
}
|
||||
|
||||
@@ -80,7 +80,10 @@ import {
|
||||
LockOpen as LockOpenIcon,
|
||||
ExpandMore as ExpandMoreIcon,
|
||||
VpnKey as VpnKeyIcon,
|
||||
} from "@material-ui/icons";
|
||||
AutoFixHigh as AutoFixHighIcon,
|
||||
} from '@mui/icons-material';
|
||||
//} from "@material-ui/icons";
|
||||
|
||||
import Autocomplete from "@material-ui/lab/Autocomplete";
|
||||
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
@@ -2169,7 +2172,7 @@ const ParsedAction = (props) => {
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
height: 30,
|
||||
paddingLeft: 25,
|
||||
marginLeft: 15,
|
||||
paddingRight: 0,
|
||||
}}
|
||||
onClick={() => {
|
||||
@@ -2189,7 +2192,7 @@ const ParsedAction = (props) => {
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
height: 30,
|
||||
paddingLeft: 25,
|
||||
marginLeft: 15,
|
||||
paddingRight: 0,
|
||||
}}
|
||||
onClick={() => {}}
|
||||
@@ -2209,6 +2212,40 @@ const ParsedAction = (props) => {
|
||||
</Tooltip>
|
||||
</a>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
style={{
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
height: 30,
|
||||
marginLeft: 15,
|
||||
paddingRight: 0,
|
||||
}}
|
||||
onClick={() => {
|
||||
//setAuthenticationModalOpen(true);
|
||||
console.log("Should enable/disable magic!")
|
||||
console.log("Action: ", selectedAction)
|
||||
if (selectedAction.run_magic_output === undefined) {
|
||||
selectedAction.run_magic_output = true
|
||||
} else {
|
||||
if (selectedAction.run_magic_output === true) {
|
||||
selectedAction.run_magic_output = false
|
||||
} else {
|
||||
selectedAction.run_magic_output = true
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedAction(selectedAction)
|
||||
setUpdate(Math.random());
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
color="primary"
|
||||
title={selectedAction.run_magic_output === undefined || selectedAction.run_magic_output === null || selectedAction.run_magic_output === false ? "Click to enable magic parsing" : "Click to disable magic parsing"}
|
||||
placement="top"
|
||||
>
|
||||
<AutoFixHighIcon style={{ color: selectedAction.run_magic_output === undefined || selectedAction.run_magic_output === null || selectedAction.run_magic_output === false ? "white" : "#f86a3e"}} />
|
||||
</Tooltip>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
|
||||
@@ -1754,13 +1754,17 @@ const AngularWorkflow = (props) => {
|
||||
var idnumber = -1;
|
||||
if (curElement.id.startsWith("rightside_field_")) {
|
||||
console.log("FOUND FIELD WITH NUMBER: ", curElement.id);
|
||||
|
||||
|
||||
// Find exact position to put the text
|
||||
|
||||
const idsplit = curElement.id.split("_");
|
||||
console.log(idsplit);
|
||||
if (idsplit.length === 3 && !isNaN(idsplit[2])) {
|
||||
console.log("ADDING TO PARAM ", idsplit[2]);
|
||||
console.log("PARAM: ", selectedAction);
|
||||
|
||||
selectedAction.parameters[idsplit[2]].value = newValue;
|
||||
selectedAction.parameters[idsplit[2]].value += newValue;
|
||||
paramname = selectedAction.parameters[idsplit[2]].name;
|
||||
idnumber = idsplit[2];
|
||||
}
|
||||
@@ -1849,7 +1853,7 @@ const AngularWorkflow = (props) => {
|
||||
const onNodeDrag = (event, selectedAction) => {
|
||||
const nodedata = event.target.data();
|
||||
if (nodedata.finished === false) {
|
||||
return;
|
||||
console.log("NOT FINISHED - ADD EXAMPLE BRANCHES TO CLOSEST!!")
|
||||
}
|
||||
|
||||
if (nodedata.app_name !== undefined) {
|
||||
@@ -1859,6 +1863,15 @@ const AngularWorkflow = (props) => {
|
||||
if (currentNode.data.attachedTo === nodedata.id) {
|
||||
cy.getElementById(currentNode.data.id).remove();
|
||||
}
|
||||
|
||||
// Calculate location
|
||||
//currentNode.position.x >
|
||||
//if (nodedata.position.x > 0 && nodedata.position.y > 0) {
|
||||
// console.log("Positive both")
|
||||
//}
|
||||
|
||||
//console.log(currentNode.position)
|
||||
//console.log(nodedata.position)
|
||||
}
|
||||
} else {
|
||||
//console.log("No appid? ", nodedata)
|
||||
@@ -2389,6 +2402,9 @@ const AngularWorkflow = (props) => {
|
||||
return "";
|
||||
}
|
||||
|
||||
console.log("NOT REPLACING ON PURPOSE!!")
|
||||
return ""
|
||||
|
||||
// Basically just a stupid if-else :)
|
||||
const synonyms = {
|
||||
id: [
|
||||
@@ -2491,6 +2507,7 @@ const AngularWorkflow = (props) => {
|
||||
|
||||
// Takes an action as input, then runs through and updates the relevant fields
|
||||
// based on previous actions'
|
||||
// Uses lots of synonyms
|
||||
const RunAutocompleter = (dstdata) => {
|
||||
// **PS: The right action should already be set here**
|
||||
// 1. Check execution argument
|
||||
@@ -2617,10 +2634,13 @@ const AngularWorkflow = (props) => {
|
||||
(data) => data.id === edge.source
|
||||
);
|
||||
if (targetnode === -1) {
|
||||
alert.error("Can't make arrow to starting node");
|
||||
event.target.remove();
|
||||
found = true;
|
||||
break;
|
||||
if (targetnode.type !== "TRIGGER") {
|
||||
alert.error("Can't make arrow to starting node");
|
||||
event.target.remove();
|
||||
break;
|
||||
}
|
||||
|
||||
found = true;
|
||||
}
|
||||
} else if (edge.source === workflow.branches[key].source_id) {
|
||||
// FIXME: Verify multi-target for triggers
|
||||
@@ -2953,16 +2973,16 @@ const AngularWorkflow = (props) => {
|
||||
console.log("DELETE");
|
||||
break;
|
||||
case 38:
|
||||
console.log("UP");
|
||||
//console.log("UP");
|
||||
break;
|
||||
case 37:
|
||||
console.log("LEFT");
|
||||
//console.log("LEFT");
|
||||
break;
|
||||
case 40:
|
||||
console.log("DOWN");
|
||||
//console.log("DOWN");
|
||||
break;
|
||||
case 39:
|
||||
console.log("RIGHT");
|
||||
//console.log("RIGHT");
|
||||
break;
|
||||
case 90:
|
||||
if (event.ctrlKey) {
|
||||
@@ -3169,7 +3189,12 @@ const AngularWorkflow = (props) => {
|
||||
}
|
||||
}
|
||||
|
||||
setEnvironments(responseJson);
|
||||
// FIXME: Don't allow multiple in cloud yet. Cloud -> Onprem isn't stable.
|
||||
if (isCloud) {
|
||||
setEnvironments({ name: "Cloud", type: "cloud" });
|
||||
} else {
|
||||
setEnvironments(responseJson);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert.error(error.toString());
|
||||
@@ -3307,7 +3332,7 @@ const AngularWorkflow = (props) => {
|
||||
document.title = "Workflow - " + workflow.name;
|
||||
registerKeys();
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
const animationDuration = 150;
|
||||
const onNodeHoverOut = (event) => {
|
||||
@@ -3480,11 +3505,9 @@ const AngularWorkflow = (props) => {
|
||||
|
||||
const onNodeHover = (event) => {
|
||||
const nodedata = event.target.data();
|
||||
/*
|
||||
if (nodedata.finished === false) {
|
||||
return;
|
||||
}
|
||||
*/
|
||||
|
||||
//var parentNode = cy.$("#" + event.target.data("id"));
|
||||
//if (parentNode.data("isButton") || parentNode.data("buttonId")) return;
|
||||
@@ -4794,6 +4817,7 @@ const AngularWorkflow = (props) => {
|
||||
parameters: parameters,
|
||||
isStartNode: false,
|
||||
large_image: app.large_image,
|
||||
run_magic_output: true,
|
||||
authentication: [],
|
||||
execution_variable: undefined,
|
||||
example: example,
|
||||
@@ -6701,6 +6725,9 @@ const AngularWorkflow = (props) => {
|
||||
</div>
|
||||
{outlookButton}
|
||||
{gmailButton}
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
If you have trouble using the triggers, please <a href="https://shuffler.io/contact" rel="noopener noreferrer" target="_blank">contact us</a> to get access
|
||||
</Typography>
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -10075,7 +10102,10 @@ const AngularWorkflow = (props) => {
|
||||
}
|
||||
|
||||
console.log("COPY: ", copy);
|
||||
var newitem = JSON.parse(base);
|
||||
|
||||
//var newitem = JSON.parse(base);
|
||||
var newitem = validateJson(base).result
|
||||
|
||||
to_be_copied = "$" + base_node_name.toLowerCase().replaceAll(" ", "_");
|
||||
for (var key in copy.namespace) {
|
||||
if (copy.namespace[key].includes("Results for")) {
|
||||
@@ -10292,7 +10322,7 @@ const AngularWorkflow = (props) => {
|
||||
{workflowExecutions.length > 0 ? (
|
||||
<div>
|
||||
{workflowExecutions.map((data, index) => {
|
||||
executionDelay += 75
|
||||
executionDelay += 50
|
||||
|
||||
const statusColor =
|
||||
data.status === "FINISHED"
|
||||
@@ -10441,7 +10471,7 @@ const AngularWorkflow = (props) => {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: 25, maxWidth: 365, overflowX: "hidden" }}>
|
||||
<div style={{ padding: "25px 15px 25px 15px", maxWidth: 365, overflowX: "hidden" }}>
|
||||
<Breadcrumbs
|
||||
aria-label="breadcrumb"
|
||||
separator="›"
|
||||
@@ -10466,13 +10496,13 @@ const AngularWorkflow = (props) => {
|
||||
onClick={() => {}}
|
||||
>
|
||||
<ArrowBackIcon style={{ color: "rgba(255,255,255,0.5)" }} />
|
||||
</IconButton>
|
||||
<h2
|
||||
style={{ color: "rgba(255,255,255,0.5)", cursor: "pointer" }}
|
||||
onClick={() => {}}
|
||||
>
|
||||
See other Executions
|
||||
</h2>
|
||||
</IconButton>
|
||||
<h2
|
||||
style={{ color: "rgba(255,255,255,0.5)", cursor: "pointer" }}
|
||||
onClick={() => {}}
|
||||
>
|
||||
See other Executions
|
||||
</h2>
|
||||
</span>
|
||||
</Breadcrumbs>
|
||||
<Divider
|
||||
@@ -10482,7 +10512,7 @@ const AngularWorkflow = (props) => {
|
||||
marginBottom: 10,
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", marginLeft: 10, }}>
|
||||
<h2>Execution info</h2>
|
||||
<Tooltip
|
||||
color="primary"
|
||||
@@ -10531,7 +10561,7 @@ const AngularWorkflow = (props) => {
|
||||
</div>
|
||||
{executionData.status !== undefined &&
|
||||
executionData.status.length > 0 ? (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", marginLeft: 10, }}>
|
||||
<Typography variant="body1">
|
||||
<b>Status </b>
|
||||
</Typography>
|
||||
@@ -10544,7 +10574,7 @@ const AngularWorkflow = (props) => {
|
||||
executionData.execution_source !== null &&
|
||||
executionData.execution_source.length > 0 &&
|
||||
executionData.execution_source !== "default" ? (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", marginLeft: 10, }}>
|
||||
<Typography variant="body1">
|
||||
<b>Source </b>
|
||||
</Typography>
|
||||
@@ -10581,7 +10611,7 @@ const AngularWorkflow = (props) => {
|
||||
</div>
|
||||
) : null}
|
||||
{executionData.started_at !== undefined ? (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", marginLeft: 10, }}>
|
||||
<Typography variant="body1">
|
||||
<b>Started </b>
|
||||
</Typography>
|
||||
@@ -10593,7 +10623,7 @@ const AngularWorkflow = (props) => {
|
||||
{executionData.completed_at !== undefined &&
|
||||
executionData.completed_at !== null &&
|
||||
executionData.completed_at > 0 ? (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", marginLeft: 10, }}>
|
||||
<Typography variant="body1" onClick={() => {
|
||||
console.log(executionData)
|
||||
}}>
|
||||
@@ -10809,18 +10839,27 @@ const AngularWorkflow = (props) => {
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginBottom: 40,
|
||||
marginBottom: 20,
|
||||
border:
|
||||
data.action.sub_action === true
|
||||
? "1px solid rgba(255,255,255,0.3)"
|
||||
: null,
|
||||
? "1px solid rgba(255,255,255,0.3)"
|
||||
: "1px solid rgba(255,255,255, 0.3)",
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
padding: "15px 10px 10px 10px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
onMouseOver={() => {
|
||||
var currentnode = cy.getElementById(data.action.id);
|
||||
if (currentnode.length !== 0) {
|
||||
currentnode.addClass("shuffle-hover-highlight");
|
||||
}
|
||||
|
||||
// Add a hover highlight
|
||||
|
||||
//var copyText = document.getElementById(
|
||||
// "copy_element_shuffle"
|
||||
//)
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
var currentnode = cy.getElementById(data.action.id);
|
||||
|
||||
@@ -4676,12 +4676,15 @@ const AppCreator = (props) => {
|
||||
for (var key in invalid) {
|
||||
if (e.target.value.includes(invalid[key])) {
|
||||
alert.error("Can't use " + invalid[key] + " in name");
|
||||
setName(e.target.value.replaceAll(".", "").replaceAll("#", "").replaceAll(":", "").replaceAll(",", ""))
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (e.target.value.length > 29) {
|
||||
alert.error("Choose a shorter name (max 29).");
|
||||
setName(e.target.value.slice(0,28))
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -398,12 +398,31 @@ export const validateJson = (showResult) => {
|
||||
|
||||
var result = showResult;
|
||||
try {
|
||||
const result = jsonvalid ? JSON.parse(showResult) : showResult;
|
||||
result = jsonvalid ? JSON.parse(showResult) : showResult;
|
||||
} catch (e) {
|
||||
//console.log("Failed parsing JSON even though its valid: ", e)
|
||||
jsonvalid = false;
|
||||
}
|
||||
|
||||
if (jsonvalid === false) {
|
||||
|
||||
if (typeof showResult === 'string') {
|
||||
showResult = showResult.trim()
|
||||
}
|
||||
|
||||
try {
|
||||
var newstr = showResult.replaceAll("'", '"')
|
||||
|
||||
console.log("Try replacements and trimming with new value: ", newstr)
|
||||
result = JSON.parse(newstr)
|
||||
jsonvalid = true
|
||||
} catch (e) {
|
||||
|
||||
console.log("Failed parsing JSON even though its valid (2): ", e)
|
||||
jsonvalid = false
|
||||
}
|
||||
}
|
||||
|
||||
//console.log("VALID: ", jsonvalid, result)
|
||||
return {
|
||||
valid: jsonvalid,
|
||||
@@ -458,6 +477,8 @@ const Workflows = (props) => {
|
||||
const [submitLoading, setSubmitLoading] = React.useState(false);
|
||||
const [actionImageList, setActionImageList] = React.useState([]);
|
||||
|
||||
const [firstLoad, setFirstLoad] = React.useState(true);
|
||||
|
||||
const isCloud =
|
||||
window.location.host === "localhost:3002" ||
|
||||
window.location.host === "shuffler.io";
|
||||
@@ -839,6 +860,11 @@ const Workflows = (props) => {
|
||||
|
||||
setFilteredWorkflows(responseJson);
|
||||
setWorkflowDone(true);
|
||||
|
||||
// Ensures the zooming happens only once per load
|
||||
setTimeout(() => {
|
||||
setFirstLoad(false)
|
||||
}, 100)
|
||||
} else {
|
||||
if (isLoggedIn) {
|
||||
alert.error("An error occurred while loading workflows");
|
||||
@@ -1764,6 +1790,7 @@ const Workflows = (props) => {
|
||||
if (file.type !== "application/json") {
|
||||
if (file.type !== undefined) {
|
||||
alert.error("File has to contain valid json");
|
||||
setImportLoading(false);
|
||||
}
|
||||
|
||||
continue;
|
||||
@@ -2581,7 +2608,11 @@ const Workflows = (props) => {
|
||||
data.large_image = theme.palette.defaultImage;
|
||||
}
|
||||
|
||||
appDelay += 75
|
||||
if (firstLoad) {
|
||||
appDelay += 75
|
||||
} else {
|
||||
appDelay = 0
|
||||
}
|
||||
|
||||
return (
|
||||
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
|
||||
@@ -2650,7 +2681,11 @@ const Workflows = (props) => {
|
||||
<NewWorkflowPaper />
|
||||
</Zoom>
|
||||
{filteredWorkflows.map((data, index) => {
|
||||
workflowDelay += 75
|
||||
if (firstLoad) {
|
||||
workflowDelay += 75
|
||||
} else {
|
||||
workflowDelay = 0
|
||||
}
|
||||
|
||||
return (
|
||||
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||
|
||||
Reference in New Issue
Block a user