From cf69cd55229fedeaa337ea071cf5d20e1c0463dd Mon Sep 17 00:00:00 2001 From: Erlend Date: Wed, 22 Jun 2022 15:43:19 +0200 Subject: querybuilder displays correctly --- client/js/app/package.json | 3 +- .../Components/Buttons/AddQueryInputButton.js | 17 --- .../Components/Buttons/AddQueryInputButton.jsx | 29 +++++ .../querybuilder/Components/Buttons/ImageButton.js | 14 --- .../Components/Buttons/ImageButton.jsx | 25 +++++ .../Components/Buttons/OverlayImageButton.js | 21 ---- .../Components/Buttons/OverlayImageButton.jsx | 40 +++++++ .../Components/Buttons/SimpleButton.js | 12 -- .../Components/Buttons/SimpleButton.jsx | 9 ++ .../Components/Contexts/QueryInputContext.js | 20 ---- .../Components/Contexts/QueryInputContext.jsx | 20 ++++ .../Components/Navigation/CustomNavbar.js | 24 ---- .../Components/Navigation/CustomNavbar.jsx | 37 +++++++ .../querybuilder/Components/Navigation/Footer.js | 40 ------- .../querybuilder/Components/Navigation/Footer.jsx | 68 ++++++++++++ .../app/pages/querybuilder/Components/Text/Info.js | 14 --- .../pages/querybuilder/Components/Text/Info.jsx | 31 ++++++ .../Components/Text/QueryDropDownForm.js | 18 --- .../Components/Text/QueryDropDownForm.jsx | 22 ++++ .../querybuilder/Components/Text/QueryInput.js | 45 -------- .../querybuilder/Components/Text/QueryInput.jsx | 49 +++++++++ .../Components/Text/SimpleDropDownForm.js | 29 ----- .../Components/Text/SimpleDropDownForm.jsx | 34 ++++++ .../querybuilder/Components/Text/SimpleForm.js | 19 ---- .../querybuilder/Components/Text/SimpleForm.jsx | 24 ++++ .../pages/querybuilder/Components/Text/TextBox.js | 7 -- .../pages/querybuilder/Components/Text/TextBox.jsx | 9 ++ client/js/app/src/app/pages/querybuilder/index.jsx | 102 +++++++++++++++++ .../src/app/pages/querybuilder/query-builder.jsx | 90 ++++++++++++++- client/js/app/yarn.lock | 121 +++++++++++++++++++-- 30 files changed, 703 insertions(+), 290 deletions(-) delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/AddQueryInputButton.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/ImageButton.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/OverlayImageButton.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Buttons/SimpleButton.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Contexts/QueryInputContext.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Navigation/CustomNavbar.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Navigation/Footer.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/Info.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/Info.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/QueryDropDownForm.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/QueryInput.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/SimpleDropDownForm.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/SimpleForm.jsx delete mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.js create mode 100644 client/js/app/src/app/pages/querybuilder/Components/Text/TextBox.jsx create mode 100644 client/js/app/src/app/pages/querybuilder/index.jsx (limited to 'client/js') 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 ( - + - ); -} \ 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 ( + + + + + ); +} 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 ( - - ); -} \ 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 ( + + ); +} 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 ( - {tooltip}}> - - {children} - - - ); -} - -// \ 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 ( + {tooltip}} + > + + + {children} + + + + ); +} + +// 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 ( - - ); -} \ 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 ( + + ); +} 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 ( - - {prop.children} - - ) -} \ 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 ( + + {prop.children} + + ); +}; 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 ( - - - Vespa. Big data. Real time. - - - - - - - ); -} - -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 ( + + + + Vespa. Big data. Real time. + + + + + + + + ); +} + +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 ( - - ); -} \ 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 ( + + ); +} 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 ( - <> - - Missing - - - - //TODO: Swap 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 ( + <> + + Missing + + + + //TODO: Swap 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 ( - - ) -} \ 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 ( + + ); +} 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 ( -
- - {/* */} - - - Remove row}> - - removeRow(value.id)} children="-"> - - -
-
- ) - }); - - 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 ( +
+ + {/* */} + + + Remove row} + > + + removeRow(value.id)} + children="-" + > + + +
+
+ ); + }); + + 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 ( - - ) - }); - - function handleChange(e) { - setChoice(e.target.value); - } - - - return ( -
- -
- ); -} - 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 ( + + ); + }); + + function handleChange(e) { + setChoice(e.target.value); + } + + return ( +
+ +
+ ); +} 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 ( -
- setValue(e.target.value)} - /> -
- ); -} \ 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 ( +
+ setValue(e.target.value)} + /> +
+ ); +} 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 ( -

{children}

- ) -} \ 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 ( +

+ {children} +

+ ); +} 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( + <> + +
+
+ Vespa Search Engine + + Select the method for sending a request and construct a query. + + + + + Send + +
+ +
+ +
+
+ + +
+ + Paste JSON + + Show query JSON + Response + + + Copy + + + Refresh + +
+
+
+
+ + +); + +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 ( + <> +
+
+ Vespa Search Engine + + Select the method for sending a request and construct a query. + + + + + Send + +
+ +
+ +
+
+ + +
+ + Paste JSON + + Show query JSON + Response + + + Copy + + + Refresh + +
+
+
+
+ + ); } 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== -- cgit v1.2.3