Add row action button actions

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RowAction.svelte

@@ -0,0 +1,118 @@
+<script>
+  import { Select, Label, Checkbox, Body } from "@budibase/bbui"
+  import { tables, viewsV2 } from "stores/builder"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { API } from "api"
+
+  export let parameters
+  export let bindings = []
+
+  let rowActions = []
+
+  $: tableOptions = $tables.list.map(table => ({
+    label: table.name,
+    resourceId: table._id,
+  }))
+  $: viewOptions = $viewsV2.list.map(view => ({
+    label: view.name,
+    resourceId: view.id,
+  }))
+  $: datasourceOptions = [...(tableOptions || []), ...(viewOptions || [])]
+  $: fetchRowActions(parameters.resourceId)
+  $: rowActionOptions = rowActions.map(action => ({
+    label: action.name,
+    value: action.id,
+  }))
+
+  const fetchRowActions = async resourceId => {
+    if (!resourceId) {
+      rowActions = []
+      return
+    }
+    try {
+      const res = await API.rowActions.fetch(resourceId)
+      rowActions = Object.values(res || {})
+    } catch (err) {
+      console.error(err)
+      rowActions = []
+    }
+  }
+</script>
+
+<div class="root">
+  <div class="params">
+    <Label>Table or view</Label>
+    <Select
+      bind:value={parameters.resourceId}
+      options={datasourceOptions}
+      getOptionLabel={x => x.label}
+      getOptionValue={x => x.resourceId}
+    />
+
+    <Label small>Row ID</Label>
+    <DrawerBindableInput
+      {bindings}
+      title="Row ID"
+      value={parameters.rowId}
+      on:change={value => (parameters.rowId = value.detail)}
+    />
+
+    <Label small>Row action</Label>
+    <Select bind:value={parameters.rowActionId} options={rowActionOptions} />
+
+    <br />
+    <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
+
+    {#if parameters.confirm}
+      <Label small>Title</Label>
+      <DrawerBindableInput
+        placeholder="Prompt User"
+        value={parameters.customTitleText}
+        on:change={e => (parameters.customTitleText = e.detail)}
+        {bindings}
+      />
+      <Label small>Text</Label>
+      <DrawerBindableInput
+        placeholder="Are you sure you want to continue?"
+        value={parameters.confirmText}
+        on:change={e => (parameters.confirmText = e.detail)}
+        {bindings}
+      />
+      <Label small>Confirm Text</Label>
+      <DrawerBindableInput
+        placeholder="Confirm"
+        value={parameters.confirmButtonText}
+        on:change={e => (parameters.confirmButtonText = e.detail)}
+        {bindings}
+      />
+      <Label small>Cancel Text</Label>
+      <DrawerBindableInput
+        placeholder="Cancel"
+        value={parameters.cancelButtonText}
+        on:change={e => (parameters.cancelButtonText = e.detail)}
+        {bindings}
+      />
+    {/if}
+  </div>
+</div>
+
+<style>
+  .root {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+
+  .params {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+  }
+</style>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -25,3 +25,4 @@ export { default as OpenModal } from "./OpenModal.svelte"
 export { default as CloseModal } from "./CloseModal.svelte"
 export { default as ClearRowSelection } from "./ClearRowSelection.svelte"
 export { default as DownloadFile } from "./DownloadFile.svelte"
+export { default as RowAction } from "./RowAction.svelte"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -178,6 +178,11 @@
       "name": "Download File",
       "type": "data",
       "component": "DownloadFile"
+    },
+    {
+      "name": "Row Action",
+      "type": "data",
+      "component": "RowAction"
     }
   ]
 }

packages/client/src/utils/buttonActions.js

@@ -493,6 +493,15 @@ const downloadFileHandler = async action => {
   }
 }
 
+const rowActionHandler = async action => {
+  const { resourceId, rowId, rowActionId } = action.parameters
+  await API.rowActions.trigger({
+    rowActionId,
+    tableId: resourceId,
+    rowId,
+  })
+}
+
 const handlerMap = {
   ["Fetch Row"]: fetchRowHandler,
   ["Save Row"]: saveRowHandler,
@@ -514,6 +523,7 @@ const handlerMap = {
   ["Open Modal"]: openModalHandler,
   ["Close Modal"]: closeModalHandler,
   ["Download File"]: downloadFileHandler,
+  ["Row Action"]: rowActionHandler,
 }
 
 const confirmTextMap = {