From f0e25612a1005bb097d8305dedab4c5bda1b7ed6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Mon, 26 Apr 2021 14:56:55 +0200
Subject: [PATCH] more conversions

---
 .../EditAutomationPopover.svelte              | 33 +++++--------------
 .../popovers/EditQueryPopover.svelte          | 16 ++++-----
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 3d1d98cc81..061265d7de 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -2,26 +2,14 @@
   import { goto } from "@roxi/routify"
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
-  import { Icon, Popover } from "@budibase/bbui"
-  import {
-    DropdownContainer,
-    DropdownItem,
-  } from "components/common/Dropdowns"
+  import { ActionMenu, MenuItem, notifications, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let automation
 
-  let anchor
-  let dropdown
   let confirmDeleteDialog
   $: instanceId = $database._id
 
-  function showModal() {
-    dropdown.hide()
-    confirmDeleteDialog.show()
-  }
-
   async function deleteAutomation() {
     await automationStore.actions.delete({
       instanceId,
@@ -32,20 +20,15 @@
   }
 </script>
 
-<div on:click|stopPropagation>
-  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+<ActionMenu let:open let:closeOnClick>
+  <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <Popover align="left" {anchor} bind:this={dropdown}>
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={showModal}
-      />
-    </DropdownContainer>
-  </Popover>
-</div>
+  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+    >Delete</MenuItem
+  >
+</ActionMenu>
+
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   okText="Delete Automation"
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index ff96745a6f..5da7a55d02 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -1,29 +1,25 @@
 <script>
-  import { ActionMenu, MenuItem, Icon, Popover, notifications } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { queries } from "stores/backend"
 
   export let query
-  
-  let dropdown
-  let confirmDeleteDialog
 
-  function hideEditor() {
-    dropdown?.hide()
-  }
+  let confirmDeleteDialog
 
   async function deleteQuery() {
     await queries.delete(query)
     notifications.success("Query deleted")
-    hideEditor()
   }
 </script>
 
-<ActionMenu bind:this={dropdown} let:open let:closeOnClick>
+<ActionMenu let:open let:closeOnClick>
   <div slot="button" class="icon" on:click={open}>
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
+  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+    >Delete</MenuItem
+  >
 </ActionMenu>
 
 <ConfirmDialog