From 6bdde675a20747980afb35479e1948d642ec08a5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Feb 2021 12:54:36 +0000
Subject: [PATCH] Add button action to refresh a datasource

---
 .../actions/RefreshDatasource.svelte          | 37 +++++++++++++++
 .../EventsEditor/actions/index.js             |  5 ++
 .../client/src/components/Provider.svelte     |  2 +-
 packages/client/src/constants.js              |  1 +
 packages/client/src/utils/buttonActions.js    | 22 +++++++--
 packages/standard-components/manifest.json    |  1 +
 packages/standard-components/src/List.svelte  | 47 ++++++++++++-------
 7 files changed, 93 insertions(+), 22 deletions(-)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/RefreshDatasource.svelte
new file mode 100644
index 0000000000..c052a9588f
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index e851bdb4be..b267b8ab3e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/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,
+  },
 ]
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index 13dd70667b..8c50eeeb01 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/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
   $: {
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index effb8f2449..3aa302bec9 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -4,4 +4,5 @@ export const TableNames = {
 
 export const ActionTypes = {
   ValidateForm: "ValidateForm",
+  RefreshDatasource: "RefreshDatasource",
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index b769b688d6..f96d18269d 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -50,14 +50,29 @@ const queryExecutionHandler = async action => {
   })
 }
 
-const validateFormHandler = async (action, context) => {
-  const { componentId } = action.parameters
-  const fn = context[`${componentId}_${ActionTypes.ValidateForm}`]
+const executeActionHandler = async (context, componentId, actionType) => {
+  const fn = context[`${componentId}_${actionType}`]
   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,
 }
 
 /**
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index a57acf0114..5694e3c5b3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -106,6 +106,7 @@
     "styleable": true,
     "hasChildren": true,
     "dataProvider": true,
+    "actions": ["RefreshDatasource"],
     "settings": [
       {
         "type": "datasource",
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 0c09e0b884..4ba10cc28c 100644
--- a/packages/standard-components/src/List.svelte
+++ b/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}
-  <div use:styleable={$component.styles}>
-    {#if $component.children === 0 && $builderStore.inBuilder}
-      <p>Add some components too</p>
-    {:else}
-      {#each rows as row}
-        <Provider data={row}>
-          <slot />
-        </Provider>
-      {/each}
-    {/if}
-  </div>
-{:else if loaded && $builderStore.inBuilder}
-  <div use:styleable={$component.styles}>
-    <p>Feed me some data</p>
-  </div>
-{/if}
+<Provider {actions}>
+  {#if rows.length > 0}
+    <div use:styleable={$component.styles}>
+      {#if $component.children === 0 && $builderStore.inBuilder}
+        <p>Add some components too</p>
+      {:else}
+        {#each rows as row}
+          <Provider data={row}>
+            <slot />
+          </Provider>
+        {/each}
+      {/if}
+    </div>
+  {:else if loaded && $builderStore.inBuilder}
+    <div use:styleable={$component.styles}>
+      <p>Feed me some data</p>
+    </div>
+  {/if}
+</Provider>
 
 <style>
   p {