From 0146cd0c88681290010baa4a7eeffb4ec6e100d1 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 17:34:28 +0200
Subject: [PATCH] converts component adding buttons in design section

---
 .../bbui/src/ActionMenu/ActionMenu.svelte     |  5 +-
 packages/bbui/src/Menu/Item.svelte            | 33 +++++++---
 .../AppPreview/ComponentSelectionList.svelte  | 65 +++++++------------
 3 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/packages/bbui/src/ActionMenu/ActionMenu.svelte b/packages/bbui/src/ActionMenu/ActionMenu.svelte
index c412a2d2c1..f194b7b465 100644
--- a/packages/bbui/src/ActionMenu/ActionMenu.svelte
+++ b/packages/bbui/src/ActionMenu/ActionMenu.svelte
@@ -1,6 +1,9 @@
 <script>
   import Popover from "../Popover/Popover.svelte"
   import Menu from "../Menu/Menu.svelte"
+
+  export let supressOpen = false
+
   let anchor
   let dropdown
 
@@ -23,7 +26,7 @@
   }
 </script>
 
-<div class="contents" use:getAnchor on:click={dropdown.show}>
+<div class="contents" use:getAnchor>
   <slot name="button" />
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index 00ad3473ae..a942cce6e9 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -1,13 +1,26 @@
 <script>
-    export let icon = undefined;
-    export let disabled = undefined;
+  export let dataCy
+  export let icon = undefined
+  export let disabled = undefined
 </script>
 
-<li on:click|preventDefault class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
-    {#if icon}
-        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
-            <use xlink:href="#spectrum-icon-18-{icon}"></use>
-        </svg>
-    {/if}
-    <span class="spectrum-Menu-itemLabel"><slot /></span>
-</li>
\ No newline at end of file
+<li
+  data-cy={dataCy}
+  on:click|preventDefault
+  class="spectrum-Menu-item"
+  class:is-disabled={disabled}
+  role="menuitem"
+  tabindex="0"
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Menu-itemLabel"><slot /></span>
+</li>
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 4c4c3a1871..2ca53b4cf1 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
@@ -1,14 +1,8 @@
 <script>
-  import { goto } from "@roxi/routify"
-  import {
-    store,
-    currentAssetName,
-    selectedComponent,
-    currentAssetId,
-  } from "builderStore"
+  import { ActionMenu, ActionGroup, ActionButton, MenuItem, Icon } from "@budibase/bbui"
+  import { store, currentAssetName } from "builderStore"
+import { iterateeAry } from "lodash/fp/_mapping"
   import structure from "./componentStructure.json"
-  import { Popover } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
 
@@ -19,7 +13,7 @@
 
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
-    structure.forEach(item => {
+    structure.forEach((item) => {
       if (typeof item === "string") {
         const def = definitions[`@budibase/standard-components/${item}`]
         if (def) {
@@ -39,50 +33,37 @@
     return enrichedStructure
   }
 
-  const onItemChosen = async (item, idx) => {
+  const onItemChosen = async (item, idx, open) => {
     if (item.isCategory) {
       // Select and open this category
       selectedIndex = idx
-      popover.show()
+      open()
     } else {
       // Add this component
       await store.actions.components.create(item.component)
-      popover.hide()
     }
   }
 </script>
 
-<div class="container">
+<ActionGroup>
   {#each enrichedStructure as item, idx}
-    <div
-      bind:this={anchors[idx]}
-      class="category"
-      data-cy={item.isCategory ? `category-${item.name}` : `component-${item.name}`}
-      on:click={() => onItemChosen(item, idx)}
-      class:active={idx === selectedIndex}>
-      {#if item.icon}<i class={item.icon} />{/if}
-      <span>{item.name}</span>
-      {#if item.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
-    </div>
+    <ActionMenu supressOpen={item.isCategory} let:open let:closeOnClick>
+      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx, open)}>
+        {item.name}
+      </ActionButton>
+      {#each item.children || [] as item}
+        {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
+          <MenuItem
+            dataCy={`component-${item.name}`}
+            icon={item.icon}
+            on:click={closeOnClick(onItemChosen(item))}>
+            {item.name}
+          </MenuItem>
+        {/if}
+      {/each}
+    </ActionMenu>
   {/each}
-</div>
-<Popover
-  on:close={() => (selectedIndex = null)}
-  bind:this={popover}
-  {anchor}
-  align="left">
-  <DropdownContainer>
-    {#each enrichedStructure[selectedIndex].children as item}
-      {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
-        <DropdownItem
-          data-cy={`component-${item.name}`}
-          icon={item.icon}
-          title={item.name}
-          on:click={() => onItemChosen(item)} />
-      {/if}
-    {/each}
-  </DropdownContainer>
-</Popover>
+</ActionGroup>
 
 <style>
   .container {