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] Convert IntegrationForm to use Layout component

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

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index 14c980f7f..e442afd08 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 fdd01f497..96533ae59 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 fbb7a33c2..5b67e1120 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>
+    <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>
-      <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 />
       <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;
   }