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("_", " ");
@@ -2182,7 +2177,7 @@ const ParsedAction = (props) => {
               tmpitem = "Username"
             } else if (tmpitem === "Password basic") {
               tmpitem = "Password"
-            }
+						}
 
  
             const description =
@@ -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>
-										<span
+										<div style={{ display: "flex", marginBottom: 0,}}>
-											style={{
+											<span
-												marginRight: 10,
+												style={{
-												marginTop: "auto",
+													marginRight: 10,
-												marginBottom: "auto",
+													marginTop: "auto",
-											}}
+													marginBottom: 0,
-										>
+												}}
-											{useIcon}
+											>
-										</span>
+												{useIcon}
-										<span style={{}}>{newActionname}</span>
+											</span>
+											<span style={{marginBottom: 0,}}>{newActionname}</span>
+										</div>
+										{extraDescription.length > 0 ? 
+											<Typography variant="body2" color="textSecondary" style={{marginTop: 0, }}>
+												{extraDescription}	
+											</Typography>
+										: null}
 									</div>
 								</Tooltip>
               );
@@ -3161,15 +3210,17 @@ const ParsedAction = (props) => {
 							}
 
               return (
-									<TextField
+								<TextField
-										style={{
+									color="primary"
-											backgroundColor: theme.palette.inputColor,
+									variant="body1"
-											borderRadius: theme.palette.borderRadius,
+									style={{
-										}}
+										backgroundColor: theme.palette.inputColor,
-										{...params}
+										borderRadius: theme.palette.borderRadius,
-										label="Find Actions"
+									}}
-										variant="outlined"
+									{...params}
-                	/>
+									label="Find Actions"
+									variant="outlined"
+								/>
               );
             }}
           />