diff --git a/frontend/package.json b/frontend/package.json index 26dff61a..7af75b59 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,6 +8,7 @@ "@material-ui/core": "^4.5.2", "@material-ui/data-grid": "^4.0.0-alpha.22", "@material-ui/icons": "^4.5.1", + "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.5.2", "@use-it/interval": "^1.0.0", "babel-eslint": "^10.1.0", diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index b43d1311..f074e5fd 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -1,4 +1,5 @@ import React, {useState, useEffect, useLayoutEffect} from 'react'; +import { makeStyles, createStyles } from '@material-ui/core/styles'; import { GetParsedPaths } from "../views/Apps.jsx"; import { GetIconInfo } from "../views/Workflows.jsx"; @@ -6,8 +7,22 @@ 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 {Popper, 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 Autocomplete from '@material-ui/lab/Autocomplete'; + +const useStyles = makeStyles((theme) => + createStyles({ + root: { + "& .MuiAutocomplete-listbox": { + border: "2px solid grey", + fontSize: 18, + "& li:nth-child(even)": { backgroundColor: "#CCC" }, + "& li:nth-child(odd)": { backgroundColor: "#FFF" } + } + } + }) +) 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 @@ -1143,6 +1158,13 @@ const ParsedAction = (props) => { } return null } + + const CustomPopper = function (props) { + const classes = useStyles() + return + } + // PopperComponent={CustomPopper} + return (
{hideExtraTypes === true ? null : @@ -1383,13 +1405,75 @@ const ParsedAction = (props) => {
- {hideExtraTypes ? null : + {/*hideExtraTypes ? null :
Actions
- } + */} {setNewSelectedAction !== undefined ? + option.name} + getOptionSelected={(option, value) => option.name === value.name} + options={sortByKey(selectedApp.actions, "label")} + fullWidth + style={{backgroundColor: theme.palette.inputColor, color: "white", height: 50, borderRadius: theme.palette.borderRadius,}} + onChange={(event, newValue) => { + console.log("Changed to ", event.target, newValue) + // Workaround with event lol + setNewSelectedAction({"target": {"value": newValue.name}}) + }} + renderOption={(data) => { + var newActionname = data.name + if (data.label !== undefined && data.label !== null && data.label.length > 0) { + newActionname = data.label + } + + const iconInfo = GetIconInfo({"name": data.name}) + const useIcon = iconInfo.originalIcon + + // ROFL FIXME - loop + newActionname = newActionname.replaceAll("_", " ") + newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1) + + return ( +
+ {useIcon} + {newActionname} +
+ ) + }} + renderInput={(params) => { + return ( + + + + + + ) + }} + {...params} + label="Find Actions" + variant="outlined" + /> + ) + }} + /> + : null} + + {/*setNewSelectedAction !== undefined ? - : null} + : null*/} {selectedAction.description !== undefined && selectedAction.description.length > 0 && hideExtraTypes !== true ?
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index c277a770..ad83baee 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -3392,8 +3392,16 @@ const AngularWorkflow = (props) => { } const setNewSelectedAction = (e) => { + // FIXME - should change icon-node (descriptor) as well + console.log("Got value: ", e) const newaction = selectedApp.actions.find(a => a.name === e.target.value) + //console.log("Failed to parse app?: ", newaction) + if (newaction === undefined || newaction === null) { + alert.error("Failed to find the action") + return + } + // Does this one find the wrong one? selectedAction.name = newaction.name selectedAction.parameters = JSON.parse(JSON.stringify(newaction.parameters)) diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index a92906e0..4085293c 100644 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -84,14 +84,14 @@ export const GetIconInfo = (action) => { {"key": "download", "values": ["get", "download"]}, {"key": "search", "values": ["search", "find"]}, {"key": "delete", "values": ["delete", "remove"]}, - {"key": "send", "values": ["send", "dispatch", "mail", "forward", "post"]}, - {"key": "list", "values": ["list"]}, + {"key": "send", "values": ["send", "dispatch", "mail", "forward", "post", "submit"]}, {"key": "repeat", "values": ["repeat", "retry"]}, {"key": "execute", "values": ["execute", "run", "play"]}, {"key": "extract", "values": ["extract", "unpack", "decompress"]}, {"key": "inflate", "values": ["inflate", "pack", "compress",]}, - {"key": "edit", "values": ["update", "edit", "put", "patch", "change", "parse", "translate", "replace", "filter", "conver", "map"]}, - {"key": "compare", "values": ["compare", "convert", "to"]}, + {"key": "edit", "values": ["update", "edit", "put", "patch", "change", "parse", "replace", "filter", "conver", "map"]}, + {"key": "compare", "values": ["compare", "convert", "to", "filter", "translate", ]}, + {"key": "list", "values": ["list"]}, ] var selectedKey = ""