Do you want to add this suggestion?
{
setVariableInfo({
"name": variable.name,
"description": variable.description,
"value": variable.value,
"index": index,
})
if (type === "normal") {
setVariablesModalOpen(true);
} else if (type === "exec") {
setExecutionVariablesModalOpen(true);
} else {
console.log("Unknown type: ", type)
}
}}
>
Name: {variable.name}
What are{" "}
Workflow variables?
{workflow.workflow_variables === null
? null
: workflow.workflow_variables.map((variable, varindex) => {
return (
{thisview}
{triggers.map((trigger, index) => {
const imagesize = isMobile ? 40 : trigger.large_image.includes("svg") ? 80 : 80
var imageline = trigger.large_image.length === 0 ? ![]()
:
const title = trigger.trigger_type === "WEBHOOK" ? "Workflow starters" : trigger.trigger_type === "SUBFLOW" ? "Mid-Workflow" : ""
const color = trigger.is_valid ? green : yellow;
return (
{title.length > 0 ?
{title}
: null}
{
handleTriggerDrag(e, trigger);
}}
onStop={(e) => {
handleDragStop(e);
}}
dragging={false}
position={{
x: 0,
y: 0,
}}
>
{ }}>
{imageline}
{isMobile ? null :
{trigger.description}
}
);
})}
{trigger.name}
-
{hits.length === 0 ?
{
//if (!isCloud) {
// toast("Since this is an on-prem instance. You will need to activate the app yourself. Opening link to download it in a new window.")
// setTimeout(() => {
// event.preventDefault()
// window.open(parsedUrl, '_blank')
// }, 2000)
//} else {
toast(`Activating ${name}`)
//}
console.log("CLICK: ", hit)
const queryID = hit.__queryID
console.log("QUERY: ", queryID)
if (queryID !== undefined && queryID !== null) {
aa('init', {
appId: "JNSS5CFDZZ",
apiKey: "db08e40265e2941b9a7d8f644b6e5240",
})
const timestamp = new Date().getTime()
aa('sendEvents', [
{
eventType: 'conversion',
eventName: 'Public App Activated',
index: 'appsearch',
objectIDs: [hit.objectID],
timestamp: timestamp,
queryID: queryID,
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
}
])
} else {
console.log("No query to handle when activating")
}
activateApp(hit.objectID, true)
}}>
{
setMouseHoverIndex(index)
}}>
{avatar}
*/}
)
})
}
{visibleApps.map((app, index) => {
if (app.invalid) {
return null;
}
var extraMessage = ""
if (index == 2) {
extraMessage =
}
delay += 75
return (
runDelay ?
{/**/}
*/}
:
) : apps.length > 0 ? (
{extraMessage}
)
})}
{visibleApps.length <= 4 ? (
{
}}
>
Click one of the relevant public apps below to Activate it for your organization.
{
console.log("CLICKED")
}}>
) : null}
{
console.log("Should load in extra apps?")
}}
>
Couldn't find the apps you were looking for? Searching unactivated apps. Click one of the below apps to Activate it for your organization.
{
console.log("CLICKED")
}}>
) : (
{data.name}
{
setSourceValue(condition.source);
setConditionValue(condition.condition);
setDestinationValue(condition.destination);
setConditionsModalOpen(true);
}}
>
{condition.source.value}
{ }}
>
{condition.condition.value}
{condition.destination.value}
Branch: Conditions - {selectedEdgeIndex}
What are conditions?Conditions
{injectedData}
{/* Check if dest is the same as start */}
{conditionsDisabled ?
{selectedTrigger.status === "running" ? null : (
{outlookButton}
{gmailButton}
If you have trouble using this trigger, please contact us to get access
)}
{triggerFolders === undefined || triggerFolders === null ? null : (
{triggerFolders.length === 0 ?
No folders found. Please authenticate first. If this persists, contact us.
:
}
)}
);
} else if (triggerAuthentication.type === "gmail") {
console.log("AUTH: ", triggerAuthentication);
triggerInfo = "SPECIAL GMAIL";
}
}
// Check
const argumentView =
Object.getOwnPropertyNames(triggerAuthentication).length > 0 ? (
Change auth
Select {triggerAuthentication.type === "gmail" ? "labels" : "a folder"}
{triggerInfo}
) : (
Login
{selectedTrigger.app_name}: {selectedTrigger.status}
What are email triggers?Name
Environment:
*/}
{selectedTrigger.app_name}
What are subflows?Wait for results
}
/>
Select a workflow to execute
Select the Startnode
Execution Argument
API-key
Comment
What are comments?Name
Height
Width
Background
Text Color
Background-Image
{selectedTrigger.app_name}: {selectedTrigger.status}
What are webhooks?Name
Parameters
{
}}
helperText={
workflow.triggers[selectedTriggerIndex].parameters[0].value !== undefined &&
workflow.triggers[selectedTriggerIndex].parameters[0].value !== null &&
(workflow.triggers[
selectedTriggerIndex
].parameters[0].value.includes("localhost") ||
workflow.triggers[
selectedTriggerIndex
].parameters[0].value.includes("127.0.0.1")) ? (
PS: This does NOT work with localhost. Use your local IP
instead.
) : null
}
InputProps={{
style: {
},
endAdornment:
{
var copyText = document.getElementById("webhook_uri_field");
if (copyText !== undefined && copyText !== null) {
console.log("NAVIGATOR: ", navigator);
const clipboard = navigator.clipboard;
if (clipboard === undefined) {
toast("Can only copy over HTTPS (port 3443)");
return;
}
navigator.clipboard.writeText(copyText.value);
copyText.select();
copyText.setSelectionRange(
0,
99999
); /* For mobile devices */
/* Copy the text inside the text field */
document.execCommand("copy");
toast("Copied Webhook URL");
} else {
console.log("Couldn't find webhook URI field: ", copyText);
}
}}
edge="end"
>
}}
fullWidth
disabled
value={
workflow.triggers[selectedTriggerIndex].parameters[0].value
}
color="primary"
placeholder="10"
onBlur={(e) => {
setTriggerCronWrapper(e.target.value);
}}
/>
{ }}
InputProps={{
style: {
},
}}
fullWidth
multiline
rows="4"
defaultValue={trigger_header_auth}
color="primary"
disabled={selectedTrigger.status === "running"}
placeholder={"AUTH_HEADER=AUTH_VALUE1"}
onBlur={(e) => {
const value = e.target.value;
if (selectedTrigger.parameters === null) {
selectedTrigger.parameters = [];
}
workflow.triggers[selectedTriggerIndex].parameters[2] = {
value: value,
name: "auth_headers",
};
setWorkflow(workflow);
}}
/>
{ }}
InputProps={{
style: {
},
}}
fullWidth
multiline
rows="2"
color="primary"
disabled={selectedTrigger.status === "running"}
placeholder={"OK"}
onBlur={(e) => {
const value = e.target.value;
if (selectedTrigger.parameters === null) {
selectedTrigger.parameters = [];
}
workflow.triggers[selectedTriggerIndex].parameters[3] = {
value: value,
name: "custom_response_body",
};
setWorkflow(workflow);
}}
/>
{workflow.triggers[selectedTriggerIndex].parameters.length > 4 ?
{
if (selectedTrigger.parameters === null) {
selectedTrigger.parameters = [];
}
// Sets the webhook to run as version 2.. kinda
var value = "v2"
if (workflow.triggers[selectedTriggerIndex].parameters[4].value.includes("v2")) {
value = "v1"
}
workflow.triggers[selectedTriggerIndex].parameters[4] = {
name: "await_response",
value: value
}
setWorkflow(workflow)
setUpdate(Math.random())
}}
color="primary"
value="await_response"
/>
}
label={
: null}
Webhook URI
Authentication headers
Custom Response
Wait For Response
}
/>
{selectedTrigger.app_name}
What is the user input trigger?Name
Environment:
*/}
Information
The information you want to show the user. Supports variables.
Input options
Use subflows to connect to any app you want, or use the default email and sms options
Subflow
}
/>
Email
}
/>
SMS
}
/>
{workflows === undefined ||
workflows === null ||
workflows.length === 0 ? null : (
option.id === value.id}
getOptionLabel={(option) => {
if (option === undefined || option === null || option.name === undefined || option.name === null) {
return "No Workflow Selected";
}
const newname = (option.name.charAt(0).toUpperCase() + option.name.substring(1)).replaceAll("_", " ");
return newname;
}}
options={workflows}
fullWidth
style={{
backgroundColor: theme.palette.inputColor,
height: 50,
borderRadius: theme.palette.borderRadius,
marginTop: 15,
marginBottom: 15,
}}
onChange={(event, newValue) => {
console.log("Changed autocomplete!")
handleWorkflowSelectionUpdate({ target: { value: newValue } }, true)
}}
renderOption={(props, data, state) => {
if (data.id === workflow.id) {
data = workflow;
}
return (
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
: null}
Choose {data.name}
} placement="bottom">
)
}}
renderInput={(params) => {
return (
) : null}
{workflow.triggers[selectedTriggerIndex].parameters[2] !==
undefined &&
workflow.triggers[selectedTriggerIndex].parameters[2].value.includes("email") ? (
{selectedTrigger.app_name}: {selectedTrigger.status}
What are schedules?Name
Parameters
{
setTriggerCronWrapper(e.target.value);
}}
/>
{/*selectedTrigger.environment === "cloud" ?
1 ?
workflow.triggers[selectedTriggerIndex].parameters[1].value
: ""
}
placeholder='{"example": {"json": "is cool"}}'
onBlur={(e) => {
setTriggerBodyWrapper(e.target.value);
}}
/>
Interval (UTC)
Execution argument:
{workflow.name}
{parentWorkflows.slice(0,5).map((wf, index) => {
return (
{wf.image !== undefined && wf.image !== null && wf.image.length > 0 ?
: null}
Parent workflow: '{wf.name}'
} placement="bottom">
{
console.log("Click: ", wf)
}}>
)
})}
{connectedUsers.map((user) => {
return (
)
}
const showErrors = !isMobile && !workflow.public && workflow.errors !== undefined && workflow.errors !== null && workflow.errors.length > 0 ?
- {newerror}
)
})}
setHovered(true)}
onMouseLeave={() => setHovered(false)}
onClick={() => {
setExecutionModalOpen(true);
getWorkflowExecution(props.match.params.key, "");
}}
>
Explore runs
{/*
)
}
const BottomCytoscapeBar = () => {
if (workflow.id === undefined || workflow.id === null || (!workflow.public && apps.length === 0)) {
return null;
}
const boxSize = isMobile ? 50 : 100;
const executionButton = executionRunning ? (
{executionButton}
);
};
const addCommentNode = () => {
const newId = uuidv4();
const position = {
x: 300,
y: 300,
};
cy.add({
group: "nodes",
data: {
id: newId,
label: "Click to write a comment",
type: "COMMENT",
is_valid: true,
decorator: true,
width: 250,
height: 150,
position: position,
backgroundcolor: "#1f2023",
color: "#ffffff",
},
position: position,
});
};
const RightSideBar = (props) => {
const {
//workflow,
//setWorkflow,
//setSelectedAction,
//setUpdate,
//selectedApp,
//workflowExecutions,
//setSelectedResult,
//selectedAction,
//setSelectedApp,
//setSelectedTrigger,
//setSelectedEdge,
//setCurrentView,
//cy,
//setAuthenticationModalOpen,
//setVariablesModalOpen,
//setCodeModalOpen,
//selectedNameChange,
//rightsidebarStyle,
//showEnvironment,
//selectedActionEnvironment,
//environments,
//setNewSelectedAction,
//appApiViewStyle,
//globalUrl,
//setSelectedActionEnvironment,
//requiresAuthentication,
//scrollConfig,
//setScrollConfig,
} = props;
if (!rightSideBarOpen) {
return null;
}
var defaultReturn = null
if (Object.getOwnPropertyNames(selectedAction).length > 0) {
if (Object.getOwnPropertyNames(selectedAction).length === 0) {
return null;
}
defaultReturn =
{isMobile || workflow.public ? null : (
{
setExecutionText(e.target.value);
}}
/>
)}
{/*userdata.avatar === creatorProfile.github_avatar ? null :*/}
{workflow.public || userdata.support == true ? (
) : null}
{workflow.configuration !== null &&
workflow.configuration !== undefined &&
workflow.configuration.exit_on_error !== undefined ? (
{defaultReturn}
{workflow.tags.map((tag, index) => {
if (index >= 3) {
return null;
}
return (
{
setLeftViewOpen(true);
setLeftBarSize(350);
}}
>
Execution Argument
{executionData.execution_argument}
{workflowExecutions.map((data, index) => {
executionDelay += 50
const statusColor =
data.status === "FINISHED"
? green : data.status === "ABORTED" || data.status === "FAILED"
? "red"
: yellow;
const resultsLength =
data.results !== undefined && data.results !== null
? data.results.length
: 0;
const timestamp = new Date(data.started_at * 1000)
.toLocaleString("en-GB")
.split(".")[0]
.split("T")
.join(" ");
var calculatedResult =
data.workflow.actions !== undefined &&
data.workflow.actions !== null
? data.workflow.actions.length
: 0;
if (data.workflow.triggers !== undefined && data.workflow.triggers !== null) {
for (let triggerkey in data.workflow.triggers) {
const trigger = data.workflow.triggers[triggerkey];
if (
(trigger.app_name === "User Input" &&
trigger.trigger_type === "USERINPUT") ||
(trigger.app_name === "Shuffle Workflow" &&
trigger.trigger_type === "SUBFLOW")
) {
calculatedResult += 1;
}
}
}
return (
{/**/}
{ }}
onMouseOut={() => { }}
onClick={() => {
if ((data.result === undefined || data.result === null || data.result.length === 0) && data.status !== "FINISHED" && data.status !== "ABORTED") {
start();
setExecutionRunning(true);
setExecutionRequestStarted(false);
}
navigate(`?execution_id=${data.execution_id}`)
// Ensuring we have the latest version of the result.
// Especially important IF the result is > 1 Mb in cloud
var checkStarted = false
if (data.results !== undefined && data.results !== null && data.results.length > 0) {
if (data.execution_argument !== undefined && data.execution_argument !== null && data.execution_argument.includes("too large")) {
setExecutionData({});
checkStarted = true
start();
setExecutionRunning(true);
setExecutionRequestStarted(false);
} else {
if (data.results !== undefined && data.results !== null) {
for (let resultkey in data.results) {
if (data.results[resultkey].status !== "SUCCESS") {
continue
}
if (data.results[resultkey].result.includes("too large")) {
setExecutionData({});
checkStarted = true
start();
setExecutionRunning(true);
setExecutionRequestStarted(false);
break
}
}
}
}
}
const cur_execution = {
execution_id: data.execution_id,
authorization: data.authorization,
};
setExecutionRequest(cur_execution);
setExecutionModalView(1);
if (!checkStarted) {
handleUpdateResults(data, cur_execution);
if (cy !== undefined && cy !== null) {
cy.elements().removeClass("success-highlight failure-highlight executing-highlight");
for (let actionKey in data.workflow.actions) {
var actionitem = data.workflow.actions[actionKey];
handleColoring(actionitem.id, "", actionitem.label)
}
for (let resultKey in data.results) {
var item = data.results[resultKey];
handleColoring(item.action.id, item.status, item.action.label)
}
}
setExecutionData(data);
}
}}
>
) : null}
{lastExecution === data.execution_id ? (
);
})}
) : (
{getExecutionSourceImage(data)}
{timestamp}
{data.workflow.actions !== null ? (
{resultsLength}/{calculatedResult}
{ const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search; const newitem = removeParam("execution_id", cursearch); navigate(curpath + newitem) setExecutionRunning(false); stop() }} > See more runs
Details
{executionData.status !== undefined &&
executionData.status !== "ABORTED" &&
executionData.status !== "FINISHED" &&
executionData.status !== "FAILURE" &&
executionData.status !== "WAITING" &&
!(executionData.results === undefined || executionData.results === null || (executionData.results.length === 0 && executionData.status === "EXECUTING")) ? (
{
console.log(environments, defaultEnvironmentIndex, nonskippedResults)
}} />
{environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? Find out here. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: support@shuffler.io
: null}
) : null}
{
if (cy == undefined || cy == null) {
return
}
var currentnode = cy.getElementById(data.action.id);
if (currentnode !== undefined && currentnode !== null && currentnode.length !== 0) {
currentnode.addClass("shuffle-hover-highlight");
}
// Add a hover highlight
//var copyText = document.getElementById(
// "copy_element_shuffle"
//)
}}
onMouseOut={() => {
if (cy == undefined || cy == null) {
return
}
var currentnode = cy.getElementById(data.action.id);
if (currentnode.length !== 0) {
currentnode.removeClass("shuffle-hover-highlight");
}
}}
>
{
if (cy !== undefined) {
const oldstartnode = cy.getElementById(data.action.id);
//console.log("FOUND NODe: ", oldstartnode)
if (oldstartnode !== undefined && oldstartnode !== null) {
const foundname = oldstartnode.data("label")
if (foundname !== undefined && foundname !== null) {
data.action.label = foundname
}
}
//console.log("Click data: ", data)
//data.action.label = ""
setSelectedResult(data);
setCodeModalOpen(true);
} else {
toast("Please wait until the workflow is loaded and try again")
setCodeModalOpen(true)
setSelectedResult(data)
}
}}
>
{actionimg}
{data.action.name}
{data.action.app_name === "shuffle-subflow" &&
validate.result.success !== undefined &&
validate.result.success === true ? (
{validate.valid &&
data.action.parameters !== undefined &&
data.action.parameters !== null &&
data.action.parameters.length > 0 ? (
data.action.parameters[0].value ===
props.match.params.key ? (
{
getWorkflowExecution(
props.match.params.key,
validate.result.execution_id
);
}}
>
Status
{data.status}
{similarActionsView}
{validate.valid ? (
{
handleReactJsonClipboard(copy);
}}
displayDataTypes={false}
onSelect={(select) => {
HandleJsonCopy(showResult, select, data.action.label);
console.log("SELECTED!: ", select);
}}
name={"Results for " + data.action.label}
/>
) : (
Result
{data.result}
)}
);
})
)}
)}
{data.action.label === undefined || data.action.label === null || data.action.label === "" ? data.action.label : data.action.label.replaceAll("_", " ")}
{data.value.length > 60 || checked.valid ?
{
if (!showVariable) {
setOpen(!open)
}
}}
>
{data.name}
{checked.valid ?
:
{data.name}: {showVariable ? data.value : null}
}
{open ?
checked.valid ?
{data.value}
: null}
)
}
var draggingDisabled = false;
const codePopoutModal = !codeModalOpen ? null : (
);
const newView = (
{/*isMobile ? null : leftView*/}
{leftView}
{workflow.id === undefined || workflow.id === null || appsLoaded === false ? (
Loading Workflow
) : (
{/**/}
{
// FIXME: There's something specific loading when
// you do the first hover of a node. Why is this different?
setCy(incy);
}}
/>
)}
{executionModal}
{Object.getOwnPropertyNames(selectedTrigger).length > 0 ?
selectedTrigger.trigger_type === "SCHEDULE" ?
ScheduleSidebar
: selectedTrigger.trigger_type === "WEBHOOK" ?
WebhookSidebar
: null
: null}
: null}
{/*
Authentication for {selectedApp.name.replaceAll("_", " ", -1)}
{/*
{
e.preventDefault();
setSuggestionBox({
"position": {
"top": 500,
"left": 500,
},
"open": false,
"value": "",
"loading": false,
});
}}
>
{suggestionLoading === true ?
{responseMsg}
: null}
)
}
/*else if (selectedRevision === undefined || selectedRevision === null || selectedRevision == {} && originalWorkflow !== undefined && originalWorkflow !== null && originalWorkflow !== {}) {
console.log("Setting original workflow as selected revision")
setSelectedRevision(originalWorkflow)
}*/
const RevisionBox = (props) => {
const { revision, } = props
if (revision === undefined || revision === null || revision === {}) {
return null
}
// Make unix timestamp into ISO timestamp in the format July 27th, 3:05 AM
// Format: July 27th, 3:05 AM
console.log("Edited time: ", revision.edited)
// Convert 1692128391 to valid timestamp
const validTimestamp = revision.edited.toString().length === 10 ? revision.edited * 1000 : revision.edited
const translatedDate = new Date(validTimestamp).toLocaleString('en-US', { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
var workflowStatus = revision.status !== undefined && revision.status !== null && revision.status !== "" ? revision.status : "test"
if (revision.name !== undefined && revision.name !== null && revision.name !== "") {
if (revision.name.toLowerCase().includes("test")) {
workflowStatus = "test"
}
if (revision.name.toLowerCase().includes("dev") || revision.name.toLowerCase().includes("staging") || revision.name.toLowerCase().includes("rollback")) {
workflowStatus = "dev"
}
if (revision.name.toLowerCase().includes("prod") || revision.name.toLowerCase().includes("main")) {
workflowStatus = "prod"
}
}
return (
{revision.actions !== undefined && revision.actions !== null ?
{revision.actions.length}
: null}
{revision.triggers !== undefined && revision.triggers !== null ?
{revision.triggers.length}
: null}
{revision.updated_by !== undefined && revision.updated_by !== null && revision.updated_by !== "" ?
{/*selectedRevision.edited !== undefined && selectedRevision.edited !== null && selectedRevision.edited !== originalWorkflow.edited ?
: null*/}
{newView}
{
setSelectionOpen(false)
}}
>
{
setShowVideo("")
}}
>
: null}
) : (
);
// Awful way of handling scroll
if (scrollConfig !== undefined && setScrollConfig !== undefined && Object.getOwnPropertyNames(selectedAction).length !== 0) {
const rightSideActionView = document.getElementById("rightside_actions");
if (rightSideActionView !== undefined && rightSideActionView !== null) {
if (scrollConfig.top !== null && scrollConfig.top !== undefined && scrollConfig.top !== 0) {
setTimeout(() => {
if (scrollConfig.selected !== undefined && scrollConfig.selected !== null) {
const selectedField = document.getElementById(scrollConfig.selected)
if (selectedField !== undefined && selectedField !== null) {
selectedField.focus()
}
}
}, 5);
} else {
if (rightSideActionView.scrollTop !== scrollConfig.top) {
setScrollConfig({
top: rightSideActionView.scrollTop,
left: 0,
selected: "",
});
}
}
}
}
return (
{/* Removed due to missing react router features
);
};
export default AngularWorkflow;