Update DeleteRow button action to take explicit props and fix massive width

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte

@@ -1,53 +1,35 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
-  import {
-    getDataProviderComponents,
-    getDatasourceForProvider,
-    getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  import { store, currentAsset, backendUiStore } from "builderStore"
+  import { getBindableProperties } from "builderStore/dataBinding"
+  import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
 
   export let parameters
 
-  $: dataProviderComponents = getDataProviderComponents(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: {
-    // Automatically set rev and table ID based on row ID
-    if (parameters.providerId) {
-      parameters.rowId = `{{ ${parameters.providerId}._id }}`
-      parameters.revId = `{{ ${parameters.providerId}._rev }}`
-      const providerComponent = dataProviderComponents.find(
-        provider => provider._id === parameters.providerId
-      )
-      const datasource = getDatasourceForProvider(
-        $currentAsset,
-        providerComponent
-      )
-      const { table } = getSchemaForDatasource(datasource)
-      if (table) {
-        parameters.tableId = table._id
-      }
-    }
-  }
+  $: tableOptions = $backendUiStore.tables || []
+  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>
 
 <div class="root">
-  {#if dataProviderComponents.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 small>Datasource</Label>
-    <Select thin secondary bind:value={parameters.providerId}>
+  <Label small>Table</Label>
+  <Select thin secondary bind:value={parameters.tableId}>
     <option value="" />
-      {#each dataProviderComponents as provider}
-        <option value={provider._id}>{provider._instanceName}</option>
+    {#each tableOptions as table}
+      <option value={table._id}>{table.name}</option>
     {/each}
   </Select>
-  {/if}
+
+  <Label small>Row ID</Label>
+  <DrawerBindableInput
+    {bindings}
+    value={parameters.rowId}
+    on:change={value => (parameters.rowId = value.detail)} />
+
+  <Label small>Row Rev</Label>
+  <DrawerBindableInput
+    {bindings}
+    value={parameters.revId}
+    on:change={value => (parameters.revId = value.detail)} />
 </div>
 
 <style>
@@ -57,11 +39,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: auto 1fr;
     align-items: baseline;
-  }
-
-  .cannot-use {
-    color: var(--red);
-    font-size: var(--font-size-s);
-    margin: auto;
+    max-width: 800px;
+    margin: 0 auto;
   }
 </style>