From 051f997047b4e5f65c63ea37f1e3c66e6859c4cf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 4 Mar 2024 09:34:58 +0000
Subject: [PATCH 01/12] Add auto-refresh setting to data providers and all
 blocks

---
 packages/client/manifest.json                 | 168 ++++++++++++++++++
 .../src/components/app/DataProvider.svelte    |  23 +--
 .../src/components/app/GridBlock.svelte       |   2 +
 .../components/app/blocks/CardsBlock.svelte   |   2 +
 .../components/app/blocks/ChartBlock.svelte   |   2 +
 .../app/blocks/RepeaterBlock.svelte           |   2 +
 .../components/app/blocks/RowExplorer.svelte  |   5 +-
 .../components/app/blocks/TableBlock.svelte   |   2 +
 8 files changed, 193 insertions(+), 13 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 43b75ebe26..1b24136019 100644
--- a/packages/client/manifest.json
+++ b/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",
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 1c6dfb32b7..c841c07ac4 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/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)
-
-  // Build our action context
+  $: setUpAutoRefresh(refresh)
   $: 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">
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 0a343cac51..fa0e66596c 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/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}
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 008fa7e730..baa31901ea 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/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}
       >
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 1bbc69ce63..416c843e98 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/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}
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index 30fbdddcdc..ffd34596ed 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/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}
diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte
index 8fadcb5006..72fdf810db 100644
--- a/packages/client/src/components/app/blocks/RowExplorer.svelte
+++ b/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: `
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 7c58f90508..2a149c2013 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/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}

From 3a002b3c3db078679a482305bae7a669e906c7bb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 4 Mar 2024 09:46:10 +0000
Subject: [PATCH 02/12] Rename autorefresh setting and ensure functional in all
 blocks + DP

---
 packages/client/manifest.json                 | 66 +++++++++----------
 .../src/components/app/DataProvider.svelte    | 10 +--
 .../components/app/blocks/CardsBlock.svelte   |  4 +-
 .../components/app/blocks/ChartBlock.svelte   |  4 +-
 .../app/blocks/RepeaterBlock.svelte           |  4 +-
 .../components/app/blocks/RowExplorer.svelte  |  4 +-
 .../components/app/blocks/TableBlock.svelte   |  4 +-
 7 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 1b24136019..d8cfe1d489 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4574,7 +4574,7 @@
       {
         "type": "select",
         "label": "Auto-refresh",
-        "key": "refresh",
+        "key": "autoRefresh",
         "placeholder": "Never",
         "options": [
           {
@@ -4968,7 +4968,7 @@
       {
         "type": "select",
         "label": "Auto-refresh",
-        "key": "refresh",
+        "key": "autoRefresh",
         "placeholder": "Never",
         "options": [
           {
@@ -5463,7 +5463,7 @@
           {
             "type": "select",
             "label": "Auto-refresh",
-            "key": "refresh",
+            "key": "autoRefresh",
             "placeholder": "Never",
             "options": [
               {
@@ -5777,7 +5777,7 @@
       {
         "type": "select",
         "label": "Auto-refresh",
-        "key": "refresh",
+        "key": "autoRefresh",
         "placeholder": "Never",
         "options": [
           {
@@ -5982,7 +5982,7 @@
       {
         "type": "select",
         "label": "Auto-refresh",
-        "key": "refresh",
+        "key": "autoRefresh",
         "placeholder": "Never",
         "options": [
           {
@@ -6603,6 +6603,34 @@
         "key": "dataSource",
         "required": true
       },
+      {
+        "type": "select",
+        "label": "Auto-refresh",
+        "key": "autoRefresh",
+        "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",
@@ -6711,34 +6739,6 @@
         "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",
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index c841c07ac4..8f3c31c130 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -9,7 +9,7 @@
   export let sortOrder
   export let limit
   export let paginate
-  export let refresh
+  export let autoRefresh
 
   const { styleable, Provider, ActionTypes, API } = getContext("sdk")
   const component = getContext("component")
@@ -30,7 +30,7 @@
     paginate,
   })
   $: schema = sanitizeSchema($fetch.schema)
-  $: setUpAutoRefresh(refresh)
+  $: setUpAutoRefresh(autoRefresh)
   $: actions = [
     {
       type: ActionTypes.RefreshDatasource,
@@ -137,10 +137,10 @@
     return extendedQuery
   }
 
-  const setUpAutoRefresh = refresh => {
+  const setUpAutoRefresh = autoRefresh => {
     clearInterval(interval)
-    if (refresh) {
-      interval = setInterval(fetch.refresh, Math.max(10000, refresh * 1000))
+    if (autoRefresh) {
+      interval = setInterval(fetch.refresh, Math.max(10000, autoRefresh * 1000))
     }
   }
 </script>
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index baa31901ea..2457896ca2 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -30,7 +30,7 @@
   export let cardButtonOnClick
   export let linkColumn
   export let noRowsMessage
-  export let repeat
+  export let autoRefresh
 
   const { fetchDatasourceSchema } = getContext("sdk")
 
@@ -172,7 +172,7 @@
           sortOrder,
           paginate,
           limit,
-          repeat,
+          autoRefresh,
         }}
         order={1}
       >
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
index 416c843e98..2767c44b8e 100644
--- a/packages/client/src/components/app/blocks/ChartBlock.svelte
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -8,7 +8,7 @@
   export let sortColumn
   export let sortOrder
   export let limit
-  export let repeat
+  export let autoRefresh
 
   // Block
   export let chartTitle
@@ -66,7 +66,7 @@
       sortColumn,
       sortOrder,
       limit,
-      repeat,
+      autoRefresh,
     }}
   >
     {#if dataProviderId && chartType}
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index ffd34596ed..d0bc04e2fd 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@@ -16,7 +16,7 @@
   export let hAlign
   export let vAlign
   export let gap
-  export let repeat
+  export let autoRefresh
 
   const component = getContext("component")
 
@@ -35,7 +35,7 @@
       sortOrder,
       limit,
       paginate,
-      repeat,
+      autoRefresh,
     }}
   >
     {#if $component.empty}
diff --git a/packages/client/src/components/app/blocks/RowExplorer.svelte b/packages/client/src/components/app/blocks/RowExplorer.svelte
index 72fdf810db..292f3c4a76 100644
--- a/packages/client/src/components/app/blocks/RowExplorer.svelte
+++ b/packages/client/src/components/app/blocks/RowExplorer.svelte
@@ -14,7 +14,7 @@
   export let detailFields
   export let detailTitle
   export let noRowsMessage
-  export let repeat
+  export let autoRefresh
 
   const stateKey = generate()
 
@@ -54,7 +54,7 @@
             noValue: false,
           },
         ],
-        repeat,
+        autoRefresh,
       }}
       styles={{
         custom: `
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 2a149c2013..6b1f34920a 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -32,7 +32,7 @@
   export let sidePanelSaveLabel
   export let sidePanelDeleteLabel
   export let notificationOverride
