Merge pull request #1010 from Budibase/UI-tidy-ups

UI tidy ups
2024-06-29 19:41:03 +12:00 · 2021-01-25 16:51:32 +00:00 · 2021-01-25 16:51:32 +00:00 · 0efb038331
parent 218c698815 d0eb8c38c5
commit 0efb038331
27 changed files with 1298 additions and 324 deletions
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -63,7 +63,7 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^1.54.0",
+    "@budibase/bbui": "^1.54.1",
    "@budibase/client": "^0.5.3",
    "@budibase/colorpicker": "^1.0.1",
    "@budibase/string-templates": "^0.5.3",
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@ -43,8 +43,8 @@
        <div class="datasource-icon" slot="icon">
          <svelte:component
            this={ICONS[datasource.source]}
-            height="15"
-            width="15" />
+            height="18"
+            width="18" />
        </div>
        <EditDatasourcePopover {datasource} />
      </NavItem>
@ -61,3 +61,10 @@
    {/each}
  </div>
 {/if}
+
+<style>
+  .datasource-icon {
+    margin-right: 3px;
+    padding-top: 3px;
+  }
+</style>
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@ -7,10 +7,9 @@
 <form>
  {#each Object.keys(integration) as configKey}
    <Input
-      thin
      type={integration[configKey].type}
      label={configKey}
      bind:value={integration[configKey]} />
-    <Spacer medium />
+    <Spacer large />
  {/each}
 </form>
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
@ -0,0 +1,42 @@
+<script>
+  import { backendUiStore, store, allScreens } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
+  import { DropdownMenu, Button, Input, TextButton, Icon } from "@budibase/bbui"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
+  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
+
+  export let bindable
+  export let parameters
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+
+  function hideEditor() {
+    dropdown?.hide()
+  }
+</script>
+
+<div on:click|stopPropagation bind:this={anchor}>
+  <TextButton
+    text
+    on:click={dropdown.show}
+    active={false}>
+      <Icon name="add" />
+      Add Parameters
+  </TextButton>
+  <DropdownMenu align="right" {anchor} bind:this={dropdown}>
+    <div class="wrapper">
+      <ParameterBuilder bind:parameters {bindable} />
+    </div>
+  </DropdownMenu>
+</div>
+
+<style>
+  .wrapper {
+    padding: var(--spacing-xl);
+    min-width: 600px;
+  }
+</style>
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@ -155,8 +155,9 @@
  }

  :global(.CodeMirror) {
-    height: auto !important;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
+    height: 500px !important;
+    border-radius: var(--border-radius-s);
+    font-family: monospace !important;
+    line-height: 1.3;
  }
 </style>
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@ -24,18 +24,18 @@
 </script>

 <form on:submit|preventDefault>
