Add Fetch Row Button Action (#9653)

* Add Fetch Row Button Action

* PR feedback

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

@@ -0,0 +1,40 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { tables } from "stores/backend"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let parameters
+  export let bindings = []
+
+  $: tableOptions = $tables.list || []
+</script>
+
+<div class="root">
+  <Label>Table</Label>
+  <Select
+    bind:value={parameters.tableId}
+    options={tableOptions}
+    getOptionLabel={table => table.name}
+    getOptionValue={table => table._id}
+  />
+
+  <Label small>Row ID</Label>
+  <DrawerBindableInput
+    {bindings}
+    title="Row ID to Fetch"
+    value={parameters.rowId}
+    on:change={value => (parameters.rowId = value.detail)}
+  />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>

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

@@ -1,3 +1,4 @@
+export { default as FetchRow } from "./FetchRow.svelte"
 export { default as NavigateTo } from "./NavigateTo.svelte"
 export { default as SaveRow } from "./SaveRow.svelte"
 export { default as DeleteRow } from "./DeleteRow.svelte"

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

@@ -27,6 +27,17 @@
       "type": "data",
       "component": "DeleteRow"
     },
+    {
+      "name": "Fetch Row",
+      "type": "data",
+      "component": "FetchRow",
+      "context": [
+        {
+          "label": "Fetched row",
+          "value": "row"
+        }
+      ]
+    },
     {
       "name": "Navigate To",
       "type": "application",
@@ -135,4 +146,4 @@
       "dependsOnFeature": "sidePanel"
     }
   ]
-}
+}

packages/client/src/utils/buttonActions.js

@@ -87,6 +87,20 @@ const duplicateRowHandler = async (action, context) => {
   }
 }
 
+const fetchRowHandler = async action => {
+  const { tableId, rowId } = action.parameters
+
+  if (tableId && rowId) {
+    try {
+      const row = await API.fetchRow({ tableId, rowId })
+
+      return { row }
+    } catch (error) {
+      return false
+    }
+  }
+}
+
 const deleteRowHandler = async action => {
   const { tableId, revId, rowId, notificationOverride } = action.parameters
   if (tableId && rowId) {
@@ -341,6 +355,7 @@ const CloseSidePanelHandler = () => {
 }
 
 const handlerMap = {
+  ["Fetch Row"]: fetchRowHandler,
   ["Save Row"]: saveRowHandler,
   ["Duplicate Row"]: duplicateRowHandler,
   ["Delete Row"]: deleteRowHandler,