-  export let repeat
+  export let autoRefresh
 
   const { fetchDatasourceSchema, API } = getContext("sdk")
   const component = getContext("component")
@@ -231,7 +231,7 @@
           sortOrder,
           paginate,
           limit: rowCount,
-          repeat,
+          autoRefresh,
         }}
         context="provider"
         order={1}

From d056b51c726eb0909f092e811eb73c2f8ba2e584 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 4 Mar 2024 09:58:40 +0000
Subject: [PATCH 03/12] Lint

---
 packages/client/src/components/app/DataProvider.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 8f3c31c130..dc0c40f55c 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
   import { Pagination, ProgressCircle } from "@budibase/bbui"
   import { fetchData, LuceneUtils } from "@budibase/frontend-core"
 

From 8e19bb784bf55a8c03ee750ad182db35138f6d11 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 4 Mar 2024 11:30:56 +0000
Subject: [PATCH 04/12] Bump account portal

---
 packages/account-portal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/account-portal b/packages/account-portal
index 19f7a5829f..806b6fd5c1 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 19f7a5829f4d23cbc694136e45d94482a59a475a
+Subproject commit 806b6fd5c11c284ebf4a01627d75db939f0f8152

From ea25800663b45648aa4a2ccded51714a89524f6a Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 15 Mar 2024 15:13:16 +0000
Subject: [PATCH 05/12] Debugging

