diff --git a/backend/go-app/walkoff.go b/backend/go-app/walkoff.go index 5e467dca..4e04cd71 100644 --- a/backend/go-app/walkoff.go +++ b/backend/go-app/walkoff.go @@ -2360,15 +2360,30 @@ func stopSchedule(resp http.ResponseWriter, request *http.Request) { return } - // FIXME - have a check for org etc too.. - // FIXME - admin check like this? idk if user.Id != workflow.Owner && user.Role != "scheduler" { - log.Printf("[WARNING] Wrong user (%s) for workflow %s (stop schedule)", user.Username, workflow.ID) - resp.WriteHeader(401) - resp.Write([]byte(`{"success": false}`)) - return + if workflow.OrgId == user.ActiveOrg.Id && user.Role == "admin" { + log.Printf("[DEBUG] User %s is accessing workflow %s as admin", user.Username, workflow.ID) + } else { + log.Printf("[WARNING] Wrong user (%s) for workflow %s (stop schedule)", user.Username, workflow.ID) + resp.WriteHeader(401) + resp.Write([]byte(`{"success": false}`)) + return + } } + //if user.Id != workflow.Owner || len(user.Id) == 0 { + // if workflow.OrgId == user.ActiveOrg.Id && user.Role == "admin" { + // log.Printf("[INFO] User %s is accessing workflow %s as admin", user.Username, workflow.ID) + // } else if workflow.Public { + // log.Printf("[INFO] Letting user %s access workflow %s because it's public", user.Username, workflow.ID) + // } else { + // log.Printf("[WARNING] Wrong user (%s) for workflow %s (get workflow)", user.Username, workflow.ID) + // resp.WriteHeader(401) + // resp.Write([]byte(`{"success": false}`)) + // return + // } + //} + schedule, err := shuffle.GetSchedule(ctx, scheduleId) if err != nil { log.Printf("[WARNING] Failed finding schedule %s", scheduleId) diff --git a/docker-compose.yml b/docker-compose.yml index 9a9029c7..c7e37a19 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -76,8 +76,8 @@ services: image: frikky/shuffle:database container_name: shuffle-database hostname: shuffle-database - ports: - - "8000:8000" + #ports: + # - "8000:8000" networks: - shuffle environment: diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 31585b78..eee3eaab 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -16,11 +16,23 @@ const useStyles = makeStyles((theme) => root: { "& .MuiAutocomplete-listbox": { border: "2px solid grey", + color: "white", fontSize: 18, - "& li:nth-child(even)": { backgroundColor: "#CCC" }, - "& li:nth-child(odd)": { backgroundColor: "#FFF" } + "& li:nth-child(even)": { + backgroundColor: "#CCC" + }, + "& li:nth-child(odd)": { + backgroundColor: "#FFF" + } } - } + }, + inputRoot: { + color: "white", + // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90 + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: "#f86a3e" + }, + } }) ) @@ -28,6 +40,7 @@ const ParsedAction = (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 classes = useStyles() const getParents = (action) => { if (cy === undefined) { return [] @@ -533,7 +546,7 @@ const ParsedAction = (props) => { authWritten = true return ( - + Authentication fields are hidden ) @@ -1159,11 +1172,10 @@ const ParsedAction = (props) => { return null } - const CustomPopper = function (props) { - const classes = useStyles() - return - } - // PopperComponent={CustomPopper} + //const CustomPopper = function (props) { + // const classes = useStyles() + // return + //} return (
@@ -1414,14 +1426,31 @@ const ParsedAction = (props) => { {setNewSelectedAction !== undefined ? option.name} - getOptionSelected={(option, value) => option.name === value.name} + autoHighlight + value={selectedAction} + classes={{inputRoot: classes.inputRoot}} + ListboxProps={{ + style: { + backgroundColor: theme.palette.inputColor, + color: "white", + } + }} + getOptionLabel={(option) => { + if (option === undefined || option === null || option.name === undefined || option.name === undefined) { + return null + } + + const newname = (option.name.charAt(0).toUpperCase()+option.name.substring(1)).replaceAll("_", " ") + return newname + }} options={sortByKey(selectedApp.actions, "label")} fullWidth - style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, borderRadius: theme.palette.borderRadius,}} + style={{backgroundColor: theme.palette.inputColor, height: 50, borderRadius: theme.palette.borderRadius,}} onChange={(event, newValue) => { // Workaround with event lol - setNewSelectedAction({"target": {"value": newValue.name}}) + if (newValue !== undefined && newValue !== null) { + setNewSelectedAction({"target": {"value": newValue.name}}) + } }} renderOption={(data) => { var newActionname = data.name @@ -1433,8 +1462,7 @@ const ParsedAction = (props) => { const useIcon = iconInfo.originalIcon // ROFL FIXME - loop - newActionname = newActionname.replaceAll("_", " ") - newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1) + newActionname = (newActionname.charAt(0).toUpperCase()+newActionname.substring(1)).replaceAll("_", " ") return (
@@ -1446,23 +1474,7 @@ const ParsedAction = (props) => { renderInput={(params) => { return ( - - - - - ) - }} + style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, }} {...params} label="Find Actions" variant="outlined" @@ -1470,6 +1482,7 @@ const ParsedAction = (props) => { ) }} /> + : null} {/*setNewSelectedAction !== undefined ? diff --git a/frontend/src/defaultCytoscapeStyle.js b/frontend/src/defaultCytoscapeStyle.js index 51942dac..1aef9c4b 100644 --- a/frontend/src/defaultCytoscapeStyle.js +++ b/frontend/src/defaultCytoscapeStyle.js @@ -121,11 +121,13 @@ const data = [{ selector: 'node[?isButton]', css: { 'shape': 'ellipse', - 'border-color': '#80deea', - 'width': '30px', - 'height': '30px', + 'width': '15px', + 'height': '15px', 'z-index': '5002', 'font-size': '0px', + 'border': '1px solid black', + 'background-image': 'data(icon)', + 'background-color': 'data(iconBackground)', }, }, { diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index bcc4f51d..2dc7b52e 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -9,8 +9,9 @@ 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'; -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'; +import {FileCopy as FileCopyIcon, 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'; import * as cytoscape from 'cytoscape'; import * as edgehandles from 'cytoscape-edgehandles'; @@ -1367,16 +1368,17 @@ const AngularWorkflow = (props) => { // Readding the icon after moving the node if (!found) { - console.log("Node wasn't found") + //console.log("Node wasn't found") const iconInfo = GetIconInfo(nodedata) const svg_pin = `` const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin) const offset = nodedata.isStartNode ? 36 : 44 + //console.log(event.target.position()) const decoratorNode = { position: { - x: nodedata.position.x+offset, - y: nodedata.position.y+offset, + x: event.target.position().x+offset, + y: event.target.position().y+offset, }, locked: true, data: { @@ -1395,7 +1397,7 @@ const AngularWorkflow = (props) => { console.log("Node already exists - don't add descriptor node") } } else { - console.log("Shouldnt re-add info? ") + //console.log("Shouldnt re-add info? ") } originalLocation = { @@ -1424,7 +1426,6 @@ const AngularWorkflow = (props) => { if (nodedata.app_id !== undefined) { //console.log("Trying to remove friendly nodes") const allNodes = cy.nodes().jsons() - //console.log("NOT UNDEFINED IN HOVEROUT!", allNodes) for (var key in allNodes) { const currentNode = allNodes[key] if (currentNode.data.attachedTo === nodedata.id) { @@ -1513,9 +1514,20 @@ const AngularWorkflow = (props) => { // Nodeselectbatching: // https://stackoverflow.com/questions/16677856/cy-onselect-callback-only-once const onNodeSelect = (event, newAppAuth) => { - const data = event.target.data() + console.log("NODE: ", data) + setLastSaved(false) + if (data.isButton) { + console.log("BUTTON CLICKED: ", data) + event.target.unselect() + return + } else if (data.isDescriptor) { + console.log("Can't select descriptor") + event.target.unselect() + return + } + //const node = cy.getElementById(data.id) //if (node.length > 0) { @@ -1523,7 +1535,6 @@ const AngularWorkflow = (props) => { //} //const branch = workflow.branches.filter(branch => branch.source_id === data.id || branch.destination_id === data.id) - console.log("NODE: ", data) //console.log("APPAUTH: ", newAppAuth) //console.log("BRANCHES: ", branch) @@ -1758,6 +1769,7 @@ const AngularWorkflow = (props) => { const onNodeAdded = (event) => { setLastSaved(false) const node = event.target + const nodedata = event.target.data() if (node.isNode() && cy.nodes().size() === 1) { //setStartNode(node.data('id')) @@ -1779,6 +1791,58 @@ const AngularWorkflow = (props) => { setWorkflow(workflow) } + + if (nodedata.app_name !== undefined && (( + nodedata.app_name !== "Shuffle Tools" && + nodedata.app_name !== "Testing" && + nodedata.app_name !== "Shuffle Workflow" && + nodedata.app_name !== "User Input" && + nodedata.app_name !== "Schedule" && + nodedata.app_name !== "Email") || nodedata.isStartNode) + ) { + const allNodes = cy.nodes().jsons() + var found = false + for (var key in allNodes) { + const currentNode = allNodes[key] + if (currentNode.data.attachedTo === nodedata.id && currentNode.data.isDescriptor) { + found = true + console.log("FOUND THE NODE!") + break + } + } + + // Readding the icon after moving the node + if (!found) { + console.log("Node wasn't found") + const iconInfo = GetIconInfo(nodedata) + const svg_pin = `` + const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin) + + const offset = nodedata.isStartNode ? 36 : 44 + const decoratorNode = { + position: { + x: event.target.position().x+offset, + y: event.target.position().y+offset, + }, + locked: true, + data: { + "isDescriptor": true, + "isValid": true, + "is_valid": true, + "label": "", + "image": svgpin_Url, + "imageColor": iconInfo.iconBackgroundColor, + "attachedTo": nodedata.id, + }, + } + + cy.add(decoratorNode) + } else { + console.log("Node already exists - don't add descriptor node") + } + } else { + //console.log("Shouldnt re-add info? ") + } } const onEdgeRemoved = (event) => { @@ -1838,6 +1902,18 @@ const AngularWorkflow = (props) => { //}) } + if (data.app_id !== undefined) { + //console.log("Trying to remove friendly nodes") + const allNodes = cy.nodes().jsons() + //console.log("NOT UNDEFINED IN HOVEROUT!", allNodes) + for (var key in allNodes) { + const currentNode = allNodes[key] + if (currentNode.data.attachedTo === data.id) { + cy.getElementById(currentNode.data.id).remove() + } + } + } + setWorkflow(workflow) if (data.type === "TRIGGER") { @@ -2113,7 +2189,6 @@ const AngularWorkflow = (props) => { const nodedata = event.target.data() if (nodedata.app_name !== undefined) { const allNodes = cy.nodes().jsons() - //console.log("NOT UNDEFINED IN HOVEROUT!", allNodes) for (var key in allNodes) { const currentNode = allNodes[key] if (currentNode.data.isButton && currentNode.data.attachedTo !== nodedata.id) { @@ -2141,44 +2216,111 @@ const AngularWorkflow = (props) => { }) } + const addCopyButton = (event) => { + var parentNode = cy.$('#' + event.target.data("id")); + if (parentNode.data('isButton') || parentNode.data('buttonId')) + return + + parentNode.lock() + const px = parentNode.position('x') - 65 + const py = parentNode.position('y') + 25 + const circleId = newNodeId = uuid.v4() + + parentNode.data('circleId', circleId) + + const iconInfo = { + "icon": "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z", + "iconColor": "black", + "iconBackgroundColor": "white", + } + const svg_pin = `` + const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin) + + cy.add({ + group: 'nodes', + data: { + weight: 30, + id: circleId, + name: "TEEEXT", + isButton: true, + buttonType: "copy", + attachedTo: event.target.data("id"), + icon: svgpin_Url, + iconBackground: iconInfo.iconBackgroundColor, + is_valid: true, + }, + position: { x: px, y: py }, + locked: true + }).unselectify() + } + + const addDeleteButton = (event) => { + var parentNode = cy.$('#' + event.target.data("id")); + if (parentNode.data('isButton') || parentNode.data('buttonId')) + return + + parentNode.lock() + const px = parentNode.position('x') - 65 + const py = parentNode.position('y') - 25 + const circleId = newNodeId = uuid.v4() + + parentNode.data('circleId', circleId) + + const iconInfo = { + "icon": "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z", + "iconColor": "black", + "iconBackgroundColor": "white", + } + const svg_pin = `` + const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin) + + cy.add({ + group: 'nodes', + data: { + weight: 30, + id: circleId, + name: "TEEEXT", + isButton: true, + buttonType: "delete", + attachedTo: event.target.data("id"), + icon: svgpin_Url, + iconBackground: iconInfo.iconBackgroundColor, + is_valid: true, + }, + position: { x: px, y: py }, + locked: true + }).unselectify() + } + const onNodeHover = (event) => { //console.log("TAR: ", event.target) - //var parentNode = cy.$('#' + event.target.data("id")); - //if (parentNode.data('isButton') || parentNode.data('buttonId')) - // return + var parentNode = cy.$('#' + event.target.data("id")); + if (parentNode.data('isButton') || parentNode.data('buttonId')) + return - //const nodedata = event.target.data() - //if (event.target.data().app_name !== undefined) { - // const allNodes = cy.nodes().jsons() - // console.log("NOT UNDEFINED IN HOVEROUT!", allNodes) - // for (var key in allNodes) { - // const currentNode = allNodes[key] - // if (currentNode.data.isButton && currentNode.data.attachedTo !== nodedata.id) { - // cy.getElementById(currentNode.data.id).remove() - // } - // } + const nodedata = event.target.data() + if (event.target.data().app_name !== undefined) { + const allNodes = cy.nodes().jsons() - // parentNode.lock() - // const px = parentNode.position('x') - // const py = parentNode.position('y') - 100 - // const circleId = newNodeId = uuid.v4() + var found = false + for (var key in allNodes) { + const currentNode = allNodes[key] + if (currentNode.data.isButton && currentNode.data.attachedTo !== nodedata.id) { + cy.getElementById(currentNode.data.id).remove() + } + + if (currentNode.data.isButton && currentNode.data.attachedTo === nodedata.id) { + found = true + } + } + + //if (!found) { + // addDeleteButton(event) + // addCopyButton(event) + //} + } - // parentNode.data('circleId', circleId) - // cy.add({ - // group: 'nodes', - // data: { weight: 30, id: circleId, name: "TEEEXT", isButton: true, attachedTo: event.target.data("id")}, - // position: { x: px, y: py }, - // locked: true - // }).css({ - // 'background-color': 'blue', - // 'shape': 'ellipse', - // 'background-opacity': 0.5, - // 'height': '30px', - // 'width': '30px', - // 'z-index': 5002, - // }).unselectify() - //} const parsedStyle = { "border-width": "7px", diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index dae6e221..b00ce35a 100644 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -81,7 +81,7 @@ const useStyles = makeStyles((theme) => ({ export const GetIconInfo = (action) => { // Finds the icon based on the action. Should be verbs. const iconList = [ - {"key": "download", "values": ["get", "download", "return", "hello world"]}, + {"key": "download", "values": ["get", "download", "return", "hello_world", "curl",]}, {"key": "search", "values": ["search", "find"]}, {"key": "delete", "values": ["delete", "remove"]}, {"key": "send", "values": ["send", "dispatch", "mail", "forward", "post", "submit"]}, @@ -91,7 +91,7 @@ export const GetIconInfo = (action) => { {"key": "inflate", "values": ["inflate", "pack", "compress",]}, {"key": "edit", "values": ["update", "create", "edit", "put", "patch", "change", "parse", "replace", "filter", "conver", "map"]}, {"key": "compare", "values": ["compare", "convert", "to", "filter", "translate", ]}, - {"key": "list", "values": ["list"]}, + {"key": "list", "values": ["list", "head", "options"]}, ] var selectedKey = ""