setHover(true)} onMouseLeave={() => setHover(false)}
+ onClick={(event) => {
+ // event.preventDefault()
+ //setSelectedAction(actionprops)
+ //setShowActionList(false)
+ //setUpdate(Math.random())
+ //
+ if (option !== undefined && option !== null) {
+ setNewSelectedAction({
+ target: {
+ value: option.name
+ }
+ });
+ }
+ document.activeElement.blur();
+ }}
+ >
+
+ {extraDescription}
+
+ : null}
+
+
+
+ {useIcon}
+
+ {newActionname}
+
+ {extraDescription.length > 0 ?
+
+
+ {hideExtraTypes === true ? null : (
+
+
-
-
-
- {parsedPaths.map((pathdata, index) => {
- // FIXME: Should be recursive in here
- //
-
-
- ) : (
-
- );
- })}
-
- );
- };
-
+
if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
if (workflow.triggers[selectedTriggerIndex] === undefined) {
return null;
@@ -12851,7 +12601,7 @@ const AngularWorkflow = (defaultprops) => {
data: newbranch,
};
- cy.add(cybranch)
+ cy.add(cybranch);
}
console.log("Value to be set: ", e.target.value);
@@ -13353,10 +13103,298 @@ const AngularWorkflow = (defaultprops) => {
}}
/>
{!showDropdown ? null :
-
+ }
+ parentMenuOpen={!!menuPosition}
+ style={{
+ backgroundColor: theme.palette.inputColor,
+ color: "white",
+ minWidth: 250,
+ }}
+ onClick={() => {
+ handleItemClick([innerdata]);
+ }}
+ >
+ {parsedPaths.map((pathdata, index) => {
+ // FIXME: Should be recursive in here
+ const icon =
+ pathdata.type === "value" ? (
+
+
+
+
+ {
+ //window.open("/apps/${selectedAction.app_id}", "_blank")
+ }}
+ >
+
+ 
+
+
+ + {( + selectedAction.app_name.charAt(0).toUpperCase() + + selectedAction.app_name.substring(1) + ).replaceAll("_", " ")} +
+
+ {
+ if (workflowExecutions.length > 0) {
+ // Look for the ID
+ var found = false;
+ for (let [key,keyval] in Object.entries(workflowExecutions)) {
+ if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
+ continue;
+ }
+
+ var foundResult = workflowExecutions[key].results.find(
+ (result) => result.action.id === selectedAction.id
+ )
+
+ if (foundResult === undefined || foundResult === null) {
+ continue;
+ }
+
+ const oldstartnode = cy.getElementById(selectedAction.id);
+ if (oldstartnode !== undefined && oldstartnode !== null) {
+ const foundname = oldstartnode.data("label")
+ if (foundname !== undefined && foundname !== null) {
+ foundResult.action.label = foundname
+ }
+ }
+
+ setSelectedResult(foundResult);
+ if (setCodeModalOpen !== undefined) {
+ setCodeModalOpen(true);
+
+ found = true
+ }
+
+ break;
+ }
+
+ if (!found) {
+ toast("No result for this action yet. Please run the workflow first.")
+ }
+ }
+ }}
+ >
+
+
+
+ {
+ setAuthenticationModalOpen(true)
+ }}
+ >
+
+
+
+ {/*
+ {}}
+ >
+
+
+
+
+
+ */}
+ {/*
+ {
+ //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());
+ }}
+ >
+
+
+
+ */}
+ {/*
+ {
+ }}
+ >
+
+
+
+
+ */}
+ {
+ //if (setAiQueryModalOpen !== undefined) {
+ // setAiQueryModalOpen(true)
+ //} else {
+ aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
+ //}
+ setAutocompleting(true)
+ }}
+ >
+
+ {autoCompleting ?
+
+
+
+
+ {/*selectedAction.id === workflow.start ? null :
+
+
+
+
+ */}
+ {selectedApp.versions !== null &&
+ selectedApp.versions !== undefined &&
+ selectedApp.versions.length > 1 ? (
+
+ ) : null}
+
+
+
+
+ )}
+ {selectedApp.name !== undefined &&
+ selectedAction.authentication !== null &&
+ selectedAction.authentication !== undefined &&
+ selectedAction.authentication.length === 0 &&
+ requiresAuthentication ? (
+
+ Name
+ {
+ let newValue = event.target.value
+ newValue = newValue.replaceAll(" ", "_")
+ setAppActionName(newValue)
+ }
+ }
+ onBlur={(e) => {
+ // Copy the name value
+ const name = appActionName
+ const parsedBaseLabel = "$"+baselabel.toLowerCase().replaceAll(" ", "_")
+ const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
+
+ // Check if it's the same as the current name in use
+ //if (name === selectedAction.label) {
+ // console.log("Returning from name thing")
+ // return
+ //}
+
+ // Change in actions, triggers & conditions
+ // Highlight the changes somehow with a glow?
+ if (workflow.branches !== undefined && workflow.branches !== null) {
+ for (let [key,keyval] in Object.entries(workflow.branches)) {
+ if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
+ for (let [subkey,subkeyval] in Object.entries(workflow.branches[key].conditions)) {
+ const condition = workflow.branches[key].conditions[subkey]
+ const sourceparam = condition.source
+ const destinationparam = condition.destination
+
+ // Should have a smarter way of discovering node names
+ // Finding index(es) and replacing at the location
+ if (sourceparam.value.includes("$")) {
+ try {
+ var cnt = -1
+ var previous = 0
+ while (true) {
+ cnt += 1
+ // Need to make sure e.g. changing the first here doesn't change the 2nd
+ // $change_me
+ // $change_me_2
+
+ const foundindex = sourceparam.value.toLowerCase().indexOf(parsedBaseLabel, previous)
+ if (foundindex === previous && foundindex !== 0) {
+ break
+ }
+
+ if (foundindex >= 0) {
+ previous = foundindex+newname.length
+ // Need to add diff of length to word
+
+ // Check location:
+ // If it's a-zA-Z_ then don't replace
+ if (sourceparam.value.length > foundindex+parsedBaseLabel.length) {
+ const regex = /[a-zA-Z0-9_]/g;
+ const match = sourceparam.value[foundindex+parsedBaseLabel.length].match(regex);
+ if (match !== null) {
+ continue
+ }
+ }
+
+ console.log("Old found: ", workflow.branches[key].conditions[subkey].source.value)
+ const extralength = newname.length-parsedBaseLabel.length
+ sourceparam.value = sourceparam.value.substring(0, foundindex) + newname + sourceparam.value.substring(foundindex-extralength+newname.length, sourceparam.value.length)
+
+ console.log("New: ", workflow.branches[key].conditions[subkey].source.value)
+ } else {
+ break
+ }
+
+ // Break no matter what after 5 replaces. May need to increase
+ if (cnt >= 5) {
+ break
+ }
+
+ }
+ } catch (e) {
+ console.log("Failed value replacement based on index: ", e)
+ }
+ }
+
+ if (destinationparam.value.includes("$")) {
+ try {
+ var cnt = -1
+ var previous = 0
+ while (true) {
+ cnt += 1
+ // Need to make sure e.g. changing the first here doesn't change the 2nd
+ // $change_me
+ // $change_me_2
+
+ const foundindex = destinationparam.value.toLowerCase().indexOf(parsedBaseLabel, previous)
+ if (foundindex === previous && foundindex !== 0) {
+ break
+ }
+
+ if (foundindex >= 0) {
+ previous = foundindex+newname.length
+ // Need to add diff of length to word
+
+ // Check location:
+ // If it's a-zA-Z_ then don't replace
+ if (destinationparam.value.length > foundindex+parsedBaseLabel.length) {
+ const regex = /[a-zA-Z0-9_]/g;
+ const match = destinationparam.value[foundindex+parsedBaseLabel.length].match(regex);
+ if (match !== null) {
+ continue
+ }
+ }
+
+ console.log("Old found: ", workflow.branches[key].conditions[subkey].destination.value)
+ const extralength = newname.length-parsedBaseLabel.length
+ destinationparam.value = destinationparam.value.substring(0, foundindex) + newname + destinationparam.value.substring(foundindex-extralength+newname.length, destinationparam.value.length)
+
+ console.log("New: ", workflow.branches[key].conditions[subkey].destination.value)
+ } else {
+ break
+ }
+
+ // Break no matter what after 5 replaces. May need to increase
+ if (cnt >= 5) {
+ break
+ }
+
+ }
+ } catch (e) {
+ console.log("Failed value replacement based on index: ", e)
+ }
+ }
+ }
+ }
+ }
+ }
+
+ for (let [key,keyval] in Object.entries(workflow.actions)) {
+ if (workflow.actions[key].id === selectedAction.id) {
+ continue
+ }
+
+ const params = workflow.actions[key].parameters
+ console.log(params)
+ if (params === null || params === undefined) {
+ continue
+ }
+
+ for (let [subkey, subkeyval] in Object.entries(params)) {
+ const param = workflow.actions[key].parameters[subkey];
+ if (!param.value.includes("$")) {
+ continue
+ }
+
+ // Should have a smarter way of discovering node names
+ // Do regex?
+ // Finding index(es) and replacing at the location
+ //
+
+ try {
+ var cnt = -1
+ var previous = 0
+ while (true) {
+ cnt += 1
+ // Need to make sure e.g. changing the first here doesn't change the 2nd
+ // $change_me
+ // $change_me_2
+
+ const foundindex = param.value.toLowerCase().indexOf(parsedBaseLabel, previous)
+ if (foundindex === previous && foundindex !== 0) {
+ break
+ }
+
+ if (foundindex >= 0) {
+ previous = foundindex+newname.length
+ // Need to add diff of length to word
+
+ // Check location:
+ // If it's a-zA-Z_ then don't replace
+ if (param.value.length > foundindex+parsedBaseLabel.length) {
+ const regex = /[a-zA-Z0-9_]/g;
+ const match = param.value[foundindex+parsedBaseLabel.length].match(regex);
+ if (match !== null) {
+ continue
+ }
+ }
+
+ console.log("Old found: ", workflow.actions[key].parameters[subkey].value)
+ const extralength = newname.length-parsedBaseLabel.length
+ param.value = param.value.substring(0, foundindex) + newname + param.value.substring(foundindex-extralength+newname.length, param.value.length)
+
+ console.log("New: ", workflow.actions[key].parameters[subkey].value)
+ } else {
+ break
+ }
+
+ // Break no matter what after 5 replaces. May need to increase
+ if (cnt >= 5) {
+ break
+ }
+
+ }
+ } catch (e) {
+ console.log("Failed value replacement based on index: ", e)
+ }
+ }
+ }
+
+ setWorkflow(workflow);
+ setUpdate(Math.random());
+ baselabel = name
+ }}
+ />
+
+ {/*!isCloud ? null :*/}
+
+
+
+ Delay
+ {
+ setDelay(event.target.value)
+ }}
+ />
+
+
+
+ {/**/}
+
+
+
+
+
+
+
+ ) : null}
+
+ {selectedAction.authentication !== undefined &&
+ selectedAction.authentication !== null &&
+ selectedAction.authentication.length > 0 ? (
+
+ Authentication
+
+ ) : null}
+
+ {showEnvironment !== undefined && showEnvironment && environments.length > 1 && !isIntegration ? (
+
+
+
+ {/*
+
+
+ curaction.authentication = authenticationOptions
+ if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "")
+ */}
+
+ {
+ setAuthenticationModalOpen(true);
+ }}
+ >
+
+
+
+
+ Environment
+
+
+ ) : null}
+ {workflow.execution_variables !== undefined &&
+ workflow.execution_variables !== null &&
+ workflow.execution_variables.length > 0 ? (
+
+ Execution variable (optional)
+
+
+ ) : null}
+
+
+ {/*hideExtraTypes ? null :
+ {
+ // Most popular
+ // Is categorized
+ // Uncategorized
+ return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
+ }}
+ renderGroup={(params) => {
+
+ return (
+
+ {params.group}
+ {params.children}
+
+ )
+ }}
+ options={renderedActionOptions}
+ ListboxProps={{
+ style: {
+ backgroundColor: theme.palette.surfaceColor,
+ color: "white",
+ },
+ }}
+ filterOptions={(options, { inputValue }) => {
+ //console.log("Option contains?: ", inputValue, options)
+ const lowercaseValue = inputValue.toLowerCase()
+ options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
+
+ return options
+ }}
+ getOptionLabel={(option) => {
+ if (option === undefined || option === null || option.name === undefined || option.name === null ) {
+ return null;
+ }
+
+ const newname = (
+ option.name.charAt(0).toUpperCase() + option.name.substring(1)
+ ).replaceAll("_", " ");
+
+ return newname;
+ }}
+ fullWidth
+ style={{
+ backgroundColor: theme.palette.inputColor,
+ height: 50,
+ borderRadius: theme.palette.borderRadius,
+ }}
+ onChange={(event, newValue) => {
+ // Workaround with event lol
+ if (newValue !== undefined && newValue !== null) {
+ setNewSelectedAction({
+ target: {
+ value: newValue.name
+ }
+ });
+ }
+ }}
+ renderOption={(props, option, state) => {
+ var newActionname = option.name;
+ if (option.label !== undefined && option.label !== null && option.label.length > 0) {
+ newActionname = option.label;
+ }
+
+ var newActiondescription = option.description;
+ //console.log("DESC: ", newActiondescription)
+ if (option.description === undefined || option.description === null) {
+ newActiondescription = "Description: No description defined for this action"
+ } else {
+ newActiondescription = "Description: "+newActiondescription
+ }
+
+ const iconInfo = GetIconInfo({ name: option.name });
+ const useIcon = iconInfo.originalIcon;
+
+ if (newActionname === undefined || newActionname === null) {
+ newActionname = "No name"
+ option.name = "No name"
+ option.label = "No name"
+ }
+
+ newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
+
+ var method = ""
+ var extraDescription = ""
+ if (option.name.includes("get_")) {
+ method = "GET"
+ } else if (option.name.includes("post_")) {
+ method = "POST"
+ } else if (option.name.includes("put_")) {
+ method = "PUT"
+ } else if (option.name.includes("patch_")) {
+ method = "PATCH"
+ } else if (option.name.includes("delete_")) {
+ method = "DELETE"
+ } else if (option.name.includes("options_")) {
+ method = "OPTIONS"
+ } else if (option.name.includes("connect_")) {
+ method = "CONNECT"
+ }
+
+ // FIXME: Should it require a base URL?
+ if (method.length > 0 && option.description !== undefined && option.description !== null && option.description.includes("http")) {
+ var extraUrl = ""
+ const descSplit = option.description.split("\n")
+ // Last line of descSplit
+ if (descSplit.length > 0) {
+ extraUrl = descSplit[descSplit.length-1]
+ }
+
+ //for (let [line,lineval] in Object.entries(descSplit)) {
+ // if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
+ // const urlsplit = descSplit[line].split("/")
+ // try {
+ // extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
+ // } catch (e) {
+ // //console.log("Failed - running with -1")
+ // extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
+ // }
+
+
+ // //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
+ // //break
+ // }
+ //}
+
+ if (extraUrl.length > 0) {
+ if (extraUrl.includes(" ")) {
+ extraUrl = extraUrl.split(" ")[0]
+ }
+
+ if (extraUrl.includes("#")) {
+ extraUrl = extraUrl.split("#")[0]
+ }
+
+ extraDescription = `${method} ${extraUrl}`
+ } else {
+ //console.log("No url found. Check again :)")
+ }
+ }
+
+ return (
+
- {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]);
- }}
- >
-
+ Actions
+
+ */}
+
+ {setNewSelectedAction !== undefined ? (
+ {
+ Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0 ?
+
- }
- parentMenuOpen={!!menuPosition}
- style={{
- backgroundColor: theme.palette.inputColor,
- color: "white",
- minWidth: 250,
- }}
- onClick={() => {
- handleItemClick([innerdata]);
- }}
- >
- {parsedPaths.map((pathdata, index) => {
- // FIXME: Should be recursive in here
- const icon =
- pathdata.type === "value" ? (
-
{isIntegration ?
apps !== undefined && apps !== null && apps.length > 0 ?
- Conditions are unavailable between triggers and the startnode.
-
- : null}
-
-
+ Conditions are unavailable between triggers and the startnode.
+
+ : null}
);
};
@@ -12155,7 +12204,7 @@ const AngularWorkflow = (defaultprops) => {
return transformedData;
- }
+ };
const AppAuthSelector = ({ appAuthData }) => {
const [selectedAuth, setSelectedAuth] = useState("");
@@ -12168,7 +12217,6 @@ const AngularWorkflow = (defaultprops) => {
const handleShowingValue = (appName) => {
let mappingWithName = {}
let listWithValues = workflow.triggers[selectedTriggerIndex].parameters[5]?.value.split(";").filter(e => e).map(e => e.split("="))
-
console.log("LIST WITH VALUES: ", listWithValues)
for (let i = 0; i < listWithValues.length; i++) {
mappingWithName[listWithValues[i][0]] = listWithValues[i][1]
@@ -12397,9 +12445,6 @@ const AngularWorkflow = (defaultprops) => {
setActionlist(actionlist);
}
- // Shows nested list of nodes > their JSON lists
- const ActionlistWrapper = (props) => {
- const { data } = props;
const handleMenuClose = () => {
setUpdate(Math.random());
@@ -12445,302 +12490,7 @@ const AngularWorkflow = (defaultprops) => {
marginRight: 15,
};
- return (
-
@@ -1589,9 +2770,9 @@ const ParsedAction = (props) => {
placeholder = data.example;
- if (data.name === "url" && data.value !== undefined && data.value !== null && data.value.length === 0) {
- data.value = data.example;
- }
+ // if (data.name === "url") {
+ // data.value = data.example;
+ // }
// In case of data.example
if (data.value === undefined || data.value === null) {
data.value = ""
@@ -1671,186 +2852,178 @@ const ParsedAction = (props) => {
//setSelectedActionParameters(selectedActionParameters)
}
- var hideBodyButton = "";
- const hideBodyButtonValue = (
-
- )
+ // for (let innerkey in selectedActionParameters) {
+ // if (selectedActionParameters[innerkey].name === tmpitem) {
+ // skip = true;
+ // break;
+ // }
+ // }
- if (selectedApp.generated && data.name === "body") {
- const regex = /\${(\w+)}/g;
- const found = placeholder.match(regex);
+ // if (skip) {
+ // //console.log("SKIPPING ", tmpitem)
+ // continue;
+ // }
- // setActivateHidingBodyButton(false)
- //
- hideBodyButton = hideBodyButtonValue;
- if (found === null || !hideBody) {
- if (found === null) {
- setActivateHidingBodyButton(true);
- } else {
- //console.log("In found: ", found, hideBody)
- }
- } else {
+ // changed = true;
+ // var isRequired = false
+ // // Check if original field name is in the selectedAction.required_body_fields
+ // if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
+ // for (let innerkey in selectedAction.required_body_fields) {
+ // if (selectedAction.required_body_fields[innerkey] === tmpitem) {
+ // isRequired = true
+ // break
+ // }
+ // }
+ // }
- rows = "1";
- disabled = true;
- openApiHelperText = "OpenAPI spec: fill the following fields.";
-
- var changed = false;
- var tempArray = []
- for (let specKey in found) {
- const tmpitem = found[specKey];
- var skip = false;
-
- for (let innerkey in selectedActionParameters) {
- if (selectedActionParameters[innerkey].name === tmpitem) {
- skip = true;
- break;
- }
- }
-
- if (skip) {
- //console.log("SKIPPING ", tmpitem)
- continue;
- }
-
- changed = true;
- var isRequired = false
- // Check if original field name is in the selectedAction.required_body_fields
- if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
- for (let innerkey in selectedAction.required_body_fields) {
- if (selectedAction.required_body_fields[innerkey] === tmpitem) {
- isRequired = true
- break
- }
- }
- }
-
- tempArray.push({
- action_field: "",
- configuration: false,
- 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,
+ // tempArray.push({
+ // action_field: "",
+ // configuration: false,
+ // 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,
- });
- }
+ // autocompleted: true,
+ // });
+ // }
- console.log("TEMP ARRAY: ", tempArray)
- var required = selectedActionParameters.filter(item => item.required === true)
- var notRequired = selectedActionParameters.filter(item => item.required === false)
+ // 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) {
- // 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"
+ // 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"
- 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 (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)
- setSelectedActionParameters(newArray)
- }
+ // setSelectedActionParameters(newArray)
+ // }
- return hideBodyButton;
- }
- }
+ // return hideBodyButton;
+ // }
+ // }
- if (activateHidingBodyButton === true) {
- hideBodyButton = "";
- }
+ // if (activateHidingBodyButton === true) {
+ // hideBodyButton = "";
+ // }
const clickedFieldId = "rightside_field_" + count;
@@ -1962,8 +3135,12 @@ const ParsedAction = (props) => {
id={clickedFieldId}
rows={data.name.startsWith("${") && data.name.endsWith("}") ? 2 : rows}
color="primary"
- defaultValue={data.value}
- //value={data.value}
+ // defaultValue={data.value}
+ value={
+ paramValues.find((param) => param.name === data.name) !== undefined
+ ? paramValues.find((param) => param.name === data.name).value
+ : ""
+ }
//options={{
// theme: 'gruvbox-dark',
// keyMap: 'sublime',
@@ -1983,7 +3160,8 @@ const ParsedAction = (props) => {
placeholder={placeholder}
onChange={(event) => {
//changeActionParameterCodemirror(event, count, data)
- changeActionParameter(event, count, data);
+ // changeActionParameter(event, count, data);
+ handleParamChange(event, count, data)
}}
helperText={returnHelperText(data.name, data.value)}
onBlur={(event) => {
@@ -2450,7 +3628,7 @@ const ParsedAction = (props) => {
//selectedAction.parameters[count].value = selectedActionParameters[count].value;
//setSelectedAction(selectedAction);
//setUpdate(Math.random());
-
+
setShowDropdown(false);
setMenuPosition(null);
};
@@ -2753,10 +3931,10 @@ const ParsedAction = (props) => {
}
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
- const hasAutocomplete = data.autocompleted === true
+ const hasAutocomplete = data?.autocompleted === true
return (
);
- };
+}
+
+
const getNextActionName = (appName) => {
var highest = "";
@@ -9824,44 +9964,43 @@ const AngularWorkflow = (defaultprops) => {
// appname & version
// description
// ACTION select
- const selectedNameChange = (event) => {
- event.target.value = event.target.value.replaceAll("(", "");
- event.target.value = event.target.value.replaceAll(")", "");
- event.target.value = event.target.value.replaceAll("]", "");
- event.target.value = event.target.value.replaceAll("[", "");
- event.target.value = event.target.value.replaceAll("{", "");
- event.target.value = event.target.value.replaceAll("}", "");
- event.target.value = event.target.value.replaceAll("*", "");
- event.target.value = event.target.value.replaceAll("!", "");
- event.target.value = event.target.value.replaceAll("@", "");
- event.target.value = event.target.value.replaceAll("#", "");
- event.target.value = event.target.value.replaceAll("$", "");
- event.target.value = event.target.value.replaceAll("%", "");
- event.target.value = event.target.value.replaceAll("&", "");
- event.target.value = event.target.value.replaceAll("#", "");
- event.target.value = event.target.value.replaceAll(".", "");
- event.target.value = event.target.value.replaceAll(",", "");
- event.target.value = event.target.value.replaceAll(" ", "_");
- event.target.value = event.target.value.replaceAll("^", "_");
- event.target.value = event.target.value.replaceAll("'", "_");
- event.target.value = event.target.value.replaceAll("\"", "_");
- event.target.value = event.target.value.replaceAll("\"", "_");
- event.target.value = event.target.value.replaceAll(":", "_");
- event.target.value = event.target.value.replaceAll(";", "_");
- event.target.value = event.target.value.replaceAll("=", "_");
- event.target.value = event.target.value.replaceAll("+", "_");
-
- selectedAction.label = event.target.value;
+ const selectedNameChange = (appActionName) => {
+ appActionName = appActionName.replaceAll("(", "");
+ appActionName = appActionName.replaceAll(")", "");
+ appActionName = appActionName.replaceAll("]", "");
+ appActionName = appActionName.replaceAll("[", "");
+ appActionName = appActionName.replaceAll("{", "");
+ appActionName = appActionName.replaceAll("}", "");
+ appActionName = appActionName.replaceAll("*", "");
+ appActionName = appActionName.replaceAll("!", "");
+ appActionName = appActionName.replaceAll("@", "");
+ appActionName = appActionName.replaceAll("#", "");
+ appActionName = appActionName.replaceAll("$", "");
+ appActionName = appActionName.replaceAll("%", "");
+ appActionName = appActionName.replaceAll("&", "");
+ appActionName = appActionName.replaceAll("#", "");
+ appActionName = appActionName.replaceAll(".", "");
+ appActionName = appActionName.replaceAll(",", "");
+ appActionName = appActionName.replaceAll(" ", "_");
+ appActionName = appActionName.replaceAll("^", "_");
+ appActionName = appActionName.replaceAll("'", "_");
+ appActionName = appActionName.replaceAll("\"", "_");
+ appActionName = appActionName.replaceAll("\"", "_");
+ appActionName = appActionName.replaceAll(":", "_");
+ appActionName = appActionName.replaceAll(";", "_");
+ appActionName = appActionName.replaceAll("=", "_");
+ appActionName = appActionName.replaceAll("+", "_");
+ selectedAction.label = appActionName;
setSelectedAction(selectedAction);
};
- const actionDelayChange = (event) => {
- if (isNaN(event.target.value)) {
- console.log("NAN: ", event.target.value)
+ const actionDelayChange = (delay) => {
+ if (isNaN(delay)) {
+ console.log("NAN: ", delay)
return
}
- const parsedNumber = parseInt(event.target.value)
+ const parsedNumber = parseInt(delay)
if (parsedNumber > 86400) {
console.log("Max number is 1 day (86400)")
return
@@ -11297,101 +11436,11 @@ const AngularWorkflow = (defaultprops) => {
{/* Check if dest is the same as start */}
- {conditionsDisabled ?
-
- {hideBodyButton}
+ {/* {hideBodyButton} */}
-
- )
- }
-
- const sortByCategoryLabel = (a, b) => {
- const aHasCategoryLabel = a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0
- const bHasCategoryLabel = b.category_label !== undefined && b.category_label !== null && b.category_label.length > 0
-
- // Sort by existence and length of "category_label"
- if (aHasCategoryLabel && !bHasCategoryLabel) {
- return -1
- } else if (!aHasCategoryLabel && bHasCategoryLabel) {
- return 1
- } else {
- return 0
- }
- }
-
- // Function to deduplicate based on the "name" field
- const deduplicateByName = (array) => {
- const uniqueNames = {};
- return array.filter(item => {
- if (!item.hasOwnProperty('name') || !item.name.length) {
- return true
+ : null
}
- if (!uniqueNames[item.name]) {
- uniqueNames[item.name] = true
- return true
- }
- return false
- })
- }
-
- // Gets the most important actions first
- const renderedActionOptions = deduplicateByName((
- selectedApp.actions === undefined || selectedApp.actions === null ? [] :
- selectedApp.actions.filter((a) =>
- a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))
- ).sort(sortByCategoryLabel))
-
- const selectedAppIcon = selectedAction.large_image
- var baselabel = selectedAction.label
- return (
- {
const AppView = (props) => {
const { allApps, prioritizedApps, filteredApps, extraApps } = props;
-
+ // console.log("AppView Rendered!")
//extraApps,
const [visibleApps, setVisibleApps] = React.useState(
Array.prototype.concat.apply(
@@ -9577,7 +9715,9 @@ const AngularWorkflow = (defaultprops) => {
@@ -2984,1255 +4162,9 @@ const ParsedAction = (props) => {
);
})}
- );
- }
- return null;
- };
-
-
- const ActionSelectOption = (actionprops) => {
- const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
- const [hover, setHover] = React.useState(false);
-
- return (
- setHover(true)} onMouseLeave={() => setHover(false)}
- onClick={() => {
- //setSelectedAction(actionprops)
- //setShowActionList(false)
- //setUpdate(Math.random())
- //
- if (data !== undefined && data !== null) {
- setNewSelectedAction({
- target: {
- value: data.name
- }
- });
- }
- }}
- >
-
- {extraDescription}
-
- : null}
-
-
-
- {useIcon}
-
- {newActionname}
-
- {extraDescription.length > 0 ?
-
-
- {hideExtraTypes === true ? null : (
-
-
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 7197f7d6..75613a2b 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -1,5 +1,5 @@
/* eslint-disable react/no-multi-comp */
-import React, { useState, useEffect, useLayoutEffect } from "react";
+import React, { useState, useEffect, useLayoutEffect, memo, useMemo, useRef } from "react";
import ReactDOM from "react-dom"
import theme from "../theme.jsx";
@@ -22,7 +22,6 @@ import { CodeHandler, Img, OuterLink, } from "../views/Docs.jsx";
import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';
-
import {
Zoom,
Fade,
@@ -554,7 +553,7 @@ const AngularWorkflow = (defaultprops) => {
}, [editWorkflowModalOpen])
// New for generated stuff
- const releaseToConnectLabel = "Release to Connect"
+const releaseToConnectLabel = "Release to Connect"
const integrationApps = [{
"id": "integration",
"name": "Integration Framework",
@@ -1447,18 +1446,18 @@ const AngularWorkflow = (defaultprops) => {
trigger.parameters = []
- const topic = document.getElementById('topic')?.value
- const bootstrapServers = document.getElementById('bootstrap_servers')?.value
- const groupId = document.getElementById('group_id')?.value
+ const topic = document.getElementById('topic')?.value;
+ const bootstrapServers = document.getElementById('bootstrap_servers')?.value;
+ const groupId = document.getElementById('group_id')?.value;
//const autoOffsetReset = document.getElementById('auto_offset_reset')?.value;
if(topic) {
trigger.parameters.push({
name: "topic",
value: topic
- })
+ });
} else {
- toast("Please enter the topic name");
+ toast("please enter the topic name");
return;
}
@@ -3296,19 +3295,12 @@ const AngularWorkflow = (defaultprops) => {
// don't redirect if it exists
const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
var execFound = new URLSearchParams(cursearch).get("execution_id");
- var sessionToken = new URLSearchParams(cursearch).get("session_token");
- if (execFound === null && sessionToken === null) {
- toast(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
- setTimeout(() => {
- window.location.pathname = "/workflows";
- }, 2000);
- } else if (sessionToken !== null && workflow_id === "3abdfb21-b40f-4e50-b855-ac0d62f83cbe") {
- toast(`Injecting session token and reloading workflow..`)
- setTimeout(() => {
- setCookie("session_token", sessionToken, { path: "/" });
- window.location.href = "https://shuffler.io/workflows/3abdfb21-b40f-4e50-b855-ac0d62f83cbe";
- }, 2000);
- }
+ if (execFound === null) {
+ toast(`You don't access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
+ setTimeout(() => {
+ window.location.pathname = "/workflows";
+ }, 2000);
+ }
}
}
@@ -3793,28 +3785,20 @@ const AngularWorkflow = (defaultprops) => {
const onNodeDragStop = (event, selectedAction) => {
const nodedata = event.target.data();
if (nodedata.id === selectedAction.id) {
- //console.log("Same node, return")
- return
+ return;
}
if (nodedata.finished === false) {
- //console.log("Node is not finished, return")
- return
+ return;
}
const connected = event.target.connectedEdges().jsons()
if (connected.length > 0 && connected !== undefined) {
for (let connectkey in connected) {
const edge = connected[connectkey]
- if (edge.data.decorator && edge.data.label === releaseToConnectLabel) {
- // Transform to normal edge
- const currentedge = cy.getElementById(edge.data.id)
- if (currentedge !== undefined && currentedge !== null) {
- currentedge.data("decorator", false)
- currentedge.data("label", "")
- }
- continue
- }
+ //console.log("EDGE:", edge)
+
+ //const edge = edgeBase.json()
const sourcenode = cy.getElementById(edge.data.source)
const destinationnode = cy.getElementById(edge.data.target)
@@ -4029,141 +4013,26 @@ const AngularWorkflow = (defaultprops) => {
}
if (nodedata.id === selectedAction.id) {
- return
+ return;
}
-
- if ((nodedata.trigger_type === "SUBFLOW" || nodedata.trigger_type === "USERINPUT" || nodedata.type === "ACTION") && !nodedata.isStartNode) {
- // Check if it already has any non-decorator branches attached to it
- const branches = cy.elements('edge').jsons()
- var branchFound = false
- var decoratorIds = []
- for (var branchkey in branches) {
- if (branches[branchkey].data.source === nodedata.id || branches[branchkey].data.target === nodedata.id) {
-
- if (branches[branchkey].data.decorator === true) {
-
- // Add the source/destination
- if (branches[branchkey].data.source === nodedata.id) {
- decoratorIds.push(branches[branchkey].data.target)
- } else {
- decoratorIds.push(branches[branchkey].data.source)
- }
-
- continue
- }
-
- branchFound = true
- break
- }
- }
-
- if (!branchFound) {
- //console.log("Found action during drag. Checking closest nodes as it doesn't have a valid branch")
- var closestNode = null
- var minDistance = 300
-
- const draggedNode = event.target
- const allnodes = cy.nodes().jsons()
- for (var nodekey in allnodes) {
- const node = allnodes[nodekey]
- if (node.data.id === nodedata.id) {
- continue
- }
-
- // Decorators
- if (node.data.attachedTo !== undefined) {
- continue
- }
-
- if (node.position === undefined || node.position === null || node.position.x === undefined || node.position.y === undefined) {
- continue
- }
-
- if (node.data.type !== "ACTION" && node.data.type !== "TRIGGER") {
- continue
- }
-
- const distance = Math.sqrt(
- Math.pow(draggedNode.position('x') - node.position.x, 2) +
- Math.pow(draggedNode.position('y') - node.position.y, 2)
- )
-
- if (decoratorIds.includes(node.data.id)) {
- //console.log("Found existing decorator for: ", node.data.app_name, "Distance: ", distance)
-
- if (distance > 300) {
- // Remove the branch
- const edgeToRemove = cy.getElementById(branches[branchkey].data.id)
- if (edgeToRemove !== null && edgeToRemove !== undefined) {
- //console.log("Removing edge: ", edgeToRemove)
- edgeToRemove.remove()
- //decoratorIds.splice(decoratorIds.indexOf(node.data.id), 1)
- break
- }
- }
- }
- if (distance < minDistance) {
- minDistance = distance
- closestNode = node
- }
- }
+ /*
+ // Tried looking for the closest node by position. aStar path not working entirely.
+ console.log("NODE: ", event.target)
+ const closestNode = cy.elements().aStar({
+ root: nodedata.id,
+ goal: 'node',
+ directed: false,
+ })
- if (closestNode !== null && closestNode !== undefined) {
- //console.log("Closest node app: ", closestNode.data.app_name, "Distance: ", minDistance)
-
- /*
- if (decoratorIds.length > 0) {
- console.log("Decorators already exists. If within distance of 15 add to existing, otherwise remove old and add new: ", decoratorIds)
- for (var decoratorkey in decoratorIds) {
- const decoratorEdge = cy.getElementById(decoratorIds[decoratorkey])
- if (decoratorEdge === null || decoratorEdge === undefined) {
- continue
- }
-
- const sourceNode = cy.getElementById(decoratorEdge.data.source)
- const targetNode = cy.getElementById(decoratorEdge.data.target)
-
- const distance = Math.sqrt(
- Math.pow(draggedNode.position('x') - sourceNode.position('x'), 2) +
- Math.pow(draggedNode.position('y') - sourceNode.position('y'), 2)
- )
-
- // Check plus minus 15 in distance from mindistance
- if (distance > minDistance - 15 && distance < minDistance + 15) {
- console.log("Within distance of 15, add to existing edge")
- } else {
- console.log("Outside distance of 15, remove old edge and add new")
- }
-
- }
- }
- */
-
- if (decoratorIds.length === 0) {
- //const edgeCurve = calculateEdgeCurve(draggedNode.position(), closestNode.position)
- //currentedge.style('control-point-distance', edgeCurve.distance)
- //currentedge.style('control-point-weight', edgeCurve.weight)
-
- const newId = uuidv4()
- cy.add({
- group: "edges",
- data: {
- decorator: true,
- id: newId,
- _id: newId,
- source: closestNode.data.id,
- target: nodedata.id,
- label: releaseToConnectLabel,
- conditions: [],
- }
- })
- }
- }
- }
- }
+ if (closestNode.found) {
+ console.log("No closest node found for: ", nodedata.id)
+ } else {
+ console.log("Closest: ", closestNode)
+ }
+ */
if (
originalLocation.x === 0 &&
@@ -4222,11 +4091,11 @@ const AngularWorkflow = (defaultprops) => {
}
// Ensure it only happens once
- document.removeEventListener("mousemove", onMouseUpdate, false)
- }
+ document.removeEventListener("mousemove", onMouseUpdate, false);
+ };
- document.addEventListener("mousemove", onMouseUpdate, false)
- }
+ document.addEventListener("mousemove", onMouseUpdate, false);
+ };
useBeforeunload(() => {
@@ -4239,7 +4108,286 @@ const AngularWorkflow = (defaultprops) => {
document.removeEventListener("paste", handlePaste, true);
}
}
- })
+ });
+
+ // Should get AI autocompletes
+ const aiSubmit = (value, setResponseMsg, setSuggestionLoading, inputAction) => {
+ if (setResponseMsg !== undefined) {
+ setResponseMsg("")
+ }
+
+ if (value === undefined || value === "") {
+ console.log("No value input!")
+ return
+ }
+
+ if (setSuggestionLoading !== undefined) {
+ setSuggestionLoading(true)
+ }
+
+ console.log("Submit conversation with value: ", value);
+
+ // This is to find sample response and parse it as string
+
+ var AppContext = []
+ if (inputAction !== undefined && inputAction !== null) {
+ const parents = getParents(inputAction)
+
+ console.log("Parents: ", parents)
+ var actionlist = []
+ if (parents.length > 1) {
+ for (let [key,keyval] in Object.entries(parents)) {
+ const item = parents[key];
+ if (item.label === "Execution Argument") {
+ continue;
+ }
+
+ var exampledata = item.example === undefined || item.example === null ? "" : item.example;
+ // Find previous execution and their variables
+ //exampledata === "" &&
+ if (workflowExecutions.length > 0) {
+ // Look for the ID
+ const found = false;
+ for (let [key,keyval] in Object.entries(workflowExecutions)) {
+ if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
+ continue;
+ }
+
+ var foundResult = workflowExecutions[key].results.find((result) => result.action.id === item.id);
+ if (foundResult === undefined || foundResult === null) {
+ continue;
+ }
+
+ if (foundResult.result !== undefined && foundResult.result !== null) {
+ foundResult = foundResult.result
+ }
+
+ const valid = validateJson(foundResult, true)
+ if (valid.valid) {
+ if (valid.result.success === false) {
+ //console.log("Skipping success false autocomplete")
+ } else {
+ exampledata = valid.result;
+ break;
+ }
+ } else {
+ exampledata = foundResult;
+ }
+ }
+ }
+
+ // 1. Take
+ const itemlabelComplete = item.label === null || item.label === undefined ? "" : item.label.split(" ").join("_");
+
+ const actionvalue = {
+ app_name: item.app_name,
+ action_name: item.name,
+ label: item.label,
+
+ type: "action",
+ id: item.id,
+ name: item.label,
+ autocomplete: itemlabelComplete,
+ example: exampledata,
+ };
+
+ actionlist.push(actionvalue);
+ }
+ }
+
+ var fixedResults = []
+ for (var i = 0; i < actionlist.length; i++) {
+ const item = actionlist[i];
+ const responseFix = SetJsonDotnotation(item.example, "")
+
+ // Check if json
+ const validated = validateJson(responseFix)
+ var exampledata = responseFix;
+ if (validated.valid) {
+ exampledata = JSON.stringify(validated.result)
+ }
+
+ AppContext.push({
+ "app_name": item.app_name,
+ "action_name": item.action_name,
+ "label": item.label,
+ "example": exampledata,
+ "example_response": exampledata,
+ })
+ }
+ }
+
+ var conversationData = {
+ "query": value,
+ "output_format": "action",
+ "app_context": AppContext,
+
+ "workflow_id": workflow.id,
+ }
+
+ if (inputAction !== undefined) {
+ console.log("Add app context! This should them get parameters directly")
+ conversationData.output_format = "action_parameters"
+
+ conversationData.app_id = inputAction.app_id
+ conversationData.app_name = inputAction.app_name
+ conversationData.action_name = inputAction.name
+ conversationData.parameters = inputAction.parameters
+
+ if (!value.includes(inputAction.label)) {
+ conversationData.query = inputAction.label.replaceAll("_", " ")
+ }
+ }
+
+ // Onprem not available yet (April 2023)
+ // Should: Make OpenAI work for them with their own key
+ //fetch("https://shuffler.io/api/v1/conversation", {
+ fetch(`${globalUrl}/api/v1/conversation`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ body: JSON.stringify(conversationData),
+ credentials: "include",
+ })
+ .then((response) => {
+ if (setSuggestionLoading !== undefined) {
+ setSuggestionLoading(false)
+ }
+
+ if (response.status !== 200) {
+ console.log("Status not 200 for stream results :O!");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ console.log("Conversation response: ", responseJson)
+ if (responseJson.success === false) {
+ if (responseJson.reason !== undefined) {
+ if (setResponseMsg !== undefined) {
+ setResponseMsg(responseJson.reason)
+ }
+ }
+
+ return
+ }
+
+ if (inputAction !== undefined) {
+ console.log("In input action! Should check params if they match, and add suggestions")
+
+ if (responseJson.parameters === undefined || responseJson.parameters.length === 0) {
+ return
+ }
+
+ var changed = false
+
+ for (let paramkey in inputAction.parameters) {
+ const actionParam = inputAction.parameters[paramkey]
+
+ if (actionParam.autocompleted === true) {
+ continue
+ }
+
+ if (actionParam.configuration === true && actionParam.name !== "url") {
+ continue
+ }
+
+ if (actionParam.value !== "" && actionParam.value !== actionParam.example) {
+ console.log("Skipping: ", actionParam)
+ continue
+ }
+
+ for (let respParam of responseJson.parameters) {
+ if (respParam.name === actionParam.name) {
+ console.log("Found match for param: ", respParam)
+
+ if (respParam.value === "") {
+ break
+ }
+
+ changed = true
+
+ inputAction.parameters[paramkey].autocompleted = true
+ inputAction.parameters[paramkey].value = respParam.value
+ break
+ }
+ }
+ }
+
+ if (changed === true) {
+ console.log("Setting action! Force update pls :)")
+ setUpdate(Math.random())
+ setSelectedAction(inputAction)
+ }
+
+ return
+ }
+
+ console.log("Suggestionbox location: ", suggestionBox)
+
+ // Add action
+ if (responseJson.app_name !== undefined && responseJson.app_name !== null) {
+ // Always added to 0, 0
+ // Should use suggestionBox.position.x, suggestionBox.position.y
+ var newitem = {
+ "data": responseJson,
+ "position": {
+ "x": suggestionBox.node_position.x !== undefined ? suggestionBox.node_position.x : 0,
+ "y": suggestionBox.node_position.y !== undefined ? suggestionBox.node_position.y + 100 : 0,
+ },
+ "group": "nodes",
+ }
+
+ newitem.type = "ACTION"
+ newitem.isStartNode = false
+ newitem.data.id = uuidv4()
+ newitem.data.type = "ACTION"
+ newitem.data.isStartNode = false
+
+ newitem.data.is_valid = true
+ newitem.data.isValid = true
+
+ cy.add({
+ group: newitem.group,
+ data: newitem.data,
+ position: newitem.position,
+ });
+
+ // Add edge
+ const newId = uuidv4()
+ cy.add({
+ group: "edges",
+ data: {
+ id: newId,
+ _id: newId,
+ source: suggestionBox.attachedTo,
+ target: newitem.data.id,
+ }
+ })
+ //label: "Generated",
+
+ setSuggestionBox({
+ "position": {
+ "top": 500,
+ "left": 500,
+ },
+ "open": false,
+ "attachedTo": "",
+ });
+ }
+ })
+ .catch((error) => {
+ if (setSuggestionLoading !== undefined) {
+ setSuggestionLoading(false)
+ }
+
+ console.log("Conv response error: ", error);
+ });
+ }
+
+
// Nodeselectbatching:
// https://stackoverflow.com/questions/16677856/cy-onselect-callback-only-once
@@ -4250,7 +4398,7 @@ const AngularWorkflow = (defaultprops) => {
//const data = JSON.parse(JSON.stringify(event.target.data()))
const data = event.target.data()
-
+ console.log("===============================Node selected=============================")
console.log("NODE SELECT: ", data)
if (data.app_name === "Shuffle Workflow") {
@@ -4323,6 +4471,7 @@ const AngularWorkflow = (defaultprops) => {
workflow.actions[foundindex].name = curaction.name
setWorkflow(workflow)
+ console.log(workflow)
}
break
}
@@ -5363,10 +5512,11 @@ const AngularWorkflow = (defaultprops) => {
// Checks for errors in edges when they're added
const onEdgeAdded = (event) => {
- const edge = event.target.data()
- //console.log("EDGE ADDED!: ", edge)
+ setLastSaved(false);
+ const edge = event.target.data();
+
+ //console.log("edge added: ", edge)
if (edge.source === undefined && edge.target === undefined) {
- console.log("Edge source and target is undefined")
return
}
@@ -5380,7 +5530,6 @@ const AngularWorkflow = (defaultprops) => {
const sourcenode = cy.getElementById(edge.source)
const destinationnode = cy.getElementById(edge.target)
if (sourcenode === undefined || sourcenode === null || destinationnode === undefined || destinationnode === null) {
- console.log("Source or destination node is undefined")
} else {
//console.log("Edge added: Is it a trigger? If so, check if it already has a branch and remove it: ", sourcenode.data())
if (sourcenode.data("type") === "TRIGGER") {
@@ -5393,10 +5542,10 @@ const AngularWorkflow = (defaultprops) => {
console.log("Node: ", targetedge)
if (targetedge !== -1) {
+ event.target.remove()
//console.log("Found branch already!")
toast.error("Triggers can have exactly one target node")
- event.target.remove()
return
@@ -5417,10 +5566,6 @@ const AngularWorkflow = (defaultprops) => {
}
}
- if (edge.decorator === true) {
- console.log("Doing nothing to branch because decorator")
- return
- }
var targetnode = workflow.triggers.findIndex(
(data) => data.id === edge.target
@@ -5460,14 +5605,15 @@ const AngularWorkflow = (defaultprops) => {
}
}
- if (eventTarget.data("isDescriptor") === true || eventTarget.data("type") === "COMMENT") {
+ if (
+ eventTarget.data("isDescriptor") === true ||
+ eventTarget.data("type") === "COMMENT"
+ ) {
console.log("Removing because of descriptor or comment")
- event.target.remove()
- return
+ event.target.remove();
+ return;
}
-
- setLastSaved(false)
targetnode = -1;
// Check if:
@@ -5475,51 +5621,38 @@ const AngularWorkflow = (defaultprops) => {
// dest == dest && source == source
// backend: check all children? to stop recursion
var found = false;
- const branches = cy.edges().jsons()
-
- const startNode = cy.nodes().jsons().find((node) => node.data.isStartNode === true)
- var startnodeId = workflow.start
- if (startNode !== undefined && startNode !== null) {
- startnodeId = startNode.data.id
- }
-
- //for (let branchkey in workflow.branches) {
- for (let branchkey in branches) {
- const branch = branches[branchkey].data
-
- //if (workflow.branches[branchkey].destination_id === edge.source && workflow.branches[branchkey].source_id === edge.target) {
- if (branch.target === edge.source && branch.source === edge.target) {
- toast("A branch in the opposite direction already exists")
- event.target.remove()
- found = true
- break
-
- //} else if (workflow.branches[branchkey].destination_id === edge.target && workflow.branches[branchkey].source_id === edge.source) {
- } else if (branch.target === edge.target && branch.source === edge.source) {
-
- if (branch.conditions === undefined) {
- // Edgehandles
- } else {
- console.log("Removing because the same branch already exists")
- event.target.remove()
-
- found = true
- break
- }
- } else if (edge.target === startnodeId) {
- targetnode = workflow.triggers.findIndex((data) => data.id === edge.source)
+ for (let branchkey in workflow.branches) {
+ if (
+ workflow.branches[branchkey].destination_id === edge.source &&
+ workflow.branches[branchkey].source_id === edge.target
+ ) {
+ toast("A branch in the opposite direction already exists");
+ event.target.remove();
+ found = true;
+ break;
+ } else if (
+ workflow.branches[branchkey].destination_id === edge.target &&
+ workflow.branches[branchkey].source_id === edge.source
+ ) {
+ //toast("That branch already exists");
+ event.target.remove();
+ found = true;
+ break;
+ } else if (edge.target === workflow.start) {
+ targetnode = workflow.triggers.findIndex(
+ (data) => data.id === edge.source
+ );
if (targetnode === -1) {
if (targetnode.type !== "TRIGGER") {
- toast("Can't make arrow to starting node")
- event.target.remove()
- break
+ toast("Can't make arrow to starting node");
+ event.target.remove();
+ break;
}
found = true;
}
- //} else if (edge.source === workflow.branches[branchkey].source_id) {
- } else if (edge.source === branch.source) {
+ } else if (edge.source === workflow.branches[branchkey].source_id) {
// FIXME: Verify multi-target for triggers
// 1. Check if destination exists
// 2. Check if source is a trigger
@@ -5563,6 +5696,7 @@ const AngularWorkflow = (defaultprops) => {
newdst !== null
) {
const dstdata = RunAutocompleter(newdst.data());
+ //console.log("DST Autocompleter: ", dstdata);
}
var newbranch = {
@@ -8305,11 +8439,15 @@ const AngularWorkflow = (defaultprops) => {
);
};
- const handleSetTab = (event, newValue) => {
- setCurrentView(newValue);
- };
+
const HandleLeftView = () => {
+ // console.log("HandleLeftView Rendered!")
+
+ const handleSetTab = (event, newValue) => {
+ setCurrentView(newValue);
+ };
+
// Defaults to apps.
var thisview = (
-
-
-
- {
- //window.open("/apps/${selectedAction.app_id}", "_blank")
- }}
- >
-
-
-
-
- - {( - selectedAction.app_name.charAt(0).toUpperCase() + - selectedAction.app_name.substring(1) - ).replaceAll("_", " ")} -
-
- {
- if (workflowExecutions.length > 0) {
- // Look for the ID
- var found = false;
- var curResult = null
- for (let [key,keyval] in Object.entries(workflowExecutions)) {
- if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
- continue
- }
-
- var foundResult = workflowExecutions[key].results.find(
- (result) => result.action.id === selectedAction.id
- )
-
- if (foundResult === undefined || foundResult === null) {
- continue
- }
-
- const oldstartnode = cy.getElementById(selectedAction.id)
- if (oldstartnode !== undefined && oldstartnode !== null) {
- const foundname = oldstartnode.data("label")
- if (foundname !== undefined && foundname !== null) {
- foundResult.action.label = foundname
- }
- }
-
- // Not breaking unless necessary
- curResult = foundResult
- found = true
-
- if (curResult.status === "SUCCESS") {
- break
- }
- }
-
- if (curResult !== null) {
- setSelectedResult(curResult)
-
- if (setCodeModalOpen !== undefined) {
- setCodeModalOpen(true)
- }
- }
-
- if (!found) {
- toast.info("No result for this action yet. Please run the workflow first.")
- }
- } else {
- toast.info("No workflow runs to search through. Run the workflow first.")
- }
- }}
- >
-
-
-
- {
- setAuthenticationModalOpen(true)
- }}
- >
-
-
-
- {/*
- {}}
- >
-
-
-
-
-
- */}
- {/*
- {
- //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());
- }}
- >
-
-
-
- */}
- {/*
- {
- }}
- >
-
-
-
-
- */}
- {
- //if (setAiQueryModalOpen !== undefined) {
- // setAiQueryModalOpen(true)
- //} else {
- aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
- //}
- setAutocompleting(true)
- }}
- >
-
- {autoCompleting ?
-
-
-
-
- {/*selectedAction.id === workflow.start ? null :
-
-
-
-
- */}
- {selectedApp.versions !== null &&
- selectedApp.versions !== undefined &&
- selectedApp.versions.length > 1 ? (
-
- ) : null}
-
-
-
-
- )}
- {selectedApp.name !== undefined &&
- selectedAction.authentication !== null &&
- selectedAction.authentication !== undefined &&
- selectedAction.authentication.length === 0 &&
- requiresAuthentication ? (
-
- Name
- {
- // Copy the name value
- const name = e.target.value
- const parsedBaseLabel = "$"+baselabel.toLowerCase().replaceAll(" ", "_")
- const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
-
- // Check if it's the same as the current name in use
- //if (name === selectedAction.label) {
- // console.log("Returning from name thing")
- // return
- //}
-
- // Change in actions, triggers & conditions
- // Highlight the changes somehow with a glow?
- if (workflow.branches !== undefined && workflow.branches !== null) {
- for (let [key,keyval] in Object.entries(workflow.branches)) {
- if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
- for (let [subkey,subkeyval] in Object.entries(workflow.branches[key].conditions)) {
- const condition = workflow.branches[key].conditions[subkey]
- const sourceparam = condition.source
- const destinationparam = condition.destination
-
- // Should have a smarter way of discovering node names
- // Finding index(es) and replacing at the location
- if (sourceparam.value.includes("$")) {
- try {
- var cnt = -1
- var previous = 0
- while (true) {
- cnt += 1
- // Need to make sure e.g. changing the first here doesn't change the 2nd
- // $change_me
- // $change_me_2
-
- const foundindex = sourceparam.value.toLowerCase().indexOf(parsedBaseLabel, previous)
- if (foundindex === previous && foundindex !== 0) {
- break
- }
-
- if (foundindex >= 0) {
- previous = foundindex+newname.length
- // Need to add diff of length to word
-
- // Check location:
- // If it's a-zA-Z_ then don't replace
- if (sourceparam.value.length > foundindex+parsedBaseLabel.length) {
- const regex = /[a-zA-Z0-9_]/g;
- const match = sourceparam.value[foundindex+parsedBaseLabel.length].match(regex);
- if (match !== null) {
- continue
- }
- }
-
- console.log("Old found: ", workflow.branches[key].conditions[subkey].source.value)
- const extralength = newname.length-parsedBaseLabel.length
- sourceparam.value = sourceparam.value.substring(0, foundindex) + newname + sourceparam.value.substring(foundindex-extralength+newname.length, sourceparam.value.length)
-
- console.log("New: ", workflow.branches[key].conditions[subkey].source.value)
- } else {
- break
- }
-
- // Break no matter what after 5 replaces. May need to increase
- if (cnt >= 5) {
- break
- }
-
- }
- } catch (e) {
- console.log("Failed value replacement based on index: ", e)
- }
- }
-
- if (destinationparam.value.includes("$")) {
- try {
- var cnt = -1
- var previous = 0
- while (true) {
- cnt += 1
- // Need to make sure e.g. changing the first here doesn't change the 2nd
- // $change_me
- // $change_me_2
-
- const foundindex = destinationparam.value.toLowerCase().indexOf(parsedBaseLabel, previous)
- if (foundindex === previous && foundindex !== 0) {
- break
- }
-
- if (foundindex >= 0) {
- previous = foundindex+newname.length
- // Need to add diff of length to word
-
- // Check location:
- // If it's a-zA-Z_ then don't replace
- if (destinationparam.value.length > foundindex+parsedBaseLabel.length) {
- const regex = /[a-zA-Z0-9_]/g;
- const match = destinationparam.value[foundindex+parsedBaseLabel.length].match(regex);
- if (match !== null) {
- continue
- }
- }
-
- console.log("Old found: ", workflow.branches[key].conditions[subkey].destination.value)
- const extralength = newname.length-parsedBaseLabel.length
- destinationparam.value = destinationparam.value.substring(0, foundindex) + newname + destinationparam.value.substring(foundindex-extralength+newname.length, destinationparam.value.length)
-
- console.log("New: ", workflow.branches[key].conditions[subkey].destination.value)
- } else {
- break
- }
-
- // Break no matter what after 5 replaces. May need to increase
- if (cnt >= 5) {
- break
- }
-
- }
- } catch (e) {
- console.log("Failed value replacement based on index: ", e)
- }
- }
- }
- }
- }
- }
-
- for (let [key,keyval] in Object.entries(workflow.actions)) {
- if (workflow.actions[key].id === selectedAction.id) {
- continue
- }
-
- const params = workflow.actions[key].parameters
- console.log(params)
- if (params === null || params === undefined) {
- continue
- }
-
- for (let [subkey, subkeyval] in Object.entries(params)) {
- const param = workflow.actions[key].parameters[subkey];
- if (!param.value.includes("$")) {
- continue
- }
-
- // Should have a smarter way of discovering node names
- // Do regex?
- // Finding index(es) and replacing at the location
- //
-
- try {
- var cnt = -1
- var previous = 0
- while (true) {
- cnt += 1
- // Need to make sure e.g. changing the first here doesn't change the 2nd
- // $change_me
- // $change_me_2
-
- const foundindex = param.value.toLowerCase().indexOf(parsedBaseLabel, previous)
- if (foundindex === previous && foundindex !== 0) {
- break
- }
-
- if (foundindex >= 0) {
- previous = foundindex+newname.length
- // Need to add diff of length to word
-
- // Check location:
- // If it's a-zA-Z_ then don't replace
- if (param.value.length > foundindex+parsedBaseLabel.length) {
- const regex = /[a-zA-Z0-9_]/g;
- const match = param.value[foundindex+parsedBaseLabel.length].match(regex);
- if (match !== null) {
- continue
- }
- }
-
- console.log("Old found: ", workflow.actions[key].parameters[subkey].value)
- const extralength = newname.length-parsedBaseLabel.length
- param.value = param.value.substring(0, foundindex) + newname + param.value.substring(foundindex-extralength+newname.length, param.value.length)
-
- console.log("New: ", workflow.actions[key].parameters[subkey].value)
- } else {
- break
- }
-
- // Break no matter what after 5 replaces. May need to increase
- if (cnt >= 5) {
- break
- }
-
- }
- } catch (e) {
- console.log("Failed value replacement based on index: ", e)
- }
- }
- }
-
- setWorkflow(workflow);
- setUpdate(Math.random());
- baselabel = name
- }}
- />
-
- {/*!isCloud ? null :*/}
-
-
-
- Delay
- {
- if (actionDelayChange !== undefined) {
- actionDelayChange(event)
- }
- }}
- />
-
-
-
- {/**/}
-
-
-
-
-
-
-
- ) : null}
-
- {selectedAction.authentication !== undefined &&
- selectedAction.authentication !== null &&
- selectedAction.authentication.length > 0 ? (
-
- Authentication
-
- ) : null}
-
-
- {showEnvironment !== undefined && showEnvironment && environments.length > 1 && !isIntegration ? (
-
-
-
- {/*
-
-
- curaction.authentication = authenticationOptions
- if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "")
- */}
-
- {
- setAuthenticationModalOpen(true);
- }}
- >
-
-
-
-
- Environment
-
-
- ) : null}
-
- {workflow.execution_variables !== undefined &&
- workflow.execution_variables !== null &&
- workflow.execution_variables.length > 0 ? (
-
- Execution variable (optional)
-
-
- ) : null}
-
-
- {/*hideExtraTypes ? null :
- {
- // Most popular
- // Is categorized
- // Uncategorized
- return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
- }}
- renderGroup={(params) => {
-
- return (
-
- {params.group}
- {params.children}
-
- )
- }}
- options={renderedActionOptions}
- ListboxProps={{
- style: {
- backgroundColor: theme.palette.surfaceColor,
- color: "white",
- },
- }}
- filterOptions={(options, { inputValue }) => {
- //console.log("Option contains?: ", inputValue, options)
- const lowercaseValue = inputValue.toLowerCase()
- options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
-
- return options
- }}
- getOptionLabel={(option) => {
- if (option === undefined || option === null || option.name === undefined || option.name === null ) {
- return null;
- }
-
- const newname = (
- option.name.charAt(0).toUpperCase() + option.name.substring(1)
- ).replaceAll("_", " ");
-
- return newname;
- }}
- fullWidth
- style={{
- backgroundColor: theme.palette.inputColor,
- height: 50,
- borderRadius: theme.palette.borderRadius,
- }}
- onChange={(event, newValue) => {
- // Workaround with event lol
- if (newValue !== undefined && newValue !== null) {
- setNewSelectedAction({
- target: {
- value: newValue.name
- }
- });
- }
- }}
- renderOption={(props, data, state) => {
- var newActionname = data.name;
- if (data.label !== undefined && data.label !== null && data.label.length > 0) {
- newActionname = data.label;
- }
-
- var newActiondescription = data.description;
- //console.log("DESC: ", newActiondescription)
- if (data.description === undefined || data.description === null) {
- newActiondescription = "Description: No description defined for this action"
- } else {
- newActiondescription = "Description: "+newActiondescription
- }
-
- const iconInfo = GetIconInfo({ name: data.name });
- const useIcon = iconInfo.originalIcon;
-
- if (newActionname === undefined || newActionname === null) {
- newActionname = "No name"
- data.name = "No name"
- data.label = "No name"
- }
-
- newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
-
- var method = ""
- var extraDescription = ""
- if (data.name.includes("get_")) {
- method = "GET"
- } else if (data.name.includes("post_")) {
- method = "POST"
- } else if (data.name.includes("put_")) {
- method = "PUT"
- } else if (data.name.includes("patch_")) {
- method = "PATCH"
- } else if (data.name.includes("delete_")) {
- method = "DELETE"
- } else if (data.name.includes("options_")) {
- method = "OPTIONS"
- } else if (data.name.includes("connect_")) {
- method = "CONNECT"
- }
-
- // FIXME: Should it require a base URL?
- if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
- var extraUrl = ""
- const descSplit = data.description.split("\n")
- // Last line of descSplit
- if (descSplit.length > 0) {
- extraUrl = descSplit[descSplit.length-1]
- }
-
- //for (let [line,lineval] in Object.entries(descSplit)) {
- // if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
- // const urlsplit = descSplit[line].split("/")
- // try {
- // extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
- // } catch (e) {
- // //console.log("Failed - running with -1")
- // extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
- // }
-
-
- // //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
- // //break
- // }
- //}
-
- if (extraUrl.length > 0) {
- if (extraUrl.includes(" ")) {
- extraUrl = extraUrl.split(" ")[0]
- }
-
- if (extraUrl.includes("#")) {
- extraUrl = extraUrl.split("#")[0]
- }
-
- extraDescription = `${method} ${extraUrl}`
- } else {
- //console.log("No url found. Check again :)")
- }
- }
-
- return (
-
- Actions
-
- */}
-
- {setNewSelectedAction !== undefined ? (
-
-
- {/*
-
-
-
- */}
-
-
+ {conditionsDisabled ?
+