Request new name for row actions rather than autonaming

packages/bbui/src/Modal/ModalContent.svelte

@@ -30,7 +30,9 @@
   export let custom = false
 
   const { hide, cancel } = getContext(Context.Modal)
+
   let loading = false
+
   $: confirmDisabled = disabled || loading
 
   async function secondary(e) {
@@ -90,7 +92,7 @@
 
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">
-      <slot />
+      <slot {loading} />
     </section>
     {#if showCancelButton || showConfirmButton || $$slots.footer}
       <div

packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte

@@ -6,6 +6,9 @@
     Button,
     Toggle,
     notifications,
+    Modal,
+    ModalContent,
+    Input,
   } from "@budibase/bbui"
   import DetailPopover from "components/common/DetailPopover.svelte"
   import { getContext } from "svelte"
@@ -15,6 +18,10 @@
 
   const { datasource } = getContext("grid")
 
+  let popover
+  let createModal
+  let newName
+
   $: ds = $datasource
   $: tableId = ds?.tableId
   $: viewId = ds?.id
@@ -22,6 +29,7 @@
   $: tableRowActions = $rowActions[tableId] || []
   $: viewRowActions = $rowActions[viewId] || []
   $: actionCount = isView ? viewRowActions.length : tableRowActions.length
+  $: newNameInvalid = newName && tableRowActions.some(x => x.name === newName)
 
   const rowActionUrl = derived([url, appStore], ([$url, $appStore]) => {
     return ({ automationId }) => {
@@ -29,17 +37,6 @@
     }
   })
 
-  const createRowAction = async () => {
-    try {
-      const newRowAction = await rowActions.createRowAction(tableId, viewId)
-      notifications.success("Row action created successfully")
-      $goto($rowActionUrl(newRowAction))
-    } catch (error) {
-      console.error(error)
-      notifications.error("Error creating row action")
-    }
-  }
-
   const toggleAction = async (action, enabled) => {
     if (enabled) {
       await rowActions.enableView(tableId, viewId, action.id)
@@ -47,9 +44,30 @@
       await rowActions.disableView(tableId, viewId, action.id)
     }
   }
+
+  const showCreateModal = () => {
+    newName = null
+    popover.hide()
+    createModal.show()
+  }
+
+  const createRowAction = async () => {
+    try {
+      const newRowAction = await rowActions.createRowAction(
+        tableId,
+        viewId,
+        newName
+      )
+      notifications.success("Row action created successfully")
+      $goto($rowActionUrl(newRowAction))
+    } catch (error) {
+      console.error(error)
+      notifications.error("Error creating row action")
+    }
+  }
 </script>
 
-<DetailPopover title="Row actions">
+<DetailPopover title="Row actions" bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
     <ActionButton
       icon="Engagement"
@@ -88,12 +106,34 @@
     </List>
   {/if}
   <div>
-    <Button secondary icon="Engagement" on:click={createRowAction}>
+    <Button secondary icon="Engagement" on:click={showCreateModal}>
       Create row action
     </Button>
   </div>
 </DetailPopover>
 
+<Modal bind:this={createModal}>
+  <ModalContent
+    size="S"
+    title="Create row action"
+    confirmText="Create"
+    showCancelButton={false}
+    showDivider={false}
+    showCloseIcon={false}
+    disabled={!newName || newNameInvalid}
+    onConfirm={createRowAction}
+    let:loading
+  >
+    <Input
+      label="Name"
+      bind:value={newName}
+      error={newNameInvalid && !loading
+        ? "A row action with this name already exists"
+        : null}
+    />
+  </ModalContent>
+</Modal>
+
 <style>
   span :global(.spectrum-Switch) {
     min-height: 0;

packages/builder/src/stores/builder/rowActions.js

@@ -41,16 +41,18 @@ export class RowActionStore extends BudiStore {
     }))
   }
 
-  createRowAction = async (tableId, viewId) => {
+  createRowAction = async (tableId, viewId, name) => {
     if (!tableId) {
       return
     }
 
     // Get a unique name for this action
+    if (!name) {
       const existingRowActions = get(this.store)[tableId] || []
-    const name = getSequentialName(existingRowActions, "New row action ", {
+      name = getSequentialName(existingRowActions, "New row action ", {
         getName: x => x.name,
       })
+    }
 
     // Create the action
     const res = await API.rowActions.create({