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

One of the final syncs before merges start happening for 2.0

Browse Source
This commit is contained in:
Frikky
2025-02-24 17:50:42 +01:00
parent 5703ce40e4
commit 1ffae87420
20 changed files with 647 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/AngularWorkflow.jsx
+225 -183
View File
@@ -1203,18 +1203,15 @@ const AngularWorkflow = (defaultprops) => {
if (workflowExecutions.length > 0) {
// Look for the ID
for (let execkey in workflowExecutions) {
if (
workflowExecutions[execkey].results === undefined ||
workflowExecutions[execkey].results === null
) {
continue;
if (workflowExecutions[execkey].results === undefined || workflowExecutions[execkey].results === null) {
continue
}
var foundResult = workflowExecutions[execkey].results.find(
(result) => result.action.id === item.id
);
)
if (foundResult === undefined) {
continue;
continue
}
const validated = validateJson(foundResult.result)
@@ -4863,6 +4860,177 @@ const AngularWorkflow = (defaultprops) => {
})
};
// Check if it already has any non-decorator branches attached to it
const findClosestNode = (event, nodedata) => {
if (cy === undefined || cy === null) {
console.log("Cy is undefined or null")
return
}
if (event === undefined || event === null) {
console.log("Event is undefined or null")
return
}
if (event.target === undefined || event.target === null) {
console.log("Event target is undefined or null")
return
}
if (!((nodedata?.trigger_type === "SUBFLOW" || nodedata?.trigger_type === "USERINPUT" || nodedata?.type === "ACTION") && !nodedata?.isStartNode)) {
//console.log("Not a valid node to find closest node for")
return
}
if (nodedata.finished === false) {
//console.log("Node is not finished")
return
}
const branches = cy.elements('edge').jsons()
var branchFound = false
var decoratorNodeIds = []
var decoratorIds = []
for (var branchkey in branches) {
if (branches[branchkey].data.source === nodedata.id || branches[branchkey].data.target === nodedata.id) {
decoratorIds.push(branches[branchkey].data.id)
if (branches[branchkey].data.decorator === true) {
// Add the source/destination
if (branches[branchkey].data.source === nodedata.id) {
decoratorNodeIds.push(branches[branchkey].data.target)
} else {
decoratorNodeIds.push(branches[branchkey].data.source)
}
continue
}
//branchFound = true
//break
}
}
if (!branchFound) {
var relevantNodes = []
const minDistance = 225
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 (decoratorNodeIds.includes(node.data.id)) {
// Drag a little farther to remove it
if (distance > minDistance + 75) {
// Remove the branch? Why?
const edgeToRemove = cy.getElementById(branches[branchkey].data.id)
if (edgeToRemove !== null && edgeToRemove !== undefined) {
//console.log("Removing edge: ", edgeToRemove)
edgeToRemove.remove()
break
}
}
}
if (distance < minDistance) {
relevantNodes.push(node)
//minDistance = distance
//closestNode = node
}
}
for (var key in relevantNodes) {
const closestNode = relevantNodes[key]
if (closestNode.data.app_name === "Webhook" || closestNode.data.app_name === "Schedule") {
return
}
// Checks if the branch already exists between the nodes
if (decoratorIds.length > 0) {
var foundBranch = false
for (var decoratorkey in decoratorIds) {
const decoratorEdge = cy.getElementById(decoratorIds[decoratorkey])
if (decoratorEdge === null || decoratorEdge === undefined) {
continue
}
// Check if source and destination exists with a branch
const sourceId = decoratorEdge.data("source")
const targetId = decoratorEdge.data("target")
if ((sourceId === closestNode.data.id && targetId === nodedata.id) || (sourceId === nodedata.id && targetId === closestNode.data.id)) {
foundBranch = true
break
}
}
if (foundBranch) {
continue
}
}
const newId = uuidv4()
cy.add({
group: "edges",
data: {
decorator: true,
id: newId,
_id: newId,
source: closestNode.data.id,
target: nodedata.id,
label: releaseToConnectLabel,
conditions: [],
}
})
}
}
/*
// FIXME: This is the start of a highlighter for the node
// to better match it up with other elements
// 1. Get current node's position in X/Y on the screen
// 2. Draw a red line on the X and Y axis for positioning
// Draw a red div line in the HTML
const position = event.target.position()
const redline = document.getElementById("redline")
if (redline !== null && redline !== undefined) {
redline.style.display = "block"
redline.style.position = "absolute"
redline.style.left = position.x + "px"
redline.style.top = position.y + "px"
redline.style.height = "10000px"
redline.style.width = 1
console.log("REDLINE!")
}
*/
}
const onNodeDrag = (event, selectedAction) => {
const nodedata = event.target.data();
@@ -4906,161 +5074,9 @@ const AngularWorkflow = (defaultprops) => {
return;
}
// Finds closest partner to show edge to connect to
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
}
}
if (closestNode !== null && closestNode !== undefined) {
if (closestNode.data.app_name === "Webhook" || closestNode.data.app_name === "Schedule") {
return
}
//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: [],
}
})
}
}
}
/*
// FIXME: This is the start of a highlighter for the node
// to better match it up with other elements
// 1. Get current node's position in X/Y on the screen
// 2. Draw a red line on the X and Y axis for positioning
// Draw a red div line in the HTML
const position = event.target.position()
const redline = document.getElementById("redline")
if (redline !== null && redline !== undefined) {
redline.style.display = "block"
redline.style.position = "absolute"
redline.style.left = position.x + "px"
redline.style.top = position.y + "px"
redline.style.height = "10000px"
redline.style.width = 1
console.log("REDLINE!")
}
*/
findClosestNode(event, nodedata)
}
if (originalLocation.x === 0 && originalLocation.y === 0 && nodedata.position !== undefined) {
@@ -5222,7 +5238,9 @@ const AngularWorkflow = (defaultprops) => {
name: item.label,
autocomplete: itemlabelComplete,
example: exampledata,
};
}
console.log("VALUE: ", actionvalue)
actionlist.push(actionvalue);
}
@@ -5736,7 +5754,6 @@ const AngularWorkflow = (defaultprops) => {
return
} else if (data.buttonType === "copy") {
console.log("COPY!");
// 1. Find parent
// 2. Find branches for parent
@@ -6198,8 +6215,10 @@ const AngularWorkflow = (defaultprops) => {
}
}
setSelectedApp(curapp)
setSelectedAction(curaction)
setTimeout(() => {
setSelectedApp(curapp)
setSelectedAction(curaction)
}, 50)
cy.removeListener("drag");
cy.removeListener("free");
@@ -10658,6 +10677,7 @@ const AngularWorkflow = (defaultprops) => {
return
}
// HTML -> Canvas overlap check
if (
e.pageX > cycontainer.offsetLeft
@@ -10670,6 +10690,9 @@ const AngularWorkflow = (defaultprops) => {
return
}
findClosestNode({
target: currentnode,
}, currentnode.data())
currentnode[0].renderedPosition("x", e.pageX - cycontainer.offsetLeft)
currentnode[0].renderedPosition("y", e.pageY - cycontainer.offsetTop)
@@ -17734,10 +17757,24 @@ const AngularWorkflow = (defaultprops) => {
onChange={(e) => {
if (lastSaved === false && originalWorkflow.id === workflow.id) {
setSuborgWorkflows([])
saveWorkflow(workflow, undefined, undefined, e.target.value)
toast.warn(`Saving workflow first due to detected changes. If more than 10 auth`, {
/* Standard re-loads */
setAllTriggers(undefined)
setSelectedTriggerIndex(-1)
getEnvironments(e.target.value)
getAppAuthentication(undefined, undefined, undefined, e.target.value)
getFiles(e.target.value)
listOrgCache(e.target.value)
/* Standard re-loads */
toast.warn(`Saving workflow first due to detected changes.`, {
autoClose: 2000,
})
return
}
@@ -17761,12 +17798,14 @@ const AngularWorkflow = (defaultprops) => {
}
ReactDOM.unstable_batchedUpdates(() => {
/* Standard re-loads */
setAllTriggers(undefined)
setSelectedTriggerIndex(-1)
getEnvironments(e.target.value)
getAppAuthentication(undefined, undefined, undefined, e.target.value)
getFiles(e.target.value)
listOrgCache(e.target.value)
/* Standard re-loads */
// Reset the save button to ensure random saves don't occur during move
setLastSaved(true)
@@ -19035,7 +19074,7 @@ const AngularWorkflow = (defaultprops) => {
{workflow.public || userdata.support == true ?
<Tooltip
color="secondary"
title="Download public workflow"
title="Download workflow"
placement="top-start"
>
<span>
@@ -20038,7 +20077,8 @@ const AngularWorkflow = (defaultprops) => {
}
}
to_be_copied.replaceAll(" ", "_");
to_be_copied = to_be_copied.replaceAll(" ", "_");
console.log("COPY: ", to_be_copied);
const elementName = "copy_element_shuffle";
var copyText = document.getElementById(elementName);
if (copyText !== null && copyText !== undefined) {
@@ -21562,19 +21602,21 @@ const AngularWorkflow = (defaultprops) => {
const checked = validateJson(data.value.trim())
if (data.name === "shuffle_action_logs" && data.value !== undefined && data.value !== null && data.value.length > 0 && data.value.includes("add env SHUFFLE_LOGS_DISABLED")) {
return (
<div style={{ maxWidth: 600, marginTop: 15, overflowX: "hidden", }}>
<Typography
variant="body1"
style={{}}
>
<b>Action Logs</b>
</Typography>
<Typography variant="body2" style={{ whiteSpace: 'pre-line', }}>
Logs for an action are not available without <a style={{ color: "#FF8544", }} href="/admin?tab=locations" target="_blank" rel="noopener noreferrer">an onprem environment</a> with the <a style={{ color: "#FF8544", }} href="/docs/configuration#scaling-shuffle" target="_blank" rel="noopener noreferrer">SHUFFLE_LOGS_DISABLED</a> environment variable set to false: SHUFFLE_LOGS_DISABLED=false. Logs are enabled by default, except in scale mode.
</Typography>
</div>
)
data.value = `Logs for this action are not available without <a style={{ color: "#FF8544", }} href="/admin?tab=locations" target="_blank" rel="noopener noreferrer">an onprem environment</a> with the <a style={{ color: "#FF8544", }} href="/docs/configuration#scaling-shuffle" target="_blank" rel="noopener noreferrer">SHUFFLE_LOGS_DISABLED</a> environment variable set to false: SHUFFLE_LOGS_DISABLED=false. Logs are enabled by default, except in scale mode.`
/*
return (
<div style={{ maxWidth: 600, marginTop: 15, overflowX: "hidden", }}>
<Typography
variant="body1"
style={{}}
>
<b>Action Logs</b>
</Typography>
<Typography variant="body2" style={{ whiteSpace: 'pre-line', }}>
</Typography>
</div>
)
*/
}
var showlink = false
@@ -22139,9 +22181,9 @@ const AngularWorkflow = (defaultprops) => {
variant="h6"
style={{ marginBottom: 0, marginTop: 0 }}
>
Variables <span style={{ fontSize: 10 }}>(click to expand)</span>
Variable & Debug info <span style={{ fontSize: 10 }}>({selectedResult?.action?.parameters?.length})</span>
</Typography>
{selectedResult.action.parameters.map((data, index) => {
{selectedResult?.action?.parameters?.map((data, index) => {
if (data.value.length === 0) {
return null;
}
frontend/src/views/Apps.jsx
+7 -4
View File
@@ -176,16 +176,18 @@ export const GetParsedPaths = (inputdata, basekey) => {
}
if (typeof inputdata !== "object") {
return parsedValues;
return parsedValues
}
for (const [key, value] of Object.entries(inputdata)) {
for (var [key, value] of Object.entries(inputdata)) {
key = key.replaceAll(" ", "_")
// Check if loop or JSON
const extra = basekey.length > 0 ? splitkey : "";
const basekeyname = `${basekey
.slice(1, basekey.length)
.split(".")
.join(splitkey)}${extra}${key}`;
.join(splitkey)}${extra}${key}`
// Handle direct loop!
if (!isNaN(key) && basekey === "") {
@@ -205,7 +207,8 @@ export const GetParsedPaths = (inputdata, basekey) => {
type: "list",
name: `${splitkey}list`,
autocomplete: `${basekey.replaceAll(" ", "_")}.#`,
});
})
const returnValues = GetParsedPaths(value, `${basekey}.#`);
for (var subkey in returnValues) {
parsedValues.push(returnValues[subkey]);
frontend/src/views/Apps2.jsx
+29 -8
View File
@@ -49,7 +49,7 @@ const searchClient = algoliasearch(
);
// AppCard Component
const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab, handleAppClick, leftSideBarOpenByClick, userdata, fetchApps }) => {
const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab, handleAppClick, leftSideBarOpenByClick, userdata, fetchApps, appsToShow, setAppsToShow, setUserApps, }) => {
const navigate = useNavigate();
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000";
const appUrl = isCloud ? `/apps/${data.id}` : `https://shuffler.io/apps/${data.id}`;
@@ -223,6 +223,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
)
}
<Button
disabled={data?.reference_org === userdata?.active_org?.id}
className="deactivate-button"
sx={{
width: 110,
@@ -244,7 +245,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
event.preventDefault();
event.stopPropagation();
const url = `${globalUrl}/api/v1/apps/${data.id}/deactivate`;
toast("Deactivating app. Please wait...");
//toast("Deactivating app. Please wait...");
fetch(url, {
method: 'GET',
headers: {
@@ -256,11 +257,26 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.success === false) {
toast.error(responseJson.reason);
if (responseJson?.reason !== undefined && responseJson?.reason !== null && responseJson?.reason !== "") {
toast.error(responseJson.reason);
} else {
toast.error("Failed to deactivate app. Please try again later.")
}
} else {
toast.success("App Deactivated Successfully.");
fetchApps();
}
toast.success("App deactivated successfully. Will take effect on refresh..")
/*
// This somehow didn't work
if (appsToShow !== undefined && appsToShow !== null && appsToShow.length > 0) {
const newApps = appsToShow?.filter((app) => app.id !== data.id)
if (newApps !== undefined && newApps !== null && newApps.length > 0) {
setAppsToShow(newApps)
setUserApps(newApps)
}
}
}
*/
}
})
.catch(error => {
console.log("app error: ", error.toString());
@@ -1860,8 +1876,6 @@ const Apps2 = (props) => {
color: "#FF8544"
}
console.log("User", userdata)
return (
<div style={{ paddingTop: 70, paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease", backgroundColor: "#1A1A1A", fontFamily: theme?.typography?.fontFamily, zoom: 0.7, }}>
<InstantSearch searchClient={searchClient} indexName="appsearch">
@@ -2247,6 +2261,10 @@ const Apps2 = (props) => {
leftSideBarOpenByClick={leftSideBarOpenByClick}
userdata={userdata}
fetchApps={fetchApps}
setUserApps={setUserApps}
appsToShow={appsToShow}
setAppsToShow={setAppsToShow}
/>
))}
</div>
@@ -2296,6 +2314,9 @@ const Apps2 = (props) => {
<AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab} userdata={userdata}
handleAppClick={handleAppClick} leftSideBarOpenByClick={leftSideBarOpenByClick}
fetchApps={fetchApps}
setUserApps={setUserApps}
appsToShow={appsToShow}
setAppsToShow={setAppsToShow}
/>
))}
</div>
frontend/src/views/RunWorkflow.jsx
+18
View File
@@ -77,6 +77,24 @@ const RunWorkflow = (defaultprops) => {
const [boxWidth, setBoxWidth] = React.useState(500)
const [inputQuestions, setInputQuestions] = React.useState([])
useEffect(() => {
if (workflow === undefined || workflow === null || Object.keys(workflow).length === 0) {
return
}
if (workflow.input_questions === undefined || workflow.input_questions === null) {
return
}
// Checks if it's a user input-node based or not
if ((answer !== undefined && answer !== null) || (foundSourcenode !== undefined && foundSourcenode !== null)) {
} else {
setInputQuestions(workflow.input_questions)
setUpdate(Math.random())
}
}, [workflow])
const IframeWrapper = (props) => {
var propsCopy = JSON.parse(JSON.stringify(props))
propsCopy.width = 400
frontend/src/views/Welcome.jsx
+1
View File
@@ -447,6 +447,7 @@ const Welcome = (props) => {
}
navigate("/welcome?tab=2")
setActiveStep(1)
setShowWelcome(true)
}}>
<CardActionArea style={actionObject}>
frontend/src/views/Workflows.jsx
+14 -2
View File
@@ -553,6 +553,10 @@ export const validateJson = (showResult) => {
// Check fields if they can be parsed too
try {
for (const [key, value] of Object.entries(result)) {
if (typeof value === "string") {
value = value.replaceAll(" ", "_")
}
if (typeof value === "string" && (value.startsWith("{") || value.startsWith("["))) {
//console.log("CHECKING STRING: ", value)
@@ -573,6 +577,10 @@ export const validateJson = (showResult) => {
// Usually only reaches here if raw array > dict > value
if (typeof showResult !== "array") {
for (const [subkey, subvalue] of Object.entries(value)) {
if (typeof subvalue === "string") {
subvalue = subvalue.replaceAll(" ", "_")
}
if (typeof subvalue === "string" && (subvalue.startsWith("{") || subvalue.startsWith("["))) {
const inside_result = validateJson(subvalue)
if (inside_result.valid) {
@@ -1841,9 +1849,13 @@ const Workflows = (props) => {
var parsedworkflows = [];
for (var key in newSubflows) {
if (key === data.id) {
continue
}
const foundWorkflow = workflows.find(
(workflow) => workflow.id === newSubflows[key]
);
)
if (foundWorkflow !== undefined && foundWorkflow !== null) {
parsedworkflows.push(foundWorkflow);
}
@@ -1854,7 +1866,7 @@ const Workflows = (props) => {
"Appending subflows during export: ",
parsedworkflows.length
);
data.subflows = parsedworkflows;
data.subflows = parsedworkflows
}
}
frontend/src/views/Workflows2.jsx
+4 -1
View File
@@ -1935,6 +1935,10 @@ const Workflows2 = (props) => {
var parsedworkflows = [];
for (var key in newSubflows) {
if (key === data.id) {
continue
}
const foundWorkflow = workflows.find(
(workflow) => workflow.id === newSubflows[key]
);
@@ -2362,7 +2366,6 @@ const Workflows2 = (props) => {
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
disabled={isDistributed}
onClick={() => {
setDeleteModalOpen(true);
setSelectedWorkflowId(data.id);