Convert IntegrationForm to use Layout component

5 years ago · b18f840c00
3 changed files with 57 additions and 53 deletions
--- 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>
--- 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">
--- 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;
  }