Fixed Too many rendering issue : Removing hide/show button
This commit is contained in:
monilprajapati
@@ -175,8 +175,8 @@ const ParsedAction = (props) => {
|
|||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [hideBody, setHideBody] = React.useState(true);
|
// const [hideBody, setHideBody] = React.useState(true);
|
||||||
const [activateHidingBodyButton, setActivateHidingBodyButton] = React.useState(false);
|
// const [activateHidingBodyButton, setActivateHidingBodyButton] = React.useState(false);
|
||||||
const [appActionName, setAppActionName] = React.useState(selectedAction.label);
|
const [appActionName, setAppActionName] = React.useState(selectedAction.label);
|
||||||
const [delay, setDelay] = React.useState(selectedAction?.execution_delay || 0);
|
const [delay, setDelay] = React.useState(selectedAction?.execution_delay || 0);
|
||||||
|
|
||||||
@@ -217,28 +217,28 @@ const ParsedAction = (props) => {
|
|||||||
// selectedAction, selectedApp,setNewSelectedAction
|
// selectedAction, selectedApp,setNewSelectedAction
|
||||||
// ])
|
// ])
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
if (selectedAction.parameters === null || selectedAction.parameters === undefined) {
|
// if (selectedAction.parameters === null || selectedAction.parameters === undefined) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
const paramcheck = selectedAction.parameters.find(param => param.name === "body")
|
// const paramcheck = selectedAction.parameters.find(param => param.name === "body")
|
||||||
if (paramcheck === undefined || paramcheck === null) {
|
// if (paramcheck === undefined || paramcheck === null) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
|
|
||||||
// This was just opposite..
|
// // This was just opposite..
|
||||||
if (paramcheck.id === "TOGGLED"){
|
// if (paramcheck.id === "TOGGLED"){
|
||||||
setHideBody(true)
|
// setHideBody(true)
|
||||||
} else {
|
// } else {
|
||||||
setHideBody(false)
|
// setHideBody(false)
|
||||||
|
|
||||||
if (paramcheck.id === "UNTOGGLED") {
|
// if (paramcheck.id === "UNTOGGLED") {
|
||||||
setActivateHidingBodyButton(false)
|
// setActivateHidingBodyButton(false)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
}, [])
|
// }, [])
|
||||||
|
|
||||||
const keywords = [
|
const keywords = [
|
||||||
"len(",
|
"len(",
|
||||||
@@ -2837,185 +2837,178 @@ const ParsedAction = (props) => {
|
|||||||
//setSelectedActionParameters(selectedActionParameters)
|
//setSelectedActionParameters(selectedActionParameters)
|
||||||
}
|
}
|
||||||
|
|
||||||
var hideBodyButton = "";
|
// var hideBodyButton = "";
|
||||||
const hideBodyButtonValue = (
|
// const hideBodyButtonValue = (
|
||||||
<div
|
// <div
|
||||||
key={data.name}
|
// key={data.name}
|
||||||
id="hide_body_button"
|
// id="hide_body_button"
|
||||||
style={{
|
// style={{
|
||||||
marginTop: 50,
|
// marginTop: 50,
|
||||||
border: "1px solid rgba(255,255,255,0.7)",
|
// border: "1px solid rgba(255,255,255,0.7)",
|
||||||
borderTop: "1px solid rgba(255,255,255,0.7)",
|
// borderTop: "1px solid rgba(255,255,255,0.7)",
|
||||||
borderRadius: theme.palette.borderRadius,
|
// borderRadius: theme.palette.borderRadius,
|
||||||
alignItems: "center",
|
// alignItems: "center",
|
||||||
textAlign: "center",
|
// textAlign: "center",
|
||||||
}}
|
// }}
|
||||||
>
|
// >
|
||||||
<Tooltip
|
// <Tooltip
|
||||||
color="secondary"
|
// color="secondary"
|
||||||
title={hideBody ? "Hide all body fields and only show the body itself" : "Show all body fields instead of the body itself"}
|
// title={
|
||||||
placement="top"
|
// hideBody
|
||||||
>
|
// ? "Hide all body fields and only show the body itself"
|
||||||
<FormControlLabel
|
// : "Show all body fields instead of the body itself"
|
||||||
control={
|
// }
|
||||||
<Checkbox
|
// placement="top"
|
||||||
tabIndex="-1"
|
// >
|
||||||
checked={hideBody}
|
// <FormControlLabel
|
||||||
style={{
|
// control={
|
||||||
color: theme.palette.primary.secondary,
|
// <Checkbox
|
||||||
}}
|
// tabIndex="-1"
|
||||||
onChange={(event) => {
|
// checked={hideBody}
|
||||||
var tag = "TOGGLED"
|
// style={{
|
||||||
if (hideBody) {
|
// color: theme.palette.primary.secondary,
|
||||||
tag = "UNTOGGLED"
|
// }}
|
||||||
}
|
// onChange={(event) => {
|
||||||
|
// const newHideBody = !hideBody;
|
||||||
|
// setHideBody(newHideBody);
|
||||||
|
|
||||||
setHideBody(!hideBody)
|
// const updatedParameters = selectedActionParameters.map((param) => {
|
||||||
for (let paramkey in Object.entries(selectedActionParameters)) {
|
// if (param.name === "body") {
|
||||||
var currentItem = selectedActionParameters[paramkey];
|
// return { ...param, id: newHideBody ? "UNTOGGLED" : "TOGGLED" };
|
||||||
if (currentItem.name === "ssl_verify") {
|
// }
|
||||||
|
// if (param.description === openApiFieldDesc) {
|
||||||
|
// return { ...param, field_active: newHideBody };
|
||||||
|
// }
|
||||||
|
// return param;
|
||||||
|
// });
|
||||||
|
|
||||||
}
|
// setSelectedActionParameters(updatedParameters);
|
||||||
|
|
||||||
if (currentItem.name === "body") {
|
// setTimeout(() => {
|
||||||
currentItem.id = tag
|
// const element = document.getElementById("hide_body_button");
|
||||||
}
|
// if (element) {
|
||||||
|
// element.scrollIntoView({
|
||||||
|
// behavior: "smooth",
|
||||||
|
// block: "center",
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }, 100);
|
||||||
|
// }}
|
||||||
|
// name="requires_unique"
|
||||||
|
// />
|
||||||
|
// }
|
||||||
|
// label={hideBody ? "Show Body" : "Hide Body"}
|
||||||
|
// />
|
||||||
|
// </Tooltip>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
|
||||||
if (currentItem.description === openApiFieldDesc) {
|
// if (selectedApp.generated && data.name === "body") {
|
||||||
currentItem.field_active = !hideBody
|
// const regex = /\${(\w+)}/g;
|
||||||
}
|
// const found = placeholder.match(regex);
|
||||||
}
|
|
||||||
|
// // setActivateHidingBodyButton(false)
|
||||||
|
// //
|
||||||
|
// hideBodyButton = hideBodyButtonValue;
|
||||||
|
// if (found === null || !hideBody) {
|
||||||
|
// if (found === null) {
|
||||||
|
// setActivateHidingBodyButton(true);
|
||||||
|
// } else {
|
||||||
|
// //console.log("In found: ", found, hideBody)
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
|
||||||
|
// rows = "1";
|
||||||
|
// disabled = true;
|
||||||
|
// openApiHelperText = "OpenAPI spec: fill the following fields.";
|
||||||
|
|
||||||
|
// var changed = false;
|
||||||
|
// var tempArray = []
|
||||||
|
// for (let specKey in found) {
|
||||||
|
// const tmpitem = found[specKey];
|
||||||
|
// var skip = false;
|
||||||
|
|
||||||
|
// for (let innerkey in selectedActionParameters) {
|
||||||
|
// if (selectedActionParameters[innerkey].name === tmpitem) {
|
||||||
|
// skip = true;
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (skip) {
|
||||||
|
// //console.log("SKIPPING ", tmpitem)
|
||||||
|
// continue;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// changed = true;
|
||||||
|
// var isRequired = false
|
||||||
|
// // Check if original field name is in the selectedAction.required_body_fields
|
||||||
|
// if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
|
||||||
|
// for (let innerkey in selectedAction.required_body_fields) {
|
||||||
|
// if (selectedAction.required_body_fields[innerkey] === tmpitem) {
|
||||||
|
// isRequired = true
|
||||||
|
// break
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// tempArray.push({
|
||||||
|
// action_field: "",
|
||||||
|
// configuration: false,
|
||||||
|
// description: openApiFieldDesc,
|
||||||
|
// example: "",
|
||||||
|
// id: "",
|
||||||
|
// multiline: true,
|
||||||
|
// name: tmpitem,
|
||||||
|
// options: null,
|
||||||
|
// required: isRequired,
|
||||||
|
// schema: { type: "string" },
|
||||||
|
// skip_multicheck: false,
|
||||||
|
// tags: null,
|
||||||
|
// value: "",
|
||||||
|
// variant: "STATIC_VALUE",
|
||||||
|
// field_active: true,
|
||||||
|
|
||||||
|
// autocompleted: true,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log("TEMP ARRAY: ", tempArray)
|
||||||
|
// var required = selectedActionParameters.filter(item => item.required === true)
|
||||||
|
// var notRequired = selectedActionParameters.filter(item => item.required === false)
|
||||||
|
|
||||||
|
// if (tempArray.length > 0) {
|
||||||
|
// // Sort tempArray based on tempArray.required
|
||||||
|
// tempArray.sort((a, b) => (a.required < b.required) ? 1 : -1)
|
||||||
|
// // Add all items to the selectedActionParameters array
|
||||||
|
// for (let innerkey in tempArray) {
|
||||||
|
// tempArray[innerkey].id = "ADDED"
|
||||||
|
|
||||||
|
// if (tempArray[innerkey].required === true) {
|
||||||
|
// required.push(tempArray[innerkey])
|
||||||
|
// } else {
|
||||||
|
// notRequired.push(tempArray[innerkey])
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// //selectedActionParameters
|
||||||
|
// if (changed) {
|
||||||
|
// // Sort selectedActionParameters based on selectedActionParameters.required
|
||||||
|
// //selectedActionParameters.sort((a, b) => (a.required < b.required) ? 1 : -1)
|
||||||
|
// // Find the "headers" and "queries" field names and put them on the first indexes anyway
|
||||||
|
// var newArray = required.concat(notRequired)
|
||||||
|
|
||||||
|
|
||||||
// Scroll to hide_body_button
|
// setSelectedActionParameters(newArray)
|
||||||
setTimeout(() => {
|
// }
|
||||||
var element = document.getElementById("hide_body_button")
|
|
||||||
if (element !== undefined && element !== null) {
|
|
||||||
// Keep the button a little below the top
|
|
||||||
element.scrollIntoView({
|
|
||||||
behavior: "smooth",
|
|
||||||
block: "center",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
|
// return hideBodyButton;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
}}
|
// if (activateHidingBodyButton === true) {
|
||||||
name="requires_unique"
|
// hideBodyButton = "";
|
||||||
/>
|
// }
|
||||||
}
|
|
||||||
label={hideBody ? "Show Body" : "Hide Body"}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (selectedApp.generated && data.name === "body") {
|
|
||||||
const regex = /\${(\w+)}/g;
|
|
||||||
const found = placeholder.match(regex);
|
|
||||||
|
|
||||||
// setActivateHidingBodyButton(false)
|
|
||||||
//
|
|
||||||
hideBodyButton = hideBodyButtonValue;
|
|
||||||
if (found === null || !hideBody) {
|
|
||||||
if (found === null) {
|
|
||||||
setActivateHidingBodyButton(true);
|
|
||||||
} else {
|
|
||||||
//console.log("In found: ", found, hideBody)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
|
|
||||||
rows = "1";
|
|
||||||
disabled = true;
|
|
||||||
openApiHelperText = "OpenAPI spec: fill the following fields.";
|
|
||||||
|
|
||||||
var changed = false;
|
|
||||||
var tempArray = []
|
|
||||||
for (let specKey in found) {
|
|
||||||
const tmpitem = found[specKey];
|
|
||||||
var skip = false;
|
|
||||||
|
|
||||||
for (let innerkey in selectedActionParameters) {
|
|
||||||
if (selectedActionParameters[innerkey].name === tmpitem) {
|
|
||||||
skip = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (skip) {
|
|
||||||
//console.log("SKIPPING ", tmpitem)
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
changed = true;
|
|
||||||
var isRequired = false
|
|
||||||
// Check if original field name is in the selectedAction.required_body_fields
|
|
||||||
if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
|
|
||||||
for (let innerkey in selectedAction.required_body_fields) {
|
|
||||||
if (selectedAction.required_body_fields[innerkey] === tmpitem) {
|
|
||||||
isRequired = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tempArray.push({
|
|
||||||
action_field: "",
|
|
||||||
configuration: false,
|
|
||||||
description: openApiFieldDesc,
|
|
||||||
example: "",
|
|
||||||
id: "",
|
|
||||||
multiline: true,
|
|
||||||
name: tmpitem,
|
|
||||||
options: null,
|
|
||||||
required: isRequired,
|
|
||||||
schema: { type: "string" },
|
|
||||||
skip_multicheck: false,
|
|
||||||
tags: null,
|
|
||||||
value: "",
|
|
||||||
variant: "STATIC_VALUE",
|
|
||||||
field_active: true,
|
|
||||||
|
|
||||||
autocompleted: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("TEMP ARRAY: ", tempArray)
|
|
||||||
var required = selectedActionParameters.filter(item => item.required === true)
|
|
||||||
var notRequired = selectedActionParameters.filter(item => item.required === false)
|
|
||||||
|
|
||||||
if (tempArray.length > 0) {
|
|
||||||
// Sort tempArray based on tempArray.required
|
|
||||||
tempArray.sort((a, b) => (a.required < b.required) ? 1 : -1)
|
|
||||||
// Add all items to the selectedActionParameters array
|
|
||||||
for (let innerkey in tempArray) {
|
|
||||||
tempArray[innerkey].id = "ADDED"
|
|
||||||
|
|
||||||
if (tempArray[innerkey].required === true) {
|
|
||||||
required.push(tempArray[innerkey])
|
|
||||||
} else {
|
|
||||||
notRequired.push(tempArray[innerkey])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//selectedActionParameters
|
|
||||||
if (changed) {
|
|
||||||
// Sort selectedActionParameters based on selectedActionParameters.required
|
|
||||||
//selectedActionParameters.sort((a, b) => (a.required < b.required) ? 1 : -1)
|
|
||||||
// Find the "headers" and "queries" field names and put them on the first indexes anyway
|
|
||||||
var newArray = required.concat(notRequired)
|
|
||||||
|
|
||||||
|
|
||||||
setSelectedActionParameters(newArray)
|
|
||||||
}
|
|
||||||
|
|
||||||
return hideBodyButton;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activateHidingBodyButton === true) {
|
|
||||||
hideBodyButton = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
const clickedFieldId = "rightside_field_" + count;
|
const clickedFieldId = "rightside_field_" + count;
|
||||||
|
|
||||||
@@ -3926,7 +3919,7 @@ const ParsedAction = (props) => {
|
|||||||
const hasAutocomplete = data?.autocompleted === true
|
const hasAutocomplete = data?.autocompleted === true
|
||||||
return (
|
return (
|
||||||
<div key={data.name}>
|
<div key={data.name}>
|
||||||
{hideBodyButton}
|
{/* {hideBodyButton} */}
|
||||||
<div
|
<div
|
||||||
style={{ marginTop: 20, marginBottom: 0, display: "flex" }}
|
style={{ marginTop: 20, marginBottom: 0, display: "flex" }}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user