Add new Delete Row action which can be used in client apps

packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte

@@ -0,0 +1,91 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+
+  export let parameters
+
+  let idFields
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.currentComponentInfo._id,
+    components: $store.components,
+    screen: $store.currentPreviewItem,
+    tables: $backendUiStore.tables,
+  })
+
+  $: idFields = bindableProperties.filter(
+    bindable =>
+      bindable.type === "context" && bindable.runtimeBinding.endsWith("._id")
+  )
+
+  $: {
+    if (parameters.rowId) {
+      // Set rev ID
+      parameters.revId = parameters.rowId.replace("_id", "_rev")
+
+      // Set table ID
+      const idBinding = bindableProperties.find(
+        prop =>
+          prop.runtimeBinding ===
+          parameters.rowId
+            .replace("{{", "")
+            .replace("}}", "")
+            .trim()
+      )
+      if (idBinding) {
+        const { instance } = idBinding
+        const component = $store.components[instance._component]
+        const tableInfo = instance[component.context]
+        if (tableInfo) {
+          parameters.tableId =
+            typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
+        }
+      }
+
+      console.log(parameters)
+    }
+  }
+</script>
+
+<div class="root">
+  {#if idFields.length === 0}
+    <div class="cannot-use">
+      Delete row can only be used within a component that provides data, such as
+      a List
+    </div>
+  {:else}
+    <Label size="m" color="dark">Datasource</Label>
+    <Select secondary bind:value={parameters.rowId}>
+      <option value="" />
+      {#each idFields as idField}
+        <option value={`{{ ${idField.runtimeBinding} }}`}>
+          {idField.instance._instanceName}
+        </option>
+      {/each}
+    </Select>
+  {/if}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-s);
+    row-gap: var(--spacing-s);
+    grid-template-columns: auto 1fr auto 1fr auto;
+    align-items: baseline;
+  }
+
+  .root :global(> div:nth-child(2)) {
+    grid-column-start: 2;
+    grid-column-end: 6;
+  }
+
+  .cannot-use {
+    color: var(--red);
+    font-size: var(--font-size-s);
+    text-align: center;
+    width: 70%;
+    margin: auto;
+  }
+</style>

packages/builder/src/components/userInterface/EventsEditor/actions/index.js

@@ -1,5 +1,6 @@
 import NavigateTo from "./NavigateTo.svelte"
 import SaveRow from "./SaveRow.svelte"
+import DeleteRow from "./DeleteRow.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -11,6 +12,10 @@ export default [
     name: "Save Row",
     component: SaveRow,
   },
+  {
+    name: "Delete Row",
+    component: DeleteRow,
+  },
   {
     name: "Navigate To",
     component: NavigateTo,

packages/client/src/api/index.js

@@ -67,6 +67,11 @@ const updateRow = async (params, state) => {
   })
 }
 
+const deleteRow = async params =>
+  await del({
+    url: `/api/${params.tableId}/rows/${params.rowId}/${params.revId}`,
+  })
+
 const makeRowRequestBody = (parameters, state) => {
   // start with the row thats currently in context
   const body = { ...(state.data || {}) }
@@ -103,4 +108,5 @@ export default {
   authenticate: authenticate(apiOpts),
   saveRow,
   updateRow,
+  deleteRow,
 }

packages/client/src/state/eventHandlers.js

@@ -8,6 +8,7 @@ export const eventHandlers = routeTo => {
     "Navigate To": param => routeTo(param && param.url),
     "Update Row": api.updateRow,
     "Save Row": api.saveRow,
+    "Delete Row": api.deleteRow,
     "Trigger Workflow": api.triggerWorkflow,
   }