From b18f840c00fc0418a5f0ff4da3e79a03ae65f7fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 14:33:40 +0200
Subject: [PATCH 01/17] Convert IntegrationForm to use Layout component

---
 .../IntegrationConfigForm.svelte              | 40 ++++++-------
 .../EventsEditor/EventEditor.svelte           | 14 ++++-
 .../[selectedDatasource]/index.svelte         | 58 +++++++++----------
 3 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index 14c980f7f9..e442afd08d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -1,34 +1,33 @@
 <script>
-  import { Label, Input, Spacer } from "@budibase/bbui"
+  import { Label, Input, Layout } from "@budibase/bbui"
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
   import { capitalise } from "../../../../helpers"
 
   export let integration
   export let schema
-
-  let unsaved = false
 </script>
 
 <form>
-  {#each Object.keys(schema) as configKey}
-    {#if schema[configKey].type === "object"}
-      <Label>{capitalise(configKey)}</Label>
-      <Spacer small />
-      <KeyValueBuilder
-        defaults={schema[configKey].default}
-        bind:object={integration[configKey]}
-      />
-    {:else}
-      <div class="form-row">
+  <Layout gap="S">
+    {#each Object.keys(schema) as configKey}
+      {#if schema[configKey].type === "object"}
         <Label>{capitalise(configKey)}</Label>
-        <Input
-          type={schema[configKey].type}
-          on:change
-          bind:value={integration[configKey]}
+        <KeyValueBuilder
+          defaults={schema[configKey].default}
+          bind:object={integration[configKey]}
         />
-      </div>
-    {/if}
-  {/each}
+      {:else}
+        <div class="form-row">
+          <Label>{capitalise(configKey)}</Label>
+          <Input
+            type={schema[configKey].type}
+            on:change
+            bind:value={integration[configKey]}
+          />
+        </div>
+      {/if}
+    {/each}
+  </Layout>
 </form>
 
 <style>
@@ -37,6 +36,5 @@
     grid-template-columns: 20% 1fr;
     grid-gap: var(--spacing-l);
     align-items: center;
-    margin-bottom: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index fdd01f4976..96533ae599 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,7 +1,13 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import { Icon, Button, Popover, Spacer } from "@budibase/bbui"
+  import {
+    Icon,
+    Button,
+    Popover,
+    Spacer,
+    DrawerContentWithSidebar,
+  } from "@budibase/bbui"
   import actionTypes from "./actions"
   import { generate } from "shortid"
 
@@ -68,8 +74,8 @@
   }
 </script>
 
-<div class="actions-container">
-  <div class="actions-list">
+<DrawerContentWithSidebar>
+  <div class="actions-list" slot="sidebar">
     <div>
       <div bind:this={addActionButton}>
         <Button wide secondary on:click={addActionDropdown.show}>
@@ -127,6 +133,8 @@
       </div>
     {/if}
   </div>
+</DrawerContentWithSidebar>
+<div class="actions-container">
   <div class="action-config">
     {#if selectedAction}
       <div class="selected-action-container">
diff --git a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
index fbb7a33c21..5b67e11206 100644
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto, beforeUrlChange } from "@roxi/routify"
-  import { Button, Heading, Body, Spacer, Divider } from "@budibase/bbui"
+  import { Button, Heading, Body, Divider, Layout } from "@budibase/bbui"
   import { datasources, integrations, queries } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@@ -43,39 +43,36 @@
 
 {#if datasource}
   <section>
-    <Spacer extraLarge />
-    <header>
-      <svelte:component
-        this={ICONS[datasource.source]}
-        height="26"
-        width="26"
-      />
-      <Heading m>{datasource.name}</Heading>
-    </header>
-    <Body small grey lh>{integration.description}</Body>
-    <Spacer extraLarge />
-    <Divider />
-    <Spacer extraLarge />
-    <div class="container">
-      <div class="config-header">
-        <Heading s>Configuration</Heading>
-        <Button secondary on:click={saveDatasource}>Save</Button>
-      </div>
-      <Body s>Connect your database to Budibase using the config below.</Body>
-      <Spacer extraLarge />
-      <IntegrationConfigForm
-        schema={integration.datasource}
-        integration={datasource.config}
-        on:change={setUnsaved}
-      />
-      <Spacer extraLarge />
+    <Layout>
+      <header>
+        <svelte:component
+          this={ICONS[datasource.source]}
+          height="26"
+          width="26"
+        />
+        <Heading m>{datasource.name}</Heading>
+      </header>
+      <Body small grey lh>{integration.description}</Body>
+      <Divider />
+      <div class="container">
+        <div class="config-header">
+          <Heading s>Configuration</Heading>
+          <Button secondary on:click={saveDatasource}>Save</Button>
+        </div>
+        <Body size="S"
+          >Connect your database to Budibase using the config below.</Body
+        >
+        <IntegrationConfigForm
+          schema={integration.datasource}
+          integration={datasource.config}
+          on:change={setUnsaved}
+        />
+      </div>
       <Divider />
-      <Spacer extraLarge />
       <div class="query-header">
         <Heading s>Queries</Heading>
         <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
       </div>
-      <Spacer extraLarge />
       <div class="query-list">
         {#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
           <div class="query-list-item" on:click={() => onClickQuery(query)}>
@@ -85,7 +82,7 @@
           </div>
         {/each}
       </div>
-    </div>
+    </Layout>
   </section>
 {/if}
 
@@ -109,6 +106,7 @@
   }
 
   .container {
+    width: 100%;
     border-radius: var(--border-radius-m);
     margin: 0 auto;
   }

From 42204aa53d2b387c44808066054047cc69c55823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 14:42:44 +0200
Subject: [PATCH 02/17] rename DrawerContentWithSidebar to DrawerContent and
 add sidebar check

---
 ...ithSidebar.svelte => DrawerContent.svelte} | 17 ++++--
 packages/bbui/src/index.js                    |  2 +-
 .../PropertiesPanel/BindingPanel.svelte       |  6 +-
 .../PropertyControls/DataSourceSelect.svelte  | 58 +++++++++++--------
 .../EventsEditor/EventEditor.svelte           | 12 +---
 5 files changed, 54 insertions(+), 41 deletions(-)
 rename packages/bbui/src/Drawer/{DrawerContentWithSidebar.svelte => DrawerContent.svelte} (67%)

diff --git a/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
similarity index 67%
rename from packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte
rename to packages/bbui/src/Drawer/DrawerContent.svelte
index f400caa5f5..33c3de1f62 100644
--- a/packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -1,8 +1,14 @@
 <div class="drawer-contents">
-  <div class="container" data-cy="binding-dropdown-modal">
-    <div class="sidebar">
-      <slot name="sidebar" />
-    </div>
+  <div
+    class:no-sidebar={!$$slots.sidebar}
+    class="container"
+    data-cy="binding-dropdown-modal"
+  >
+    {#if $$slots.sidebar}
+      <div class="sidebar">
+        <slot name="sidebar" />
+      </div>
+    {/if}
     <div class="main">
       <slot name="main" />
     </div>
@@ -19,6 +25,9 @@
     display: grid;
     grid-template-columns: 290px 1fr;
   }
+  .no-sidebar {
+    grid-template-columns: 1fr;
+  }
   .sidebar {
     border-right: var(--border-light);
     overflow: auto;
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 6413493580..615982bb1b 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -10,7 +10,7 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
 export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
-export { default as DrawerContentWithSidebar } from "./Drawer/DrawerContentWithSidebar.svelte"
+export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
 export { default as Avatar } from "./Avatar/Avatar.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 16cc8409d5..eff76a4608 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Label, DrawerContentWithSidebar, Layout } from "@budibase/bbui"
+  import { Search, TextArea, Heading, Label, DrawerContent, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -57,7 +57,7 @@
   }
 </script>
 
-<DrawerContentWithSidebar>
+<DrawerContent>
   <svelte:fragment slot="sidebar">
   <Layout>
     <Search placeholder="Search" bind:value={search} />
@@ -121,7 +121,7 @@
       </p>
     {/if}
   </div>
-</DrawerContentWithSidebar>
+</DrawerContent>
 
 <style>
   .main {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 88948d9e4d..283be3deff 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -2,10 +2,10 @@
   import { getBindableProperties } from "builderStore/dataBinding"
   import {
     Button,
-    Icon,
     Popover,
     Divider,
     Select,
+    Layout,
     Spacer,
     Heading,
     Drawer,
@@ -30,7 +30,7 @@
   export let showAllQueries
 
   $: text = value?.label ?? "Choose an option"
-  $: tables = $tablesStore.list.map(m => ({
+  $: tables = $tablesStore.list.map((m) => ({
     label: m.name,
     tableId: m._id,
     type: "table",
@@ -46,9 +46,9 @@
   }, [])
   $: queries = $queriesStore.list
     .filter(
-      query => showAllQueries || query.queryVerb === "read" || query.readable
+      (query) => showAllQueries || query.queryVerb === "read" || query.readable
     )
-    .map(query => ({
+    .map((query) => ({
       label: query.name,
       name: query.name,
       tableId: query._id,
@@ -61,15 +61,15 @@
     $currentAsset,
     $store.selectedComponentId
   )
-  $: queryBindableProperties = bindableProperties.map(property => ({
+  $: queryBindableProperties = bindableProperties.map((property) => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
     path: property.readableBinding,
   }))
   $: links = bindableProperties
-    .filter(x => x.fieldSchema?.type === "link")
-    .map(property => {
+    .filter((x) => x.fieldSchema?.type === "link")
+    .map((property) => {
       return {
         providerId: property.providerId,
         label: property.readableBinding,
@@ -89,7 +89,7 @@
   }
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
+    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
@@ -100,19 +100,21 @@
     readonly
     value={text}
     options={[text]}
-    on:click={dropdownRight.show} />
-  {#if value?.type === 'query'}
+    on:click={dropdownRight.show}
+  />
+  {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={drawer.show} />
-    <Drawer title={'Query Parameters'} bind:this={drawer}>
+    <Drawer title={"Query Parameters"} bind:this={drawer}>
       <div slot="buttons">
         <Button
           blue
           thin
           on:click={() => {
-            notifications.success('Query parameters saved.')
+            notifications.success("Query parameters saved.")
             handleSelected(value)
             drawer.hide()
-          }}>
+          }}
+        >
           Save
         </Button>
       </div>
@@ -120,17 +122,20 @@
         {#if value.parameters.length > 0}
           <ParameterBuilder
             bind:customParams={value.queryParams}
-            parameters={queries.find(query => query._id === value._id).parameters}
-            bindings={queryBindableProperties} />
+            parameters={queries.find((query) => query._id === value._id)
+              .parameters}
+            bindings={queryBindableProperties}
+          />
         {/if}
-        <!--        <Spacer large />-->
         <IntegrationQueryEditor
           height={200}
           query={value}
           schema={fetchQueryDefinition(value)}
-          datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
-          editable={false} />
-        <Spacer large />
+          datasource={$datasources.list.find(
+            (ds) => ds._id === value.datasourceId
+          )}
+          editable={false}
+        />
       </div>
     </Drawer>
   {/if}
@@ -144,7 +149,8 @@
       {#each tables as table}
         <li
           class:selected={value === table}
-          on:click={() => handleSelected(table)}>
+          on:click={() => handleSelected(table)}
+        >
           {table.label}
         </li>
       {/each}
@@ -157,7 +163,8 @@
       {#each views as view}
         <li
           class:selected={value === view}
-          on:click={() => handleSelected(view)}>
+          on:click={() => handleSelected(view)}
+        >
           {view.label}
         </li>
       {/each}
@@ -170,7 +177,8 @@
       {#each links as link}
         <li
           class:selected={value === link}
-          on:click={() => handleSelected(link)}>
+          on:click={() => handleSelected(link)}
+        >
           {link.label}
         </li>
       {/each}
@@ -183,7 +191,8 @@
       {#each queries as query}
         <li
           class:selected={value === query}
-          on:click={() => handleSelected(query)}>
+          on:click={() => handleSelected(query)}
+        >
           {query.label}
         </li>
       {/each}
@@ -198,7 +207,8 @@
         {#each otherSources as source}
           <li
             class:selected={value === source}
-            on:click={() => handleSelected(source)}>
+            on:click={() => handleSelected(source)}
+          >
             {source.label}
           </li>
         {/each}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 96533ae599..314ff2af36 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,13 +1,7 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import {
-    Icon,
-    Button,
-    Popover,
-    Spacer,
-    DrawerContentWithSidebar,
-  } from "@budibase/bbui"
+  import { Icon, Button, Popover, Spacer, DrawerContent } from "@budibase/bbui"
   import actionTypes from "./actions"
   import { generate } from "shortid"
 
@@ -74,7 +68,7 @@
   }
 </script>
 
-<DrawerContentWithSidebar>
+<DrawerContent>
   <div class="actions-list" slot="sidebar">
     <div>
       <div bind:this={addActionButton}>
@@ -133,7 +127,7 @@
       </div>
     {/if}
   </div>
-</DrawerContentWithSidebar>
+</DrawerContent>
 <div class="actions-container">
   <div class="action-config">
     {#if selectedAction}

From 7df0555721cc8b8dc8c9b5205fa15dd259bde99f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 14:52:58 +0200
Subject: [PATCH 03/17] rewords FilterPanel to use new DrawerContent component

---
 packages/bbui/src/Drawer/DrawerContent.svelte |  2 +-
 .../PropertiesPanel/BindingPanel.svelte       |  2 +-
 .../EventsEditor/EventEditor.svelte           | 24 ++++----
 .../PropertyControls/FilterEditor.svelte      | 60 ++++++++++---------
 4 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/packages/bbui/src/Drawer/DrawerContent.svelte b/packages/bbui/src/Drawer/DrawerContent.svelte
index 33c3de1f62..5b72870fa8 100644
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@@ -10,7 +10,7 @@
       </div>
     {/if}
     <div class="main">
-      <slot name="main" />
+      <slot />
     </div>
   </div>
 </div>
diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index eff76a4608..aab96d97b8 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@@ -107,7 +107,7 @@
     </section>
   </Layout>
   </svelte:fragment>
-  <div class="main" slot="main">
+  <div class="main">
     <TextArea
       bind:getCaretPosition
       bind:value
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 314ff2af36..a884854177 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -127,19 +127,19 @@
       </div>
     {/if}
   </div>
-</DrawerContent>
-<div class="actions-container">
-  <div class="action-config">
-    {#if selectedAction}
-      <div class="selected-action-container">
-        <svelte:component
-          this={selectedActionComponent}
-          parameters={selectedAction.parameters}
-        />
-      </div>
-    {/if}
+  <div class="actions-container">
+    <div class="action-config">
+      {#if selectedAction}
+        <div class="selected-action-container">
+          <svelte:component
+            this={selectedActionComponent}
+            parameters={selectedAction.parameters}
+          />
+        </div>
+      {/if}
+    </div>
   </div>
-</div>
+</DrawerContent>
 
 <style>
   .action-header {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
index a632561c4a..7d349de7cc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@@ -1,5 +1,12 @@
 <script>
-  import { Button, Drawer, Spacer, Body } from "@budibase/bbui"
+  import {
+    Button,
+    Drawer,
+    Spacer,
+    Body,
+    DrawerContent,
+    Layout,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { notifications } from "@budibase/bbui"
   import {
@@ -18,7 +25,7 @@
 
   $: schemaFields = getSchemaFields(componentInstance)
 
-  const getSchemaFields = component => {
+  const getSchemaFields = (component) => {
     const datasource = getDatasourceForProvider($currentAsset, component)
     const { schema } = getSchemaForDatasource(datasource)
     return Object.values(schema || {})
@@ -30,42 +37,37 @@
     drawer.hide()
   }
 
-  const onFieldsChanged = event => {
+  const onFieldsChanged = (event) => {
     tempValue = event.detail
   }
 </script>
 
 <Button secondary wide on:click={drawer.show}>Define Filters</Button>
-<Drawer bind:this={drawer} title='Filtering'>
+<Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
-  <div class="root" slot="body">
-    <Body s>
-      {#if !Object.keys(tempValue || {}).length}
-        Add your first filter column.
-      {:else}
-        Results are filtered to only those which match all of the following
-        constaints.
-      {/if}
-    </Body>
-    <Spacer medium />
-    <div class="fields">
-      <SaveFields
-        parameterFields={value}
-        {schemaFields}
-        valueLabel="Equals"
-        on:change={onFieldsChanged} />
-    </div>
-  </div>
+  <DrawerContent slot="body">
+    <Layout>
+      <Body s>
+        {#if !Object.keys(tempValue || {}).length}
+          Add your first filter column.
+        {:else}
+          Results are filtered to only those which match all of the following
+          constaints.
+        {/if}
+      </Body>
+      <div class="fields">
+        <SaveFields
+          parameterFields={value}
+          {schemaFields}
+          valueLabel="Equals"
+          on:change={onFieldsChanged}
+        />
+      </div>
+    </Layout>
+  </DrawerContent>
 </Drawer>
 
 <style>
-  .root {
-    padding: var(--spacing-l);
-    min-height: calc(40vh - 2 * var(--spacing-l));
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
   .fields {
     display: grid;
     column-gap: var(--spacing-l);

From 15acfc823fe7193f4c19a0bc9fc4ed4110641acd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 14:55:53 +0200
Subject: [PATCH 04/17] Convert AutomationBindingPanel to new DrawerContent
 panel

---
 .../SetupPanel/AutomationBindingPanel.svelte  | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
index 6729c502c0..3889ace050 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@@ -1,6 +1,12 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Input, TextArea, Heading, Layout } from "@budibase/bbui"
+  import {
+    Input,
+    TextArea,
+    Heading,
+    Layout,
+    DrawerContent,
+  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import { handlebarsCompletions } from "constants/completions"
@@ -44,8 +50,8 @@
   }
 </script>
 
-<div class="container">
-  <div class="list">
+<DrawerContent>
+  <div slot="sidebar" class="list">
     <Layout>
       <div class="section">
         <Heading s h3>Available bindings</Heading>
@@ -98,16 +104,9 @@
       </p>
     {/if}
   </div>
-</div>
+</DrawerContent>
 
 <style>
-  .container {
-    height: 40vh;
-    overflow-y: auto;
-    display: grid;
-    grid-template-columns: 290px 1fr;
-  }
-
   .list {
     grid-gap: var(--spacing-s);
     border-right: var(--border-light);

From 4c19d2d42fd45de144fc0405d56b54b7a3bb6cbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:04:30 +0200
Subject: [PATCH 05/17] Convert EventPanel to Layout component

---
 .../DataTable/modals/ManageAccessModal.svelte |   8 +-
 .../PropertyControls/DataSourceSelect.svelte  |   2 -
 .../EventsEditor/EventEditor.svelte           | 108 +++++++-----------
 .../PropertyControls/FilterEditor.svelte      |   9 +-
 4 files changed, 48 insertions(+), 79 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
index e005415276..b49d4f52d0 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
@@ -4,7 +4,6 @@
     Label,
     Input,
     Select,
-    Spacer,
     notifications,
     Body,
     ModalContent,
@@ -39,10 +38,11 @@
       <Input value={capitalise(level)} disabled />
       <Select
         value={permissions[level]}
-        on:change={e => changePermission(level, e.detail)}
+        on:change={(e) => changePermission(level, e.detail)}
         options={$roles}
-        getOptionLabel={x => x.name}
-        getOptionValue={x => x._id} />
+        getOptionLabel={(x) => x.name}
+        getOptionValue={(x) => x._id}
+      />
     {/each}
   </div>
 </ModalContent>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 283be3deff..88b30160e1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -5,8 +5,6 @@
     Popover,
     Divider,
     Select,
-    Layout,
-    Spacer,
     Heading,
     Drawer,
   } from "@budibase/bbui"
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index a884854177..1c7aa94474 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -1,7 +1,7 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import { Icon, Button, Popover, Spacer, DrawerContent } from "@budibase/bbui"
+  import { Icon, Button, Popover, Layout, DrawerContent } from "@budibase/bbui"
   import actionTypes from "./actions"
   import { generate } from "shortid"
 
@@ -70,12 +70,11 @@
 
 <DrawerContent>
   <div class="actions-list" slot="sidebar">
-    <div>
+    <Layout>
       <div bind:this={addActionButton}>
         <Button wide secondary on:click={addActionDropdown.show}>
           Add Action
         </Button>
-        <Spacer small />
       </div>
       <Popover
         bind:this={addActionDropdown}
@@ -90,55 +89,53 @@
           {/each}
         </div>
       </Popover>
-    </div>
 
-    {#if actions && actions.length > 0}
-      <div
-        class="action-dnd-container"
-        use:dndzone={{
-          items: actions,
-          flipDurationMs,
-          dropTargetStyle: { outline: "none" },
-        }}
-        on:consider={handleDndConsider}
-        on:finalize={handleDndFinalize}
-      >
-        {#each actions as action, index (action.id)}
-          <div
-            class="action-container"
-            animate:flip={{ duration: flipDurationMs }}
-          >
+      {#if actions && actions.length > 0}
+        <div
+          class="action-dnd-container"
+          use:dndzone={{
+            items: actions,
+            flipDurationMs,
+            dropTargetStyle: { outline: "none" },
+          }}
+          on:consider={handleDndConsider}
+          on:finalize={handleDndFinalize}
+        >
+          {#each actions as action, index (action.id)}
             <div
-              class="action-header"
-              class:selected={action === selectedAction}
-              on:click={selectAction(action)}
+              class="action-container"
+              animate:flip={{ duration: flipDurationMs }}
             >
-              {index + 1}.
-              {action[EVENT_TYPE_KEY]}
+              <div
+                class="action-header"
+                class:selected={action === selectedAction}
+                on:click={selectAction(action)}
+              >
+                {index + 1}.
+                {action[EVENT_TYPE_KEY]}
+              </div>
+              <div
+                on:click={() => deleteAction(index)}
+                style="margin-left: auto;"
+              >
+                <Icon size="S" hoverable name="Close" />
+              </div>
             </div>
-            <div
-              on:click={() => deleteAction(index)}
-              style="margin-left: auto;"
-            >
-              <Icon size="S" hoverable name="Close" />
-            </div>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  </div>
-  <div class="actions-container">
-    <div class="action-config">
-      {#if selectedAction}
-        <div class="selected-action-container">
-          <svelte:component
-            this={selectedActionComponent}
-            parameters={selectedAction.parameters}
-          />
+          {/each}
         </div>
       {/if}
-    </div>
+    </Layout>
   </div>
+  <Layout>
+    {#if selectedAction}
+      <div class="selected-action-container">
+        <svelte:component
+          this={selectedActionComponent}
+          parameters={selectedAction.parameters}
+        />
+      </div>
+    {/if}
+  </Layout>
 </DrawerContent>
 
 <style>
@@ -146,7 +143,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-top: var(--spacing-m);
+    margin-top: var(--spacing-s);
   }
 
   .action-header {
@@ -162,11 +159,6 @@
     color: var(--ink);
   }
 
-  .actions-list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-  }
-
   .available-action {
     padding: var(--spacing-s);
     font-size: var(--font-size-xs);
@@ -177,16 +169,6 @@
     background: var(--grey-2);
   }
 
-  .actions-container {
-    height: 40vh;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-    grid-auto-flow: column;
-    min-height: 0;
-    padding-top: 0;
-    overflow-y: auto;
-  }
-
   .action-container {
     border-bottom: 1px solid var(--grey-1);
     display: flex;
@@ -196,10 +178,6 @@
     border-bottom: none;
   }
 
-  .selected-action-container {
-    padding: var(--spacing-l);
-  }
-
   i:hover {
     color: var(--red);
     cursor: pointer;
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
index 7d349de7cc..06b4930d53 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    Button,
-    Drawer,
-    Spacer,
-    Body,
-    DrawerContent,
-    Layout,
-  } from "@budibase/bbui"
+  import { Button, Drawer, Body, DrawerContent, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { notifications } from "@budibase/bbui"
   import {

From 6c5b0f88b974dd3f93123b553e4315d9730c528f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:18:12 +0200
Subject: [PATCH 06/17] fix dataBinding error

---
 .../builder/src/builderStore/dataBinding.js   |  2 +-
 .../EventsEditor/actions/ExecuteQuery.svelte  | 68 ++++++++++---------
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 4d57311f5f..dae22dbf1b 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -252,7 +252,7 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
   if (datasource) {
     const { type } = datasource
     if (type === "query") {
-      const queries = get(queriesStores).queries
+      const queries = get(queriesStores).list
       table = queries.find(query => query._id === datasource._id)
     } else {
       const tables = get(tablesStore).list
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index 460267f561..4cfbce4da0 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Spacer } from "@budibase/bbui"
+  import { Select, Label, Layout } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { datasources, integrations, queries } from "stores/backend"
   import { getBindableProperties } from "builderStore/dataBinding"
@@ -8,9 +8,9 @@
 
   export let parameters
 
-  $: query = $queries.list.find(q => q._id === parameters.queryId)
+  $: query = $queries.list.find((q) => q._id === parameters.queryId)
   $: datasource = $datasources.list.find(
-    ds => ds._id === parameters.datasourceId
+    (ds) => ds._id === parameters.datasourceId
   )
   $: bindableProperties = getBindableProperties(
     $currentAsset,
@@ -18,40 +18,44 @@
   )
 
   function fetchQueryDefinition(query) {
-    const source = $datasources.list.find(ds => ds._id === query.datasourceId)
+    const source = $datasources.list.find((ds) => ds._id === query.datasourceId)
       .source
     return $integrations[source].query[query.queryVerb]
   }
 </script>
 
-<Label>Datasource</Label>
-<Select
-  bind:value={parameters.datasourceId}
-  option={$datasources.list}
-  getOptionLabel={source => source.name}
-  getOptionValue={source => source._id} />
-
-<Spacer medium />
-
-{#if parameters.datasourceId}
-  <Label>Query</Label>
+<Layout gap="S">
+  <Label>Datasource</Label>
   <Select
-    bind:value={parameters.queryId}
-    options={$queries.list.filter(query => query.datasourceId === datasource._id)}
-    getOptionLabel={query => query.name}
-    getOptionValue={query => query._id} />
-{/if}
+    bind:value={parameters.datasourceId}
+    option={$datasources.list}
+    getOptionLabel={(source) => source.name}
+    getOptionValue={(source) => source._id}
+  />
 
-<Spacer medium />
+  {#if parameters.datasourceId}
+    <Label>Query</Label>
+    <Select
+      bind:value={parameters.queryId}
+      options={$queries.list.filter(
+        (query) => query.datasourceId === datasource._id
+      )}
+      getOptionLabel={(query) => query.name}
+      getOptionValue={(query) => query._id}
+    />
+  {/if}
 
-{#if query?.parameters?.length > 0}
-  <ParameterBuilder
-    bind:customParams={parameters.queryParams}
-    parameters={query.parameters}
-    bindings={bindableProperties} />
-  <IntegrationQueryEditor
-    height={200}
-    {query}
-    schema={fetchQueryDefinition(query)}
-    editable={false} />
-{/if}
+  {#if query?.parameters?.length > 0}
+    <ParameterBuilder
+      bind:customParams={parameters.queryParams}
+      parameters={query.parameters}
+      bindings={bindableProperties}
+    />
+    <IntegrationQueryEditor
+      height={200}
+      {query}
+      schema={fetchQueryDefinition(query)}
+      editable={false}
+    />
+  {/if}
+</Layout>

From 7bb1ca48f9dfac5780c764d98836f34aedd1b26f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:20:03 +0200
Subject: [PATCH 07/17] fix ExecuteQuery to use Layout

---
 .../PropertyControls/EventsEditor/actions/ExecuteQuery.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index 4cfbce4da0..3d4dd7fb38 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@@ -24,7 +24,7 @@
   }
 </script>
 
-<Layout gap="S">
+<Layout noGap noPadding>
   <Label>Datasource</Label>
   <Select
     bind:value={parameters.datasourceId}

From 672046a76c919e1941ed828fa5ddac9231148413 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:23:47 +0200
Subject: [PATCH 08/17] remove Spacer component

---
 .../EventsEditor/actions/SaveFields.svelte    | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
index 15a975012d..400de67a08 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Label, ActionButton, Button, Spacer, Select, Input } from "@budibase/bbui"
+  import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
   import { store, currentAsset } from "builderStore"
   import { getBindableProperties } from "builderStore/dataBinding"
   import { createEventDispatcher } from "svelte"
@@ -20,11 +20,11 @@
   )
 
   const addField = () => {
-    fields = [...fields.filter(field => field[0]), ["", ""]]
+    fields = [...fields.filter((field) => field[0]), ["", ""]]
   }
 
-  const removeField = name => {
-    fields = fields.filter(field => field[0] !== name)
+  const removeField = (name) => {
+    fields = fields.filter((field) => field[0] !== name)
   }
 
   const updateFieldValue = (idx, value) => {
@@ -37,10 +37,10 @@
     fields = fields
   }
 
-  const onChange = fields => {
+  const onChange = (fields) => {
     const newParamFields = {}
     fields
-      .filter(field => field[0])
+      .filter((field) => field[0])
       .forEach(([field, value]) => {
         newParamFields[field] = value
       })
@@ -54,32 +54,35 @@
     {#if schemaFields}
       <Select
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.detail)}
-        options={schemaFields.map(field => field.name)} />
+        on:change={(event) => updateFieldName(idx, event.detail)}
+        options={schemaFields.map((field) => field.name)}
+      />
     {:else}
       <Input
         thin
         secondary
         value={field[0]}
-        on:change={event => updateFieldName(idx, event.detail)} />
+        on:change={(event) => updateFieldName(idx, event.detail)}
+      />
     {/if}
     <Label small>{valueLabel}</Label>
     <DrawerBindableInput
       title={`Value for "${field[0]}"`}
       value={field[1]}
       bindings={bindableProperties}
-      on:change={event => updateFieldValue(idx, event.detail)} />
+      on:change={(event) => updateFieldValue(idx, event.detail)}
+    />
     <ActionButton
       size="S"
       quiet
       icon="Delete"
-      on:click={() => removeField(field[0])} />
+      on:click={() => removeField(field[0])}
+    />
   {/each}
   <div>
-    <Spacer small />
     <Button icon="AddCircle" size="S" cta on:click={addField}>
       Add
       {fieldLabel}
     </Button>
   </div>
-{/if}
\ No newline at end of file
+{/if}

From 504a5df4a87ac5c62aecf498df5ee8db7663e182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:31:41 +0200
Subject: [PATCH 09/17] fix DataSourceSelect Query Panel

---
 .../PropertyControls/DataSourceSelect.svelte  | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 88b30160e1..76b0a984bd 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -5,8 +5,10 @@
     Popover,
     Divider,
     Select,
+    Layout,
     Heading,
     Drawer,
+    DrawerContent,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, currentAsset } from "builderStore"
@@ -103,38 +105,38 @@
   {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={drawer.show} />
     <Drawer title={"Query Parameters"} bind:this={drawer}>
-      <div slot="buttons">
-        <Button
-          blue
-          thin
-          on:click={() => {
-            notifications.success("Query parameters saved.")
-            handleSelected(value)
-            drawer.hide()
-          }}
-        >
-          Save
-        </Button>
-      </div>
-      <div class="drawer-contents" slot="body">
-        {#if value.parameters.length > 0}
-          <ParameterBuilder
-            bind:customParams={value.queryParams}
-            parameters={queries.find((query) => query._id === value._id)
-              .parameters}
-            bindings={queryBindableProperties}
+      <Button
+        slot="buttons"
+        cta
+        on:click={() => {
+          notifications.success("Query parameters saved.")
+          handleSelected(value)
+          drawer.hide()
+        }}
+      >
+        Save
+      </Button>
+      <DrawerContent slot="body">
+        <Layout>
+          {#if value.parameters.length > 0}
+            <ParameterBuilder
+              bind:customParams={value.queryParams}
+              parameters={queries.find((query) => query._id === value._id)
+                .parameters}
+              bindings={queryBindableProperties}
+            />
+          {/if}
+          <IntegrationQueryEditor
+            height={200}
+            query={value}
+            schema={fetchQueryDefinition(value)}
+            datasource={$datasources.list.find(
+              (ds) => ds._id === value.datasourceId
+            )}
+            editable={false}
           />
-        {/if}
-        <IntegrationQueryEditor
-          height={200}
-          query={value}
-          schema={fetchQueryDefinition(value)}
-          datasource={$datasources.list.find(
-            (ds) => ds._id === value.datasourceId
-          )}
-          editable={false}
-        />
-      </div>
+        </Layout>
+      </DrawerContent>
     </Drawer>
   {/if}
 </div>

From 012d699987e39445f9eafaf7224c5212d471ddef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:36:45 +0200
Subject: [PATCH 10/17] Remove spacer

---
 .../components/integration/QueryEditor.svelte |  5 ++---
 .../integration/QueryFieldsBuilder.svelte     | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index c4d42e9812..2bfa9009e2 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -134,7 +134,7 @@
 
     editor = CodeMirror.fromTextArea(refs.editor, opts)
 
-    editor.on("change", instance => {
+    editor.on("change", (instance) => {
       if (!updating_externally) {
         const value = instance.getValue()
         dispatch("change", { value })
@@ -160,13 +160,12 @@
   }
 
   function sleep(ms) {
-    return new Promise(fulfil => setTimeout(fulfil, ms))
+    return new Promise((fulfil) => setTimeout(fulfil, ms))
   }
 </script>
 
 {#if label}
   <Label small>{label}</Label>
-  <Spacer medium />
 {/if}
 <div style={`--code-mirror-height: ${editorHeight}px`}>
   <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 31ed818293..640c215aa1 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Label, Spacer, Input } from "@budibase/bbui"
+  import { Label, Layout, Input } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
 
@@ -15,22 +15,22 @@
 </script>
 
 <form on:submit|preventDefault>
-  <div class="field">
+  <Layout noPadding gap="S">
     {#each schemaKeys as field}
-      {#if schema.fields[field]?.type === 'object'}
+      {#if schema.fields[field]?.type === "object"}
         <div>
           <Label small>{field}</Label>
-          <Spacer small />
           <KeyValueBuilder readOnly={!editable} bind:object={fields[field]} />
         </div>
-      {:else if schema.fields[field]?.type === 'json'}
+      {:else if schema.fields[field]?.type === "json"}
         <div>
           <Label extraSmall grey>{field}</Label>
           <Editor
             mode="json"
             on:change={({ detail }) => (fields[field] = detail.value)}
             readOnly={!editable}
-            value={fields[field]} />
+            value={fields[field]}
+          />
         </div>
       {:else}
         <div class="horizontal">
@@ -41,11 +41,12 @@
             disabled={!editable}
             type={schema.fields[field]?.type}
             required={schema.fields[field]?.required}
-            bind:value={fields[field]} />
+            bind:value={fields[field]}
+          />
         </div>
       {/if}
     {/each}
-  </div>
+  </Layout>
 </form>
 {#if schema.customisable}
   <Editor
@@ -53,7 +54,8 @@
     mode="json"
     on:change={updateCustomFields}
     readOnly={!editable}
-    value={fields.customData} />
+    value={fields.customData}
+  />
 {/if}
 
 <style>

From e0b2bec4323bcd06622f58da6711119787532fbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:40:15 +0200
Subject: [PATCH 11/17] Remove spacer and use Layout

---
 .../components/integration/QueryParameterBuilder.svelte    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 29711177ec..478e9dbcfb 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
+  import { Icon, Body, Button, Input, Heading, Layout } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -29,7 +29,7 @@
   }
 </script>
 
-<section>
+<Layout paddingX="none" gap="S">
   <div class="controls">
     <Heading s>Parameters</Heading>
     {#if !bindable}
@@ -45,7 +45,6 @@
       values left blank.
     {/if}
   </Body>
-  <Spacer large />
   <div class="parameters" class:bindable>
     {#each parameters as parameter, idx}
       <Input
@@ -81,7 +80,7 @@
       {/if}
     {/each}
   </div>
-</section>
+</Layout>
 
 <style>
   .parameters.bindable {

From 94a398bb41bf38c9cfab90c147f2b966c098362c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:46:11 +0200
Subject: [PATCH 12/17] Fix editor

---
 .../components/integration/QueryEditor.svelte |  1 +
 .../components/integration/QueryViewer.svelte | 56 +++++++++----------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 2bfa9009e2..d2dd1c2015 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -166,6 +166,7 @@
 
 {#if label}
   <Label small>{label}</Label>
+  <Spacer medium />
 {/if}
 <div style={`--code-mirror-height: ${editorHeight}px`}>
   <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 956ab1b158..9b8bdaf4fe 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -4,6 +4,7 @@
     Icon,
     Select,
     Button,
+    ButtonGroup,
     Body,
     Label,
     Layout,
@@ -149,29 +150,26 @@
     </div>
     <div class="viewer-controls">
       <Heading s>Results</Heading>
-      <div class="button-container">
+      <ButtonGroup>
         <Button
-          secondary
-          thin
+          cta
           disabled={data.length === 0 || !query.name}
           on:click={saveQuery}
         >
           Save Query
         </Button>
-        <Spacer medium />
-        <Button thin secondary on:click={previewQuery}>Run Query</Button>
-      </div>
+        <Button secondary on:click={previewQuery}>Run Query</Button>
+      </ButtonGroup>
     </div>
-      <Body 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">
+    <Body 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.
@@ -179,25 +177,27 @@
                   {JSON.stringify(data[0], undefined, 2)}
                 {/if}
               </pre>
-            </Tab>
-            <Tab title="Schema">
+          </Tab>
+          <Tab title="Schema">
+            <Layout gap="S">
               {#each fields as field, idx}
-                <Spacer small />
                 <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}
-              <Spacer extraLarge />
-              <Button thin secondary on:click={newField}>Add Field</Button>
-            </Tab>
-            <Tab title="Preview">
-              <ExternalDataSourceTable {query} {data} />
-            </Tab>
-          </Tabs>
-        {/if}
-      </section>
+              <div>
+                <Button secondary on:click={newField}>Add Field</Button>
+              </div>
+            </Layout>
+          </Tab>
+          <Tab title="Preview">
+            <ExternalDataSourceTable {query} {data} />
+          </Tab>
+        </Tabs>
+      {/if}
+    </section>
   {/if}
 </Layout>
 

From c0f19c0b9346214b0f8a637ccc07702845cc9c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:49:34 +0200
Subject: [PATCH 13/17] fix button width issue

---
 .../builder/src/components/integration/KeyValueBuilder.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 3f6add1dc9..aa64965eaf 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -33,7 +33,7 @@
   {/each}
 </div>
 {#if !readOnly}
-  <Button secondary thin outline on:click={addEntry}>Add</Button>
+  <div><Button secondary thin outline on:click={addEntry}>Add</Button></div>
 {/if}
 
 <style>

From 111eb47a9a7084fdcb95aa73586fef5d356481ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:54:35 +0200
Subject: [PATCH 14/17] removes Spacer component and last few instances of use

---
 packages/bbui/src/Spacer/Spacer.svelte        | 49 ------------------
 packages/bbui/src/Spacer/Spacer.svench        | 51 -------------------
 .../components/integration/QueryEditor.svelte |  7 ++-
 .../src/components/start/AppCard.svelte       |  2 +-
 .../src/components/start/TemplateList.svelte  |  1 -
 .../builder/src/pages/builder/index.svelte    |  7 ++-
 6 files changed, 9 insertions(+), 108 deletions(-)
 delete mode 100644 packages/bbui/src/Spacer/Spacer.svelte
 delete mode 100644 packages/bbui/src/Spacer/Spacer.svench

diff --git a/packages/bbui/src/Spacer/Spacer.svelte b/packages/bbui/src/Spacer/Spacer.svelte
deleted file mode 100644
index bdc00b7260..0000000000
--- a/packages/bbui/src/Spacer/Spacer.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  export let extraSmall = false
-  export let small = false
-  export let medium = false
-  export let large = false
-  export let extraLarge = false
-</script>
-
-<spacer
-  class:extraSmall
-  class:small
-  class:medium
-  class:large
-  class:extraLarge />
-
-<style>
-  spacer {
-    display: block;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .extraSmall {
-    height: var(--spacing-xs);
-    width: var(--spacing-xs);
-  }
-
-  .small {
-    height: var(--spacing-s);
-    width: var(--spacing-s);
-  }
-
-  .medium {
-    height: var(--spacing-m);
-    width: var(--spacing-m);
-  }
-
-  .large {
-    height: var(--spacing-l);
-    width: var(--spacing-l);
-  }
-
-  .extraLarge {
-    height: var(--spacing-xl);
-    width: var(--spacing-xl);
-  }
-</style>
diff --git a/packages/bbui/src/Spacer/Spacer.svench b/packages/bbui/src/Spacer/Spacer.svench
deleted file mode 100644
index 0ad06cf35b..0000000000
--- a/packages/bbui/src/Spacer/Spacer.svench
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Spacer from "./Spacer.svelte";
-</script>
-
-<style>
-  .block {
-    background: black;
-    height: 100px;
-    width: 100px;
-    border-radius: var(--border-radius-s);
-  }
-
- .horizontal {
-    display: flex;
-  }
-</style>
-
-<View name="extraSmall">
-        <div class="block"></div>
-    <Spacer extraSmall />
-        <div class="block"></div>
-</View>
-
-<View name="Small">
-        <div class="block"></div>
-    <Spacer small />
-        <div class="block"></div>
-</View>
-
-<View name="Medium">
-        <div class="block"></div>
-    <Spacer medium />
-        <div class="block"></div>
-</View>
-
-<View name="Large">
-    <div class="horizontal">
-        <div class="block"></div>
-            <Spacer large />
-        <div class="block"></div>
-    </div>
-</View>
-
-<View name="extraLarge">
-    <div class="horizontal">
-        <div class="block"></div>
-            <Spacer extraLarge />
-        <div class="block"></div>
-    </div>
-</View>
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index d2dd1c2015..0780b6939a 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -1,6 +1,6 @@
 <script>
   import CodeMirror from "./codemirror"
-  import { Label, Spacer } from "@budibase/bbui"
+  import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "builderStore"
 
@@ -166,7 +166,6 @@
 
 {#if label}
   <Label small>{label}</Label>
-  <Spacer medium />
 {/if}
 <div style={`--code-mirror-height: ${editorHeight}px`}>
   <textarea tabindex="0" bind:this={refs.editor} readonly {value} />
@@ -177,6 +176,10 @@
     visibility: hidden;
   }
 
+  div {
+    margin-top: var(--spacing-s);
+  }
+
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 17852c57d6..7e865d86d6 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -27,7 +27,6 @@
 
 <div class="apps-card">
   <Heading s>{name}</Heading>
-  <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
     <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
       Open
@@ -58,6 +57,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    margin-top: var(--spacing-m);
   }
 
   i {
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index 19492d2bae..ddfdbcb85e 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -25,7 +25,6 @@
       {#each templates as template}
         <div class="templates-card">
           <Heading black small>{template.name}</Heading>
-          <Spacer small />
           <Body medium grey>{template.category}</Body>
           <Body lh small black>{template.description}</Body>
           <div><img src={template.image} width="100%" /></div>
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 98ea6cba1d..6a031b7d3f 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer, ButtonGroup } from "@budibase/bbui"
+  import { Button, Heading, Modal, ButtonGroup } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -58,11 +58,10 @@
 <div class="container">
   <div class="header">
     <Heading m h1>Welcome to the Budibase Beta</Heading>
-    <div class="button-group">
+    <ButtonGroup>
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
-      <Spacer medium />
       <Button cta on:click={modal.show}>Create New Web App</Button>
-    </div>
+    </ButtonGroup>
   </div>
 
   <div class="banner">

From 598189cfb08929314af12be5f818519fdbf9ed64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:55:52 +0200
Subject: [PATCH 15/17] remove Spacer import/export

---
 packages/bbui/src/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 615982bb1b..bf28e83531 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -36,7 +36,6 @@ export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
-export { default as Spacer } from "./Spacer/Spacer.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"

From 4376e18fbcf781fd89573ba41adceee53020022a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 28 Apr 2021 15:56:52 +0200
Subject: [PATCH 16/17] remove Spacer imports

---
 packages/builder/src/components/integration/QueryViewer.svelte | 1 -
 packages/builder/src/components/start/AppCard.svelte           | 2 +-
 packages/builder/src/components/start/TemplateList.svelte      | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 9b8bdaf4fe..86c5ec8a5d 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -10,7 +10,6 @@
     Layout,
     Input,
     Heading,
-    Spacer,
     Tabs,
     Tab,
   } from "@budibase/bbui"
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 7e865d86d6..4e39190ad7 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@roxi/routify"
-  import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
+  import { ActionButton, Heading } from "@budibase/bbui"
   import { notifications } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import download from "downloadjs"
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index ddfdbcb85e..df7a44f7d9 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading, Body, Spacer } from "@budibase/bbui"
+  import { Button, Heading, Body } from "@budibase/bbui"
   import AppCard from "./AppCard.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import api from "builderStore/api"

From 8f22473998e2f0b2cb83d980cbad136c2d417760 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 28 Apr 2021 14:57:52 +0100
Subject: [PATCH 17/17] Stripping out conjunction in view filter if its the
 first one.

---
 .../server/src/api/controllers/view/viewBuilder.js     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/view/viewBuilder.js b/packages/server/src/api/controllers/view/viewBuilder.js
index e9fa29856d..ed1199fa5b 100644
--- a/packages/server/src/api/controllers/view/viewBuilder.js
+++ b/packages/server/src/api/controllers/view/viewBuilder.js
@@ -62,8 +62,11 @@ const SCHEMA_MAP = {
 function parseFilterExpression(filters) {
   const expression = []
 
+  let first = true
   for (let filter of filters) {
-    if (filter.conjunction) expression.push(TOKEN_MAP[filter.conjunction])
+    if (!first && filter.conjunction) {
+      expression.push(TOKEN_MAP[filter.conjunction])
+    }
 
     if (filter.condition === "CONTAINS") {
       expression.push(
@@ -77,6 +80,7 @@ function parseFilterExpression(filters) {
         `doc["${filter.key}"] ${TOKEN_MAP[filter.condition]} ${value}`
       )
     }
+    first = false
   }
 
   return expression.join(" ")
@@ -104,6 +108,10 @@ function parseEmitExpression(field, groupBy) {
  * calculation: an optional calculation to be performed over the view data.
  */
 function viewTemplate({ field, tableId, groupBy, filters = [], calculation }) {
+  // first filter can't have a conjuction
+  if (filters && filters.length > 0 && filters[0].conjunction) {
+    delete filters[0].conjunction
+  }
   const parsedFilters = parseFilterExpression(filters)
   const filterExpression = parsedFilters ? `&& ${parsedFilters}` : ""