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

Fixed action parser view for multiple locations

Browse Source
This commit is contained in:
frikky
2021-04-06 22:00:24 +02:00
parent 8112bd16c5
commit 6bdd84bdd9
4 changed files with 485 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ParsedAction.jsx
+93 -121
View File
@@ -1,18 +1,65 @@
import React, {useState, useEffect, useLayoutEffect} from 'react';
import { useTheme } from '@material-ui/core/styles';
import { GetParsedPaths } from "../views/Apps.jsx";
import { sortByKey } from "../views/AngularWorkflow.jsx";
import { useTheme } from '@material-ui/core/styles';
import NestedMenuItem from "material-ui-nested-menu-item";
import {TextField, Drawer, Button, Paper, Grid, Tabs, InputAdornment, Tab, ButtonBase, Tooltip, Select, MenuItem, Divider, Dialog, Modal, DialogActions, DialogTitle, InputLabel, DialogContent, FormControl, IconButton, Menu, Input, FormGroup, FormControlLabel, Typography, Checkbox, Breadcrumbs, CircularProgress, Switch, Fade} from '@material-ui/core';
import {GetApp as GetAppIcon, Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
const ParsedAction = (props) => {
const {workflow, setWorkflow, setAction, setSelectedAction, setUpdate, appActionArguments, selectedApp, workflowExecutions, setSelectedResult, selectedAction, getParents, setSelectedApp, setSelectedTrigger, setSelectedEdge, setCurrentView, cy, setAuthenticationModalOpen,setVariablesModalOpen, setLastSaved, setCodeModalOpen, selectedNameChange, rightsidebarStyle, showEnvironment, selectedActionEnvironment, environments, setNewSelectedAction, sortByKey, appApiViewStyle, globalUrl, setSelectedActionEnvironment, requiresAuthentication } = props
const {workflow, setWorkflow, setAction, setSelectedAction, setUpdate, appActionArguments, selectedApp, workflowExecutions, setSelectedResult, selectedAction, setSelectedApp, setSelectedTrigger, setSelectedEdge, setCurrentView, cy, setAuthenticationModalOpen,setVariablesModalOpen, setCodeModalOpen, selectedNameChange, rightsidebarStyle, showEnvironment, selectedActionEnvironment, environments, setNewSelectedAction, appApiViewStyle, globalUrl, setSelectedActionEnvironment, requiresAuthentication, hideExtraTypes } = props
const theme = useTheme();
const getParents = (action) => {
if (cy === undefined) {
return []
}
var allkeys = [action.id]
var handled = []
var results = []
while(true) {
for (var key in allkeys) {
var currentnode = cy.getElementById(allkeys[key])
if (handled.includes(currentnode.data().id)) {
continue
} else {
// Get the name / label here too?
handled.push(currentnode.data().id)
results.push(currentnode.data())
}
if (currentnode.length === 0) {
continue
}
const incomingEdges = currentnode.incomers('edge')
if (incomingEdges.length === 0) {
continue
}
for (var i = 0; i < incomingEdges.length; i++) {
var tmp = incomingEdges[i]
if (!allkeys.includes(tmp.data().source)) {
allkeys.push(tmp.data().source)
}
}
}
if (results.length === allkeys.length) {
break
}
}
// Remove self
results = results.filter(data => data.id !== action.id)
results = results.filter(data => data.type !== "TRIGGER")
results.push({"label": "Execution Argument", "type": "INTERNAL"})
return results
}
const getApp = (appId, setApp) => {
fetch(globalUrl+"/api/v1/apps/"+appId+"/config?openapi=false", {
@@ -71,6 +118,10 @@ const ParsedAction = (props) => {
}
const defineStartnode = () => {
if (cy === undefined) {
return
}
var oldstartnode = cy.getElementById(workflow.start)
if (oldstartnode.length > 0) {
oldstartnode[0].data("isStartNode", false)
@@ -405,9 +456,12 @@ const ParsedAction = (props) => {
// This is a stupid workaround to make it refresh rofl
setSelectedAction({})
if (setSelectedTrigger !== undefined) {
setSelectedTrigger({})
setSelectedApp({})
setSelectedEdge({})
}
// FIXME - check if startnode
// Set value
@@ -419,7 +473,7 @@ const ParsedAction = (props) => {
// FIXME: Issue #40 - selectedActionParameters not reset
if (Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0) {
return (
<div style={{marginTop: "30px"}}>
<div style={{marginTop: hideExtraTypes ? 10 : 30}}>
<b>Parameters</b>
{selectedActionParameters.map((data, count) => {
if (data.variant === "") {
@@ -539,6 +593,7 @@ const ParsedAction = (props) => {
fontSize: "1em",
},
endAdornment: (
hideExtraTypes ? null :
<InputAdornment position="end">
<Tooltip title="Autocomplete text" placement="top">
<AddCircleOutlineIcon style={{cursor: "pointer"}} onClick={(event) => {
@@ -552,6 +607,7 @@ const ParsedAction = (props) => {
}}/>
</Tooltip>
</InputAdornment>
)
}}
fullWidth
@@ -559,7 +615,7 @@ const ParsedAction = (props) => {
rows={rows}
color="primary"
defaultValue={data.value}
type={placeholder.includes("***") ? "password" : "text"}
type={placeholder.includes("***") || (data.configuration && (data.name.toLowerCase().includes("api") || data.name.toLowerCase().includes("key") || data.name.toLowerCase().includes("pass"))) ? "password" : "text"}
placeholder={placeholder}
onChange={(event) => {
changeActionParameter(event, count, data)
@@ -602,6 +658,7 @@ const ParsedAction = (props) => {
fontSize: "1em",
},
endAdornment: (
hideExtraTypes ? null :
<InputAdornment position="end">
<Tooltip title="Autocomplete text" placement="top">
<AddCircleOutlineIcon style={{cursor: "pointer"}} onClick={(event) => {
@@ -684,106 +741,6 @@ const ParsedAction = (props) => {
} else if (data.variant === "STATIC_VALUE") {
staticcolor = "#f85a3e"
} else if (data.variant === "ACTION_RESULT") {
// Gets the parents of the current node
var parents = getParents(selectedAction)
actioncolor = "#f85a3e"
// set the datafield
//var datafieldvalue = "Error: No parents. Action not eligible"
//if (parents.length > 0) {
// datafieldvalue = parents[0].label
//}
const fixedActionText = selectedActionParameters[count].value
datafield =
<div>
<Select
SelectDisplayProps={{
style: {
marginLeft: 10,
}
}}
value={selectedActionParameters[count].action_field}
fullWidth
onChange={(e) => {
changeActionParameterActionResult(e.target.value, count)
}}
style={{backgroundColor: theme.palette.surfaceColor, color: "white", height: "50px"}}
>
{parents.map(data => (
<MenuItem key={data.label} style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={data.label}>
{data.label}
</MenuItem>
))}
</Select>
<TextField
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
InputProps={{
style:{
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
},
}}
fullWidth
color="primary"
defaultValue={data.value}
helperText={<div style={{marginLeft: "5px", color:"white", marginBottom: "2px",}}>Example: $.body will get "data" from {'{"body": "data"}'}</div>}
placeholder="Action variable ($.)"
onChange={(event) => {
changeActionParameter(event, count, data)
}}
/>
</div>
} else if (data.variant === "WORKFLOW_VARIABLE") {
varcolor = "#f85a3e"
if ((workflow.workflow_variables === null || workflow.workflow_variables === undefined || workflow.workflow_variables.length === 0) && (workflow.execution_variables === null || workflow.execution_variables === undefined || workflow.execution_variables.length === 0)) {
setCurrentView(2)
datafield =
<div>
<div>
Looks like you don't have any variables yet.
</div>
<div style={{width: "100%", margin: "auto"}}>
<Button style={{margin: "auto", marginTop: "10px"}} color="primary" variant="outlined" onClick={() => {
setVariablesModalOpen(true)
setLastSaved(false)
}}>New workflow variable</Button>
</div>
</div>
} else {
// FIXME - this is a shitty solution that needs re-renders all the time
datafield =
<Select
SelectDisplayProps={{
style: {
marginLeft: 10,
}
}}
fullWidth
value={selectedAction.parameters[count].action_field}
onChange={(e) => {
console.log(e.target.value)
changeActionParameterVariable(e.target.value, count)
}}
style={{backgroundColor: theme.palette.inputColor, color: "white", height: "50px"}}
>
{workflow.workflow_variables !== undefined && workflow.workflow_variables !== null ? workflow.workflow_variables.map(data => (
<MenuItem style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={data.name}>
{data.name}
</MenuItem>
)) : null}
<Divider />
{workflow.execution_variables !== undefined && workflow.execution_variables !== null ? workflow.execution_variables.map(data => (
<MenuItem style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={data.name}>
{data.name}
</MenuItem>
)) : null}
</Select>
}
}
// Shows nested list of nodes > their JSON lists
@@ -894,6 +851,7 @@ const ParsedAction = (props) => {
for (var key in workflow.triggers) {
const item = workflow.triggers[key]
if (cy !== undefined) {
var node = cy.getElementById(item.id)
if (node.length > 0) {
if (inside) {
@@ -902,12 +860,13 @@ const ParsedAction = (props) => {
node.removeClass('shuffle-hover-highlight')
}
}
}
}
}
}
const handleActionHover = (inside, actionId) => {
if (cy !== undefined) {
var node = cy.getElementById(actionId)
if (node.length > 0) {
if (inside) {
@@ -917,6 +876,7 @@ const ParsedAction = (props) => {
}
}
}
}
const handleMouseover = () => {
if (innerdata.type === "Execution Argument") {
@@ -1009,8 +969,6 @@ const ParsedAction = (props) => {
return (
<div key={data.name}>
<div style={{marginTop: 20, marginBottom: 0, display: "flex"}}>
{data.configuration === true ?
<Tooltip color="primary" title={`Authenticate ${selectedApp.name}`} placement="top">
<LockOpenIcon style={{cursor: "pointer", width: 24, height: 24, marginRight: 10, }} onClick={() => {
@@ -1056,7 +1014,7 @@ const ParsedAction = (props) => {
</Tooltip>
</div>
*/}
{selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 && selectedActionParameters[count].required === true && selectedActionParameters[count].unique_toggled !== undefined ? null :
{(selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 && selectedActionParameters[count].required === true && selectedActionParameters[count].unique_toggled !== undefined) || hideExtraTypes ? null :
<div style={{display: "flex"}}>
<Tooltip color="primary" title="Value must be unique" placement="top">
<div style={{cursor: "pointer", color: staticcolor}} onClick={(e) => {}}>
@@ -1150,6 +1108,8 @@ const ParsedAction = (props) => {
}
return (
<div style={appApiViewStyle}>
{hideExtraTypes === true ? null :
<span>
<div style={{display: "flex", minHeight: 40, marginBottom: 30}}>
<div style={{flex: 1}}>
<h3 style={{marginBottom: 5}}>{selectedAction.app_name.replaceAll("_", " ")}</h3>
@@ -1170,7 +1130,10 @@ const ParsedAction = (props) => {
}
setSelectedResult(foundResult)
if (setCodeModalOpen !== undefined) {
setCodeModalOpen(true)
}
break
}
}
@@ -1181,7 +1144,7 @@ const ParsedAction = (props) => {
</IconButton>
<span style={{}}>
<Typography style={{marginTop: 5, marginLeft: 10,}}><a rel="norefferer" href="https://shuffler.io/docs/workflows#nodes" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>What are actions?</a></Typography>
{selectedAction.errors !== null && selectedAction.errors.length > 0 ?
{selectedAction.errors !== undefined && selectedAction.errors !== null && selectedAction.errors.length > 0 ?
<div>
Errors: {selectedAction.errors.join("\n")}
</div>
@@ -1200,7 +1163,7 @@ const ParsedAction = (props) => {
</Button>
</Tooltip>
}
{selectedApp.versions !== null && selectedApp.versions !== undefined && selectedApp.versions.length > 0 ?
{selectedApp.versions !== null && selectedApp.versions !== undefined && selectedApp.versions.length > 1 ?
<Select
defaultValue={selectedAction.app_version}
onChange={(event) => {
@@ -1209,7 +1172,7 @@ const ParsedAction = (props) => {
getApp(newversion.id, true)
}
}}
style={{marginTop: 10, backgroundColor: theme.palette.theme.palette.surfaceColor, backgroundColor: theme.palette.inputColor, color: "white", height: 35, marginleft: 10,}}
style={{marginTop: 10, backgroundColor: theme.palette.surfaceColor, backgroundColor: theme.palette.inputColor, color: "white", height: 35, marginleft: 10,}}
SelectDisplayProps={{
style: {
marginLeft: 10,
@@ -1242,7 +1205,9 @@ const ParsedAction = (props) => {
placeholder={selectedAction.label}
onChange={selectedNameChange}
/>
{selectedApp.name !== undefined && selectedAction.authentication !== undefined && selectedAction.authentication.length === 0 && requiresAuthentication ?
</span>
}
{selectedApp.name !== undefined && selectedAction.authentication !== null && selectedAction.authentication !== undefined && selectedAction.authentication.length === 0 && requiresAuthentication ?
<div style={{marginTop: 15}}>
<Tooltip color="primary" title={"Add authentication option"} placement="top">
<span>
@@ -1255,8 +1220,8 @@ const ParsedAction = (props) => {
</Tooltip>
</div>
: null}
{selectedAction.authentication !== undefined && selectedAction.authentication.length > 0 ?
<div style={{marginTop: 20, overflow: "hidden",}}>
{selectedAction.authentication !== undefined && selectedAction.authentication !== null && selectedAction.authentication.length > 0 ?
<div style={{marginTop: 15, }}>
Authentication
<div style={{display: "flex"}}>
<Select
@@ -1277,11 +1242,14 @@ const ParsedAction = (props) => {
}}
style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, maxWidth: rightsidebarStyle.maxWidth-80,}}
>
{selectedAction.authentication.map(data => (
{selectedAction.authentication.map(data => {
console.log("DATA: ", data)
return(
<MenuItem key={data.id} style={{backgroundColor: theme.palette.inputColor, color: "white"}} value={data}>
{data.label} - ({data.app.app_version})
</MenuItem>
))}
)
})}
</Select>
{/*
@@ -1302,7 +1270,7 @@ const ParsedAction = (props) => {
</div>
</div>
: null}
{showEnvironment ?
{showEnvironment !== undefined && showEnvironment ?
<div style={{marginTop: "20px"}}>
<Typography>
Environment
@@ -1375,9 +1343,12 @@ const ParsedAction = (props) => {
: null}
<Divider style={{marginTop: "20px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
<div style={{flex: "6", marginTop: "20px"}}>
{hideExtraTypes ? null :
<div style={{marginBottom: 5}}>
<b>Actions</b>
</div>
}
{setNewSelectedAction !== undefined ?
<Select
value={selectedAction.name}
fullWidth
@@ -1410,11 +1381,12 @@ const ParsedAction = (props) => {
)
})}
</Select>
{selectedAction.description !== undefined && selectedAction.description.length > 0 ?
: null}
{selectedAction.description !== undefined && selectedAction.description.length > 0 && hideExtraTypes !== true ?
<div style={{marginTop: 10, marginBottom: 10, maxHeight: 60, overflow: "hidden"}}>
{selectedAction.description}
</div> : null}
<div style={{marginTop: "10px", borderColor: "white", borderWidth: "2px", marginBottom: 200}}>
<div style={{marginTop: "10px", borderColor: "white", borderWidth: "2px", marginBottom: 50,}}>
<AppActionArguments key={selectedAction.id} selectedAction={selectedAction} />
</div>
</div>
frontend/src/views/AngularWorkflow.jsx
+22 -20
View File
@@ -5,8 +5,8 @@ import { useTheme } from '@material-ui/core/styles';
import uuid from "uuid";
import {Link} from 'react-router-dom';
import { Prompt } from 'react-router'
import ReactJson from 'react-json-view'
import { useBeforeunload } from 'react-beforeunload';
import ReactJson from 'react-json-view'
import NestedMenuItem from "material-ui-nested-menu-item";
import {TextField, Drawer, Button, Paper, Grid, Tabs, InputAdornment, Tab, ButtonBase, Tooltip, Select, MenuItem, Divider, Dialog, Modal, DialogActions, DialogTitle, InputLabel, DialogContent, FormControl, IconButton, Menu, Input, FormGroup, FormControlLabel, Typography, Checkbox, Breadcrumbs, CircularProgress, Switch, Fade} from '@material-ui/core';
@@ -52,6 +52,25 @@ function useWindowSize() {
return size;
}
export function sortByKey(array, key) {
if (array === undefined) {
return []
}
if (key.startsWith("-") && key.length > 2) {
key = key.slice(1, key.length)
return array.sort(function(a, b) {
var x = a[key]; var y = b[key]
return ((x < y) ? -1 : ((x > y) ? 1 : 0))
}).reverse()
}
return array.sort(function(a, b) {
var x = a[key]; var y = b[key]
return ((x < y) ? -1 : ((x > y) ? 1 : 0))
})
}
function removeParam(key, sourceURL) {
if (sourceURL === undefined) {
return
@@ -2678,13 +2697,14 @@ const AngularWorkflow = (props) => {
*/
console.log("ENVS: ", environments)
const parsedEnvironments = environments === null || environments === [] ? "cloud" : environments[defaultEnvironmentIndex] === undefined ? "cloud" : environments[defaultEnvironmentIndex].Name
const newAppData = {
app_name: app.name,
app_version: app.app_version,
app_id: app.id,
sharing: app.sharing,
private_id: app.private_id,
environment: environments === null || environments === [] ? "cloud" : environments[defaultEnvironmentIndex].Name,
environment: parsedEnvironments,
errors: [],
id_: newNodeId,
_id_: newNodeId,
@@ -3126,24 +3146,7 @@ const AngularWorkflow = (props) => {
function sortByKey(array, key) {
if (array === undefined) {
return []
}
if (key.startsWith("-") && key.length > 2) {
key = key.slice(1, key.length)
return array.sort(function(a, b) {
var x = a[key]; var y = b[key]
return ((x < y) ? -1 : ((x > y) ? 1 : 0))
}).reverse()
}
return array.sort(function(a, b) {
var x = a[key]; var y = b[key]
return ((x < y) ? -1 : ((x > y) ? 1 : 0))
})
}
const rightsidebarStyle = {
position: "fixed",
@@ -3170,7 +3173,6 @@ const AngularWorkflow = (props) => {
selectedApp={selectedApp}
workflowExecutions={workflowExecutions}
setSelectedResult={setSelectedResult}
getParents={getParents}
setSelectedApp={setSelectedApp}
setSelectedTrigger={setSelectedTrigger}
setSelectedEdge={setSelectedEdge}
frontend/src/views/AppCreator.jsx
+33 -28
View File
@@ -301,12 +301,12 @@ const AppCreator = (props) => {
return response.json()
})
.then((responseJson) => {
if (!responseJson.success) {
if (responseJson.success === false) {
alert.error("Failed to get the app")
setIsAppLoaded(true)
window.location.pathname = "/search"
} else {
const data = JSON.parse(responseJson.body)
parseIncomingOpenapiData(data)
parseIncomingOpenapiData(responseJson)
}
})
.catch(error => {
@@ -346,27 +346,8 @@ const AppCreator = (props) => {
if (!responseJson.success) {
alert.error("Failed to verify")
} else{
var jsonvalid = false
var tmpvalue = ""
try {
tmpvalue = JSON.parse(responseJson.body)
jsonvalid = true
} catch (e) {
console.log("Error JSON: ", e)
}
parseIncomingOpenapiData(responseJson)
if (!jsonvalid) {
try {
tmpvalue = YAML.parse(responseJson.body, )
jsonvalid = true
} catch(e) {
console.log("Error YAML: ", e)
}
}
if (jsonvalid) {
parseIncomingOpenapiData(tmpvalue)
}
}
})
.catch(error => {
@@ -427,9 +408,33 @@ const AppCreator = (props) => {
// Sets the data up as it should be at later points
// This is the data FROM the database, not what's being saved
const parseIncomingOpenapiData = (data) => {
//console.log("DATA: ", data.info)
setBasedata(data)
const parsedapp = data.openapi === undefined ? data : JSON.parse(atob(data.openapi))
data = parsedapp.body === undefined ? parsedapp : parsedapp.body
var jsonvalid = false
var tmpvalue = ""
try {
data = JSON.parse(data)
jsonvalid = true
} catch (e) {
console.log("Error JSON: ", e)
}
if (!jsonvalid) {
try {
data = YAML.parse(data)
jsonvalid = true
} catch(e) {
console.log("Error YAML: ", e)
}
}
if (!jsonvalid) {
alert.info("OpenAPI data is invalid.")
return
}
setBasedata(data)
if (data.info !== null && data.info !== undefined) {
setName(data.info.title)
setDescription(data.info.description)
@@ -490,9 +495,9 @@ const AppCreator = (props) => {
"PUT",
]
// FIXME - headers?
var newActions = []
var wordlist = {}
if (data.paths !== null && data.paths !== undefined) {
for (let [path, pathvalue] of Object.entries(data.paths)) {
for (let [method, methodvalue] of Object.entries(pathvalue)) {
if (methodvalue === null) {
@@ -695,6 +700,7 @@ const AppCreator = (props) => {
}
newActions.push(newaction)
}
}
if (data.servers !== undefined && data.servers.length > 0) {
var firstUrl = data.servers[0].url
@@ -721,8 +727,7 @@ const AppCreator = (props) => {
}
}
// FIXME: Have multiple authentication options?
console.log("INVALID9: ", data)
if (securitySchemes !== undefined) {
for (const [key, value] of Object.entries(securitySchemes)) {
if (value.scheme === "bearer") {
frontend/src/views/Apps.jsx
+9 -1
View File
@@ -280,11 +280,19 @@ const Apps = (props) => {
if (!responseJson.success) {
alert.error("Failed to download file")
} else {
const inputdata = YAML.parse(responseJson.body)
console.log(responseJson)
const basedata = atob(responseJson.openapi)
console.log("BASE: ", basedata)
var inputdata = JSON.parse(basedata)
console.log("POST INPUT: ", inputdata)
inputdata = JSON.parse(inputdata.body)
const newpaths = {}
if (inputdata["paths"] !== undefined) {
Object.keys(inputdata["paths"]).forEach(function(key) {
newpaths[key.split("?")[0]] = inputdata.paths[key]
})
}
inputdata.paths = newpaths
console.log("INPUT: ", inputdata)