From 02c7ec71c5b6087fc66ecb6a51a54e63272d9666 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 15:04:30 +0200
Subject: [PATCH] Convert EventPanel to Layout component

---
 .../DataTable/modals/ManageAccessModal.svelte |   8 +-
 .../PropertyControls/DataSourceSelect.svelte  |   2 -
 .../EventsEditor/EventEditor.svelte           | 108 +++++++-----------
 .../PropertyControls/FilterEditor.svelte      |   9 +-
 4 files changed, 48 insertions(+), 79 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
index e005415276..b49d4f52d0 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
+++ b/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}
-        getOptionValue={x => x._id} />
+        getOptionLabel={(x) => x.name}
+        getOptionValue={(x) => x._id}
+      />
     {/each}
   </div>
 </ModalContent>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
index 283be3deff..88b30160e1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@@ -5,8 +5,6 @@
     Popover,
     Divider,
     Select,
-    Layout,
-    Spacer,
     Heading,
     Drawer,
   } from "@budibase/bbui"
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 a884854177..1c7aa94474 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,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}
-      <div
-        class="action-dnd-container"
-        use:dndzone={{
-          items: actions,
-          flipDurationMs,
-          dropTargetStyle: { outline: "none" },
-        }}
-        on:consider={handleDndConsider}
-        on:finalize={handleDndFinalize}
-      >
-        {#each actions as action, index (action.id)}
-          <div
-            class="action-container"
-            animate:flip={{ duration: flipDurationMs }}
-          >
+      {#if actions && actions.length > 0}
+        <div
+          class="action-dnd-container"
+          use:dndzone={{
+            items: actions,
+            flipDurationMs,
+            dropTargetStyle: { outline: "none" },
+          }}
+          on:consider={handleDndConsider}
+          on:finalize={handleDndFinalize}
+        >
+          {#each actions as action, index (action.id)}
             <div
-              class="action-header"
-              class:selected={action === selectedAction}
-              on:click={selectAction(action)}
+              class="action-container"
+              animate:flip={{ duration: flipDurationMs }}
             >
-              {index + 1}.
-              {action[EVENT_TYPE_KEY]}
+              <div
+                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
-              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}
-          />
+          {/each}
         </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;
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
index 7d349de7cc..06b4930d53 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    Button,
-    Drawer,
-    Spacer,
-    Body,
-    DrawerContent,
-    Layout,
-  } from "@budibase/bbui"
+  import { Button, Drawer, Body, DrawerContent, Layout } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { notifications } from "@budibase/bbui"
   import {