Add button action to refresh a datasource

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

@@ -0,0 +1,37 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getDataProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: dataProviders = getDataProviderComponents(
+    $currentAsset.props,
+    $store.selectedComponentId
+  )
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Form</Label>
+  <Select secondary bind:value={parameters.componentId}>
+    <option value="" />
+    {#if dataProviders}
+      {#each dataProviders as component}
+        <option value={component._id}>{component._instanceName}</option>
+      {/each}
+    {/if}
+  </Select>
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
+
+  .root :global(> div) {
+    flex: 1;
+    margin-left: var(--spacing-l);
+  }
+</style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js

@@ -4,6 +4,7 @@ import DeleteRow from "./DeleteRow.svelte"
 import ExecuteQuery from "./ExecuteQuery.svelte"
 import TriggerAutomation from "./TriggerAutomation.svelte"
 import ValidateForm from "./ValidateForm.svelte"
+import RefreshDatasource from "./RefreshDatasource.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -35,4 +36,8 @@ export default [
     name: "Validate Form",
     component: ValidateForm,
   },
+  {
+    name: "Refresh Datasource",
+    component: RefreshDatasource,
+  },
 ]

packages/client/src/components/Provider.svelte

@@ -14,7 +14,7 @@
   $: providerKey = key || $component.id
 
   // Add data context
-  $: newContext.actions.provideData(providerKey, data)
+  $: data !== undefined && newContext.actions.provideData(providerKey, data)
 
   // Add actions context
   $: {

packages/client/src/constants.js

@@ -4,4 +4,5 @@ export const TableNames = {
 
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
+  RefreshDatasource: "RefreshDatasource",
 }

packages/client/src/utils/buttonActions.js

@@ -50,14 +50,29 @@ const queryExecutionHandler = async action => {
   })
 }
 
-const validateFormHandler = async (action, context) => {
+const executeActionHandler = async (context, componentId, actionType) => {
-  const { componentId } = action.parameters
+  const fn = context[`${componentId}_${actionType}`]
-  const fn = context[`${componentId}_${ActionTypes.ValidateForm}`]
   if (fn) {
     return await fn()
   }
 }
 
+const validateFormHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ValidateForm
+  )
+}
+
+const refreshDatasourceHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.RefreshDatasource
+  )
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
@@ -65,6 +80,7 @@ const handlerMap = {
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
   ["Validate Form"]: validateFormHandler,
+  ["Refresh Datasource"]: refreshDatasourceHandler,
 }
 
 /**

packages/standard-components/manifest.json

@@ -106,6 +106,7 @@
     "styleable": true,
     "hasChildren": true,
     "dataProvider": true,
+    "actions": ["RefreshDatasource"],
     "settings": [
       {
         "type": "datasource",

packages/standard-components/src/List.svelte

@@ -2,7 +2,9 @@
   import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API, styleable, Provider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
+    "sdk"
+  )
   const component = getContext("component")
 
   export let datasource = []
@@ -18,25 +20,34 @@
     }
     loaded = true
   }
+
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData(datasource),
+    },
+  ]
 </script>
 
-{#if rows.length > 0}
+<Provider {actions}>
-  <div use:styleable={$component.styles}>
+  {#if rows.length > 0}
-    {#if $component.children === 0 && $builderStore.inBuilder}
+    <div use:styleable={$component.styles}>
-      <p>Add some components too</p>
+      {#if $component.children === 0 && $builderStore.inBuilder}
-    {:else}
+        <p>Add some components too</p>
-      {#each rows as row}
+      {:else}
-        <Provider data={row}>
+        {#each rows as row}
-          <slot />
+          <Provider data={row}>
-        </Provider>
+            <slot />
-      {/each}
+          </Provider>
-    {/if}
+        {/each}
-  </div>
+      {/if}
-{:else if loaded && $builderStore.inBuilder}
+    </div>
-  <div use:styleable={$component.styles}>
+  {:else if loaded && $builderStore.inBuilder}
-    <p>Feed me some data</p>
+    <div use:styleable={$component.styles}>
-  </div>
+      <p>Feed me some data</p>
-{/if}
+    </div>
+  {/if}
+</Provider>
 
 <style>
   p {