Made search for actions in OpenAPI way better by adding description and path
This commit is contained in:
frikky
@@ -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,13 +118,7 @@ const useStyles = makeStyles({
|
||||
},
|
||||
},
|
||||
});
|
||||
//const useStyles = makeStyles((theme) =>
|
||||
// createStyles({
|
||||
// notchedOutline: {
|
||||
// borderColor: "#f85a3e !important"
|
||||
// },
|
||||
//)
|
||||
|
||||
|
||||
const openApiFieldDesc = "Generated by OpenAPI body example";
|
||||
const ParsedAction = (props) => {
|
||||
const {
|
||||
@@ -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" }}>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 10,
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
}}
|
||||
>
|
||||
{useIcon}
|
||||
</span>
|
||||
<span style={{}}>{newActionname}</span>
|
||||
<div>
|
||||
<div style={{ display: "flex", marginBottom: 0,}}>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 10,
|
||||
marginTop: "auto",
|
||||
marginBottom: 0,
|
||||
}}
|
||||
>
|
||||
{useIcon}
|
||||
</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
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
{...params}
|
||||
label="Find Actions"
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
color="primary"
|
||||
variant="body1"
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
{...params}
|
||||
label="Find Actions"
|
||||
variant="outlined"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user