marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Too many rendering issue : Removing hide/show button

Browse Source
This commit is contained in:
monilprajapati
2024-06-13 21:32:50 +05:30
parent 2041d0bf17
commit 1a87734965
1 changed files with 177 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ParsedAction.jsx
+177 -184
View File
@@ -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);
// const updatedParameters = selectedActionParameters.map((param) => {
// if (param.name === "body") {
// return { ...param, id: newHideBody ? "UNTOGGLED" : "TOGGLED" };
// }
// if (param.description === openApiFieldDesc) {
// return { ...param, field_active: newHideBody };
// }
// return param;
// });
// setSelectedActionParameters(updatedParameters);
// setTimeout(() => {
// 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>
// );
setHideBody(!hideBody) // if (selectedApp.generated && data.name === "body") {
for (let paramkey in Object.entries(selectedActionParameters)) { // const regex = /\${(\w+)}/g;
var currentItem = selectedActionParameters[paramkey]; // const found = placeholder.match(regex);
if (currentItem.name === "ssl_verify") {
} // // setActivateHidingBodyButton(false)
// //
// hideBodyButton = hideBodyButtonValue;
// if (found === null || !hideBody) {
// if (found === null) {
// setActivateHidingBodyButton(true);
// } else {
// //console.log("In found: ", found, hideBody)
// }
// } else {
if (currentItem.name === "body") { // rows = "1";
currentItem.id = tag // disabled = true;
} // openApiHelperText = "OpenAPI spec: fill the following fields.";
if (currentItem.description === openApiFieldDesc) { // var changed = false;
currentItem.field_active = !hideBody // var tempArray = []
} // for (let specKey in found) {
} // const tmpitem = found[specKey];
// var skip = false;
// Scroll to hide_body_button
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)
}} // for (let innerkey in selectedActionParameters) {
name="requires_unique" // if (selectedActionParameters[innerkey].name === tmpitem) {
/> // skip = true;
} // break;
label={hideBody ? "Show Body" : "Hide Body"} // }
/> // }
</Tooltip>
</div>
)
if (selectedApp.generated && data.name === "body") { // if (skip) {
const regex = /\${(\w+)}/g; // //console.log("SKIPPING ", tmpitem)
const found = placeholder.match(regex); // continue;
// }
// setActivateHidingBodyButton(false) // changed = true;
// // var isRequired = false
hideBodyButton = hideBodyButtonValue; // // Check if original field name is in the selectedAction.required_body_fields
if (found === null || !hideBody) { // if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
if (found === null) { // for (let innerkey in selectedAction.required_body_fields) {
setActivateHidingBodyButton(true); // if (selectedAction.required_body_fields[innerkey] === tmpitem) {
} else { // isRequired = true
//console.log("In found: ", found, hideBody) // break
} // }
} else { // }
// }
rows = "1"; // tempArray.push({
disabled = true; // action_field: "",
openApiHelperText = "OpenAPI spec: fill the following fields."; // configuration: false,
// description: openApiFieldDesc,
var changed = false; // example: "",
var tempArray = [] // id: "",
for (let specKey in found) { // multiline: true,
const tmpitem = found[specKey]; // name: tmpitem,
var skip = false; // options: null,
// required: isRequired,
for (let innerkey in selectedActionParameters) { // schema: { type: "string" },
if (selectedActionParameters[innerkey].name === tmpitem) { // skip_multicheck: false,
skip = true; // tags: null,
break; // value: "",
} // variant: "STATIC_VALUE",
} // field_active: true,
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, // autocompleted: true,
}); // });
} // }
console.log("TEMP ARRAY: ", tempArray) // console.log("TEMP ARRAY: ", tempArray)
var required = selectedActionParameters.filter(item => item.required === true) // var required = selectedActionParameters.filter(item => item.required === true)
var notRequired = selectedActionParameters.filter(item => item.required === false) // var notRequired = selectedActionParameters.filter(item => item.required === false)
if (tempArray.length > 0) { // if (tempArray.length > 0) {
// Sort tempArray based on tempArray.required // // Sort tempArray based on tempArray.required
tempArray.sort((a, b) => (a.required < b.required) ? 1 : -1) // tempArray.sort((a, b) => (a.required < b.required) ? 1 : -1)
// Add all items to the selectedActionParameters array // // Add all items to the selectedActionParameters array
for (let innerkey in tempArray) { // for (let innerkey in tempArray) {
tempArray[innerkey].id = "ADDED" // tempArray[innerkey].id = "ADDED"
if (tempArray[innerkey].required === true) { // if (tempArray[innerkey].required === true) {
required.push(tempArray[innerkey]) // required.push(tempArray[innerkey])
} else { // } else {
notRequired.push(tempArray[innerkey]) // notRequired.push(tempArray[innerkey])
} // }
} // }
} // }
//selectedActionParameters // //selectedActionParameters
if (changed) { // if (changed) {
// Sort selectedActionParameters based on selectedActionParameters.required // // Sort selectedActionParameters based on selectedActionParameters.required
//selectedActionParameters.sort((a, b) => (a.required < b.required) ? 1 : -1) // //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 // // Find the "headers" and "queries" field names and put them on the first indexes anyway
var newArray = required.concat(notRequired) // var newArray = required.concat(notRequired)
setSelectedActionParameters(newArray) // setSelectedActionParameters(newArray)
} // }
return hideBodyButton; // return hideBodyButton;
} // }
} // }
if (activateHidingBodyButton === true) { // if (activateHidingBodyButton === true) {
hideBodyButton = ""; // 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" }}
> >