---
 packages/client/src/components/app/Layout.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index f1dcdf6b37..a894a46733 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -281,7 +281,18 @@
         </div>
       </div>
     {/if}
-    <div class="main-wrapper">
+    <div
+      class="main-wrapper"
+      on:click={() => {
+        // inBuilder
+        // check selected
+        // selectedComponentId : "ce300d7f6c08b432b8db18d11690932f5"
+        console.log("Screen check ", $builderStore)
+        if ($builderStore.inBuilder) {
+          builderStore.actions.selectComponent(null)
+        }
+      }}
+    >
       <div class="main size--{pageWidthClass}">
         <slot />
       </div>

From 308897d97217856e064b40292bf3c8b6c66eec16 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 19 Mar 2024 14:11:55 +0000
Subject: [PATCH 06/12] Allow view deselect when clicking on empty area. Screen
 is no longer highlighted

---
 packages/bbui/src/Form/Core/Dropzone.svelte                 | 1 +
 .../design/[screenId]/_components/AppPreview.svelte         | 2 +-
 packages/client/src/components/app/Layout.svelte            | 4 ----
 .../client/src/components/preview/SelectionIndicator.svelte | 6 +++++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 3d803c0961..678b7efa0e 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -37,6 +37,7 @@
     "svg",
     "bmp",
     "jfif",
+    "webp",
   ]
 
   const fieldId = id || uuid()
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 95e7a66be9..ca1d18d688 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -130,7 +130,7 @@
       // Catch any app errors
       loading = false
       error = event.error || "An unknown error occurred"
-    } else if (type === "select-component" && data.id) {
+    } else if (type === "select-component" && "id" in data) {
       componentStore.select(data.id)
     } else if (type === "hover-component") {
       hoverStore.hover(data.id, false)
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index a894a46733..6369ba9d80 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -284,10 +284,6 @@
     <div
       class="main-wrapper"
       on:click={() => {
-        // inBuilder
-        // check selected
-        // selectedComponentId : "ce300d7f6c08b432b8db18d11690932f5"
-        console.log("Screen check ", $builderStore)
         if ($builderStore.inBuilder) {
           builderStore.actions.selectComponent(null)
         }
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index bca0341628..119a948573 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -5,10 +5,14 @@
   $: color = $builderStore.editMode
     ? "var(--spectrum-global-color-static-green-500)"
     : "var(--spectrum-global-color-static-blue-600)"
+
+  $: isScreen = $builderStore.selectedComponentId?.startsWith(
+    $builderStore.screen._id
+  )
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.selectedComponentId}
+  componentId={!isScreen ? $builderStore.selectedComponentId : null}
   {color}
   zIndex="910"
   transition

From 1c71b38569b8a4a2a58a3395d006384cb98a4e8b Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 2 Apr 2024 09:22:42 +0100
Subject: [PATCH 07/12] PR feedback

---
 packages/client/src/components/app/Layout.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index bfff3dc46f..424021c0b9 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -169,7 +169,7 @@
 <!-- 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}
@@ -177,7 +177,7 @@
   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}"
@@ -286,7 +286,7 @@
       class="main-wrapper"
       on:click={() => {
         if ($builderStore.inBuilder) {
-          builderStore.actions.selectComponent(null)
+          builderStore.actions.selectComponent($builderStore.screen._id)
         }
       }}
     >

From aa7fe8f1b5b6dafc0b51423c0aabfdc5c7b7603a Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 3 Apr 2024 09:11:56 +0100
Subject: [PATCH 08/12] PR feedback

---
 .../design/[screenId]/_components/AppPreview.svelte         | 2 +-
 .../client/src/components/preview/SelectionIndicator.svelte | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index dc22840261..0ce9e096f2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -125,7 +125,7 @@
       // Catch any app errors
       loading = false
       error = event.error || "An unknown error occurred"
