Merge branch 'master' of github.com:Budibase/budibase into labday/sqs

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -37,6 +37,7 @@
     "svg",
     "bmp",
     "jfif",
+    "webp",
   ]
 
   const fieldId = id || uuid()

packages/builder/src/components/design/settings/componentSettings.js

@@ -1,4 +1,6 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
+import { licensing } from "stores/portal"
+import { get } from "svelte/store"
 import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
@@ -26,7 +28,8 @@ import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration
 import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
 import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
 import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
-import FormStepControls from "components/design/settings/controls/FormStepControls.svelte"
+import FormStepControls from "./controls/FormStepControls.svelte"
+import PaywalledSetting from "./controls/PaywalledSetting.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -86,11 +89,16 @@ const componentMap = {
 }
 
 export const getComponentForSetting = setting => {
-  const { type, showInBar, barStyle } = setting || {}
+  const { type, showInBar, barStyle, license } = setting || {}
   if (!type) {
     return null
   }
 
+  // Check for paywalled settings
+  if (license && get(licensing).isFreePlan) {
+    return PaywalledSetting
+  }
+
   // We can show a clone of the bar settings for certain select settings
   if (showInBar && type === "select" && barStyle === "buttons") {
     return BarButtonList

packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Tag, Tags } from "@budibase/bbui"
+  import { getFormattedPlanName } from "helpers/planTitle"
+
+  export let license
+
+  $: title = getFormattedPlanName(license)
+</script>
+
+<div>
+  <Tags>
+    <Tag icon="LockClosed">{title}</Tag>
+  </Tags>
+</div>
+
+<style>
+  div {
+    height: 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -183,6 +183,7 @@
               props={{
                 // Generic settings
                 placeholder: setting.placeholder || null,
+                license: setting.license,
 
                 // Select settings
                 options: setting.options || [],

packages/client/manifest.json

@@ -4610,6 +4610,35 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "autoRefresh",
+        "license": "premium",
+        "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",
@@ -4977,6 +5006,35 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "autoRefresh",
+        "license": "premium",
+        "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",
@@ -5445,6 +5503,35 @@
             "key": "dataSource",
             "required": true
           },
+          {
+            "type": "select",
+            "label": "Auto-refresh",
+            "key": "autoRefresh",
+            "license": "premium",
+            "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",
@@ -5731,6 +5818,35 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "autoRefresh",
+        "license": "premium",
+        "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",
@@ -5908,6 +6024,35 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "autoRefresh",
+        "license": "premium",
+        "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",
@@ -6504,6 +6649,35 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "autoRefresh",
+        "license": "premium",
+        "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": "Height",

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

@@ -9,17 +9,18 @@
   export let sortOrder
   export let limit
   export let paginate
+  export let autoRefresh
 
   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(autoRefresh)
-  // 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 = autoRefresh => {
+    clearInterval(interval)
+    if (autoRefresh) {
+      interval = setInterval(fetch.refresh, Math.max(10000, autoRefresh * 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")
@@ -122,6 +123,7 @@
       {fixedRowHeight}
       {columnWhitelist}
       {schemaOverrides}
+      {repeat}
       canAddRows={allowAddRows}
       canEditRows={allowEditRows}
       canDeleteRows={allowDeleteRows}

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

@@ -10,13 +10,11 @@
   const {
     routeStore,
     roleStore,
-    styleable,
     linkable,
     builderStore,
     sidePanelStore,
     appStore,
   } = sdk
-  const component = getContext("component")
   const context = getContext("context")
 
   // Legacy props which must remain unchanged for backwards compatibility
@@ -169,15 +167,14 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class="component {screenId} layout layout--{typeClass}"
+  class="component layout layout--{typeClass}"
-  use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
   data-id={screenId}
   data-name="Screen"
   data-icon="WebPage"
 >
-  <div class="{screenId}-dom screen-wrapper layout-body">
+  <div class="screen-wrapper layout-body">
     {#if typeClass !== "none"}
       <div
         class="interactive component {navigationId}"
@@ -282,7 +279,14 @@
         </div>
       </div>
     {/if}
-    <div class="main-wrapper">
+    <div
+      class="main-wrapper"
+      on:click={() => {
+        if ($builderStore.inBuilder) {
+          builderStore.actions.selectComponent(screenId)
+        }
+      }}
+    >
       <div class="main size--{pageWidthClass}">
         <slot />
       </div>

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

@@ -31,6 +31,7 @@
   export let cardButtonOnClick
   export let linkColumn
   export let noRowsMessage
+  export let autoRefresh
 
   const context = getContext("context")
   const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
@@ -184,6 +185,7 @@
           sortOrder,
           paginate,
           limit,
+          autoRefresh,
         }}
         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 autoRefresh
 
   // Block
   export let chartTitle
@@ -65,6 +66,7 @@
       sortColumn,
       sortOrder,
       limit,
+      autoRefresh,
     }}
   >
     {#if dataProviderId && chartType}

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

@@ -17,6 +17,7 @@
   export let hAlign
   export let vAlign
   export let gap
+  export let autoRefresh
 
   const component = getContext("component")
   const context = getContext("context")
@@ -47,6 +48,7 @@
       sortOrder,
       limit,
       paginate,
+      autoRefresh,
     }}
   >
     {#if $component.empty}

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

@@ -16,6 +16,7 @@
   export let detailFields
   export let detailTitle
   export let noRowsMessage
+  export let autoRefresh
 
   const stateKey = generate()
   const context = getContext("context")
@@ -66,6 +67,7 @@
             noValue: false,
           },
         ],
+        autoRefresh,
       }}
       styles={{
         custom: `

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

@@ -33,6 +33,7 @@
   export let sidePanelSaveLabel
   export let sidePanelDeleteLabel
   export let notificationOverride
+  export let autoRefresh
 
   const { fetchDatasourceSchema, API, generateGoldenSample } = getContext("sdk")
   const component = getContext("component")
@@ -243,6 +244,7 @@
           sortOrder,
           paginate,
           limit: rowCount,
+          autoRefresh,
         }}
         context="provider"
         order={1}