Child rows can now be removed

1 files changed, 51 insertions, 2 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
index c4e5e2bd5ec..bd5044d1f68 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInputChild.jsx
@@ -1,8 +1,10 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import AddPropertyButton from '../Buttons/AddPropertyButton';
 import { QueryInputContext } from '../Contexts/QueryInputContext';
 import QueryDropdownForm from './QueryDropDownForm';
 import SimpleForm from './SimpleForm';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import SimpleButton from '../Buttons/SimpleButton';
 
 export default function QueryInputChild({ id }) {
   const { inputs, setInputs, childMap } = useContext(QueryInputContext);
@@ -57,6 +59,21 @@ export default function QueryInputChild({ id }) {
     }
   };
 
+  const removeRow = (id) => {
+    let newInputs = inputs.slice();
+    let currentId = id.substring(0, 1);
+    let index = newInputs.findIndex((element) => element.id === currentId);
+    let children = newInputs[index].children;
+    for (let i = 3; i < id.length; i += 2) {
+      currentId = id.substring(0, i);
+      index = children.findIndex((element) => element.id === currentId);
+      children = children[index].children;
+    }
+    index = children.findIndex((element) => element === id);
+    children.splice(index, 1);
+    setInputs(newInputs);
+  };
+
   const inputList = childArray.map((child) => {
     return (
       <div key={child.id} id={child.id}>
@@ -77,11 +94,27 @@ export default function QueryInputChild({ id }) {
             placeholder={setPlaceHolder(child.id)}
           />
         )}
+        <OverlayTrigger
+          placement="right"
+          delay={{ show: 250, hide: 400 }}
+          overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
+        >
+          <span>
+            <SimpleButton
+              id={`b${child.id}`}
+              className="removeRow"
+              onClick={() => removeRow(child.id)}
+              children="-"
+            ></SimpleButton>
+          </span>
+        </OverlayTrigger>
+        <br />
         <Child
           type={currentType + '_' + child.type}
           child={child}
           onChange={updateInput}
           placeholder={setPlaceHolder}
+          removeRow={removeRow}
         />
       </div>
     );
@@ -90,7 +123,7 @@ export default function QueryInputChild({ id }) {
   return <>{inputList}</>;
 }
 
-function Child({ child, type, onChange, placeholder }) {
+function Child({ child, type, onChange, placeholder, removeRow }) {
   const { childMap } = useContext(QueryInputContext);
 
   const nestedChildren = (child.children || []).map((child) => {
@@ -113,12 +146,28 @@ function Child({ child, type, onChange, placeholder }) {
             placeholder={placeholder(child.id)}
           />
         )}
+        <OverlayTrigger
+          placement="right"
+          delay={{ show: 250, hide: 400 }}
+          overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
+        >
+          <span>
+            <SimpleButton
+              id={`b${child.id}`}
+              className="removeRow"
+              onClick={() => removeRow(child.id)}
+              children="-"
+            ></SimpleButton>
+          </span>
+        </OverlayTrigger>
+        <br />
         <Child
           child={child}
           id={child.id}
           type={type + '_' + child.type}
           onChange={onChange}
           placeholder={placeholder}
+          removeRow={removeRow}
         />
       </div>
     );