aboutsummaryrefslogtreecommitdiffstats
path: root/client/js/app/src/app/pages/querybuilder/query-builder.jsx
blob: 42a4ed829c39923f7b5f07db04d8533df8f9b4fd (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import QueryInput from './Components/Text/QueryInput';
import TextBox from './Components/Text/TextBox';
import AddQueryInput from './Components/Buttons/AddQueryInputButton';
import { QueryInputProvider } from './Components/Contexts/QueryInputContext';
import SendQuery from './Components/Text/SendQuery';
import { ResponseProvider } from './Components/Contexts/ResponseContext';
import ResponseBox from './Components/Text/ResponseBox';
import ShowQueryButton from './Components/Buttons/ShowQueryButton';
import { QueryProvider } from './Components/Contexts/QueryContext';
import PasteJSONButton from './Components/Buttons/PasteJSONButton';
import CopyResponseButton from './Components/Buttons/CopyResponseButton';
import DownloadJSONButton from './Components/Buttons/DownloadJSONButton';

import '../../styles/agency.css';
import '../../styles/vespa.css';

export function QueryBuilder() {
  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>
          <ResponseProvider>
            <QueryProvider>
              <QueryInputProvider>
                <SendQuery />
                <br />
                <div id="request">
                  <QueryInput />
                </div>
                <br />
                <AddQueryInput />
                <br />
                <PasteJSONButton />
              </QueryInputProvider>
              <ShowQueryButton />
            </QueryProvider>
            <TextBox className="response">Response</TextBox>
            <ResponseBox />
            <CopyResponseButton />
            <DownloadJSONButton>Download response as JSON</DownloadJSONButton>
          </ResponseProvider>
          <br />
          <br />
        </div>
      </header>
    </>
  );
}