Add hot reloading to search results

packages/standard-components/src/Search.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { isEmpty } from "lodash/fp"
   import {
     Button,
     DatePicker,
@@ -10,10 +9,12 @@
     Input,
   } from "@budibase/bbui"
 
-  const { API, styleable, Provider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
+    "sdk"
+  )
   const component = getContext("component")
 
-  export let table = []
+  export let table
   export let columns = []
   export let pageSize
   export let noRowsMessage
@@ -34,9 +35,16 @@
       search[next] === "" ? acc : { ...acc, [next]: search[next] },
     {}
   )
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData(table, page),
+      metadata: { datasource: { type: "table", tableId: table } },
+    },
+  ]
 
   async function fetchData(table, page) {
-    if (!isEmpty(table)) {
+    if (table) {
       const tableDef = await API.fetchTableDefinition(table)
       schema = tableDef.schema
       rows = await API.searchTableData({
@@ -60,74 +68,76 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
+<Provider {actions}>
-  <div class="query-builder">
+  <div use:styleable={$component.styles}>
-    {#if schema}
+    <div class="query-builder">
-      {#each columns as field}
+      {#if schema}
-        <div class="form-field">
+        {#each columns as field}
-          <Label extraSmall grey>{schema[field].name}</Label>
+          <div class="form-field">
-          {#if schema[field].type === 'options'}
+            <Label extraSmall grey>{schema[field].name}</Label>
-            <Select secondary bind:value={search[field]}>
+            {#if schema[field].type === 'options'}
-              <option value="">Choose an option</option>
+              <Select secondary bind:value={search[field]}>
-              {#each schema[field].constraints.inclusion as opt}
+                <option value="">Choose an option</option>
-                <option>{opt}</option>
+                {#each schema[field].constraints.inclusion as opt}
-              {/each}
+                  <option>{opt}</option>
-            </Select>
+                {/each}
-          {:else if schema[field].type === 'datetime'}
+              </Select>
-            <DatePicker bind:value={search[field]} />
+            {:else if schema[field].type === 'datetime'}
-          {:else if schema[field].type === 'boolean'}
+              <DatePicker bind:value={search[field]} />
-            <Toggle text={schema[field].name} bind:checked={search[field]} />
+            {:else if schema[field].type === 'boolean'}
-          {:else if schema[field].type === 'number'}
+              <Toggle text={schema[field].name} bind:checked={search[field]} />
-            <Input type="number" bind:value={search[field]} />
+            {:else if schema[field].type === 'number'}
-          {:else if schema[field].type === 'string'}
+              <Input type="number" bind:value={search[field]} />
-            <Input bind:value={search[field]} />
+            {:else if schema[field].type === 'string'}
-          {/if}
+              <Input bind:value={search[field]} />
-        </div>
+            {/if}
-      {/each}
+          </div>
-    {/if}
-    <div class="actions">
-      <Button
-        secondary
-        on:click={() => {
-          search = {}
-          page = 0
-        }}>
-        Reset
-      </Button>
-      <Button
-        primary
-        on:click={() => {
-          page = 0
-          fetchData(table, page)
-        }}>
-        Search
-      </Button>
-    </div>
-  </div>
-  {#if loaded}
-    {#if rows.length > 0}
-      {#if $component.children === 0 && $builderStore.inBuilder}
-        <p><i class="ri-image-line" />Add some components to display.</p>
-      {:else}
-        {#each rows as row}
-          <Provider data={row}>
-            <slot />
-          </Provider>
         {/each}
       {/if}
-    {:else if noRowsMessage}
+      <div class="actions">
-      <p><i class="ri-search-2-line" />{noRowsMessage}</p>
+        <Button
-    {/if}
+          secondary
-  {/if}
+          on:click={() => {
-  <div class="pagination">
+            search = {}
-    {#if page > 0}
+            page = 0
-      <Button primary on:click={previousPage}>Back</Button>
+          }}>
-    {/if}
+          Reset
-    {#if rows.length === pageSize}
+        </Button>
-      <Button primary on:click={nextPage}>Next</Button>
+        <Button
+          primary
+          on:click={() => {
+            page = 0
+            fetchData(table, page)
+          }}>
+          Search
+        </Button>
+      </div>
+    </div>
+    {#if loaded}
+      {#if rows.length > 0}
+        {#if $component.children === 0 && $builderStore.inBuilder}
+          <p><i class="ri-image-line" />Add some components to display.</p>
+        {:else}
+          {#each rows as row}
+            <Provider data={row}>
+              <slot />
+            </Provider>
+          {/each}
+        {/if}
+      {:else if noRowsMessage}
+        <p><i class="ri-search-2-line" />{noRowsMessage}</p>
+      {/if}
     {/if}
+    <div class="pagination">
+      {#if page > 0}
+        <Button primary on:click={previousPage}>Back</Button>
+      {/if}
+      {#if rows.length === pageSize}
+        <Button primary on:click={nextPage}>Next</Button>
+      {/if}
+    </div>
   </div>
-</div>
+</Provider>
 
 <style>
   p {