Convert EventPanel to Layout component

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}
+        getOptionLabel={(x) => x.name}
-        getOptionValue={x => x._id} />
+        getOptionValue={(x) => x._id}
+      />
     {/each}
   </div>
 </ModalContent>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -5,8 +5,6 @@
     Popover,
     Divider,
     Select,
-    Layout,
-    Spacer,
     Heading,
     Drawer,
   } from "@budibase/bbui"

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}
+      {#if actions && actions.length > 0}
-      <div
+        <div
-        class="action-dnd-container"
+          class="action-dnd-container"
-        use:dndzone={{
+          use:dndzone={{
-          items: actions,
+            items: actions,
-          flipDurationMs,
+            flipDurationMs,
-          dropTargetStyle: { outline: "none" },
+            dropTargetStyle: { outline: "none" },
-        }}
+          }}
-        on:consider={handleDndConsider}
+          on:consider={handleDndConsider}
-        on:finalize={handleDndFinalize}
+          on:finalize={handleDndFinalize}
-      >
+        >
-        {#each actions as action, index (action.id)}
+          {#each actions as action, index (action.id)}
-          <div
-            class="action-container"
-            animate:flip={{ duration: flipDurationMs }}
-          >
             <div
-              class="action-header"
+              class="action-container"
-              class:selected={action === selectedAction}
+              animate:flip={{ duration: flipDurationMs }}
-              on:click={selectAction(action)}
             >
-              {index + 1}.
+              <div
-              {action[EVENT_TYPE_KEY]}
+                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
+          {/each}
-              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}
-          />
         </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;

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte

@@ -1,12 +1,5 @@
 <script>
-  import {
+  import { Button, Drawer, Body, DrawerContent, Layout } from "@budibase/bbui"
-    Button,
-    Drawer,
-    Spacer,
-    Body,
-    DrawerContent,
-    Layout,
-  } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { notifications } from "@budibase/bbui"
   import {