rename DrawerContentWithSidebar to DrawerContent and add sidebar check

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;

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"

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 {

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}

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}