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

<script>
  import { goto } from "@sveltech/routify"
  import {
    Select,
    Button,
    Body,
    Label,
    Input,
    Heading,
    Spacer,
    Switcher,
  } from "@budibase/bbui"
  import { notifier } from "builderStore/store/notifications"
  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 { backendUiStore } from "builderStore"

  const PREVIEW_HEADINGS = [
    {
      title: "JSON",
      key: "JSON",
    },
    {
      title: "Schema",
      key: "SCHEMA",
    },
    {
      title: "Preview",
      key: "PREVIEW",
    },
  ]

  export let query
  export let fields = []

  let config
  let tab = "JSON"
  let parameters
  let data = []
  let popover

  $: datasource = $backendUiStore.datasources.find(
    ds => ds._id === query.datasourceId
  )

  $: query.schema = fields.reduce(
    (acc, next) => ({
      ...acc,
      [next.name]: {
        name: next.name,
        type: "string",
      },
    }),
    {}
  )

  $: datasourceType = datasource?.source

  $: integrationInfo = $backendUiStore.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) {
        notifier.info(
          "Query results empty. Please execute a query with results to create your schema."
        )
        return
      }

      notifier.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) {
      notifier.danger(`Query Error: ${err.message}`)
      console.error(err)
    }
  }

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

