Add auto-refresh setting to data providers and all blocks

packages/client/manifest.json

@@ -4571,6 +4571,34 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "refresh",
+        "placeholder": "Never",
+        "options": [
+          {
+            "label": "10 seconds",
+            "value": 10
+          },
+          {
+            "label": "30 seconds",
+            "value": 30
+          },
+          {
+            "label": "1 minute",
+            "value": 60
+          },
+          {
+            "label": "5 minutes",
+            "value": 300
+          },
+          {
+            "label": "10 minutes",
+            "value": 600
+          }
+        ]
+      },
       {
         "type": "filter",
         "label": "Filtering",
@@ -4937,6 +4965,34 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "refresh",
+        "placeholder": "Never",
+        "options": [
+          {
+            "label": "10 seconds",
+            "value": 10
+          },
+          {
+            "label": "30 seconds",
+            "value": 30
+          },
+          {
+            "label": "1 minute",
+            "value": 60
+          },
+          {
+            "label": "5 minutes",
+            "value": 300
+          },
+          {
+            "label": "10 minutes",
+            "value": 600
+          }
+        ]
+      },
       {
         "type": "text",
         "label": "Title",
@@ -5404,6 +5460,34 @@
             "key": "dataSource",
             "required": true
           },
+          {
+            "type": "select",
+            "label": "Auto-refresh",
+            "key": "refresh",
+            "placeholder": "Never",
+            "options": [
+              {
+                "label": "10 seconds",
+                "value": 10
+              },
+              {
+                "label": "30 seconds",
+                "value": 30
+              },
+              {
+                "label": "1 minute",
+                "value": 60
+              },
+              {
+                "label": "5 minutes",
+                "value": 300
+              },
+              {
+                "label": "10 minutes",
+                "value": 600
+              }
+            ]
+          },
           {
             "type": "columns",
             "label": "Columns",
@@ -5690,6 +5774,34 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "refresh",
+        "placeholder": "Never",
+        "options": [
+          {
+            "label": "10 seconds",
+            "value": 10
+          },
+          {
+            "label": "30 seconds",
+            "value": 30
+          },
+          {
+            "label": "1 minute",
+            "value": 60
+          },
+          {
+            "label": "5 minutes",
+            "value": 300
+          },
+          {
+            "label": "10 minutes",
+            "value": 600
+          }
+        ]
+      },
       {
         "type": "searchfield",
         "label": "Search columns",
@@ -5867,6 +5979,34 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "refresh",
+        "placeholder": "Never",
+        "options": [
+          {
+            "label": "10 seconds",
+            "value": 10
+          },
+          {
+            "label": "30 seconds",
+            "value": 30
+          },
+          {
+            "label": "1 minute",
+            "value": 60
+          },
+          {
+            "label": "5 minutes",
+            "value": 300
+          },
+          {
+            "label": "10 minutes",
+            "value": 600
+          }
+        ]
+      },
       {
         "type": "filter",
         "label": "Filtering",
@@ -6571,6 +6711,34 @@
         "key": "table",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "refresh",
+        "placeholder": "Never",
+        "options": [
+          {
+            "label": "10 seconds",
+            "value": 10
+          },
+          {
+            "label": "30 seconds",
+            "value": 30
+          },
+          {
+            "label": "1 minute",
+            "value": 60
+          },
+          {
+            "label": "5 minutes",
+            "value": 300
+          },
+          {
+            "label": "10 minutes",
+            "value": 600
+          }
+        ]
+      },
       {
         "type": "filter",
         "label": "Filtering",

packages/client/src/components/app/DataProvider.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onMount } from "svelte"
   import { Pagination, ProgressCircle } from "@budibase/bbui"
   import { fetchData, LuceneUtils } from "@budibase/frontend-core"
 
@@ -9,17 +9,18 @@
   export let sortOrder
   export let limit
   export let paginate
+  export let refresh
 
   const { styleable, Provider, ActionTypes, API } = getContext("sdk")
   const component = getContext("component")
 
