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

Fixed minor rendering issues with the workflow action re-rendering update

Browse Source
This commit is contained in:
Frikky
2024-06-20 13:09:56 +02:00
parent 77a2fba7ec
commit 298f7c402e
2 changed files with 214 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ParsedAction.jsx
+210 -226
View File
@@ -175,8 +175,8 @@ const ParsedAction = (props) => {
} = props; } = props;
const classes = useStyles(); const classes = useStyles();
// const [hideBody, setHideBody] = React.useState(true); const [hideBody, setHideBody] = React.useState(true)
// const [activateHidingBodyButton, setActivateHidingBodyButton] = React.useState(false); const [activateHidingBodyButton, setActivateHidingBodyButton] = React.useState(false)
const [appActionName, setAppActionName] = React.useState(selectedAction.label); const [appActionName, setAppActionName] = React.useState(selectedAction.label);
const [delay, setDelay] = React.useState(selectedAction?.execution_delay || 0); const [delay, setDelay] = React.useState(selectedAction?.execution_delay || 0);
@@ -195,6 +195,7 @@ const ParsedAction = (props) => {
); );
const [actionlist, setActionlist] = React.useState([]); const [actionlist, setActionlist] = React.useState([]);
const [jsonList, setJsonList] = React.useState([]); const [jsonList, setJsonList] = React.useState([]);
const [showDropdown, setShowDropdown] = React.useState(false); const [showDropdown, setShowDropdown] = React.useState(false);
const [showDropdownNumber, setShowDropdownNumber] = React.useState(0); const [showDropdownNumber, setShowDropdownNumber] = React.useState(0);
const [showAutocomplete, setShowAutocomplete] = React.useState(false); const [showAutocomplete, setShowAutocomplete] = React.useState(false);
@@ -206,6 +207,7 @@ const ParsedAction = (props) => {
setLastSaved(false) setLastSaved(false)
} }
}, [expansionModalOpen]) }, [expansionModalOpen])
useEffect(() => { useEffect(() => {
setParamValues(selectedAction.parameters.map((param) => { setParamValues(selectedAction.parameters.map((param) => {
return { return {
@@ -217,43 +219,27 @@ const ParsedAction = (props) => {
selectedAction, selectedApp,setNewSelectedAction, workflow, selectedAction, selectedApp,setNewSelectedAction, workflow,
]) ])
// useEffect(() => { useEffect(() => {
// if(!showAutocomplete){ if (selectedAction.parameters === null || selectedAction.parameters === undefined) {
// paramValueChange(); return
// } }
// },[menuPosition,showAutocomplete])
const paramcheck = selectedAction.parameters.find(param => param.name === "body")
if (paramcheck === undefined || paramcheck === null) {
return
}
// const paramValueChange = () => { // This was just opposite..
// setParamValues(selectedAction.parameters.map((param) => { if (paramcheck.id === "TOGGLED"){
// return { setHideBody(true)
// name: param.name, } else {
// value: param.value, setHideBody(false)
// }
// })) if (paramcheck.id === "UNTOGGLED") {
// } setActivateHidingBodyButton(false)
}
// useEffect(() => { }
// if (selectedAction.parameters === null || selectedAction.parameters === undefined) { }, [])
// return
// }
// const paramcheck = selectedAction.parameters.find(param => param.name === "body")
// if (paramcheck === undefined || paramcheck === null) {
// return
// }
// // This was just opposite..
// if (paramcheck.id === "TOGGLED"){
// setHideBody(true)
// } else {
// setHideBody(false)
// if (paramcheck.id === "UNTOGGLED") {
// setActivateHidingBodyButton(false)
// }
// }
// }, [])
const keywords = [ const keywords = [
"len(", "len(",
@@ -416,9 +402,6 @@ const ParsedAction = (props) => {
useEffect( useEffect(
() => { () => {
console.log("UseEffect Rendered!");
console.log("Workflow", workflow);
// Only set app action name if it has changed // Only set app action name if it has changed
if (selectedAction.label !== appActionName) { if (selectedAction.label !== appActionName) {
@@ -433,7 +416,6 @@ const ParsedAction = (props) => {
// Only set selected action parameters if they have changed // Only set selected action parameters if they have changed
if (selectedAction.parameters && selectedAction.parameters.length > 0) { if (selectedAction.parameters && selectedAction.parameters.length > 0) {
console.log("Setting action parameters!!");
setSelectedActionParameters(selectedAction.parameters); setSelectedActionParameters(selectedAction.parameters);
} }
@@ -585,11 +567,6 @@ const ParsedAction = (props) => {
actionDelayChange(delay) actionDelayChange(delay)
},[appActionName,delay]) },[appActionName,delay])
console.log("selectedActionParameters: ", selectedActionParameters)
console.log("selectedApp:", selectedApp)
console.log("selectedAction: ", selectedAction)
console.log("ACTIONLIST: ", actionlist)
console.log("selectedVariableParameter", selectedVariableParameter)
const handleParamChange = (event, count,data) => { const handleParamChange = (event, count,data) => {
const newParams = [...paramValues]; const newParams = [...paramValues];
newParams.map((param) => { newParams.map((param) => {
@@ -1296,8 +1273,6 @@ const ParsedAction = (props) => {
const selectedAppIcon = selectedAction.large_image const selectedAppIcon = selectedAction.large_image
// console.log("Selected action: ", selectedAction)
console.log("Selected action paramaters: ", selectedAction.parameters)
var baselabel = selectedAction.label var baselabel = selectedAction.label
return ( return (
<div style={appApiViewStyle} id="parsed_action_view"> <div style={appApiViewStyle} id="parsed_action_view">
@@ -2852,178 +2827,181 @@ const ParsedAction = (props) => {
//setSelectedActionParameters(selectedActionParameters) //setSelectedActionParameters(selectedActionParameters)
} }
// var hideBodyButton = ""; var hideBodyButton = "";
// const hideBodyButtonValue = ( const hideBodyButtonValue = (
// <div <div
// key={data.name} key={data.name}
// id="hide_body_button" id="hide_body_button"
// style={{ style={{
// marginTop: 50, marginTop: 50,
// border: "1px solid rgba(255,255,255,0.7)", border: "1px solid rgba(255,255,255,0.7)",
// borderTop: "1px solid rgba(255,255,255,0.7)", borderTop: "1px solid rgba(255,255,255,0.7)",
// borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
// alignItems: "center", alignItems: "center",
// textAlign: "center", textAlign: "center",
// }} }}
// > >
// <Tooltip <Tooltip
// color="secondary" color="secondary"
// title={ title={
// hideBody hideBody
// ? "Hide all body fields and only show the body itself" ? "Hide all body fields and only show the body itself"
// : "Show all body fields instead of the body itself" : "Show all body fields instead of the body itself"
// } }
// placement="top" placement="top"
// > >
// <FormControlLabel <FormControlLabel
// control={ control={
// <Checkbox <Checkbox
// tabIndex="-1" tabIndex="-1"
// checked={hideBody} checked={hideBody}
// style={{ style={{
// color: theme.palette.primary.secondary, color: theme.palette.primary.secondary,
// }} }}
// onChange={(event) => { onChange={(event) => {
// const newHideBody = !hideBody; const newHideBody = !hideBody;
// setHideBody(newHideBody); setHideBody(newHideBody)
// const updatedParameters = selectedActionParameters.map((param) => { const updatedParameters = selectedActionParameters.map((param) => {
// if (param.name === "body") { if (param.name === "body") {
// return { ...param, id: newHideBody ? "UNTOGGLED" : "TOGGLED" }; return { ...param, id: newHideBody ? "UNTOGGLED" : "TOGGLED" };
// } }
// if (param.description === openApiFieldDesc) { if (param.description === openApiFieldDesc) {
// return { ...param, field_active: newHideBody }; return { ...param, field_active: newHideBody };
// } }
// return param; return param;
// }); });
// setSelectedActionParameters(updatedParameters); setSelectedActionParameters(updatedParameters);
// setTimeout(() => { /*
// const element = document.getElementById("hide_body_button"); setTimeout(() => {
// if (element) { const element = document.getElementById("hide_body_button");
// element.scrollIntoView({ if (element) {
// behavior: "smooth", element.scrollIntoView({
// block: "center", behavior: "smooth",
// }); block: "center",
// } });
// }, 100); }
// }} }, 100);
// name="requires_unique" */
// /> }}
// } name="requires_unique"
// label={hideBody ? "Show Body" : "Hide Body"} />
// /> }
// </Tooltip> label={hideBody ? "Show Body" : "Hide Body"}
// </div> />
// ); </Tooltip>
</div>
);
// if (selectedApp.generated && data.name === "body") { if (selectedApp.generated && data.name === "body") {
// const regex = /\${(\w+)}/g; const regex = /\${(\w+)}/g;
// const found = placeholder.match(regex); const found = placeholder.match(regex);
// // setActivateHidingBodyButton(false) hideBodyButton = hideBodyButtonValue;
// // if (found === null || !hideBody) {
// hideBodyButton = hideBodyButtonValue; if (found === null) {
// if (found === null || !hideBody) {
// if (found === null) {
// setActivateHidingBodyButton(true);
// } else {
// //console.log("In found: ", found, hideBody)
// }
// } else {
// rows = "1"; if (activateHidingBodyButton !== true) {
// disabled = true; setActivateHidingBodyButton(true)
// openApiHelperText = "OpenAPI spec: fill the following fields."; }
// var changed = false; } else {
// var tempArray = [] //console.log("In found: ", found, hideBody)
// for (let specKey in found) { }
// const tmpitem = found[specKey]; } else {
// var skip = false;
// for (let innerkey in selectedActionParameters) { rows = "1";
// if (selectedActionParameters[innerkey].name === tmpitem) { disabled = true;
// skip = true; openApiHelperText = "OpenAPI spec: fill the following fields.";
// break;
// }
// }
// if (skip) { var changed = false;
// //console.log("SKIPPING ", tmpitem) var tempArray = []
// continue; for (let specKey in found) {
// } const tmpitem = found[specKey];
var skip = false;
// changed = true; for (let innerkey in selectedActionParameters) {
// var isRequired = false if (selectedActionParameters[innerkey].name === tmpitem) {
// // Check if original field name is in the selectedAction.required_body_fields skip = true;
// if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) { break;
// for (let innerkey in selectedAction.required_body_fields) { }
// if (selectedAction.required_body_fields[innerkey] === tmpitem) { }
// isRequired = true
// break
// }
// }
// }
// tempArray.push({ if (skip) {
// action_field: "", //console.log("SKIPPING ", tmpitem)
// configuration: false, continue;
// description: openApiFieldDesc, }
// example: "",
// id: "",
// multiline: true,
// name: tmpitem,
// options: null,
// required: isRequired,
// schema: { type: "string" },
// skip_multicheck: false,
// tags: null,
// value: "",
// variant: "STATIC_VALUE",
// field_active: true,
// autocompleted: true,
// });
// }
// console.log("TEMP ARRAY: ", tempArray)
// var required = selectedActionParameters.filter(item => item.required === true)
// var notRequired = selectedActionParameters.filter(item => item.required === false)
// if (tempArray.length > 0) { changed = true;
// // Sort tempArray based on tempArray.required var isRequired = false
// tempArray.sort((a, b) => (a.required < b.required) ? 1 : -1) // Check if original field name is in the selectedAction.required_body_fields
// // Add all items to the selectedActionParameters array if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
// for (let innerkey in tempArray) { for (let innerkey in selectedAction.required_body_fields) {
// tempArray[innerkey].id = "ADDED" if (selectedAction.required_body_fields[innerkey] === tmpitem) {
isRequired = true
break
}
}
}
// if (tempArray[innerkey].required === true) { tempArray.push({
// required.push(tempArray[innerkey]) action_field: "",
// } else { configuration: false,
// notRequired.push(tempArray[innerkey]) description: openApiFieldDesc,
// } example: "",
// } id: "",
// } multiline: true,
// //selectedActionParameters name: tmpitem,
// if (changed) { options: null,
// // Sort selectedActionParameters based on selectedActionParameters.required required: isRequired,
// //selectedActionParameters.sort((a, b) => (a.required < b.required) ? 1 : -1) schema: { type: "string" },
// // Find the "headers" and "queries" field names and put them on the first indexes anyway skip_multicheck: false,
// var newArray = required.concat(notRequired) tags: null,
value: "",
variant: "STATIC_VALUE",
field_active: true,
autocompleted: true,
});
}
var required = selectedActionParameters.filter(item => item.required === true)
var notRequired = selectedActionParameters.filter(item => item.required === false)
// setSelectedActionParameters(newArray) if (tempArray.length > 0) {
// } // Sort tempArray based on tempArray.required
tempArray.sort((a, b) => (a.required < b.required) ? 1 : -1)
// Add all items to the selectedActionParameters array
for (let innerkey in tempArray) {
tempArray[innerkey].id = "ADDED"
// return hideBodyButton; if (tempArray[innerkey].required === true) {
// } required.push(tempArray[innerkey])
// } } else {
notRequired.push(tempArray[innerkey])
}
}
}
//selectedActionParameters
if (changed) {
// Sort selectedActionParameters based on selectedActionParameters.required
//selectedActionParameters.sort((a, b) => (a.required < b.required) ? 1 : -1)
// Find the "headers" and "queries" field names and put them on the first indexes anyway
var newArray = required.concat(notRequired)
// if (activateHidingBodyButton === true) { setSelectedActionParameters(newArray)
// hideBodyButton = ""; }
// }
return hideBodyButton;
}
}
if (activateHidingBodyButton === true) {
hideBodyButton = "";
}
const clickedFieldId = "rightside_field_" + count; const clickedFieldId = "rightside_field_" + count;
@@ -3556,7 +3534,6 @@ const ParsedAction = (props) => {
}; };
const handleItemClick = (values) => { const handleItemClick = (values) => {
console.log("In normal itemclick")
if (values === undefined ||values === null ||values.length === 0) { if (values === undefined ||values === null ||values.length === 0) {
return; return;
} }
@@ -3579,31 +3556,28 @@ const ParsedAction = (props) => {
// Handles the fields under OpenAPI body to be parsed. // Handles the fields under OpenAPI body to be parsed.
if (data.name.startsWith("${") && data.name.endsWith("}")) { if (data.name.startsWith("${") && data.name.endsWith("}")) {
console.log("INSIDE VALUE REPLACE: ", data.name, toComplete);
// PARAM FIX - Gonna use the ID field, even though it's a hack
const paramcheck = selectedAction.parameters.find( const paramcheck = selectedAction.parameters.find(
(param) => param.name === "body" (param) => param.name === "body"
); )
if (paramcheck !== undefined) { if (paramcheck !== undefined) {
if ( if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) {
paramcheck["value_replace"] === undefined ||
paramcheck["value_replace"] === null
) {
paramcheck["value_replace"] = [ paramcheck["value_replace"] = [
{ {
key: data.name, key: data.name,
value: toComplete, value: toComplete,
}, },
]; ]
} else { } else {
const subparamindex = paramcheck[ const subparamindex = paramcheck["value_replace"]
"value_replace" .findIndex((param) => param.key === data.name);
].findIndex((param) => param.key === data.name);
if (subparamindex === -1) { if (subparamindex === -1) {
paramcheck["value_replace"].push({ paramcheck["value_replace"].push({
key: data.name, key: data.name,
value: toComplete, value: toComplete,
}); })
} else { } else {
paramcheck["value_replace"][subparamindex]["value"] += paramcheck["value_replace"][subparamindex]["value"] +=
toComplete; toComplete;
@@ -3611,7 +3585,9 @@ const ParsedAction = (props) => {
} }
selectedActionParameters[count]["value_replace"] = paramcheck; selectedActionParameters[count]["value_replace"] = paramcheck;
selectedAction.parameters[count]["value_replace"] = paramcheck;
selectedAction.parameters = selectedActionParameters
//selectedAction.parameters[count]["value_replace"] = paramcheck;
setSelectedAction(selectedAction); setSelectedAction(selectedAction);
setUpdate(Math.random()); setUpdate(Math.random());
@@ -3932,9 +3908,15 @@ const ParsedAction = (props) => {
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}` const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
const hasAutocomplete = data?.autocompleted === true const hasAutocomplete = data?.autocompleted === true
if (data.variant === undefined || data.variant === null) {
data.variant = "STATIC_VALUE"
}
return ( return (
<div key={data.name}> <div key={data.name}>
{/* {hideBodyButton} */} {hideBodyButton}
<div <div
style={{ marginTop: 20, marginBottom: 0, display: "flex" }} style={{ marginTop: 20, marginBottom: 0, display: "flex" }}
> >
@@ -4068,9 +4050,9 @@ const ParsedAction = (props) => {
Autocomplete Autocomplete
</InputLabel> </InputLabel>
<Select <Select
MenuProps={{ MenuProps={{
disableScrollLock: true, disableScrollLock: true,
}} }}
labelId="action-autocompleter" labelId="action-autocompleter"
SelectDisplayProps={{ SelectDisplayProps={{
style: { style: {
@@ -4101,6 +4083,8 @@ const ParsedAction = (props) => {
borderRadius: theme.palette.borderRadius, borderRadius: theme.palette.borderRadius,
}} }}
onChange={(e) => { onChange={(e) => {
console.log("SELECT ONCHANGE DONE")
if (selectedActionParameters[count].value[selectedActionParameters[count].value.length - 1] === ".") { if (selectedActionParameters[count].value[selectedActionParameters[count].value.length - 1] === ".") {
e.target.value.autocomplete = e.target.value.autocomplete.slice(1,e.target.value.autocomplete.length); e.target.value.autocomplete = e.target.value.autocomplete.slice(1,e.target.value.autocomplete.length);
} }
frontend/src/views/AngularWorkflow.jsx
+4 -15
View File
@@ -4398,15 +4398,12 @@ const releaseToConnectLabel = "Release to Connect"
//const data = JSON.parse(JSON.stringify(event.target.data())) //const data = JSON.parse(JSON.stringify(event.target.data()))
const data = event.target.data() const data = event.target.data()
console.log("===============================Node selected=============================")
console.log("NODE SELECT: ", data)
if (data.app_name === "Shuffle Workflow") { if (data.app_name === "Shuffle Workflow") {
console.log("Shuffle Workflow selected") if ((data.parameters !== undefined) && (data.parameters.length > 0)) {
if ((data.parameters !== undefined) && (data.parameters.length > 0)) { getWorkflowApps(data.parameters[0].value)
getWorkflowApps(data.parameters[0].value) }
} }
}
if (data.buttonType == "ACTIONSUGGESTION") { if (data.buttonType == "ACTIONSUGGESTION") {
const attachedToId = data.attachedTo const attachedToId = data.attachedTo
@@ -6930,8 +6927,6 @@ const releaseToConnectLabel = "Release to Connect"
const allNodes = cy.nodes().jsons(); const allNodes = cy.nodes().jsons();
if (nodedata.app_name === "Webhook" || nodedata.app_name === "Schedule" || nodedata.app_name === "Gmail" || nodedata.app_name === "Office365") { if (nodedata.app_name === "Webhook" || nodedata.app_name === "Schedule" || nodedata.app_name === "Gmail" || nodedata.app_name === "Office365") {
console.log("In this :)")
var found = false; var found = false;
for (let nodekey in allNodes) { for (let nodekey in allNodes) {
const currentNode = allNodes[nodekey]; const currentNode = allNodes[nodekey];
@@ -9928,7 +9923,6 @@ const releaseToConnectLabel = "Release to Connect"
} }
} }
console.log("New selected action: ", newSelectedAction)
setSelectedAction(newSelectedAction) setSelectedAction(newSelectedAction)
setUpdate(Math.random()) setUpdate(Math.random())
@@ -21328,15 +21322,12 @@ const releaseToConnectLabel = "Release to Connect"
if (paramcheck !== undefined) { if (paramcheck !== undefined) {
// Escapes all double quotes // Escapes all double quotes
const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\""); const toReplace = event.target.value.trim().replaceAll("\\\"", "\"").replaceAll("\"", "\\\"");
console.log("REPLACE WITH: ", toReplace)
if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) { if (paramcheck["value_replace"] === undefined || paramcheck["value_replace"] === null) {
paramcheck["value_replace"] = [{ paramcheck["value_replace"] = [{
"key": data.name, "key": data.name,
"value": toReplace, "value": toReplace,
}] }]
console.log("IN IF: ", paramcheck)
} else { } else {
const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name) const subparamindex = paramcheck["value_replace"].findIndex(param => param.key === data.name)
if (subparamindex === -1) { if (subparamindex === -1) {
@@ -21347,8 +21338,6 @@ const releaseToConnectLabel = "Release to Connect"
} else { } else {
paramcheck["value_replace"][subparamindex]["value"] = toReplace paramcheck["value_replace"][subparamindex]["value"] = toReplace
} }
console.log("IN ELSE: ", paramcheck)
} }
if (paramcheck["value_replace"] === undefined) { if (paramcheck["value_replace"] === undefined) {