<section class="config">
  <Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
  <hr />
  <Spacer extraLarge />
  <Heading small lh>Config</Heading>
  <Body small grey>Provide a name for your query and select its function.</Body>
  <Spacer large />
  <div class="config-field">
    <Label small>Query Name</Label>
    <Input thin outline bind:value={query.name} />
  </div>
  <Spacer extraLarge />
  {#if queryConfig}
    <div class="config-field">
      <Label small>Function</Label>
      <Select primary outline thin bind:value={query.queryVerb}>
        {#each Object.keys(queryConfig) as queryVerb}
          <option value={queryVerb}>
            {queryConfig[queryVerb]?.displayName || queryVerb}
          </option>
        {/each}
      </Select>
    </div>
    <Spacer extraLarge />
    <hr />
    <Spacer extraLarge />
    <Spacer small />
    <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
    <hr />
  {/if}
</section>

{#if shouldShowQueryConfig}
  <section>
    <Spacer extraLarge />
    <Spacer small />
    <div class="config">
      <Heading small lh>Fields</Heading>
      <Body small grey>Fill in the fields specific to this query.</Body>
      <Spacer medium />
      <Spacer extraLarge />
      <IntegrationQueryEditor
        {datasource}
        {query}
        schema={queryConfig[query.queryVerb]}
        bind:parameters />
      <Spacer extraLarge />
      <hr />
      <Spacer extraLarge />
      <Spacer medium />
      <div class="viewer-controls">
        <Heading small lh>Results</Heading>
        <div class="button-container">
          <Button
            secondary
            thin
            disabled={data.length === 0 || !query.name}
            on:click={saveQuery}>
            Save Query
          </Button>
          <Spacer medium />
          <Button thin primary on:click={previewQuery}>Run Query</Button>
        </div>
      </div>
      <Body small grey>
        Below, you can preview the results from your query and change the
        schema.
      </Body>

      <Spacer extraLarge />
      <Spacer medium />

      <section class="viewer">
        {#if data}
          <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
            {#if tab === '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>
            {:else if tab === 'PREVIEW'}
              <ExternalDataSourceTable {query} {data} />
            {:else if tab === 'SCHEMA'}
              {#each fields as field, idx}
                <Spacer small />
                <div class="field">
                  <Input
                    outline
                    placeholder="Field Name"
                    type={'text'}
                    bind:value={field.name} />
                  <Select thin border bind:value={field.type}>
                    <option value={''}>Select a field type</option>
                    <option value={'STRING'}>Text</option>
                    <option value={'NUMBER'}>Number</option>
                    <option value={'BOOLEAN'}>Boolean</option>
                    <option value={'DATETIME'}>Datetime</option>
                  </Select>
                  <i
                    class="ri-close-circle-line delete"
                    on:click={() => deleteField(idx)} />
                </div>
              {/each}
              <Spacer small />
              <Button thin secondary on:click={newField}>Add Field</Button>
            {/if}
          </Switcher>
        {/if}
      </section>
    </div>
  </section>
{/if}
<Spacer extraLarge />
<Spacer extraLarge />

<style>
  .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;
  }

  hr {
    margin-top: var(--layout-m);
    border: 1px solid var(--grey-2);
  }

  .config {
    margin-bottom: var(--spacing-s);
  }

  .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-1);
    padding: var(--spacing-m);
    border-radius: 8px;
    color: var(--grey-6);
  }

  .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>`
pass field values in binding drawer 2021-01-15 03:22:24 +13:00			`import { goto } from "@sveltech/routify"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`import {`
			`Select,`
			`Button,`
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,`
			`Input,`
			`Heading,`
			`Spacer,`
			`Switcher,`
			`} from "@budibase/bbui"`
			`import { notifier } from "builderStore/store/notifications"`
			`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"`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`import { backendUiStore } from "builderStore"`

			`const PREVIEW_HEADINGS = [`
			`{`
new datasource design 2021-01-08 02:13:46 +13:00			`title: "JSON",`
			`key: "JSON",`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`},`
			`{`
			`title: "Schema",`
			`key: "SCHEMA",`
			`},`
new datasource design 2021-01-08 02:13:46 +13:00			`{`
			`title: "Preview",`
			`key: "PREVIEW",`
			`},`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`]`

			`export let query`
			`export let fields = []`

custom fields in queries 2021-01-14 03:11:53 +13:00			`let config`
new datasource design 2021-01-08 02:13:46 +13:00			`let tab = "JSON"`
			`let parameters`
fix no schema bug, feedback from demo 2021-01-16 06:29:46 +13:00			`let data = []`
sensible defaults, adding popover for parameters 2021-01-22 23:54:23 +13:00			`let popover`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
switching between queries 2021-01-07 01:28:51 +13:00			`$: datasource = $backendUiStore.datasources.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`
lint :sparkles: 2021-01-16 02:42:55 +13:00
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`$: integrationInfo = $backendUiStore.integrations[datasourceType]`
			`$: queryConfig = integrationInfo?.query`
new datasource design 2021-01-08 02:13:46 +13:00
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) {`
lint 2021-01-19 04:40:26 +13:00			`notifier.info(`
			`"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
			`notifier.success("Query executed successfully.")`

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`
			`fields = json.schemaFields.map(field => ({`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`name: field,`
			`type: "STRING",`
			`}))`
			`} catch (err) {`
			notifier.danger(`Query Error: ${err.message}`)
			`console.error(err)`
			`}`
			`}`

new datasource design 2021-01-08 02:13:46 +13:00			`async function saveQuery() {`
			`try {`
pass field values in binding drawer 2021-01-15 03:22:24 +13:00			`const { _id } = await backendUiStore.actions.queries.save(`
			`query.datasourceId,`
			`query`
			`)`
styling, async data fetching 2021-01-12 09:17:56 +13:00			notifier.success(`Query saved successfully.`)
pass field values in binding drawer 2021-01-15 03:22:24 +13:00			$goto(`../../${_id}`)
new datasource design 2021-01-08 02:13:46 +13:00			`} catch (err) {`
			`console.error(err)`
			notifier.danger(`Error creating query. ${err.message}`)
			`}`
			`}`
separation of datasources and queries 2020-12-19 07:19:43 +13:00			`</script>`

design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<section class="config">`
lint 2021-02-20 03:31:07 +13:00			`<Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<hr />`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
lint 2021-02-20 03:31:07 +13:00			`<Heading small lh>Config</Heading>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<Body small grey>Provide a name for your query and select its function.</Body>`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer large />`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<div class="config-field">`
			`<Label small>Query Name</Label>`
more design updates 2021-02-19 07:55:08 +13:00			`<Input thin outline 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>`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{#if queryConfig}`
			`<div class="config-field">`
			`<Label small>Function</Label>`
			`<Select primary outline thin bind:value={query.queryVerb}>`
			`{#each Object.keys(queryConfig) as queryVerb}`
lint 2021-02-20 03:31:07 +13:00			`<option value={queryVerb}>`
			`{queryConfig[queryVerb]?.displayName \|\| queryVerb}`
			`</option>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`{/each}`
			`</Select>`
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>`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<hr />`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
			`<Spacer small />`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<ParameterBuilder bind:parameters={query.parameters} bindable={false} />`
			`<hr />`
custom fields in queries 2021-01-14 03:11:53 +13:00			`{/if}`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`</section>`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
custom fields in queries 2021-01-14 03:11:53 +13:00			`{#if shouldShowQueryConfig}`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<section>`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
			`<Spacer small />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<div class="config">`
lint 2021-02-20 03:31:07 +13:00			`<Heading small lh>Fields</Heading>`
			`<Body small grey>Fill in the fields specific to this query.</Body>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<Spacer medium />`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
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}`
more design updates 2021-02-19 07:55:08 +13:00			`schema={queryConfig[query.queryVerb]}`
lint :sparkles: 2021-01-16 02:42:55 +13:00			`bind:parameters />`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<hr />`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
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			`<Spacer medium />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<div class="viewer-controls">`
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			`<Heading small lh>Results</Heading>`
prevent editing of headers in params 2021-02-20 01:07:37 +13:00			`<div class="button-container">`
more design updates 2021-02-19 07:55:08 +13:00			`<Button`
			`secondary`
			`thin`
			`disabled={data.length === 0 \|\| !query.name}`
			`on:click={saveQuery}>`
			`Save Query`
			`</Button>`
prevent editing of headers in params 2021-02-20 01:07:37 +13:00			`<Spacer medium />`
			`<Button thin primary on:click={previewQuery}>Run Query</Button>`
more design updates 2021-02-19 07:55:08 +13:00			`</div>`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`</div>`
design updates, changing query verb names to HTTP verbs 2021-02-19 05:58:10 +13:00			`<Body small grey>`
			`Below, you can preview the results from your query and change the`
			`schema.`
			`</Body>`
more design updates 2021-02-19 07:55:08 +13:00
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`<Spacer extraLarge />`
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			`<Spacer medium />`
new datasource design 2021-01-08 02:13:46 +13:00
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<section class="viewer">`
			`{#if data}`
			`<Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>`
			`{#if tab === 'JSON'}`
Adding prettier ignore statement as it kept re-formatting the spacing in query viewer file. 2021-02-23 04:53:49 +13:00			`<pre`
			`class="preview">`
			`<!-- prettier-ignore -->`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 03:01:02 +13:00			`{#if !data[0]}`
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 01:23:46 +13:00
Merge branch 'develop' of github.com:Budibase/budibase into repeater-filtering 2021-02-23 03:01:02 +13:00			`Please run your query to fetch some data.`
Bump BBUI version 2021-02-23 01:28:43 +13:00
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}`
REST integration complete 2021-02-16 07:41:56 +13:00			`</pre>`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`{:else if tab === 'PREVIEW'}`
			`<ExternalDataSourceTable {query} {data} />`
			`{:else if tab === 'SCHEMA'}`
			`{#each fields as field, idx}`
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			`<Spacer small />`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<div class="field">`
actions fix 2021-01-28 06:29:30 +13:00			`<Input`
			`outline`
			`placeholder="Field Name"`
			`type={'text'}`
			`bind:value={field.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			`<Select thin border bind:value={field.type}>`
			`<option value={''}>Select a field type</option>`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`<option value={'STRING'}>Text</option>`
			`<option value={'NUMBER'}>Number</option>`
			`<option value={'BOOLEAN'}>Boolean</option>`
			`<option value={'DATETIME'}>Datetime</option>`
			`</Select>`
			`<i`
			`class="ri-close-circle-line delete"`
			`on:click={() => deleteField(idx)} />`
			`</div>`
			`{/each}`
actions fix 2021-01-28 06:29:30 +13:00			`<Spacer small />`
			`<Button thin secondary on:click={newField}>Add Field</Button>`
further syntax highlighting updates 2021-01-13 05:49:11 +13:00			`{/if}`
			`</Switcher>`
			`{/if}`
			`</section>`
			`</div>`
			`</section>`
			`{/if}`
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			`<Spacer extraLarge />`
			`<Spacer extraLarge />`
separation of datasources and queries 2020-12-19 07:19:43 +13:00
			`<style>`
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			`}`

more design updates 2021-02-19 07:55:08 +13:00			`hr {`
			`margin-top: var(--layout-m);`
initial spacing improvements and border adjustments additional spacing added border added to main nav font-size adjustments 2021-02-22 01:04:36 +13:00			`border: 1px solid var(--grey-2);`
docs link 2021-01-19 06:01:41 +13:00			`}`

separation of datasources and queries 2020-12-19 07:19:43 +13:00			`.config {`
			`margin-bottom: var(--spacing-s);`
			`}`

			`.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;`
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			`background-color: var(--grey-1);`
			`padding: var(--spacing-m);`
			`border-radius: 8px;`
			`color: var(--grey-6);`
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>`