+  let interval
+  let queryExtensions = {}
+
   // We need to manage our lucene query manually as we want to allow components
   // to extend it
-  let queryExtensions = {}
   $: defaultQuery = LuceneUtils.buildLuceneQuery(filter)
   $: query = extendQuery(defaultQuery, queryExtensions)
-
-  // Fetch data and refresh when needed
   $: fetch = createFetch(dataSource)
   $: fetch.update({
     query,
@@ -28,11 +29,8 @@
     limit,
     paginate,
   })
-
-  // Sanitize schema to remove hidden fields
   $: schema = sanitizeSchema($fetch.schema)
-
+  $: setUpAutoRefresh(refresh)
-  // Build our action context
   $: actions = [
     {
       type: ActionTypes.RefreshDatasource,
@@ -63,8 +61,6 @@
       },
     },
   ]
-
-  // Build our data context
   $: dataContext = {
     rows: $fetch.rows,
     info: $fetch.info,
@@ -140,6 +136,13 @@
     })
     return extendedQuery
   }
+
+  const setUpAutoRefresh = refresh => {
+    clearInterval(interval)
+    if (refresh) {
+      interval = setInterval(fetch.refresh, Math.max(10000, refresh * 1000))
+    }
+  }
 </script>
 
 <div use:styleable={$component.styles} class="container">

packages/client/src/components/app/GridBlock.svelte

@@ -18,6 +18,7 @@
   export let columns = null
   export let onRowClick = null
   export let buttons = null
+  export let repeat = null
 
   const context = getContext("context")
   const component = getContext("component")
@@ -108,6 +109,7 @@
       {fixedRowHeight}
       {columnWhitelist}
       {schemaOverrides}
+      {repeat}
       canAddRows={allowAddRows}
       canEditRows={allowEditRows}
       canDeleteRows={allowDeleteRows}

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -30,6 +30,7 @@
   export let cardButtonOnClick
   export let linkColumn
   export let noRowsMessage
+  export let repeat
 
   const { fetchDatasourceSchema } = getContext("sdk")
 
@@ -171,6 +172,7 @@
           sortOrder,
           paginate,
           limit,
+          repeat,
         }}
         order={1}
       >

packages/client/src/components/app/blocks/ChartBlock.svelte

@@ -8,6 +8,7 @@
   export let sortColumn
   export let sortOrder
   export let limit
+  export let repeat
 
   // Block
   export let chartTitle
@@ -65,6 +66,7 @@
       sortColumn,
       sortOrder,
       limit,
+      repeat,
     }}
   >
     {#if dataProviderId && chartType}

packages/client/src/components/app/blocks/RepeaterBlock.svelte

@@ -16,6 +16,7 @@
   export let hAlign
   export let vAlign
   export let gap
+  export let repeat
 
   const component = getContext("component")
 
@@ -34,6 +35,7 @@
       sortOrder,
       limit,
       paginate,
+      repeat,
     }}
   >
     {#if $component.empty}

packages/client/src/components/app/blocks/RowExplorer.svelte

@@ -6,17 +6,15 @@
 
   export let dataSource
   export let height
-
   export let cardTitle
   export let cardSubtitle
   export let cardDescription
   export let cardImageURL
   export let cardSearchField
-
   export let detailFields
   export let detailTitle
-
   export let noRowsMessage
+  export let repeat
 
   const stateKey = generate()
 
@@ -56,6 +54,7 @@
             noValue: false,
           },
         ],
+        repeat,
       }}
       styles={{
         custom: `

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -32,6 +32,7 @@
   export let sidePanelSaveLabel
   export let sidePanelDeleteLabel
   export let notificationOverride
+  export let repeat
 
   const { fetchDatasourceSchema, API } = getContext("sdk")
   const component = getContext("component")
@@ -230,6 +231,7 @@
           sortOrder,
           paginate,
           limit: rowCount,
+          repeat,
         }}
         context="provider"
         order={1}