Fixed stop schedule access rights

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)
+		if workflow.OrgId == user.ActiveOrg.Id && user.Role == "admin" {
-		resp.WriteHeader(401)
+			log.Printf("[DEBUG] User %s is accessing workflow %s as admin", user.Username, workflow.ID)
-		resp.Write([]byte(`{"success": false}`))
+		} else {
-		return
+			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)

docker-compose.yml

@@ -76,8 +76,8 @@ services:
     image: frikky/shuffle:database
     container_name: shuffle-database
     hostname: shuffle-database
-    ports:
+    #ports:
-      - "8000:8000"
+    #  - "8000:8000"
     networks:
       - shuffle
     environment:

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(even)": { 
-        "& li:nth-child(odd)": { backgroundColor: "#FFF" }
+					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 (
-								<Typography id="skip_auth" variant="body2" color="textSecondary" style={{marginTop: 5,}}>
+								<Typography key={count} id="skip_auth" variant="body2" color="textSecondary" style={{marginTop: 5,}}>
 									Authentication fields are hidden
 								</Typography>
 							)
@@ -1159,11 +1172,10 @@ const ParsedAction = (props) => {
 		return null
 	}
 
-	const CustomPopper = function (props) {
+	//const CustomPopper = function (props) {
-		const classes = useStyles()
+	//	const classes = useStyles()
-		return <Popper {...props} className={classes.root} placement="bottom" />
+	//	return <Popper {...props} className={classes.root} placement="bottom" />
-	}
+	//}
-	// PopperComponent={CustomPopper} 
 
 	return ( 
 		<div style={appApiViewStyle}>
@@ -1414,14 +1426,31 @@ const ParsedAction = (props) => {
 				{setNewSelectedAction !== undefined ? 
 					<Autocomplete
   					id="action_search"
-						getOptionLabel={(option) => option.name}
+						autoHighlight
-						getOptionSelected={(option, value) => option.name === value.name}
+						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)).replaceAll("_", " ")
-							newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
 
 							return (
 								<div style={{display: "flex"}}>
@@ -1446,23 +1474,7 @@ const ParsedAction = (props) => {
 				  	renderInput={(params) => {
 							return (
 								<TextField 
-									style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, color: "white", }} 
+									style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, }} 
-									InputProps={{
-										style:{
-											color: "white",
-											minHeight: 50, 
-											marginLeft: "5px",
-											maxWidth: "95%",
-											fontSize: "1em",
-										},
-										startAdornment: (
-											<InputAdornment position="start">
-												<Tooltip title="Run search" placement="top">
-													<SearchIcon style={{cursor: "pointer"}} />
-												</Tooltip>
-											</InputAdornment>
-										)
-									}}
 									{...params} 
 									label="Find Actions" 
 									variant="outlined" 
@@ -1470,6 +1482,7 @@ const ParsedAction = (props) => {
 							)
 						}}
 					/>
+
 				: null}
 
 				{/*setNewSelectedAction !== undefined ? 

frontend/src/defaultCytoscapeStyle.js

@@ -121,11 +121,13 @@ const data = [{
 			selector: 'node[?isButton]',
 			css: {
 				'shape': 'ellipse',
-				'border-color': '#80deea',
+				'width': '15px',
-				'width': '30px',
+				'height': '15px',
-				'height': '30px',
 				'z-index': '5002',
 				'font-size': '0px',
+				'border': '1px solid black',
+				'background-image': 'data(icon)',
+				'background-color': 'data(iconBackground)',
 			},
 		},
 		{

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 = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
 				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,
+						x: event.target.position().x+offset,
-						y: nodedata.position.y+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 = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
+				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 = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
+		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 = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`
+		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"));
+		var parentNode = cy.$('#' + event.target.data("id"));
-		//if (parentNode.data('isButton') || parentNode.data('buttonId'))
+		if (parentNode.data('isButton') || parentNode.data('buttonId'))
-		//	return
+			return
 
-		//const nodedata = event.target.data()
+		const nodedata = event.target.data()
-		//if (event.target.data().app_name !== undefined) { 
+		if (event.target.data().app_name !== undefined) { 
-		//	const allNodes = cy.nodes().jsons()
+			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()
-		//		}
-		//	}
 
-		//	parentNode.lock()
+			var found = false
-		//	const px = parentNode.position('x') 
+			for (var key in allNodes) {
-		//	const py = parentNode.position('y') - 100 
+				const currentNode = allNodes[key]
-		//	const circleId = newNodeId = uuid.v4()
+				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",

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 = ""