Create DrawerContent component

packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte

@@ -0,0 +1,42 @@
+<div class="drawer-contents">
+  <div class="container" data-cy="binding-dropdown-modal">
+    <div class="sidebar">
+      <slot name="sidebar" />
+    </div>
+    <div class="main">
+      <slot name="main" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 290px 1fr;
+  }
+  .sidebar {
+    border-right: var(--border-light);
+    padding: var(--spacing-l);
+    overflow: auto;
+  }
+
+  .sidebar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .main {
+    padding: var(--spacing-l);
+    font-family: var(--font-sans);
+  }
+  .main :global(textarea) {
+    min-height: 200px;
+  }
+  .main :global(p) {
+    margin: 0;
+  }
+</style>

packages/bbui/src/index.js

@@ -10,6 +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 Avatar } from "./Avatar/Avatar.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -47,8 +47,4 @@
     justify-content: flex-end;
     align-items: center;
   }
-
-  div.icon i {
-    font-size: 16px;
-  }
 </style>

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte

@@ -11,19 +11,21 @@
 
 <form>
   {#each Object.keys(schema) as configKey}
-    {#if schema[configKey].type === 'object'}
+    {#if schema[configKey].type === "object"}
       <Label>{capitalise(configKey)}</Label>
       <Spacer small />
       <KeyValueBuilder
         defaults={schema[configKey].default}
-        bind:object={integration[configKey]} />
+        bind:object={integration[configKey]}
+      />
     {:else}
       <div class="form-row">
         <Label>{capitalise(configKey)}</Label>
         <Input
           type={schema[configKey].type}
           on:change
-          bind:value={integration[configKey]} />
+          bind:value={integration[configKey]}
+        />
       </div>
     {/if}
   {/each}

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { Search, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Search, TextArea, Heading, Spacer, Label, Layout, DrawerContentWithSidebar } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -57,16 +57,15 @@
   }
 </script>
 
-<div class="drawer-contents">
+<DrawerContentWithSidebar>
-  <div class="container" data-cy="binding-dropdown-modal">
+  <Search placeholder="Search" bind:value={search} />
-    <div class="list">
+      <svelte:fragment slot="sidebar">
-      <Search placeholder="Search" bind:value={search} />
+        <Spacer medium />
-      <Spacer medium />
       {#if context}
         <Heading xs h3>Columns</Heading>
         <Spacer small />
         <ul>
-          {#each context.filter(context =>
+          {#each context.filter((context) =>
             context.readableBinding.match(searchRgx)
           ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -80,7 +79,7 @@
         <Heading xs h3>Components</Heading>
         <Spacer small />
         <ul>
-          {#each instance.filter(instance =>
+          {#each instance.filter((instance) =>
             instance.readableBinding.match(searchRgx)
           ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -93,7 +92,7 @@
       <Heading xs h3>Helpers</Heading>
       <Spacer small />
       <ul>
-        {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
+        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
           <li on:click={() => addToText(helper.text)}>
             <div>
               <Label extraSmall>{helper.displayText}</Label>
@@ -105,49 +104,24 @@
           </li>
         {/each}
       </ul>
-    </div>
+      </svelte:fragment>
-    <div class="text">
+      <svelte:fragment slot="main">
-      <TextArea
+        <TextArea
-        bind:getCaretPosition
+          bind:getCaretPosition
-        bind:value
+          bind:value
-        placeholder="Add text, or click the objects on the left to add them to the textbox." />
+          placeholder="Add text, or click the objects on the left to add them to the textbox."
-      {#if !valid}
+        />
-        <p class="syntax-error">
+        {#if !valid}
-          Current Handlebars syntax is invalid, please check the guide
+          <p class="syntax-error">
-          <a href="https://handlebarsjs.com/guide/">here</a>
+            Current Handlebars syntax is invalid, please check the guide
-          for more details.
+            <a href="https://handlebarsjs.com/guide/">here</a>
-        </p>
+            for more details.
-      {/if}
+          </p>
-    </div>
+        {/if}
-  </div>
+      </svelte:fragment>
-</div>
+</DrawerContentWithSidebar>
 
 <style>
-  .container {
-    height: 100%;
-    display: grid;
-    grid-template-columns: 260px 1fr;
-  }
-  .list {
-    border-right: var(--border-light);
-    padding: var(--spacing-l);
-    overflow: auto;
-  }
-
-  .list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .text {
-    padding: var(--spacing-l);
-    font-family: var(--font-sans);
-  }
-  .text :global(textarea) {
-    min-height: 200px;
-  }
-  .text :global(p) {
-    margin: 0;
-  }
   ul {
     list-style: none;
     padding-left: 0;
@@ -182,11 +156,6 @@
     color: var(--blue);
   }
 
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
-
   .syntax-error {
     padding-top: var(--spacing-m);
     color: var(--red);

packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -9,7 +9,9 @@
 
   let unsaved = false
 
-  $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
+  $: datasource = $datasources.list.find(
+    (ds) => ds._id === $datasources.selected
+  )
   $: integration = datasource && $integrations[datasource.source]
 
   async function saveDatasource() {
@@ -46,7 +48,8 @@
       <svelte:component
         this={ICONS[datasource.source]}
         height="26"
-        width="26" />
+        width="26"
+      />
       <Heading m>{datasource.name}</Heading>
     </header>
     <Body small grey lh>{integration.description}</Body>
@@ -63,17 +66,18 @@
       <IntegrationConfigForm
         schema={integration.datasource}
         integration={datasource.config}
-        on:change={setUnsaved} />
+        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>
+        <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}
+        {#each $queries.list.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>{capitalise(query.queryVerb)}</p>
@@ -86,11 +90,6 @@
 {/if}
 
 <style>
-  h3 {
-    margin: 0;
-    font-size: 24px;
-  }
-
   section {
     margin: 0 auto;
     width: 640px;