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

Fixed code editor and small ui changes in workflow ui

Browse Source
This commit is contained in:
Frikky
2024-03-15 14:39:50 +01:00
parent b5d04bef13
commit b8e9599053
5 changed files with 644 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ParsedAction.jsx
+70 -12
View File
@@ -117,7 +117,7 @@ const openApiFieldDesc = "Generated by OpenAPI body example";
const ParsedAction = (props) => {
const {
workflow,
files,
files,
setWorkflow,
setAction,
setSelectedAction,
@@ -456,14 +456,33 @@ const ParsedAction = (props) => {
if (workflow.execution_variables !== null && workflow.execution_variables !== undefined && workflow.execution_variables.length > 0) {
for (let [key,keyval] in Object.entries(workflow.execution_variables)) {
const item = workflow.execution_variables[key];
const item = workflow.execution_variables[key]
var exampleoutput = ""
for (let execkey in workflowExecutions) {
const exec = workflowExecutions[execkey]
if (exec["execution_variables"] === undefined || exec["execution_variables"] === null) {
continue
}
const foundExec = exec.execution_variables.find((exvar) => exvar.name === item.name)
if (!foundExec) {
continue
}
if (foundExec.value !== undefined && foundExec.value !== null && foundExec.value.length > 0) {
exampleoutput = foundExec.value
break
}
}
actionlist.push({
type: "execution_variable",
name: item.name,
value: item.value,
id: item.id,
autocomplete: `${item.name.split(" ").join("_")}`,
example: "",
example: exampleoutput,
});
}
}
@@ -2711,11 +2730,39 @@ const ParsedAction = (props) => {
)
}
//const CustomPopper = function (props) {
// const classes = useStyles()
// return <Popper {...props} className={classes.root} placement="bottom" />
//}
//console.log("env: ", selectedActionEnvironment)
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
}
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))
var baselabel = selectedAction.label;
return (
@@ -2743,7 +2790,7 @@ const ParsedAction = (props) => {
onClick={() => {
if (workflowExecutions.length > 0) {
// Look for the ID
const found = false;
var found = false;
for (let [key,keyval] in Object.entries(workflowExecutions)) {
if (workflowExecutions[key].results === undefined || workflowExecutions[key].results === null) {
continue;
@@ -2758,7 +2805,6 @@ const ParsedAction = (props) => {
}
const oldstartnode = cy.getElementById(selectedAction.id);
console.log("FOUND NODe: ", oldstartnode)
if (oldstartnode !== undefined && oldstartnode !== null) {
const foundname = oldstartnode.data("label")
if (foundname !== undefined && foundname !== null) {
@@ -2769,10 +2815,16 @@ const ParsedAction = (props) => {
setSelectedResult(foundResult);
if (setCodeModalOpen !== undefined) {
setCodeModalOpen(true);
found = true
}
break;
}
if (!found) {
toast("No result for this action yet. Please run the workflow first.")
}
}
}}
>
@@ -2804,6 +2856,7 @@ const ParsedAction = (props) => {
<DescriptionIcon style={{ color: "rgba(255,255,255,0.7)" }} />
</Tooltip>
</IconButton>
{/*
<IconButton
style={{
marginTop: "auto",
@@ -2829,6 +2882,7 @@ const ParsedAction = (props) => {
</Tooltip>
</a>
</IconButton>
*/}
{/*
<IconButton
style={{
@@ -2865,6 +2919,7 @@ const ParsedAction = (props) => {
</Tooltip>
</IconButton>
*/}
{/*
<IconButton
style={{
marginTop: "auto",
@@ -2886,6 +2941,7 @@ const ParsedAction = (props) => {
</a>
</Tooltip>
</IconButton>
*/}
<IconButton
style={{
marginTop: "auto",
@@ -2906,7 +2962,7 @@ const ParsedAction = (props) => {
>
<Tooltip
color="primary"
title={"Autocomplete fields. Will show a popup so that you can query how you would like to fill it in"}
title={"Autocomplete fields. Uses the name of the current action, the fields and previous actions' results"}
placement="top"
>
{autoCompleting ?
@@ -3560,6 +3616,8 @@ const ParsedAction = (props) => {
return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
}}
renderGroup={(params) => {
//return null
return (
<li key={params.key}>
<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
@@ -3567,7 +3625,7 @@ const ParsedAction = (props) => {
</li>
)
}}
options={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"))}
options={renderedActionOptions}
ListboxProps={{
style: {
backgroundColor: theme.palette.surfaceColor,
frontend/src/components/ShuffleCodeEditor1.jsx
+9 -13
View File
@@ -676,6 +676,8 @@ const CodeEditor = (props) => {
for (var i = 0; i < found.length; i++) {
try {
const fixedVariable = fixVariable(found[i])
// Finding if the value is in the list at all, and does initial replacement
var valuefound = false
for (var j = 0; j < actionlist.length; j++) {
if(fixedVariable.slice(1,).toLowerCase() !== actionlist[j].autocomplete.toLowerCase()){
@@ -697,12 +699,13 @@ const CodeEditor = (props) => {
} catch (e) {
input = input.replace(found[i], actionlist[j].example, -1)
}
}
//console.log("INPUT: ", fixedVariable, valuefound, input)
if (!valuefound) {
//console.log("Couldn't find value "+fixedVariable)
}
//if (!valuefound) {
// console.log("Couldn't find value "+fixedVariable)
//}
if (!valuefound && availableVariables.includes(fixedVariable)) {
var shouldbreak = false
@@ -729,8 +732,6 @@ const CodeEditor = (props) => {
console.log("ERR IN INPUT: ", e)
}
//console.log("Got output for: ", fullpath, new_input, actionlist[k].example, typeof new_input)
if (typeof new_input === "object") {
new_input = JSON.stringify(new_input)
} else {
@@ -752,10 +753,6 @@ const CodeEditor = (props) => {
input = input.replace(fixedVariable, new_input, -1)
input = input.replace(found[i], new_input, -1)
//} catch (e) {
// input = input.replace(found[i], actionlist[k].example)
//}
shouldbreak = true
break
}
@@ -1498,7 +1495,6 @@ const CodeEditor = (props) => {
backgroundColor: "rgba(40,40,40,1)",
}}
onLoad={(editor) => {
console.log("LOAD: ", editor)
highlight_variables(localcodedata)
}}
onCursorChange={(cursorPosition, editor, value) => {
@@ -1591,7 +1587,7 @@ const CodeEditor = (props) => {
minheight: 450,
overflow: "auto",
minWidth: 450,
maxWidth: 450,
maxWidth: "100%",
}}
collapsed={false}
enableClipboard={(copy) => {
frontend/src/defaultCytoscapeStyle.jsx
+15 -1
View File
@@ -34,6 +34,20 @@ const data = [
"z-index": 5001,
},
},
{
selector: `node[buttonType="ACTIONSUGGESTION"]`,
css: {
label: "data(label)",
shape: "roundrectangle",
"height": "16px",
"width": "120px",
"background-color": "#212121",
"border-color": "#81c784",
"z-index": 10000,
"border-radius": "10px",
"text-margin-x": "0px",
},
},
{
selector: `node[type="ACTION"]`,
css: {
@@ -120,7 +134,7 @@ const data = [
{
selector: `node[type="TRIGGER"]`,
css: {
shape: "octagon",
shape: "round-octagon",
"border-radius": "5px",
"border-color": "orange",
"background-color": "#213243",
frontend/src/views/AngularWorkflow.jsx
+550 -259
View File
File diff suppressed because it is too large Load Diff
frontend/src/views/Dashboard.jsx
-2
View File
@@ -903,7 +903,6 @@ const UsecaseListComponent = (props) => {
isLoggedIn={isLoggedIn}
appFramework={frameworkData}
userdata={userdata}
globalUrl={globalUrl}
img1={inputUsecase.srcimg}
srcapp={inputUsecase.srcapp}
@@ -911,7 +910,6 @@ const UsecaseListComponent = (props) => {
dstapp={inputUsecase.dstapp}
title={inputUsecase.name}
description={inputUsecase.description}
apps={apps}
getAppFramework={getFramework}
//appSetupDone={appSetupDone}