+<div class="field">
  {#each schemaKeys as field}
-    <Label extraSmall grey>{field}</Label>
-    <div class="field">
      <Input
+        placeholder="Enter {field} name"
+        outline
        disabled={!editable}
        type={schema.fields[field]?.type}
        required={schema.fields[field]?.required}
        bind:value={fields[field]} />
-    </div>
  {/each}
+</div>
 </form>
-<Label extraSmall grey>Data</Label>
 {#if schema.customisable}
  <Editor
    label="Query"
@ -49,7 +49,7 @@
  .field {
    margin-bottom: var(--spacing-m);
    display: grid;
-    grid-template-columns: 1fr 2%;
+    grid-template-columns: 1fr 1fr;
    grid-gap: var(--spacing-m);
    align-items: center;
  }
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@ -1,5 +1,12 @@
 <script>
-  import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import {
+    Button,
+    TextArea,
+    Label,
+    Input,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
  import BindableInput from "components/userInterface/BindableInput.svelte"
  import {
    readableToRuntimeBinding,
@ -31,19 +38,22 @@

 <section>
  <Heading extraSmall black>Parameters</Heading>
+  <Spacer large />
  <div class="parameters" class:bindable>
-    <Label extraSmall grey>Parameter Name</Label>
-    <Label extraSmall grey>Default</Label>
-    {#if bindable}
-      <Label extraSmall grey>Value</Label>
-    {:else}
-      <div />
-    {/if}
    {#each parameters as parameter, idx}
-      <Input thin disabled={bindable} bind:value={parameter.name} />
-      <Input thin disabled={bindable} bind:value={parameter.default} />
+      <Input
+        placeholder="Parameter Name"
+        thin
+        disabled={bindable}
+        bind:value={parameter.name} />
+      <Input
+        placeholder="Default"
+        thin
+        disabled={bindable}
+        bind:value={parameter.default} />
      {#if bindable}
        <BindableInput
+          placeholder="Value"
          type="string"
          thin
          on:change={evt => onBindingChange(parameter.name, evt.detail)}
@ -57,9 +67,7 @@
    {/each}
  </div>
  {#if !bindable}
-    <Button thin secondary small on:click={newQueryParameter}>
-      Add Parameter
-    </Button>
+    <Button secondary on:click={newQueryParameter}>Add Parameter</Button>
  {/if}
 </section>

--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -16,6 +16,7 @@
  import { FIELDS } from "constants/backend"
  import IntegrationQueryEditor from "components/integration/index.svelte"
  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
+  import EditQueryParamsPopover from "components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte"
  import { backendUiStore } from "builderStore"

  const PREVIEW_HEADINGS = [
@ -40,6 +41,7 @@
  let tab = "JSON"
  let parameters
  let data = []
+  let popover

  $: datasource = $backendUiStore.datasources.find(
    ds => ds._id === query.datasourceId
@ -61,7 +63,7 @@
  $: config = $backendUiStore.integrations[datasourceType]?.query
  $: docsLink = $backendUiStore.integrations[datasourceType]?.docs

-  $: shouldShowQueryConfig = config && query.queryVerb && query.queryType
+  $: shouldShowQueryConfig = config && query.queryVerb

  function newField() {
    fields = [...fields, {}]
@ -129,62 +131,44 @@
 </script>

 <header>
-  <Heading small>{query.name}</Heading>
+  <div class="input">
+    <Input placeholder="✎ Edit Query Name" bind:value={query.name} />
+  </div>
  {#if config}
-    <div class="queryVerbs">
-      {#each Object.keys(config) as queryVerb}
-        <div
-          class="queryVerb"
-          class:selected={queryVerb === query.queryVerb}
-          on:click={() => {
-            query.queryVerb = queryVerb
-          }}>
-          {queryVerb}
-        </div>
-      {/each}
-    </div>
-    {#if query.queryVerb}
-      <Select thin secondary bind:value={query.queryType}>
-        <option value={''}>Select an option</option>
-        {#each Object.keys(config[query.queryVerb]) as queryType}
-          <option value={queryType}>{queryType}</option>
+  <div class="props">
+    <div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
+    <div class="select">
+      <Select primary thin bind:value={query.queryVerb}>
+        {#each Object.keys(config) as queryVerb}
+          <option value={queryVerb}>{queryVerb}</option>
        {/each}
      </Select>
-    {/if}
-    <Spacer medium />
-    <Button primary href={docsLink} target="_blank">
-      <i class="ri-book-2-line" />
-    </Button>
+  </div>
+    </div>
+    <EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
  {/if}
 </header>
-
-<Spacer large />
+<Spacer extraLarge />

 {#if shouldShowQueryConfig}
  <section>
    <div class="config">
-      <Label extraSmall grey>Query Name</Label>
-      <Input thin bind:value={query.name} />
-
-      <Spacer medium />
-
      <IntegrationQueryEditor
        {query}
-        schema={config[query.queryVerb][query.queryType]}
+        schema={config[query.queryVerb]}
        bind:parameters />

-      <Spacer medium />
+      <Spacer extraLarge />
+      <Spacer large />

      <div class="viewer-controls">
        <Button
-          wide
-          thin
          blue
          disabled={data.length === 0}
          on:click={saveQuery}>
-          Save
+          Save Query
        </Button>
-        <Button wide thin primary on:click={previewQuery}>Run</Button>
+        <Button primary on:click={previewQuery}>Run Query</Button>
      </div>

      <section class="viewer">
@ -196,10 +180,11 @@
              <ExternalDataSourceTable {query} {data} />
            {:else if tab === 'SCHEMA'}
              {#each fields as field, idx}
+                <Spacer small />
                <div class="field">
-                  <Input thin type={'text'} bind:value={field.name} />
-                  <Select secondary thin bind:value={field.type}>
-                    <option value={''}>Select an option</option>
+                  <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>
@ -210,7 +195,8 @@
                    on:click={() => deleteField(idx)} />
                </div>
              {/each}
-              <Button thin secondary on:click={newField}>Add Field</Button>
+                <Spacer small />
+                <Button thin secondary on:click={newField}>Add Field</Button>
            {/if}
          </Switcher>
        {/if}
@ -220,11 +206,28 @@
 {/if}

 <style>
+
+  .input {
+    width: 300px;
+  }
+
+  .select {
+    width: 200px;
+    margin-right: 40px;
+  }
+
+  .props {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+    align-items: center;
+    gap: var(--layout-l);
+  }
+
  .field {
    display: grid;
-    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 50px;
-    margin-bottom: var(--spacing-m);
+    gap: var(--spacing-l);
  }

  a {
@ -240,6 +243,16 @@
    cursor: pointer;
  }

+  .query-type {
+    font-family: var(--font-sans);
+    color: var(--grey-8);
+    font-size: var(--font-size-s);
+  }
+
+  .query-type-span {
+    text-transform: uppercase;
+  }
+
  .preview {
    width: 800px;
    height: 100%;
@ -253,32 +266,18 @@
    align-items: center;
  }

-  .queryVerbs {
-    display: flex;
-    flex: 1;
-    font-size: var(--font-size-m);
-    align-items: center;
-    margin-left: var(--spacing-l);
-  }
-
-  .queryVerb {
-    text-transform: capitalize;
-    margin-right: var(--spacing-m);
-    color: var(--grey-5);
-    cursor: pointer;
-  }
-
-  .selected {
-    color: var(--white);
-    font-weight: 500;
-  }
-
  .viewer-controls {
-    display: grid;
-    grid-gap: var(--spacing-m);
-    grid-auto-flow: column;
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
    direction: rtl;
-    grid-template-columns: 10% 10% 1fr;
-    margin-bottom: var(--spacing-m);
+    z-index: 5;
+    gap: var(--spacing-m);
+    min-width: 150px;
+  }
+
+  .viewer {
+    margin-top: -28px;
+    z-index: -2;
  }
 </style>
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@ -20,13 +20,6 @@
  }
 </script>

-{#if editable}
-  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-  <Spacer large />
-{/if}
-
-<Heading extraSmall black>Query</Heading>
-<Spacer medium />

 {#if schema}
  {#key query._id}
@ -38,7 +31,6 @@
        readOnly={!editable}
        value={query.fields.sql} />
    {:else if schema.type === QueryTypes.JSON}
-      <Spacer large />
      <Editor
        label="Query"
        mode="json"
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@ -57,7 +57,7 @@
  }
 </script>

-<Button secondary small on:click={drawer.show}>Define Actions</Button>
+<Button secondary wide on:click={drawer.show}>Define Actions</Button>
 <Drawer bind:this={drawer} title={'Actions'}>
  <heading slot="buttons">
    <Button thin blue on:click={saveEventData}>Save</Button>
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@ -83,9 +83,7 @@
    const source = $backendUiStore.datasources.find(
      ds => ds._id === query.datasourceId
    ).source
-    return $backendUiStore.integrations[source].query[query.queryVerb][
-      query.queryType
-    ]
+    return $backendUiStore.integrations[source].query[query.queryVerb]
  }
 </script>

@ -98,34 +96,34 @@
 </div>
 {#if value.type === 'query'}
  <i class="ri-settings-5-line" on:click={drawer.show} />
-  <Drawer title={'Query'}>
-    <div slot="buttons">
-      <Button
-        blue
-        thin
-        on:click={() => {
-          notifier.success('Query parameters saved.')
-          handleSelected(value)
-          drawer.hide()
-        }}>
-        Save
-      </Button>
-    </div>
-    <div class="drawer-contents" slot="body">
-      <IntegrationQueryEditor
-        query={value}
-        schema={fetchDatasourceSchema(value)}
-        editable={false} />
-      <Spacer large />
-      {#if value.parameters.length > 0}
-        <ParameterBuilder
-          bind:customParams={value.queryParams}
-          parameters={queries.find(query => query._id === value._id).parameters}
-          bindings={queryBindableProperties} />
-      {/if}
-    </div>
-  </Drawer>
-{/if}
+    <Drawer title={'Query'} bind:this={drawer}>
+      <div slot="buttons">
+        <Button
+          blue
+          thin
+          on:click={() => {
+            notifier.success('Query parameters saved.')
+            handleSelected(value)
+            drawer.hide()
+          }}>
+          Save
+        </Button>
+      </div>
+      <div class="drawer-contents" slot="body">
+        <IntegrationQueryEditor
+          query={value}
+          schema={fetchDatasourceSchema(value)}
+          editable={false} />
+        <Spacer large />
+        {#if value.parameters.length > 0}
+          <ParameterBuilder
+            bind:customParams={value.queryParams}
+            parameters={queries.find(query => query._id === value._id).parameters}
+            bindings={queryBindableProperties} />
+        {/if}
+      </div>
+    </Drawer>
+  {/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
  <div class="dropdown">
    <div class="title">
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@ -73,7 +73,7 @@
        <a
          target="_blank"
          href="https://github.com/Budibase/budibase/discussions">
-          <i class="ri-question-line" />
+          <i class="ri-github-fill" />
        </a>
      </div>
      <SettingsLink />
@ -89,8 +89,8 @@
  <div class="beta">
    <Button
      secondary
-      href="https://www.budibase.com/blog/budibase-public-beta/">
-      Budibase is in Beta
+      href="https://github.com/Budibase/budibase/discussions/categories/ideas">
+      Request feature
    </Button>
  </div>

--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@ -21,9 +21,9 @@
    query => query._id === $backendUiStore.selectedQueryId
  ) || {
    datasourceId: $params.selectedDatasource,
-    name: "New Query",
    parameters: [],
    fields: {},
+    queryVerb: "read",
  }
 </script>

@ -35,8 +35,10 @@

 <style>
  section {
-    background: var(--background);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius-m);
+    overflow: scroll;
+  }
+  ::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
  }
 </style>
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -1,6 +1,6 @@
 <script>
  import { goto } from "@sveltech/routify"
-  import { Button, Spacer, Icon, TextButton } from "@budibase/bbui"
+  import { Button, Spacer, Icon } from "@budibase/bbui"
  import { backendUiStore } from "builderStore"
  import { notifier } from "builderStore/store/notifications"
  import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@ -14,31 +14,129 @@
    await backendUiStore.actions.datasources.save(datasource)
    notifier.success(`Datasource ${name} saved successfully.`)
  }
+
+  function onClickQuery(query) {
+    if ($backendUiStore.selectedQueryId === query._id) {
+      return
+    }
+    backendUiStore.actions.queries.select(query)
+    $goto(`../${query._id}`)
+  }
 </script>

 {#if datasource}
-  <TextButton text small on:click={() => $goto('../new')}>
-    <Icon name="filter" />
-    Create Query
-  </TextButton>
  <section>
-    <h4>{datasource.name}: Configuration</h4>
-    <IntegrationConfigForm integration={datasource.config} />
    <Spacer medium />
-    <footer>
-      <Button blue wide on:click={saveDatasource}>Save</Button>
-    </footer>
+    <header>
+      <h3 class="section-title">{datasource.name}</h3>
+    </header>
+    <Spacer extraLarge />
+    <div class="container">
+      <div class="config-header">
+        <h5>Configuration</h5>
+        <Button secondary on:click={saveDatasource}>Save</Button>
+      </div>
+      <Spacer medium />
+      <IntegrationConfigForm integration={datasource.config} />
+    </div>
+    <Spacer extraLarge />
+    <div class="container">
+      <div class="query-header">
+        <h5>Queries</h5>
+        <Button blue on:click={() => $goto('../new')}>Create Query</Button>
+      </div>
+      <Spacer extraLarge />
+      <div class="query-list">
+        {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+          <div class="query-list-item" on:click={() => onClickQuery(query)}>
+            <p class="query-name">{query.name}</p>
+            <p>{query.queryVerb}</p>
+            <p>4000 records</p>
+            <p>→</p>
+          </div>
+        {/each}
+        <Spacer medium />
+      </div>
+    </div>
  </section>
+
 {/if}

 <style>
-  h4 {
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-s);
+  h3 {
+    margin: 0;
  }
  section {
-    background: var(--background);
+    margin: 0 auto;
+    width: 800px;
+  }
+
+  header {
+    margin: 0 0 var(--spacing-xs) 0;
+  }
+
+  .section-title {
+    text-transform: capitalize;
+  }
+
+  .config-header {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 var(--spacing-xs) 0;
+  }
+
+  .container {
    border-radius: var(--border-radius-m);
-    padding: var(--spacing-xl);
+    background: var(--background);
+    padding: var(--layout-s);
+    margin: 0 auto;
+  }
+
+  h5 {
+    margin: 0 !important;
+  }
+
+  .query-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 var(--spacing-s) 0;
+  }
+
+  .query-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+
+  .query-list-item {
+    border-radius: var(--border-radius-m);
+    background: var(--background);
+    border: var(--border-grey);
+    display: grid;
+    grid-template-columns: 2fr 0.75fr 0.75fr 1fr 20px;
+    align-items: center;
+    padding: var(--spacing-m) var(--layout-xs);
+    gap: var(--layout-xs);
+    transition: 200ms background ease;
+  }
+
+  .query-list-item:hover {
+    background: var(--grey-1);
+    cursor: pointer;
+  }
+
+  p {
+    font-size: var(--font-size-xs);
+    color: var(--grey-8);
+  }
+
+  .query-name {
+    color: var(--ink);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: var(--font-size-s);
  }
 </style>
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -842,10 +842,10 @@
    lodash "^4.17.19"
    to-fast-properties "^2.0.0"

-"@budibase/bbui@^1.54.0":
-  version "1.54.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.0.tgz#60e6c0faa3d8f1781c503e74f8b8990f75ba2c40"
-  integrity sha512-98koXkueqda6oQT6q0NPNvdL878ETRevtmmm34aSz9C6B4Oz68VVCsiFzRWuHvP/7wiNaAxMgY1nsEsCwP3LpQ==
+"@budibase/bbui@^1.54.1":
+  version "1.54.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.1.tgz#ad0439c0be6a4dc818cd9dacda00f053b0daa9d5"
+  integrity sha512-ZY2OP/tF+ReMSyzZIGZV6wpQ4eIEzYGxZV3n+C+oNjzK5u3rwWPCDEVDlZgJSqJ61z+sEf2zuIyAh88lq9RTaA==
  dependencies:
    markdown-it "^12.0.2"
    quill "^1.3.7"
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@ -31,7 +31,6 @@ function generateQueryValidation() {
      default: Joi.string()
    })),
    queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
-    queryType: Joi.string().required(),
    schema: Joi.object({}).required().unknown(true)
  }))
 }
--- a/packages/server/src/api/routes/tests/datasource.spec.js
+++ b/packages/server/src/api/routes/tests/datasource.spec.js
@ -26,7 +26,6 @@ const TEST_QUERY = {
  fields:{},
  schema:{},
  queryVerb:"read",
-  queryType:"Table",
 }

 describe("/datasources", () => {
--- a/packages/server/src/api/routes/tests/query.spec.js
+++ b/packages/server/src/api/routes/tests/query.spec.js
@ -26,7 +26,6 @@ const TEST_QUERY = {
  fields:{},
  schema:{},
  queryVerb:"read",
-  queryType:"Table",
 }

 describe("/queries", () => {
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@ -17,48 +17,40 @@ const SCHEMA = {
  },
  query: {
    create: {
-      "Airtable Record": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
    read: {
-      Table: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          view: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        view: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
    update: {
-      Fields: {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
    delete: {
-      "Airtable Ids": {
-        type: FIELD_TYPES.JSON,
-      },
+      type: FIELD_TYPES.JSON,
    },
  },
 }
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@ -16,28 +16,20 @@ const SCHEMA = {
  },
  query: {
    create: {
-      "CouchDB DSL": {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
    },
    read: {
-      "CouchDB DSL": {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
    },
    update: {
-      "CouchDB Document": {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
    },
    delete: {
-      "Document ID": {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@ -20,56 +20,48 @@ const SCHEMA = {
  },
  query: {
    create: {
-      DynamoConfig: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          customisable: true,
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
+        customisable: true,
      },
    },
    read: {
-      DynamoConfig: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          index: {
-            type: FIELD_TYPES.STRING,
-          },
-          customisable: true,
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
+        index: {
+          type: FIELD_TYPES.STRING,
+        },
+        customisable: true,
      },
    },
    update: {
-      DynamoConfig: {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          customisable: true,
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
+        customisable: true,
      },
    },
    delete: {
-      "Dynamo Partition Key": {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          table: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          key: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        table: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        key: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@ -13,57 +13,49 @@ const SCHEMA = {
  },
  query: {
    create: {
-      "ES Query DSL": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
    read: {
-      "ES Query DSL": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
    update: {
-      "ES Query DSL": {
-        type: QUERY_TYPES.FIELDS,
-        customisable: true,
-        fields: {
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      customisable: true,
+      fields: {
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
    delete: {
-      "Document ID": {
-        type: QUERY_TYPES.FIELDS,
-        fields: {
-          index: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
-          id: {
-            type: FIELD_TYPES.STRING,
-            required: true,
-          },
+      type: QUERY_TYPES.FIELDS,
+      fields: {
+        index: {
+          type: FIELD_TYPES.STRING,
+          required: true,
+        },
+        id: {
+          type: FIELD_TYPES.STRING,
+          required: true,
        },
      },
    },
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@ -24,14 +24,10 @@ const SCHEMA = {
  },
  query: {
    create: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
    },
    read: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
    },
  },
 }
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@ -20,14 +20,10 @@ const SCHEMA = {
  },
  query: {
    create: {
-      JSON: {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
    },
    read: {
-      JSON: {
-        type: QUERY_TYPES.JSON,
-      },
+      type: QUERY_TYPES.JSON,
    },
  },
 }
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@ -31,24 +31,16 @@ const SCHEMA = {
  },
  query: {
    create: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
    },
    read: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
    },
    update: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
    },
    delete: {
-      SQL: {
-        type: "sql",
-      },
+      type: "sql",
    },
  },
 }
--- a/packages/server/src/integrations/s3.js
+++ b/packages/server/src/integrations/s3.js
@ -19,13 +19,11 @@ const SCHEMA = {
  },
  query: {
    read: {
-      Bucket: {
-        type: "fields",
-        fields: {
-          bucket: {
-            type: "string",
-            required: true,
-          },
+      type: "fields",
+      fields: {
+        bucket: {
+          type: "string",
+          required: true,
        },
      },
    },
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock