From 9bda97b30036379ab6682ff7b179800166f0a86f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 27 Apr 2021 11:48:47 +0200
Subject: [PATCH] rework ActionMenu and add noClose prop to MenuItem

---
 .../bbui/src/ActionMenu/ActionMenu.svelte     | 14 +++++++------
 packages/bbui/src/Menu/Item.svelte            | 15 +++++++++++++-
 .../EditAutomationPopover.svelte              |  6 +++---
 .../popovers/EditDatasourcePopover.svelte     |  6 +++---
 .../popovers/EditQueryPopover.svelte          |  6 +++---
 .../popovers/EditTablePopover.svelte          |  8 ++++----
 .../AppPreview/ComponentSelectionList.svelte  | 10 ++++------
 .../ComponentDropdownMenu.svelte              | 20 +++++++++----------
 .../LayoutDropdownMenu.svelte                 |  8 ++++----
 .../ScreenDropdownMenu.svelte                 |  6 +++---
 10 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index f194b7b465..01bf3f1dae 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -1,8 +1,9 @@
 <script>
+  import { setContext } from "svelte"
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
 
-  export let supressOpen = false
+  export let disabled = false
 
   let anchor
   let dropdown
@@ -20,18 +21,19 @@
     dropdown.show()
   }
 
-  const closeOnClickWrapper = (cb) => {
-    dropdown.hide()
-    cb()
+  const openMenu = () => {
+    if (!disabled) show()
   }
+
+  setContext("actionMenu", { show, hide })
 </script>
 
-<div class="contents" use:getAnchor>
+<div class="contents" use:getAnchor on:click={openMenu}>
   <slot name="button" />
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
   <Menu>
-    <slot open={show} closeOnClick={closeOnClickWrapper} />
+    <slot />
   </Menu>
 </Popover>
 
diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index a942cce6e9..8aed496531 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -1,12 +1,25 @@
 <script>
+  import { createEventDispatcher, getContext } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  const actionMenu = getContext("actionMenu")
+
   export let dataCy
   export let icon = undefined
   export let disabled = undefined
+  export let noClose = false
+
+  const onClick = () => {
+    if (actionMenu && !noClose) {
+      actionMenu.hide()
+    }
+    dispatch("click")
+  }
 </script>
 
 <li
   data-cy={dataCy}
-  on:click|preventDefault
+  on:click|preventDefault={onClick}
   class="spectrum-Menu-item"
   class:is-disabled={disabled}
   role="menuitem"
diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index 061265d7de..40cac7ddc7 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
@@ -20,11 +20,11 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+  <MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
     >Delete</MenuItem
   >
 </ActionMenu>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index e1a11a60fb..6e865c2a32 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -20,11 +20,11 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick >
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
 <ConfirmDialog
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 5da7a55d02..5dd2ab1cb8 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -13,11 +13,11 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
     >Delete</MenuItem
   >
 </ActionMenu>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 12f090104f..014a3a3527 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -60,13 +60,13 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={closeOnClick(editorModal.show)}>Edit</MenuItem
+  <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem
   >
-  <MenuItem icon="Delete" on:click={closeOnClick(showDeleteModal)}
+  <MenuItem icon="Delete" on:click={showDeleteModal}
     >Delete</MenuItem
   >
 </ActionMenu>
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 2ca53b4cf1..4163e87104 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { ActionMenu, ActionGroup, ActionButton, MenuItem, Icon } from "@budibase/bbui"
+  import { ActionMenu, ActionGroup, ActionButton, MenuItem } from "@budibase/bbui"
   import { store, currentAssetName } from "builderStore"
-import { iterateeAry } from "lodash/fp/_mapping"
   import structure from "./componentStructure.json"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
@@ -37,7 +36,6 @@ import { iterateeAry } from "lodash/fp/_mapping"
     if (item.isCategory) {
       // Select and open this category
       selectedIndex = idx
-      open()
     } else {
       // Add this component
       await store.actions.components.create(item.component)
@@ -47,8 +45,8 @@ import { iterateeAry } from "lodash/fp/_mapping"
 
 <ActionGroup>
   {#each enrichedStructure as item, idx}
-    <ActionMenu supressOpen={item.isCategory} let:open let:closeOnClick>
-      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx, open)}>
+    <ActionMenu disabled={!item.isCategory}>
+      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx)}>
         {item.name}
       </ActionButton>
       {#each item.children || [] as item}
@@ -56,7 +54,7 @@ import { iterateeAry } from "lodash/fp/_mapping"
           <MenuItem
             dataCy={`component-${item.name}`}
             icon={item.icon}
-            on:click={closeOnClick(onItemChosen(item))}>
+            on:click={() => onItemChosen(item)}>
             {item.name}
           </MenuItem>
         {/if}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
index 21a112ddbb..99acdfedf0 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
@@ -66,36 +66,36 @@
   }
 </script>
 
-<ActionMenu let:closeOnClick let:open>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
     >Delete</MenuItem
   >
-  <MenuItem icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
-  <MenuItem icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
-  <MenuItem icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
+  <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
+  <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
+  <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
   <MenuItem
     icon="Cut"
-    on:click={closeOnClick(() => storeComponentForCopy(true))}>Cut</MenuItem
+    on:click={() => storeComponentForCopy(true)}>Cut</MenuItem
   >
   <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
     >Copy</MenuItem
   >
   <MenuItem
     icon="LayersBringToFront"
-    on:click={closeOnClick(() => pasteComponent("above"))}
+    on:click={() => pasteComponent("above")}
     disabled={noPaste}>Paste above</MenuItem
   >
   <MenuItem
     icon="LayersSendToBack"
-    on:click={closeOnClick(() => pasteComponent("below"))}
+    on:click={() => pasteComponent("below")}
     disabled={noPaste}>Paste below</MenuItem
   >
   <MenuItem
     icon="ShowOneLayer"
-    on:click={closeOnClick(() => pasteComponent("inside"))}
+    on:click={() => pasteComponent("inside")}
     disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem
   >
 </ActionMenu>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index 3de2702e2f..0ade0cebd4 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@@ -39,14 +39,14 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)}
+  <MenuItem icon="Edit" on:click={editLayoutNameModal.show}
     >Edit</MenuItem
   >
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
     >Delete</MenuItem
   >
 </ActionMenu>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index ed57e570a5..10958eabe6 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -23,11 +23,11 @@
   }
 </script>
 
-<ActionMenu let:open let:closeOnClick>
-  <div slot="button" class="icon" on:click={open}>
+<ActionMenu>
+  <div slot="button" class="icon">
     <Icon s hoverable name="MoreSmallList" />
   </div>
-  <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>
 
 <ConfirmDialog