Improve button action templates and remove broken focus functionality

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte

@@ -1,8 +1,8 @@
 <script>
   import DraggableList from "../DraggableList/DraggableList.svelte"
   import ButtonSetting from "./ButtonSetting.svelte"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
-  import { Helpers } from "@budibase/bbui"
+  import { Helpers, Menu, MenuItem, Popover } from "@budibase/bbui"
   import { componentStore } from "stores/builder"
   import { getEventContextBindings } from "dataBinding"
   import { cloneDeep, isEqual } from "lodash/fp"
@@ -18,13 +18,11 @@
 
   const dispatch = createEventDispatcher()
 
-  let focusItem
   let cachedValue
   let rowActionTemplates = []
+  let anchor
+  let popover
 
-  $: console.log(rowActionTemplates)
-
-  $: getRowActionTemplates(componentInstance)
   $: if (!isEqual(value, cachedValue)) {
     cachedValue = cloneDeep(value)
   }
@@ -43,11 +41,6 @@
   }
   $: canAddButtons = max == null || buttonList.length < max
 
-  const getRowActionTemplates = async instance => {
-    const templates = await getRowActionButtonTemplates({ component: instance })
-    rowActionTemplates = templates
-  }
-
   const sanitizeValue = val => {
     if (!Array.isArray(val)) {
       return null
@@ -82,21 +75,32 @@
         _instanceName: Helpers.uuid(),
         text: cfg.text,
         type: cfg.type || "primary",
-      },
+      }
-      {}
     )
   }
 
-  const addButton = () => {
+  const addCustomButton = () => {
-    // const newButton = buildPseudoInstance({
+    const newButton = buildPseudoInstance({
-    //   text: `Button ${buttonCount + 1}`,
+      text: `Button ${buttonCount + 1}`,
-    // })
+    })
-    const newButton = rowActionTemplates[0]
-    if (!newButton) {
-      return
-    }
     dispatch("change", [...buttonList, newButton])
-    focusItem = newButton._id
+    popover.hide()
+  }
+
+  const addRowActionTemplate = template => {
+    dispatch("change", [...buttonList, template])
+    popover.hide()
+  }
+
+  const addButton = async () => {
+    rowActionTemplates = await getRowActionButtonTemplates({
+      component: componentInstance,
+    })
+    if (rowActionTemplates.length) {
+      popover.show()
+    } else {
+      addCustomButton()
+    }
   }
 
   const removeButton = id => {
@@ -118,12 +122,11 @@
       listItemKey={"_id"}
       listType={ButtonSetting}
       listTypeProps={itemProps}
-      focus={focusItem}
       draggable={buttonCount > 1}
     />
   {/if}
-
   <div
+    bind:this={anchor}
     class="list-footer"
     class:disabled={!canAddButtons}
     on:click={addButton}
@@ -133,6 +136,17 @@
   </div>
 </div>
 
+<Popover bind:this={popover} {anchor} useAnchorWidth resizable={false}>
+  <Menu>
+    <MenuItem on:click={addCustomButton}>Custom button</MenuItem>
+    {#each rowActionTemplates as template}
+      <MenuItem on:click={() => addRowActionTemplate(template)}>
+        {template.text}
+      </MenuItem>
+    {/each}
+  </Menu>
+</Popover>
+
 <style>
   .button-configuration :global(.spectrum-ActionButton) {
     width: 100%;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -28,7 +28,7 @@
   if (!rootId) {
     setContext("rootId", componentInstance._id)
   }
-  componentInstance._rootId = rootId || componentInstance._id
+  $: componentInstance._rootId = rootId || componentInstance._id
 
   $: sections = getSections(
     componentInstance,

packages/builder/src/templates/rowActions.js

@@ -28,7 +28,7 @@ export const getRowActionButtonTemplates = async ({ screen, component }) => {
   }
 
   // Check we have a valid datasource that can contain row actions
-  const ds = getDatasourceForProvider(get(selectedScreen), instance)
+  const ds = getDatasourceForProvider(screen, instance)
   if (ds?.type !== "table" && ds?.type !== "viewV2") {
     return []
   }