querybuilder displays correctly

30 files changed, 703 insertions, 290 deletions

diff --git a/client/js/app/package.json b/client/js/app/package.json
index 5459608197c..c361fff4072 100644
--- a/client/js/app/package.json
+++ b/client/js/app/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "react": "^18",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^18"
   },
   "devDependencies": {
@@ -30,6 +31,6 @@
     "husky": "^7",
     "prettier": "2",
     "pretty-quick": "^3",
-    "vite": "^2"
+    "vite": "^2.9.12"
   }
 }
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.js b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.js
deleted file mode 100644
index a07ebadf1f6..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, {useContext} from "react";
-import { QueryInputContext } from "Components/Contexts/QueryInputContext";
-import OverlayImageButton from "Components/Buttons/OverlayImageButton";
-
-export default function AddQueryInput() {
-    const {inputs, setInputs, id, setId} = useContext(QueryInputContext);
-
-    const updateInputs = (e) => {
-        e.preventDefault();
-        setId(id+1);
-        setInputs(prevInputs => [...prevInputs, {id: id+1, type: "", input: ""}]);
-    }
-
-    return (
-        <OverlayImageButton onClick={updateInputs} className="addRow" id="addRow" tooltip="Add row" height="0" width="0">+</OverlayImageButton>
-    );
-}
\ No newline at end of file
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
new file mode 100644
index 00000000000..e410e87af33
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx
@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import { QueryInputContext } from '../Contexts/QueryInputContext';
+import OverlayImageButton from '../Buttons/OverlayImageButton';
+
+export default function AddQueryInput() {
+  const { inputs, setInputs, id, setId } = useContext(QueryInputContext);
+
+  const updateInputs = (e) => {
+    e.preventDefault();
+    setId(id + 1);
+    setInputs((prevInputs) => [
+      ...prevInputs,
+      { id: id + 1, type: '', input: '' },
+    ]);
+  };
+
+  return (
+    <OverlayImageButton
+      onClick={updateInputs}
+      className="addRow"
+      id="addRow"
+      tooltip="Add row"
+      height="0"
+      width="0"
+    >
+      +
+    </OverlayImageButton>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.js b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.js
deleted file mode 100644
index d3a024e4eb6..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-
-export default function ImageButton({onClick, children, className, id, image, height="15", width="15", style}) {
-        return (
-            <button
-            id={id}       
-            className={className}
-            onClick={onClick}>
-                <img src={image} height={height} width={width} style={style} alt="Missing"/>
-            {children}
-        </button>
-        );
-}
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.jsx
new file mode 100644
index 00000000000..f620146bea5
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default function ImageButton({
+  onClick,
+  children,
+  className,
+  id,
+  image,
+  height = '15',
+  width = '15',
+  style,
+}) {
+  return (
+    <button id={id} className={className} onClick={onClick}>
+      <img
+        src={image}
+        height={height}
+        width={width}
+        style={style}
+        alt="Missing"
+      />
+      {children}
+    </button>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.js b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.js
deleted file mode 100644
index f9fc5af145c..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import Tooltip from 'react-bootstrap/Tooltip';
-import ImageButton from "./ImageButton";
-
-
-export default function OverlayImageButton({onClick, children, className, id, image, height="15", width="15", style, tooltip}) {
-    return (
-        <OverlayTrigger
-            placement="right"
-            delay={{show:250, hide:400}}
-            overlay={<Tooltip id="button-tooltip">{tooltip}</Tooltip>}>
-            <span>
-                <ImageButton id={id} className={className} image={image} 
-                height={height} width={width} style={style} onClick={onClick}>{children}</ImageButton>
-            </span>
-        </OverlayTrigger>
-    );
-}
-
-//
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx
new file mode 100644
index 00000000000..2cb9c7d6e9a
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+import ImageButton from './ImageButton';
+
+export default function OverlayImageButton({
+  onClick,
+  children,
+  className,
+  id,
+  image,
+  height = '15',
+  width = '15',
+  style,
+  tooltip,
+}) {
+  return (
+    <OverlayTrigger
+      placement="right"
+      delay={{ show: 250, hide: 400 }}
+      overlay={<Tooltip id="button-tooltip">{tooltip}</Tooltip>}
+    >
+      <span>
+        <ImageButton
+          id={id}
+          className={className}
+          image={image}
+          height={height}
+          width={width}
+          style={style}
+          onClick={onClick}
+        >
+          {children}
+        </ImageButton>
+      </span>
+    </OverlayTrigger>
+  );
+}
+
+//
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.js b/client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.js
deleted file mode 100644
index e58a3ac8086..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-export default function SimpleButton({onClick, children, className, id}) {
-    return (
-        <button
-        id={id}       
-        className={className}
-        onClick={onClick}>
-        {children}
-        </button>
-    );
-}
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.jsx b/client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.jsx
new file mode 100644
index 00000000000..a153c9577e4
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function SimpleButton({ onClick, children, className, id }) {
+  return (
+    <button id={id} className={className} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.js b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.js
deleted file mode 100644
index 03579ac022f..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, {useState, createContext} from "react";
-
-export const QueryInputContext = createContext();
-
-export const QueryInputProvider = (prop) => {
-    const [inputs, setInputs] = useState([
-        {
-            id:1,
-            type: "",
-            input: ""
-        }
-    ])
-    const [id, setId] = useState(1)
-
-    return (
-        <QueryInputContext.Provider value={{inputs, setInputs, id, setId}}>
-            {prop.children}
-        </QueryInputContext.Provider>
-    )
-}
\ No newline at end of file
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
new file mode 100644
index 00000000000..7bd5a6a7641
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx
@@ -0,0 +1,20 @@
+import React, { useState, createContext } from 'react';
+
+export const QueryInputContext = createContext();
+
+export const QueryInputProvider = (prop) => {
+  const [inputs, setInputs] = useState([
+    {
+      id: 1,
+      type: '',
+      input: '',
+    },
+  ]);
+  const [id, setId] = useState(1);
+
+  return (
+    <QueryInputContext.Provider value={{ inputs, setInputs, id, setId }}>
+      {prop.children}
+    </QueryInputContext.Provider>
+  );
+};
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.js b/client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.js
deleted file mode 100644
index 32e9f4166b1..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { Navbar, Container, Nav } from "react-bootstrap";
-
-function CustomNavbar() {
-    return (
-        <Navbar collapseOnSelect variant="default" expand="sm">
-            <Container>
-                <Navbar.Brand href="https://vespa.ai">Vespa. Big data. Real time.</Navbar.Brand>
-                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-                <Navbar.Collapse id="responsive-navbar-nav">
-                    <Nav>
-                        <Nav.Link  href="https://blog.vespa.ai/">Blog</Nav.Link>
-                        <Nav.Link variant="link" href="https://twitter.com/vespaengine">Twitter</Nav.Link>
-                        <Nav.Link variant="link" href="https://docs.vespa.ai">Docs</Nav.Link>
-                        <Nav.Link variant="link" href="https://github.com/vespa-engine">GitHub</Nav.Link>
-                        <Nav.Link variant="link" href="https://docs.vespa.ai/en/getting-started.html">Get Started Now</Nav.Link>
-                    </Nav>
-                </Navbar.Collapse>
-            </Container>
-        </Navbar>
-    );
-}
-
-export default CustomNavbar;
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.jsx b/client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.jsx
new file mode 100644
index 00000000000..6ffeae4caed
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Navbar, Container, Nav } from 'react-bootstrap';
+
+function CustomNavbar() {
+  return (
+    <Navbar collapseOnSelect variant="default" expand="sm">
+      <Container>
+        <Navbar.Brand href="https://vespa.ai">
+          Vespa. Big data. Real time.
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+        <Navbar.Collapse id="responsive-navbar-nav">
+          <Nav>
+            <Nav.Link href="https://blog.vespa.ai/">Blog</Nav.Link>
+            <Nav.Link variant="link" href="https://twitter.com/vespaengine">
+              Twitter
+            </Nav.Link>
+            <Nav.Link variant="link" href="https://docs.vespa.ai">
+              Docs
+            </Nav.Link>
+            <Nav.Link variant="link" href="https://github.com/vespa-engine">
+              GitHub
+            </Nav.Link>
+            <Nav.Link
+              variant="link"
+              href="https://docs.vespa.ai/en/getting-started.html"
+            >
+              Get Started Now
+            </Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default CustomNavbar;
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.js b/client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.js
deleted file mode 100644
index 0b9ec75939a..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import { Table } from "react-bootstrap";
-
-export default function Footer() {
-    return (
-        <footer>
-            <Table borderless size="sm">
-                <thead className="footer-title">
-                    <tr>
-                        <th>Resources</th>
-                        <th>Contact</th>
-                        <th>Community</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th><a href="https://docs.vespa.ai/en/vespa-quick-start.html">Getting Started</a></th>
-                        <th><a href="https://twitter.com/vespaengine">Twitter</a></th>
-                        <th><a href="https://github.com/vespa-engine/vespa/blob/master/CONTRIBUTING.md">Contributing</a></th>
-                    </tr>
-                    <tr>
-                        <th><a href="https://docs.vespa.ai">Documentation</a></th>
-                        <th><a href="mailto:info@vespa.ai">info@vespa.ai</a></th>
-                        <th><a href="https://stackoverflow.com/questions/tagged/vespa">Stack Overflow</a></th>
-                    </tr>
-                    <tr>
-                        <th><a href="https://github.com/vespa-engine/vespa">Open source</a></th>
-                        <th><a href="https://github.com/vespa-engine/vespa/issues">Issues</a></th>
-                        <th><a href="https://gitter.im/vespa-engine/Lobby">Gitter</a></th>
-                    </tr>
-                </tbody>
-            </Table>
-            <div className="credits">
-                          <span>Copyright Yahoo</span>
-                          Licensed under <a href="https://github.com/vespa-engine/vespa/blob/master/LICENSE">Apache License 2.0</a>
-                          , <a href="https://github.com/y7kim/agency-jekyll-theme">Theme</a> by Rick K.
-                      </div>
-        </footer>
-    );
-}
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.jsx b/client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.jsx
new file mode 100644
index 00000000000..b110bce943d
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Table } from 'react-bootstrap';
+
+export default function Footer() {
+  return (
+    <footer>
+      <Table borderless size="sm">
+        <thead className="footer-title">
+          <tr>
+            <th>Resources</th>
+            <th>Contact</th>
+            <th>Community</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>
+              <a href="https://docs.vespa.ai/en/vespa-quick-start.html">
+                Getting Started
+              </a>
+            </th>
+            <th>
+              <a href="https://twitter.com/vespaengine">Twitter</a>
+            </th>
+            <th>
+              <a href="https://github.com/vespa-engine/vespa/blob/master/CONTRIBUTING.md">
+                Contributing
+              </a>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <a href="https://docs.vespa.ai">Documentation</a>
+            </th>
+            <th>
+              <a href="mailto:info@vespa.ai">info@vespa.ai</a>
+            </th>
+            <th>
+              <a href="https://stackoverflow.com/questions/tagged/vespa">
+                Stack Overflow
+              </a>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <a href="https://github.com/vespa-engine/vespa">Open source</a>
+            </th>
+            <th>
+              <a href="https://github.com/vespa-engine/vespa/issues">Issues</a>
+            </th>
+            <th>
+              <a href="https://gitter.im/vespa-engine/Lobby">Gitter</a>
+            </th>
+          </tr>
+        </tbody>
+      </Table>
+      <div className="credits">
+        <span>Copyright Yahoo</span>
+        Licensed under{' '}
+        <a href="https://github.com/vespa-engine/vespa/blob/master/LICENSE">
+          Apache License 2.0
+        </a>
+        , <a href="https://github.com/y7kim/agency-jekyll-theme">Theme</a> by
+        Rick K.
+      </div>
+    </footer>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.js b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.js
deleted file mode 100644
index 79420af2a39..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/Info.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-export default function Info({id, className="tip", height=15, width=15}) {
-const image = require("../../assets/img/information.svg").default;
-    return (
-        <>
-            <a href="#" className={className} id={`inf${id}`} style={{visibility: "visible"}}>
-                <img src={image} height={height} width={width} className="information" alt="Missing"/>
-                <span id={`span${id}`}></span>
-            </a>
-        </>
-        //TODO: Swap <a> with a bootstrap Overlay
-    );
-}
\ No newline at end of file
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
new file mode 100644
index 00000000000..e7af732bdca
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import image from '../../assets/img/information.svg';
+
+export default function Info({
+  id,
+  className = 'tip',
+  height = 15,
+  width = 15,
+}) {
+  //const image = require("../../assets/img/information.svg").default;
+  return (
+    <>
+      <a
+        href="#"
+        className={className}
+        id={`inf${id}`}
+        style={{ visibility: 'visible' }}
+      >
+        <img
+          src={image}
+          height={height}
+          width={width}
+          className="information"
+          alt="Missing"
+        />
+        <span id={`span${id}`}></span>
+      </a>
+    </>
+    //TODO: Swap <a> with a bootstrap Overlay
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.js b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.js
deleted file mode 100644
index 6fdb27610e3..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { QueryInputContext } from "Components/Contexts/QueryInputContext";
-import React, { useContext } from "react";
-import SimpleDropDownForm from "./SimpleDropDownForm";
-
-export default function QueryDropdownFormn({choices, id}) {
-    const {inputs, setInputs} = useContext(QueryInputContext);
-
-    const updateInputs = (e) => {
-        e.preventDefault();
-        const index = inputs.findIndex((element => element.id === id));
-        inputs[index].type = e.target.value;
-        setInputs(inputs);
-    }
-    
-    return (
-        <SimpleDropDownForm id={id} onChange={updateInputs} choices={choices}></SimpleDropDownForm>
-    )
-}
\ No newline at end of file
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
new file mode 100644
index 00000000000..85e7f5bfc0c
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx
@@ -0,0 +1,22 @@
+import { QueryInputContext } from '../Contexts/QueryInputContext';
+import React, { useContext } from 'react';
+import SimpleDropDownForm from './SimpleDropDownForm';
+
+export default function QueryDropdownFormn({ choices, id }) {
+  const { inputs, setInputs } = useContext(QueryInputContext);
+
+  const updateInputs = (e) => {
+    e.preventDefault();
+    const index = inputs.findIndex((element) => element.id === id);
+    inputs[index].type = e.target.value;
+    setInputs(inputs);
+  };
+
+  return (
+    <SimpleDropDownForm
+      id={id}
+      onChange={updateInputs}
+      choices={choices}
+    ></SimpleDropDownForm>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.js b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.js
deleted file mode 100644
index c42bfe79008..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useContext } from "react";
-import SimpleButton from "Components/Buttons/SimpleButton";
-import Info from "./Info";
-import SimpleForm from "./SimpleForm";
-import { OverlayTrigger, Tooltip} from "react-bootstrap";
-import { QueryInputContext } from "Components/Contexts/QueryInputContext";
-import QueryDropdownFormn from "./QueryDropDownForm";
-
-export default function QueryInput({id, onClick}) {
-    const choices = ["yql", "hits", "offset", "tracelevel"]
-
-    const {inputs, setInputs} = useContext(QueryInputContext);
-
-
-    function removeRow(id) {
-        const newList = inputs.filter((item) => item.id !== id);
-        setInputs(newList);
-    }
-
-    const inputList = inputs.map((value, index) => {
-        return (
-            <div key={value.id} id={value.id} className="queryinput">
-                <QueryDropdownFormn choices={choices} id={value.id}></QueryDropdownFormn>
-                {/* <SimpleDropDownForm choices={choices} id={`i${value.id}`}></SimpleDropDownForm> */}
-                <Info id={value.id} height="15" width="15"></Info>
-                <SimpleForm id={`v${value.id}`} size="30"></SimpleForm>
-                <OverlayTrigger
-                    placement="right"
-                    delay={{show:250, hide:400}}
-                    overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}>
-                    <span>
-                        <SimpleButton id={`b${value.id}`} className="removeRow" onClick={() => removeRow(value.id)} children="-"></SimpleButton>
-                    </span>
-                </OverlayTrigger>
-                <br/>
-            </div>
-        )
-    });
-
-    return (
-        <>
-            {inputList}
-        </>
-    );
-}
\ No newline at end of file
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
new file mode 100644
index 00000000000..2132756db0c
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx
@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import SimpleButton from '../Buttons/SimpleButton';
+import Info from './Info';
+import SimpleForm from './SimpleForm';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { QueryInputContext } from '../Contexts/QueryInputContext';
+import QueryDropdownFormn from './QueryDropDownForm';
+
+export default function QueryInput({ id, onClick }) {
+  const choices = ['yql', 'hits', 'offset', 'tracelevel'];
+
+  const { inputs, setInputs } = useContext(QueryInputContext);
+
+  function removeRow(id) {
+    const newList = inputs.filter((item) => item.id !== id);
+    setInputs(newList);
+  }
+
+  const inputList = inputs.map((value, index) => {
+    return (
+      <div key={value.id} id={value.id} className="queryinput">
+        <QueryDropdownFormn
+          choices={choices}
+          id={value.id}
+        ></QueryDropdownFormn>
+        {/* <SimpleDropDownForm choices={choices} id={`i${value.id}`}></SimpleDropDownForm> */}
+        <Info id={value.id} height="15" width="15"></Info>
+        <SimpleForm id={`v${value.id}`} size="30"></SimpleForm>
+        <OverlayTrigger
+          placement="right"
+          delay={{ show: 250, hide: 400 }}
+          overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
+        >
+          <span>
+            <SimpleButton
+              id={`b${value.id}`}
+              className="removeRow"
+              onClick={() => removeRow(value.id)}
+              children="-"
+            ></SimpleButton>
+          </span>
+        </OverlayTrigger>
+        <br />
+      </div>
+    );
+  });
+
+  return <>{inputList}</>;
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.js b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.js
deleted file mode 100644
index 247b6a37161..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { useState } from "react";
-
-export default function SimpleDropDownForm({choices, id, className="input", onChange}) {
-    SimpleDropDownForm.defaultProps = {
-        onChange: handleChange
-    }
-    const {choice, setChoice} = useState();
-
-    const options = choices.map((value, index) => {
-        return (
-            <option className="options" key={index} value={value}>{value}</option>
-        )
-    });
-
-    function handleChange(e) {
-        setChoice(e.target.value);
-    }
-
-
-    return (
-        <form id={id}>
-            <select className={className} value={choice} onChange={onChange}>
-                {options}
-            </select>
-        </form>
-    );
-}
-
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
new file mode 100644
index 00000000000..5bf9bd1e3ab
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useState } from 'react';
+
+export default function SimpleDropDownForm({
+  choices,
+  id,
+  className = 'input',
+  onChange,
+}) {
+  SimpleDropDownForm.defaultProps = {
+    onChange: handleChange,
+  };
+  const { choice, setChoice } = useState();
+
+  const options = choices.map((value, index) => {
+    return (
+      <option className="options" key={index} value={value}>
+        {value}
+      </option>
+    );
+  });
+
+  function handleChange(e) {
+    setChoice(e.target.value);
+  }
+
+  return (
+    <form id={id}>
+      <select className={className} value={choice} onChange={onChange}>
+        {options}
+      </select>
+    </form>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.js b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.js
deleted file mode 100644
index f01cb4ed9ff..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { useState } from "react";
-
-export default function SimpleForm({id, className="propvalue", initial, size="20"}) {
-    const [input, setValue] = useState(initial);
-
-    return (
-        <form className={className}>
-            <input
-                size={size}
-                type="text"
-                id={id}
-                className={className}
-                value={input}
-                onChange={(e) => setValue(e.target.value)}
-            />
-        </form>
-    );
-}
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx
new file mode 100644
index 00000000000..1b5935cb9cf
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useState } from 'react';
+
+export default function SimpleForm({
+  id,
+  className = 'propvalue',
+  initial,
+  size = '20',
+}) {
+  const [input, setValue] = useState(initial);
+
+  return (
+    <form className={className}>
+      <input
+        size={size}
+        type="text"
+        id={id}
+        className={className}
+        value={input}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </form>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.js b/client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.js
deleted file mode 100644
index 1b780f670e4..00000000000
--- a/client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-export default function TextBox({id, className, children}) {
-    return (
-        <p className={className} id={id}>{children}</p>
-    )
-}
\ No newline at end of file
diff --git a/client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.jsx b/client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.jsx
new file mode 100644
index 00000000000..022b250da7c
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function TextBox({ id, className, children }) {
+  return (
+    <p className={className} id={id}>
+      {children}
+    </p>
+  );
+}
diff --git a/client/js/app/src/app/pages/querybuilder/index.jsx b/client/js/app/src/app/pages/querybuilder/index.jsx
new file mode 100644
index 00000000000..e9271892eb7
--- /dev/null
+++ b/client/js/app/src/app/pages/querybuilder/index.jsx
@@ -0,0 +1,102 @@
+import './css/agency.css';
+import './css/vespa.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './font-awesome/css/font-awesome.min.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import SimpleButton from 'Components/Buttons/SimpleButton';
+import QueryInput from 'Components/Text/QueryInput';
+import SimpleDropDownForm from 'Components/Text/SimpleDropDownForm';
+import SimpleForm from 'Components/Text/SimpleForm';
+import TextBox from 'Components/Text/TextBox';
+import ImageButton from 'Components/Buttons/ImageButton';
+import OverlayImageButton from 'Components/Buttons/OverlayImageButton';
+import AddQueryInput from 'Components/Buttons/AddQueryInputButton';
+import { QueryInputProvider } from 'Components/Contexts/QueryInputContext';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+const messageMethodArray = ['POST', 'GET'];
+
+const pasteImage = require('./assets/img/paste.svg').default;
+const copyImage = require('./assets/img/copy.svg').default;
+const refreshImage = require('./assets/img/reload.svg').default;
+
+root.render(
+  <>
+    <React.StrictMode>
+      <header>
+        <div className="intro container">
+          <TextBox className={'intro-lead-in'}>Vespa Search Engine</TextBox>
+          <TextBox className={'intro-long'}>
+            Select the method for sending a request and construct a query.
+          </TextBox>
+          <SimpleDropDownForm
+            choices={messageMethodArray}
+            id="method"
+            className="methodselector"
+          ></SimpleDropDownForm>
+          <SimpleForm
+            id="url"
+            className="textbox"
+            initial="http://localhost:8080/search/"
+            size="30"
+          ></SimpleForm>
+          <SimpleButton id="send" className="button" onClick={handleClick}>
+            Send
+          </SimpleButton>
+          <br />
+          <QueryInputProvider>
+            <div id="request">
+              <QueryInput></QueryInput>
+            </div>
+            <br />
+            <AddQueryInput />
+          </QueryInputProvider>
+          <br />
+          <ImageButton
+            id="pasteJSON"
+            className="pasteJSON"
+            showImage={true}
+            image={pasteImage}
+            style={{ marginTop: '-2px', marginRight: '3px' }}
+          >
+            Paste JSON
+          </ImageButton>
+          <SimpleButton className="showJSON">Show query JSON</SimpleButton>
+          <TextBox className="response">Response</TextBox>
+          <textarea
+            className="responsebox"
+            readOnly
+            cols="70"
+            rows="25"
+          ></textarea>
+          <OverlayImageButton
+            className="intro-copy"
+            image={copyImage}
+            height="30"
+            width="30"
+            tooltip="Copy"
+          >
+            Copy
+          </OverlayImageButton>
+          <OverlayImageButton
+            className="intro-refresh"
+            image={refreshImage}
+            height="30"
+            width="30"
+            tooltip="Refresh"
+          >
+            Refresh
+          </OverlayImageButton>
+          <br />
+          <br />
+        </div>
+      </header>
+    </React.StrictMode>
+  </>
+);
+
+function handleClick() {
+  console.log('Click happened');
+}
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 7e8f133f9ec..c89d668fa34 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -1,5 +1,93 @@
 import React from 'react';
+import SimpleButton from './Components/Buttons/SimpleButton';
+import QueryInput from './Components/Text/QueryInput';
+import SimpleDropDownForm from './Components/Text/SimpleDropDownForm';
+import SimpleForm from './Components/Text/SimpleForm';
+import TextBox from './Components/Text/TextBox';
+import ImageButton from './Components/Buttons/ImageButton';
+import OverlayImageButton from './Components/Buttons/OverlayImageButton';
+import AddQueryInput from './Components/Buttons/AddQueryInputButton';
+import { QueryInputProvider } from './Components/Contexts/QueryInputContext';
+import pasteImage from './assets/img/paste.svg';
+import copyImage from './assets/img/copy.svg';
+import refreshImage from './assets/img/reload.svg';
 
 export function QueryBuilder() {
-  return <>query builder</>;
+  const messageMethodArray = ['POST', 'GET'];
+
+  // const pasteImage = require("./assets/img/paste.svg").default;
+  // const copyImage = require("./assets/img/copy.svg").default;
+  // const refreshImage = require("./assets/img/reload.svg").default;
+  return (
+    <>
+      <header>
+        <div className="intro container">
+          <TextBox className={'intro-lead-in'}>Vespa Search Engine</TextBox>
+          <TextBox className={'intro-long'}>
+            Select the method for sending a request and construct a query.
+          </TextBox>
+          <SimpleDropDownForm
+            choices={messageMethodArray}
+            id="method"
+            className="methodselector"
+          ></SimpleDropDownForm>
+          <SimpleForm
+            id="url"
+            className="textbox"
+            initial="http://localhost:8080/search/"
+            size="30"
+          ></SimpleForm>
+          <SimpleButton id="send" className="button">
+            Send
+          </SimpleButton>
+          <br />
+          <QueryInputProvider>
+            <div id="request">
+              <QueryInput></QueryInput>
+            </div>
+            <br />
+            <AddQueryInput />
+          </QueryInputProvider>
+          <br />
+          <ImageButton
+            id="pasteJSON"
+            className="pasteJSON"
+            showImage={true}
+            image={pasteImage}
+            style={{ marginTop: '-2px', marginRight: '3px' }}
+          >
+            Paste JSON
+          </ImageButton>
+          <SimpleButton className="showJSON">Show query JSON</SimpleButton>
+          <TextBox className="response">Response</TextBox>
+          <textarea
+            className="responsebox"
+            readOnly
+            cols="70"
+            rows="25"
+          ></textarea>
+          <OverlayImageButton
+            className="intro-copy"
+            image={copyImage}
+            height="30"
+            width="30"
+            tooltip="Copy"
+          >
+            Copy
+          </OverlayImageButton>
+          <OverlayImageButton
+            className="intro-refresh"
+            image={refreshImage}
+            height="30"
+            width="30"
+            tooltip="Refresh"
+          >
+            Refresh
+          </OverlayImageButton>
+          <br />
+          <br />
+        </div>
+      </header>
+    </>
+  );
 }
diff --git a/client/js/app/yarn.lock b/client/js/app/yarn.lock
index 90377962003..389fcf582bf 100644
--- a/client/js/app/yarn.lock
+++ b/client/js/app/yarn.lock
@@ -201,7 +201,7 @@
     "@babel/plugin-syntax-jsx" "^7.17.12"
     "@babel/types" "^7.17.12"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
   integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@@ -430,7 +430,7 @@
     clsx "^1.1.1"
     csstype "3.0.9"
 
-"@popperjs/core@^2.9.3":
+"@popperjs/core@^2.10.1", "@popperjs/core@^2.9.3":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@@ -535,6 +535,35 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@react-aria/ssr@^3.0.1":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.2.0.tgz#88460384b43204f91c972d5b0de24ee44d6a2984"
+  integrity sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
+"@restart/hooks@^0.4.0", "@restart/hooks@^0.4.6":
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.7.tgz#d79ca6472c01ce04389fc73d4a79af1b5e33cd39"
+  integrity sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==
+  dependencies:
+    dequal "^2.0.2"
+
+"@restart/ui@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.2.0.tgz#fb90251aa25f99b41ccedc78a91d2a15f3c5e0fb"
+  integrity sha512-oIh2t3tG8drZtZ9SlaV5CY6wGsUViHk8ZajjhcI+74IQHyWy+AnxDv8rJR5wVgsgcgrPBUvGNkC1AEdcGNPaLQ==
+  dependencies:
+    "@babel/runtime" "^7.13.16"
+    "@popperjs/core" "^2.10.1"
+    "@react-aria/ssr" "^3.0.1"
+    "@restart/hooks" "^0.4.0"
+    "@types/warning" "^3.0.0"
+    dequal "^2.0.2"
+    dom-helpers "^5.2.0"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
@@ -565,6 +594,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.4":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.0.13"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.13.tgz#0f5bd24a5f26593e04e450fe85ff43f51c1524ff"
@@ -574,7 +610,7 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^18":
+"@types/react@>=16.9.11", "@types/react@^18":
   version "18.0.14"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
   integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==
@@ -588,6 +624,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==
+
 "@vitejs/plugin-react@^1":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz#2fcf0b6ce9bcdcd4cec5c760c199779d5657ece1"
@@ -759,6 +800,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
@@ -861,6 +907,11 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+dequal@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -875,6 +926,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 electron-to-chromium@^1.4.147:
   version "1.4.158"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.158.tgz#abbdaaf64676bfa4bc0307522125db34424a0ada"
@@ -1529,7 +1588,7 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-invariant@^2.2.3:
+invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -2001,7 +2060,15 @@ pretty-quick@^3:
     mri "^1.1.5"
     multimatch "^4.0.0"
 
-prop-types@^15.6.1, prop-types@^15.8.1:
+prop-types-extra@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
+  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
+  dependencies:
+    react-is "^16.3.2"
+    warning "^4.0.0"
+
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2023,6 +2090,24 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+react-bootstrap@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.4.0.tgz#99bf9656e2e7a23ae1ae135d18fd5ad7c344b416"
+  integrity sha512-dn599jNK1Fg5GGjJH+lQQDwELVzigh/MdusKpB/0el+sCjsO5MZDH5gRMmBjRhC+vb7VlCDr6OXffPIDSkNMLw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@restart/hooks" "^0.4.6"
+    "@restart/ui" "^1.2.0"
+    "@types/react-transition-group" "^4.4.4"
+    classnames "^2.3.1"
+    dom-helpers "^5.2.1"
+    invariant "^2.2.4"
+    prop-types "^15.8.1"
+    prop-types-extra "^1.1.0"
+    react-transition-group "^4.4.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 react-dom@^18:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -2036,7 +2121,7 @@ react-fast-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -2068,6 +2153,16 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
+react-transition-group@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -2308,6 +2403,16 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -2337,7 +2442,7 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
-vite@^2:
+vite@^2.9.12:
   version "2.9.12"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.12.tgz#b1d636b0a8ac636afe9d83e3792d4895509a941b"
   integrity sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==
@@ -2349,7 +2454,7 @@ vite@^2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.0, warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==