-    } else if (type === "select-component" && "id" in data) {
+    } else if (type === "select-component" && data.id) {
       componentStore.select(data.id)
       componentTreeNodesStore.makeNodeVisible(data.id)
     } else if (type === "hover-component") {
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index cb7d48e919..a271389cbd 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -5,14 +5,10 @@
   $: color = $builderStore.editMode
     ? "var(--spectrum-global-color-static-green-500)"
     : "var(--spectrum-global-color-static-blue-600)"
-
-  $: isScreen = $builderStore.selectedComponentId?.startsWith(
-    $builderStore.screen._id
-  )
 </script>
 
 <IndicatorSet
-  componentId={!isScreen ? $builderStore.selectedComponentId : null}
+  componentId={$builderStore.selectedComponentId}
   {color}
   zIndex={900}
   allowResizeAnchors

From 4d1a18b28bf41316fcead8e42db177cc9ba29dc2 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 4 Apr 2024 09:09:02 +0100
Subject: [PATCH 09/12] PR feedback

---
 packages/client/src/components/app/Layout.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 424021c0b9..0d6d7cd7d5 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/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
@@ -170,7 +168,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="component layout layout--{typeClass}"
-  use:styleable={$component.styles}
   class:desktop={!mobile}
   class:mobile={!!mobile}
   data-id={screenId}
@@ -286,7 +283,7 @@
       class="main-wrapper"
       on:click={() => {
         if ($builderStore.inBuilder) {
-          builderStore.actions.selectComponent($builderStore.screen._id)
+          builderStore.actions.selectComponent(screenId)
         }
       }}
     >

From 0d6a69e8887086368d3fb97bf28189e953728e4e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 4 Apr 2024 09:29:21 +0100
Subject: [PATCH 10/12] Bump account portal

---
 packages/account-portal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/account-portal b/packages/account-portal
index 011fa3c175..532c4db35c 160000
--- a/packages/account-portal
+++ b/packages/account-portal
@@ -1 +1 @@
-Subproject commit 011fa3c175ae0a1bbbb0f6e1341ba0154bca5c76
+Subproject commit 532c4db35cecd346b5c24f0b89ab7b397a122a36

From f83e6a2e1216141d0260df78c3063d144d2210f9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 4 Apr 2024 16:21:17 +0100
Subject: [PATCH 11/12] Add ability to paywall component settings

---
 .../design/settings/componentSettings.js      | 12 ++++++++--
 .../settings/controls/PaywalledSetting.svelte | 23 +++++++++++++++++++
 .../Component/ComponentSettingsSection.svelte |  1 +
 packages/client/manifest.json                 |  1 +
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index f2d1520878..3b26031ca1 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/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
diff --git a/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte b/packages/builder/src/components/design/settings/controls/PaywalledSetting.svelte
new file mode 100644
index 0000000000..c28bc49e3d
--- /dev/null
+++ b/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>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
index c7f8094084..9ff2a764b7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
+++ b/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 || [],
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4ccc1cbd8d..6f8e450d6e 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4614,6 +4614,7 @@
         "type": "select",
         "label": "Auto-refresh",
         "key": "autoRefresh",
+        "license": "premium",
         "placeholder": "Never",
         "options": [
           {

From 4214b7e7f1a865454073f3cdb23875f630745671 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 4 Apr 2024 16:26:48 +0100
Subject: [PATCH 12/12] Paywall all auto-refresh settings

---
 packages/client/manifest.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6f8e450d6e..a056f59cc7 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5010,6 +5010,7 @@
         "type": "select",
         "label": "Auto-refresh",
         "key": "autoRefresh",
+        "license": "premium",
         "placeholder": "Never",
         "options": [
           {
@@ -5506,6 +5507,7 @@
             "type": "select",
             "label": "Auto-refresh",
             "key": "autoRefresh",
+            "license": "premium",
             "placeholder": "Never",
             "options": [
               {
@@ -5820,6 +5822,7 @@
         "type": "select",
         "label": "Auto-refresh",
         "key": "autoRefresh",
+        "license": "premium",
         "placeholder": "Never",
         "options": [
           {
@@ -6025,6 +6028,7 @@
         "type": "select",
         "label": "Auto-refresh",
         "key": "autoRefresh",
+        "license": "premium",
         "placeholder": "Never",
         "options": [
           {
@@ -6649,6 +6653,7 @@
         "type": "select",
         "label": "Auto-refresh",
         "key": "autoRefresh",
+        "license": "premium",
         "placeholder": "Never",
         "options": [
           {