budibase/packages/builder/src/components/integration/QueryViewer.svelte

<script>
  import { goto } from "@roxi/routify"
  import {
    Icon,
    Select,
    Button,
    ButtonGroup,
    Body,
    Label,
    Layout,
    Input,
    Heading,
    Tabs,
    Tab,
  } from "@budibase/bbui"
  import { notifications, Divider } from "@budibase/bbui"
  import api from "builderStore/api"
  import IntegrationQueryEditor from "components/integration/index.svelte"
  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
  import { datasources, integrations, queries } from "stores/backend"
  import { capitalise } from "../../helpers"

  export let query
  export let fields = []

  let parameters
  let data = []
  const typeOptions = [
    { label: "Text", value: "STRING" },
    { label: "Number", value: "NUMBER" },
    { label: "Boolean", value: "BOOLEAN" },
    { label: "Datetime", value: "DATETIME" },
  ]

  $: datasource = $datasources.list.find((ds) => ds._id === query.datasourceId)
  $: query.schema = fields.reduce(
    (acc, next) => ({
      ...acc,
      [next.name]: {
        name: next.name,
        type: "string",
      },
    }),
    {}
  )
  $: datasourceType = datasource?.source
  $: integrationInfo = $integrations[datasourceType]
  $: queryConfig = integrationInfo?.query
  $: shouldShowQueryConfig = queryConfig && query.queryVerb

  function newField() {
    fields = [...fields, {}]
  }

  function deleteField(idx) {
    fields.splice(idx, 1)
    fields = fields
  }

  async function previewQuery() {
    try {
      const response = await api.post(`/api/queries/preview`, {
        fields: query.fields,
        queryVerb: query.queryVerb,
        parameters: query.parameters.reduce(
          (acc, next) => ({
            ...acc,
            [next.name]: next.default,
          }),
          {}
        ),
        datasourceId: datasource._id,
      })
      const json = await response.json()

      if (response.status !== 200) throw new Error(json.message)

      data = json.rows || []

      if (data.length === 0) {
        notifications.info(
          "Query results empty. Please execute a query with results to create your schema."
        )
        return
      }

      notifications.success("Query executed successfully.")

      // Assume all the fields are strings and create a basic schema from the
      // unique fields returned by the server
      fields = json.schemaFields.map((field) => ({
        name: field,
        type: "STRING",
      }))
    } catch (err) {
      notifications.error(`Query Error: ${err.message}`)
      console.error(err)
    }
  }

  async function saveQuery() {
    try {
      const { _id } = await queries.save(query.datasourceId, query)
      notifications.success(`Query saved successfully.`)
      $goto(`../${_id}`)
    } catch (err) {
      console.error(err)
      notifications.error(`Error creating query. ${err.message}`)
    }
  }
</script>

