DropdownForm npw uses JSON objects to populete options

8 files changed, 138 insertions, 35 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
index e410e87af33..90625397d1d 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
@@ -10,7 +10,7 @@ export default function AddQueryInput() {
     setId(id + 1);
     setInputs((prevInputs) => [
       ...prevInputs,
-      { id: id + 1, type: '', input: '' },
+      { id: id + 1, type: '', input: '', hasChildren: false, children: [] },
     ]);
   };
 
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
index 7bd5a6a7641..c199d5bd735 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
@@ -8,12 +8,111 @@ export const QueryInputProvider = (prop) => {
       id: 1,
       type: '',
       input: '',
+      hasChildren: false,
+      children: [],
     },
   ]);
   const [id, setId] = useState(1);
+  const levelZeroParameters = {
+    yql: { name: 'yql', type: 'String', hasChildren: false },
+    hits: { name: 'hits', type: 'Integer', hasChildren: false },
+    offset: { name: 'offset', type: 'Integer', hasChildren: false },
+    queryProfile: { name: 'queryProfile', type: 'String', hasChildren: false },
+    noCache: { name: 'noCache', type: 'Boolean', hasChildren: false },
+    groupingSessionCache: {
+      name: 'groupingSessionCache',
+      type: 'Boolean',
+      hasChildren: false,
+    },
+    searchChain: { name: 'searchChain', type: 'String', hasChildren: false },
+    timeout: { name: 'timeout', type: 'Float', hasChildren: false },
+    tracelevel: { name: 'tracelevel', type: 'Parent', hasChildren: true },
+    traceLevel: { name: 'traceLevel', type: 'Integer', hasChildren: false },
+    explainLevel: { name: 'explainLevel', type: 'Integer', hasChildren: false },
+    explainlevel: { name: 'explainlevel', type: 'Integer', hasChildren: false },
+    model: { name: 'model', type: 'Parent', hasChildren: true },
+    ranking: { name: 'ranking', type: 'Parent', hasChildren: true },
+    collapse: { name: 'collapse', type: 'Parent', hasChildren: true },
+    collapsesize: { name: 'collapsesize', type: 'Integer', hasChildren: false },
+    collapsefield: {
+      name: 'collapsefield',
+      type: 'String',
+      hasChildren: false,
+    },
+    presentation: { name: 'presentation', type: 'Parent', hasChildren: true },
+    pos: { name: 'pos', type: 'Parent', hasChildren: true },
+    streaming: { name: 'streaming', type: 'Parent', hasChildren: true },
+    rules: { name: 'rules', type: 'Parent', hasChildren: true },
+    recall: { name: 'recall', type: 'List', hasChildren: false },
+    user: { name: 'user', type: 'String', hasChildren: false },
+    metrics: { name: 'metrics', type: 'Parent', hasChildren: true },
+  };
+  const childMap = {
+    collapse: [{ child: 'summary', type: 'String', hasChildren: false }],
+    metrics: [{ child: 'ignore', type: 'Boolean', hasChildren: false }],
+    model: [
+      { child: 'defaultIndex', type: 'String', hasChildren: false },
+      { child: 'encoding', type: 'String', hasChildren: false },
+      { child: 'language', type: 'String', hasChildren: false },
+      { child: 'queryString', type: 'String', hasChildren: false },
+      { child: 'restrict', type: 'List', hasChildren: false },
+      { child: 'searchPath', type: 'String', hasChildren: false },
+      { child: 'sources', type: 'List', hasChildren: false },
+      { child: 'type', type: 'String', hasChildren: false },
+    ],
+    pos: [
+      { child: 'll', type: 'String', hasChildren: false },
+      { child: 'radius', type: 'String', hasChildren: false },
+      { child: 'bb', type: 'List', hasChildren: false },
+      { child: 'attribute', type: 'String', hasChildren: false },
+    ],
+    presentation: [
+      { child: 'bolding', type: 'Boolean', hasChildren: false },
+      { child: 'format', type: 'String', hasChildren: false },
+      { child: 'summary', type: 'String', hasChildren: false },
+      { child: 'template', type: 'String', hasChildren: false },
+      { child: 'timing', type: 'Boolean', hasChildren: false },
+    ],
+    ranking: [
+      { child: 'location', type: 'String', hasChildren: false },
+      { child: 'features', type: 'String', hasChildren: false },
+      { child: 'listFeatures', type: 'Boolean', hasChildren: false },
+      { child: 'profile', type: 'String', hasChildren: false },
+      { child: 'properties', type: 'String', hasChildren: false },
+      { child: 'sorting', type: 'String', hasChildren: false },
+      { child: 'freshness', type: 'String', hasChildren: false },
+      { child: 'queryCache', type: 'Boolean', hasChildren: false },
+      { child: 'matchPhase', type: 'Parent', hasChildren: true },
+    ],
+    ranking_matchPhase: [
+      { child: 'maxHits', type: 'Long', hasChildren: false },
+      { child: 'attribute', type: 'String', hasChildren: false },
+      { child: 'ascending', type: 'Boolean', hasChildren: false },
+      { child: 'diversity', type: 'Parent', hasChildren: true },
+    ],
+    ranking_matchPhase_diversity: [
+      { child: 'attribute', type: 'String', hasChildren: false },
+      { child: 'minGroups', type: 'Long', hasChildren: false },
+    ],
+    rules: [
+      { child: 'off', type: 'Boolean', hasChildren: false },
+      { child: 'rulebase', type: 'String', hasChildren: false },
+    ],
+    streaming: [
+      { child: 'userid', type: 'Integer', hasChildren: false },
+      { child: 'groupname', type: 'String', hasChildren: false },
+      { child: 'selection', type: 'String', hasChildren: false },
+      { child: 'priority', type: 'String', hasChildren: false },
+      { child: 'maxbucketspervisitor', type: 'Integer', hasChildren: false },
+    ],
+    trace: [{ child: 'timestamps', type: 'Boolean', hasChildren: false }],
+    tracelevel: [{ child: 'rules', type: 'Integer', hasChildren: false }],
+  };
 
   return (
-    <QueryInputContext.Provider value={{ inputs, setInputs, id, setId }}>
+    <QueryInputContext.Provider
+      value={{ inputs, setInputs, id, setId, levelZeroParameters, childMap }}
+    >
       {prop.children}
     </QueryInputContext.Provider>
   );
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
index e6cd623fea7..ecfde212968 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
 import image from '../../assets/img/information.svg';
 
 export default function Info({
@@ -7,24 +8,31 @@ export default function Info({
   height = 15,
   width = 15,
 }) {
+  //TODO: Make popver reflect tooltip for selected query type
+  const popover = (
+    <Popover id={`inf${id}`}>
+      <Popover.Header as="h3">Popover right</Popover.Header>
+      <Popover.Body>Content</Popover.Body>
+    </Popover>
+  );
+
   return (
     <>
-      <a
-        href="#"
-        className={className}
-        id={`inf${id}`}
-        style={{ visibility: 'visible' }}
+      <OverlayTrigger
+        placement="right"
+        delay={{ show: 250, hide: 400 }}
+        overlay={popover}
       >
-        <img
-          src={image}
-          height={height}
-          width={width}
-          className="information"
-          alt="Missing"
-        />
-        <span id={`span${id}`}></span>
-      </a>
+        <span>
+          <img
+            src={image}
+            height={height}
+            width={width}
+            className="information"
+            alt="Missing"
+          />
+        </span>
+      </OverlayTrigger>
     </>
-    //TODO: Swap <a> with a bootstrap Overlay
   );
 }
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
index 6c57a250920..f0c0e672c22 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -5,6 +5,10 @@ import SimpleDropDownForm from './SimpleDropDownForm';
 export default function QueryDropdownFormn({ choices, id }) {
   const { inputs, setInputs } = useContext(QueryInputContext);
 
+  var stringType = ['select'];
+  var booleanType = ['nocachewrite'];
+  var floatType = ['timeout'];
+
   const updateType = (e) => {
     e.preventDefault();
     const index = inputs.findIndex((element) => element.id === id);
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
index 764e42508bb..dc48d5b3563 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -9,7 +9,8 @@ import QueryDropdownFormn from './QueryDropDownForm';
 export default function QueryInput({ id }) {
   const choices = ['yql', 'hits', 'offset', 'tracelevel'];
 
-  const { inputs, setInputs } = useContext(QueryInputContext);
+  const { inputs, setInputs, levelZeroParameters, childMap } =
+    useContext(QueryInputContext);
 
   function removeRow(id) {
     const newList = inputs.filter((item) => item.id !== id);
@@ -29,10 +30,10 @@ export default function QueryInput({ id }) {
     return (
       <div key={value.id} id={value.id} className="queryinput">
         <QueryDropdownFormn
-          choices={choices}
+          choices={levelZeroParameters}
           id={value.id}
         ></QueryDropdownFormn>
-        <Info id={value.id} height="15" width="15"></Info>
+        <Info id={value.id} height="15" width="15" />
         <SimpleForm
           id={`v${value.id}`}
           size="30"
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
index 17bbf39e81a..14733d287c1 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SendQuery.jsx
@@ -4,8 +4,8 @@ import SimpleButton from '../Buttons/SimpleButton';
 import SimpleForm from './SimpleForm';
 
 export default function SendQuery() {
-  const messageMethodArray = ['POST', 'GET'];
-  const [method, setMethod] = useState(messageMethodArray[0]);
+  const messageMethods = { post: { name: 'POST' }, get: { name: 'GET' } };
+  const [method, setMethod] = useState(messageMethods.post.name);
 
   const updateMethod = (e) => {
     e.preventDefault();
@@ -21,7 +21,7 @@ export default function SendQuery() {
   return (
     <>
       <SimpleDropDownForm
-        choices={messageMethodArray}
+        choices={messageMethods}
         id="method"
         className="methodselector"
         onChange={updateMethod}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
index 7745d7e6445..a734a861a89 100644
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
@@ -13,10 +13,10 @@ export default function SimpleDropDownForm({
   };
   const { choice, setChoice } = useState(choices[0]);
 
-  const options = choices.map((value, index) => {
+  const options = Object.keys(choices).map((choice) => {
     return (
-      <option className="options" key={index} value={value}>
-        {value}
+      <option className="options" key={choice} value={choices[choice].name}>
+        {choices[choice].name}
       </option>
     );
   });
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 6b73c223c5f..8598cbda54e 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -64,15 +64,6 @@ export function QueryBuilder() {
           >
             Copy
           </OverlayImageButton>
-          <OverlayImageButton
-            className="intro-refresh"
-            image={refreshImage}
-            height="30"
-            width="30"
-            tooltip="Refresh"
-          >
-            Refresh
-          </OverlayImageButton>
           <br />
           <br />
         </div>