Made search for actions in OpenAPI way better by adding description and path

frontend/src/components/ParsedAction.jsx

@@ -8,7 +8,6 @@ import { useTheme } from "@material-ui/core/styles";
 import NestedMenuItem from "material-ui-nested-menu-item";
 import { useAlert } from "react-alert";
 import theme from '../theme';
-//import NestedMenuItem from "./NestedMenu.jsx";
 
 import {
 	ButtonGroup,
@@ -119,12 +118,6 @@ const useStyles = makeStyles({
     },
   },
 });
-//const useStyles = makeStyles((theme) =>
-//  createStyles({
-//		notchedOutline: {
-//			borderColor: "#f85a3e !important"
-//		},
-//)
 						
 const openApiFieldDesc = "Generated by OpenAPI body example";
 const ParsedAction = (props) => {
@@ -1416,8 +1409,6 @@ const ParsedAction = (props) => {
 
               hideBodyButton = hideBodyButtonValue;
               if (found === null || !hideBody) {
-								console.log("Should hide body? ", found)
-                //
                 if (found === null) {
                   setActivateHidingBodyButton(true);
                 }
@@ -2174,6 +2165,10 @@ const ParsedAction = (props) => {
               tmpitem = tmpitem.slice(2, data.name.length - 1);
             }
 
+            if (tmpitem === "from_shuffle") {
+							tmpitem = "from"
+						}
+
             tmpitem = (
               tmpitem.charAt(0).toUpperCase() + tmpitem.substring(1)
             ).replaceAll("_", " ");
@@ -3069,6 +3064,13 @@ const ParsedAction = (props) => {
                 color: "white",
               },
             }}
+						filterOptions={(options, { inputValue }) => {
+							console.log("Option contains?: ", inputValue, options)
+							const lowercaseValue = inputValue.toLowerCase()
+							options = options.filter(x => x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue))
+
+							return options
+						}}
             getOptionLabel={(option) => {
               if (
                 option === undefined ||
@@ -3082,6 +3084,7 @@ const ParsedAction = (props) => {
               const newname = (
                 option.name.charAt(0).toUpperCase() + option.name.substring(1)
               ).replaceAll("_", " ");
+
               return newname;
             }}
             options={sortByKey(selectedApp.actions, "label")}
@@ -3094,7 +3097,11 @@ const ParsedAction = (props) => {
             onChange={(event, newValue) => {
               // Workaround with event lol
               if (newValue !== undefined && newValue !== null) {
-                setNewSelectedAction({ target: { value: newValue.name } });
+                setNewSelectedAction({ 
+									target: { 
+										value: newValue.name 
+									} 
+								});
               }
             }}
             renderOption={(data) => {
@@ -3125,23 +3132,65 @@ const ParsedAction = (props) => {
                 newActionname.substring(1)
               ).replaceAll("_", " ");
 
+							var method = ""
+							var extraDescription = ""
+							if (data.name.includes("get_")) {
+								method = "GET"
+							} else if (data.name.includes("post_")) {
+								method = "POST"
+							} else if (data.name.includes("put_")) {
+								method = "PUT"
+							} else if (data.name.includes("patch_")) {
+								method = "PATCH"
+							} else if (data.name.includes("delete_")) {
+								method = "DELETE"
+							} else if (data.name.includes("options_")) {
+								method = "OPTIONS"
+							} else if (data.name.includes("connect_")) {
+								method = "CONNECT"
+							}
+
+							// FIXME: Should it require a base URL?
+							if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
+								var extraUrl = ""
+								const descSplit = data.description.split("\n")
+								for (var line in descSplit) {
+									if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
+										const urlsplit = descSplit[line].split("/")
+										extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
+										break
+									} 
+								}
+
+								if (extraUrl.length > 0) {
+									extraDescription = `${method} ${extraUrl}`
+								}
+							}
+
               return (
                 <Tooltip
                   color="secondary"
                   title={newActiondescription}
                   placement="left"
                 >
-									<div style={{ display: "flex" }}>
+									<div>
+										<div style={{ display: "flex", marginBottom: 0,}}>
 											<span
 												style={{
 													marginRight: 10,
 													marginTop: "auto",
-												marginBottom: "auto",
+													marginBottom: 0,
 												}}
 											>
 												{useIcon}
 											</span>
-										<span style={{}}>{newActionname}</span>
+											<span style={{marginBottom: 0,}}>{newActionname}</span>
+										</div>
+										{extraDescription.length > 0 ? 
+											<Typography variant="body2" color="textSecondary" style={{marginTop: 0, }}>
+												{extraDescription}	
+											</Typography>
+										: null}
 									</div>
 								</Tooltip>
               );
@@ -3162,6 +3211,8 @@ const ParsedAction = (props) => {
 
               return (
 								<TextField
+									color="primary"
+									variant="body1"
 									style={{
 										backgroundColor: theme.palette.inputColor,
 										borderRadius: theme.palette.borderRadius,