<Layout gap="S" noPadding>
  <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
  <Divider />
  <Heading size="S">Config</Heading>
  <div class="config">
    <div class="config-field">
      <Label>Query Name</Label>
      <Input bind:value={query.name} />
    </div>
    {#if queryConfig}
      <div class="config-field">
        <Label>Function</Label>
        <Select
          bind:value={query.queryVerb}
          options={Object.keys(queryConfig)}
          getOptionLabel={(verb) =>
            queryConfig[verb]?.displayName || capitalise(verb)}
        />
      </div>
      <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
    {/if}
  </div>
  {#if shouldShowQueryConfig}
    <Divider />
    <div class="config">
      <Heading size="S">Fields</Heading>
      <Body size="S">Fill in the fields specific to this query.</Body>
      <IntegrationQueryEditor
        {datasource}
        {query}
        height={300}
        schema={queryConfig[query.queryVerb]}
        bind:parameters
      />
      <Divider />
    </div>
    <div class="viewer-controls">
      <Heading size="S">Results</Heading>
      <ButtonGroup>
        <Button
          cta
          disabled={data.length === 0 || !query.name}
          on:click={saveQuery}
        >
          Save Query
        </Button>
        <Button secondary on:click={previewQuery}>Run Query</Button>
      </ButtonGroup>
    </div>
    <Body size="S">
      Below, you can preview the results from your query and change the schema.
    </Body>
    <section class="viewer">
      {#if data}
        <Tabs selected="JSON">
          <Tab title="JSON">
            <pre
              class="preview">
                <!-- prettier-ignore -->
                {#if !data[0]}
                  Please run your query to fetch some data.
                {:else}
                  {JSON.stringify(data[0], undefined, 2)}
                {/if}
              </pre>
          </Tab>
          <Tab title="Schema">
            <Layout gap="S">
              {#each fields as field, idx}
                <div class="field">
                  <Input placeholder="Field Name" bind:value={field.name} />
                  <Select bind:value={field.type} options={typeOptions} />
                  <Icon name="bleClose" on:click={() => deleteField(idx)} />
                </div>
              {/each}
              <div>
                <Button secondary on:click={newField}>Add Field</Button>
              </div>
            </Layout>
          </Tab>
          <Tab title="Preview">
            <ExternalDataSourceTable {query} {data} />
          </Tab>
        </Tabs>
      {/if}
    </section>
  {/if}
</Layout>

<style>
  .config {
    display: grid;
    grid-gap: var(--spacing-s);
  }
  .config-field {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: var(--spacing-l);
    align-items: center;
  }

  .field {
    display: grid;
    grid-template-columns: 1fr 1fr 5%;
    gap: var(--spacing-l);
  }

  .button-container {
    display: flex;
  }

  .delete {
    align-self: center;
    cursor: pointer;
  }

  .viewer {
    min-height: 200px;
  }

  .preview {
    height: 100%;
    min-height: 120px;
    overflow-y: auto;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    background-color: var(--grey-2);
    padding: var(--spacing-m);
    border-radius: 8px;
    color: var(--ink);
  }

  .viewer-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-m);
    min-width: 150px;
    align-items: center;
  }
</style>
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`<script>`
wip: routify 2021-03-18 00:40:24 +13:00			`import { goto } from "@roxi/routify"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`import {`
replace remix 2021-04-23 21:55:27 +12:00			`Icon,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`Select,`
			`Button,`
Fix editor 2021-04-29 01:46:11 +12:00			`ButtonGroup,`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`Body,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`Label,`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`Layout,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`Input,`
			`Heading,`
QueryViewer now uses Tabs component 2021-04-21 23:41:44 +12:00			`Tabs,`
replace remix 2021-04-23 21:55:27 +12:00			`Tab,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`} from "@budibase/bbui"`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`import { notifications, Divider } from "@budibase/bbui"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`import api from "builderStore/api"`
			`import IntegrationQueryEditor from "components/integration/index.svelte"`
new datasource design 2021-01-08 02:13:46 +13:00			`import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"`
Update to support new stores 2021-04-01 22:29:47 +13:00			`import { datasources, integrations, queries } from "stores/backend"`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`import { capitalise } from "../../helpers"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
			`export let query`
			`export let fields = []`

new datasource design 2021-01-08 02:13:46 +13:00			`let parameters`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00			`let data = []`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`const typeOptions = [`
			`{ label: "Text", value: "STRING" },`
			`{ label: "Number", value: "NUMBER" },`
			`{ label: "Boolean", value: "BOOLEAN" },`
			`{ label: "Datetime", value: "DATETIME" },`
			`]`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
replace remix 2021-04-23 21:55:27 +12:00			`$: datasource = $datasources.list.find((ds) => ds._id === query.datasourceId)`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`$: query.schema = fields.reduce(`
			`(acc, next) => ({`
			`...acc,`
			`[next.name]: {`
			`name: next.name,`
			`type: "string",`
			`},`
			`}),`
			`{}`
			`)`
pass field values in binding drawer 2021-01-15 03:22:24 +13:00			`$: datasourceType = datasource?.source`
moves integrations part of backendstore to separate store 2021-03-23 01:23:36 +13:00			`$: integrationInfo = $integrations[datasourceType]`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`$: queryConfig = integrationInfo?.query`
more design updates 2021-02-19 07:55:08 +13:00			`$: shouldShowQueryConfig = queryConfig && query.queryVerb`
custom fields in queries 2021-01-14 03:11:53 +13:00
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`function newField() {`
			`fields = [...fields, {}]`
			`}`

			`function deleteField(idx) {`
			`fields.splice(idx, 1)`
			`fields = fields`
			`}`

			`async function previewQuery() {`
			`try {`
switching between queries 2021-01-07 01:28:51 +13:00			const response = await api.post(`/api/queries/preview`, {
custom fields in queries 2021-01-14 03:11:53 +13:00			`fields: query.fields,`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`queryVerb: query.queryVerb,`
Allow dynamic query execution from front end components 2021-01-09 01:06:37 +13:00			`parameters: query.parameters.reduce(`
			`(acc, next) => ({`
			`...acc,`
			`[next.name]: next.default,`
			`}),`
			`{}`
			`),`
switching between queries 2021-01-07 01:28:51 +13:00			`datasourceId: datasource._id,`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`})`
			`const json = await response.json()`
new datasource design 2021-01-08 02:13:46 +13:00
			`if (response.status !== 200) throw new Error(json.message)`

read all columns for schema rather than just the first 2021-02-23 06:41:02 +13:00			`data = json.rows \|\| []`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00			`if (data.length === 0) {`
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			`notifications.info(`
lint 2021-01-19 04:40:26 +13:00			`"Query results empty. Please execute a query with results to create your schema."`
			`)`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00			`return`
lint 2021-01-19 04:40:26 +13:00			`}`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			`notifications.success("Query executed successfully.")`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00
read all columns for schema rather than just the first 2021-02-23 06:41:02 +13:00			`// Assume all the fields are strings and create a basic schema from the`
			`// unique fields returned by the server`
replace remix 2021-04-23 21:55:27 +12:00			`fields = json.schemaFields.map((field) => ({`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`name: field,`
			`type: "STRING",`
			`}))`
			`} catch (err) {`
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			notifications.error(`Query Error: ${err.message}`)
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`console.error(err)`
			`}`
			`}`

new datasource design 2021-01-08 02:13:46 +13:00			`async function saveQuery() {`
			`try {`
Update to support new stores 2021-04-01 22:29:47 +13:00			`const { _id } = await queries.save(query.datasourceId, query)`
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			notifications.success(`Query saved successfully.`)
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			$goto(`../${_id}`)
new datasource design 2021-01-08 02:13:46 +13:00			`} catch (err) {`
			`console.error(err)`
moves NotificationDisplay to bbui and converts it to spectrum 2021-04-09 22:02:53 +12:00			notifications.error(`Error creating query. ${err.message}`)
new datasource design 2021-01-08 02:13:46 +13:00			`}`
			`}`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`</script>`

converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<Layout gap="S" noPadding>`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="M">Query {integrationInfo?.friendlyName}</Heading>`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Divider />`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="S">Config</Heading>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<div class="config">`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<div class="config-field">`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<Label>Query Name</Label>`
			`<Input bind:value={query.name} />`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`</div>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`{#if queryConfig}`
			`<div class="config-field">`
			`<Label>Function</Label>`
			`<Select`
			`bind:value={query.queryVerb}`
			`options={Object.keys(queryConfig)}`
			`getOptionLabel={(verb) =>`
			`queryConfig[verb]?.displayName \|\| capitalise(verb)}`
			`/>`
			`</div>`
			`<ParameterBuilder bind:parameters={query.parameters} bindable={false} />`
			`{/if}`
			`</div>`
			`{#if shouldShowQueryConfig}`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Divider />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<div class="config">`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="S">Fields</Heading>`
Convert Body component to use size="" prop 2021-04-30 23:31:45 +12:00			`<Body size="S">Fill in the fields specific to this query.</Body>`
custom fields in queries 2021-01-14 03:11:53 +13:00			`<IntegrationQueryEditor`
more design updates 2021-02-19 07:55:08 +13:00			`{datasource}`
custom fields in queries 2021-01-14 03:11:53 +13:00			`{query}`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`height={300}`
more design updates 2021-02-19 07:55:08 +13:00			`schema={queryConfig[query.queryVerb]}`
replace remix 2021-04-23 21:55:27 +12:00			`bind:parameters`
			`/>`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Divider />`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`</div>`
			`<div class="viewer-controls">`
convert all Heading instances to use new API 2021-04-30 23:38:06 +12:00			`<Heading size="S">Results</Heading>`
Fix editor 2021-04-29 01:46:11 +12:00			`<ButtonGroup>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`<Button`
Fix editor 2021-04-29 01:46:11 +12:00			`cta`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`disabled={data.length === 0 \|\| !query.name}`
			`on:click={saveQuery}`
			`>`
			`Save Query`
			`</Button>`
Fix editor 2021-04-29 01:46:11 +12:00			`<Button secondary on:click={previewQuery}>Run Query</Button>`
			`</ButtonGroup>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`</div>`
Convert Body component to use size="" prop 2021-04-30 23:31:45 +12:00			`<Body size="S">`
Fix editor 2021-04-29 01:46:11 +12:00			`Below, you can preview the results from your query and change the schema.`
			`</Body>`
			`<section class="viewer">`
			`{#if data}`
			`<Tabs selected="JSON">`
			`<Tab title="JSON">`
			`<pre`
			`class="preview">`
Adding prettier ignore statement as it kept re-formatting the spacing in query viewer file. 2021-02-23 04:53:49 +13:00			`<!-- prettier-ignore -->`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 03:01:02 +13:00			`{#if !data[0]}`
			`Please run your query to fetch some data.`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{:else}`
			`{JSON.stringify(data[0], undefined, 2)}`
			`{/if}`
QueryViewer now uses Tabs component 2021-04-21 23:41:44 +12:00			`</pre>`
Fix editor 2021-04-29 01:46:11 +12:00			`</Tab>`
			`<Tab title="Schema">`
			`<Layout gap="S">`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`{#each fields as field, idx}`
			`<div class="field">`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`<Input placeholder="Field Name" bind:value={field.name} />`
			`<Select bind:value={field.type} options={typeOptions} />`
replace remix 2021-04-23 21:55:27 +12:00			`<Icon name="bleClose" on:click={() => deleteField(idx)} />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`</div>`
			`{/each}`
Fix editor 2021-04-29 01:46:11 +12:00			`<div>`
			`<Button secondary on:click={newField}>Add Field</Button>`
			`</div>`
			`</Layout>`
			`</Tab>`
			`<Tab title="Preview">`
			`<ExternalDataSourceTable {query} {data} />`
			`</Tab>`
			`</Tabs>`
			`{/if}`
			`</section>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`{/if}`
			`</Layout>`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
			`<style>`
converts QueryViewer to use new Layout component 2021-04-28 01:26:03 +12:00			`.config {`
			`display: grid;`
			`grid-gap: var(--spacing-s);`
			`}`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`.config-field {`
			`display: grid;`
			`grid-template-columns: 20% 1fr;`
			`grid-gap: var(--spacing-l);`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`align-items: center;`
			`}`

separation of datasources and queries 2020-12-19 07:19:43 +13:00			`.field {`
			`display: grid;`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`grid-template-columns: 1fr 1fr 5%;`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`gap: var(--spacing-l);`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`}`

prevent editing of headers in params 2021-02-20 01:07:37 +13:00			`.button-container {`
			`display: flex;`
docs link 2021-01-19 06:01:41 +13:00			`}`

separation of datasources and queries 2020-12-19 07:19:43 +13:00			`.delete {`
			`align-self: center;`
			`cursor: pointer;`
			`}`

Query results section ui updated - json ui emphasized - min-height added to stop screen bouncing when navigating across tabs - spacing adjusted 2021-02-22 22:01:40 +13:00			`.viewer {`
			`min-height: 200px;`
			`}`

separation of datasources and queries 2020-12-19 07:19:43 +13:00			`.preview {`
new datasource design 2021-01-08 02:13:46 +13:00			`height: 100%;`
Query results section ui updated - json ui emphasized - min-height added to stop screen bouncing when navigating across tabs - spacing adjusted 2021-02-22 22:01:40 +13:00			`min-height: 120px;`
new datasource design 2021-01-08 02:13:46 +13:00			`overflow-y: auto;`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`overflow-wrap: break-word;`
			`white-space: pre-wrap;`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`background-color: var(--grey-2);`
Query results section ui updated - json ui emphasized - min-height added to stop screen bouncing when navigating across tabs - spacing adjusted 2021-02-22 22:01:40 +13:00			`padding: var(--spacing-m);`
			`border-radius: 8px;`
Update entire builder backend UI to work with new spectrum components and fix multiple issues 2021-04-20 22:53:19 +12:00			`color: var(--ink);`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`}`
new datasource design 2021-01-08 02:13:46 +13:00
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`.viewer-controls {`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`display: flex;`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`flex-direction: row;`
more design updates 2021-02-19 07:55:08 +13:00			`justify-content: space-between;`
Query page tidy up Props aligned in a row within the header. Add params popover UI tidied (labels removed, etc) Query name made an input, and the old query name input removed. Query type is not an input anymore. Provided a height for the query editor Aligned run/save query buttons with the preview panel. 2021-01-23 05:49:22 +13:00			`gap: var(--spacing-m);`
			`min-width: 150px;`
lint 2021-02-20 03:31:07 +13:00			`align-items: center;`
I emphasized the naming of a query Label text added and made semi-bold Removed placeholder text 2021-02-05 23:32:10 +13:00			`}`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`</style>`