From 47ca9250036ddb6c04d52492af978a68dc71b8ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 11:24:47 +0100
Subject: [PATCH 1/3] Add global data bindings for mobile and tablet device
 sizes

---
 .../builder/src/builderStore/dataBinding.js   | 29 +++++++++-
 .../src/builderStore/store/frontend.js        |  1 +
 .../common/bindings/BindingPanel.svelte       |  2 +-
 .../client/src/components/ClientApp.svelte    | 58 ++++++++-----------
 .../components/DeviceBindingsProvider.svelte  | 33 +++++++++++
 .../components/UserBindingsProvider.svelte    | 19 ++++++
 packages/standard-components/manifest.json    |  3 +-
 7 files changed, 109 insertions(+), 36 deletions(-)
 create mode 100644 packages/client/src/components/DeviceBindingsProvider.svelte
 create mode 100644 packages/client/src/components/UserBindingsProvider.svelte

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 6d7cad1cd0..dc995d611c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -17,7 +17,13 @@ export const getBindableProperties = (asset, componentId) => {
   const contextBindings = getContextBindings(asset, componentId)
   const userBindings = getUserBindings()
   const urlBindings = getUrlBindings(asset)
-  return [...contextBindings, ...userBindings, ...urlBindings]
+  const deviceBindings = getDeviceBindings()
+  return [
+    ...deviceBindings,
+    ...urlBindings,
+    ...contextBindings,
+    ...userBindings,
+  ]
 }
 
 /**
@@ -221,6 +227,27 @@ const getUserBindings = () => {
   return bindings
 }
 
+/**
+ * Gets all device bindings that are globally available.
+ */
+const getDeviceBindings = () => {
+  let bindings = []
+  if (get(store).clientFeatures?.deviceAwareness) {
+    const safeDevice = makePropSafe("device")
+    bindings.push({
+      type: "context",
+      runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
+      readableBinding: `Device.Mobile`,
+    })
+    bindings.push({
+      type: "context",
+      runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
+      readableBinding: `Device.Tablet`,
+    })
+  }
+  return bindings
+}
+
 /**
  * Gets all bindable properties from URL parameters.
  */
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 3339ea07d6..1924ae07a2 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -35,6 +35,7 @@ const INITIAL_FRONTEND_STATE = {
   clientFeatures: {
     spectrumThemes: false,
     intelligentLoading: false,
+    deviceAwareness: false,
   },
   currentFrontEndType: "none",
   selectedScreenId: "",
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 6290bd2a3d..fdf708dc4e 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -38,7 +38,7 @@
       </section>
       {#if filteredColumns?.length}
         <section>
-          <div class="heading">Columns</div>
+          <div class="heading">Bindable Values</div>
           <ul>
             {#each filteredColumns as { readableBinding }}
               <li
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 1afcc4594d..11347821a9 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -5,7 +5,6 @@
   import NotificationDisplay from "./NotificationDisplay.svelte"
   import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
   import PeekScreenDisplay from "./PeekScreenDisplay.svelte"
-  import Provider from "./Provider.svelte"
   import SDK from "../sdk"
   import {
     createContextStore,
@@ -16,12 +15,13 @@
     builderStore,
     appStore,
   } from "../store"
-  import { TableNames, ActionTypes } from "../constants"
   import SettingsBar from "./preview/SettingsBar.svelte"
   import SelectionIndicator from "./preview/SelectionIndicator.svelte"
   import HoverIndicator from "./preview/HoverIndicator.svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "../../../builder/assets/error.svg"
+  import UserBindingsProvider from "./UserBindingsProvider.svelte"
+  import DeviceBindingsProvider from "./DeviceBindingsProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -41,16 +41,6 @@
     }
   })
 
-  // Register this as a refreshable datasource so that user changes cause
-  // the user object to be refreshed
-  $: actions = [
-    {
-      type: ActionTypes.RefreshDatasource,
-      callback: () => authStore.actions.fetchUser(),
-      metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
-    },
-  ]
-
   // Handle no matching route - this is likely a permission error
   $: {
     if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
@@ -93,30 +83,32 @@
         </Layout>
       </div>
     {:else if $screenStore.activeLayout}
-      <Provider key="user" data={$authStore} {actions}>
-        <div id="app-root" class:preview={$builderStore.inBuilder}>
-          {#key $screenStore.activeLayout._id}
-            <Component instance={$screenStore.activeLayout.props} />
+      <UserBindingsProvider>
+        <DeviceBindingsProvider>
+          <div id="app-root" class:preview={$builderStore.inBuilder}>
+            {#key $screenStore.activeLayout._id}
+              <Component instance={$screenStore.activeLayout.props} />
+            {/key}
+          </div>
+          <NotificationDisplay />
+          <ConfirmationDisplay />
+          <PeekScreenDisplay />
+          <!-- Key block needs to be outside the if statement or it breaks -->
+          {#key $builderStore.selectedComponentId}
+            {#if $builderStore.inBuilder}
+              <SettingsBar />
+            {/if}
           {/key}
-        </div>
-        <NotificationDisplay />
-        <ConfirmationDisplay />
-        <PeekScreenDisplay />
-        <!-- Key block needs to be outside the if statement or it breaks -->
-        {#key $builderStore.selectedComponentId}
+          <!--
+              We don't want to key these by componentID as they control their own
+              re-mounting to avoid flashes.
+            -->
           {#if $builderStore.inBuilder}
-            <SettingsBar />
+            <SelectionIndicator />
+            <HoverIndicator />
           {/if}
-        {/key}
-        <!--
-            We don't want to key these by componentID as they control their own
-            re-mounting to avoid flashes.
-          -->
-        {#if $builderStore.inBuilder}
-          <SelectionIndicator />
-          <HoverIndicator />
-        {/if}
-      </Provider>
+        </DeviceBindingsProvider>
+      </UserBindingsProvider>
     {/if}
   </div>
 {/if}
diff --git a/packages/client/src/components/DeviceBindingsProvider.svelte b/packages/client/src/components/DeviceBindingsProvider.svelte
new file mode 100644
index 0000000000..81a0f45d02
--- /dev/null
+++ b/packages/client/src/components/DeviceBindingsProvider.svelte
@@ -0,0 +1,33 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { onMount } from "svelte"
+
+  const tabletBreakpoint = 768
+  const desktopBreakpoint = 1280
+
+  let screenWidth = window.innerWidth
+  const resizeObserver = new ResizeObserver(entries => {
+    if (entries?.[0]) {
+      screenWidth = entries[0].contentRect?.width
+    }
+  })
+  $: mobile = screenWidth && screenWidth < tabletBreakpoint
+  $: tablet =
+    screenWidth &&
+    screenWidth >= tabletBreakpoint &&
+    screenWidth < desktopBreakpoint
+  $: data = { mobile, tablet }
+
+  onMount(() => {
+    const doc = document.documentElement
+    resizeObserver.observe(doc)
+
+    return () => {
+      resizeObserver.unobserve(doc)
+    }
+  })
+</script>
+
+<Provider key="device" {data}>
+  <slot />
+</Provider>
diff --git a/packages/client/src/components/UserBindingsProvider.svelte b/packages/client/src/components/UserBindingsProvider.svelte
new file mode 100644
index 0000000000..23774eb43d
--- /dev/null
+++ b/packages/client/src/components/UserBindingsProvider.svelte
@@ -0,0 +1,19 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { authStore } from "../store"
+  import { ActionTypes, TableNames } from "../constants"
+
+  // Register this as a refreshable datasource so that user changes cause
+  // the user object to be refreshed
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => authStore.actions.fetchUser(),
+      metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
+    },
+  ]
+</script>
+
+<Provider key="user" data={$authStore} {actions}>
+  <slot />
+</Provider>
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index d1357d7301..bff602e469 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -1,7 +1,8 @@
 {
   "features": {
     "spectrumThemes": true,
-    "intelligentLoading": true
+    "intelligentLoading": true,
+    "deviceAwareness": true
   },
   "layout": {
     "name": "Layout",

From 473f18d510ea3db4f0679e5a9661f02f6e0b8659 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 11:34:11 +0100
Subject: [PATCH 2/3] Tidy up device bindings provider

---
 .../src/components/DeviceBindingsProvider.svelte | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/DeviceBindingsProvider.svelte b/packages/client/src/components/DeviceBindingsProvider.svelte
index 81a0f45d02..864068cd17 100644
--- a/packages/client/src/components/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/DeviceBindingsProvider.svelte
@@ -2,21 +2,19 @@
   import Provider from "./Provider.svelte"
   import { onMount } from "svelte"
 
+  let width = window.innerWidth
   const tabletBreakpoint = 768
   const desktopBreakpoint = 1280
-
-  let screenWidth = window.innerWidth
   const resizeObserver = new ResizeObserver(entries => {
     if (entries?.[0]) {
-      screenWidth = entries[0].contentRect?.width
+      width = entries[0].contentRect?.width
     }
   })
-  $: mobile = screenWidth && screenWidth < tabletBreakpoint
-  $: tablet =
-    screenWidth &&
-    screenWidth >= tabletBreakpoint &&
-    screenWidth < desktopBreakpoint
-  $: data = { mobile, tablet }
+
+  $: data = {
+    mobile: width && width < tabletBreakpoint,
+    tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
+  }
 
   onMount(() => {
     const doc = document.documentElement

From 3792cd80307bd3e5e9e77c334db970fde2b0a731 Mon Sep 17 00:00:00 2001
From: Budibase Staging Release Bot <>
Date: Fri, 13 Aug 2021 11:50:38 +0000
Subject: [PATCH 3/3] v0.9.105-alpha.7

---
 lerna.json                                |  2 +-
 packages/auth/package.json                |  2 +-
 packages/bbui/package.json                |  2 +-
 packages/builder/package.json             |  8 ++++----
 packages/cli/package.json                 |  2 +-
 packages/client/package.json              |  8 ++++----
 packages/server/package.json              | 10 +++++-----
 packages/standard-components/package.json |  4 ++--
 packages/string-templates/package.json    |  2 +-
 packages/worker/package.json              |  6 +++---
 10 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lerna.json b/lerna.json
index 041a478a09..51d6b5caea 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 7198d3c2a6..bd4a0a500f 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/auth",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "description": "Authentication middlewares for budibase builder and apps",
   "main": "src/index.js",
   "author": "Budibase",
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index b5a2f86db3..2040d38611 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
diff --git a/packages/builder/package.json b/packages/builder/package.json
index f5dabb25c3..1831cf2e78 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -65,10 +65,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.6",
-    "@budibase/client": "^0.9.105-alpha.6",
+    "@budibase/bbui": "^0.9.105-alpha.7",
+    "@budibase/client": "^0.9.105-alpha.7",
     "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index dfbfaf75b3..25350e4f7d 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "src/index.js",
   "bin": {
diff --git a/packages/client/package.json b/packages/client/package.json
index 02d37063ba..4b8c52f00e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -18,9 +18,9 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.6",
-    "@budibase/standard-components": "^0.9.105-alpha.6",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/bbui": "^0.9.105-alpha.7",
+    "@budibase/standard-components": "^0.9.105-alpha.7",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
diff --git a/packages/server/package.json b/packages/server/package.json
index a61cb2ed78..811cf99430 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "description": "Budibase Web Server",
   "main": "src/index.js",
   "repository": {
@@ -62,9 +62,9 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.6",
-    "@budibase/client": "^0.9.105-alpha.6",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/auth": "^0.9.105-alpha.7",
+    "@budibase/client": "^0.9.105-alpha.7",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
     "@elastic/elasticsearch": "7.10.0",
     "@koa/router": "8.0.0",
     "@sendgrid/mail": "7.1.1",
@@ -117,7 +117,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@budibase/standard-components": "^0.9.105-alpha.6",
+    "@budibase/standard-components": "^0.9.105-alpha.7",
     "@jest/test-sequencer": "^24.8.0",
     "@types/bull": "^3.15.1",
     "@types/jest": "^26.0.23",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index b5eab8893a..c201591e5b 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -29,11 +29,11 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "license": "MIT",
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
   "dependencies": {
-    "@budibase/bbui": "^0.9.105-alpha.6",
+    "@budibase/bbui": "^0.9.105-alpha.7",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
     "@spectrum-css/link": "^3.1.3",
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 66923fb03b..b7def2b1a0 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/worker/package.json b/packages/worker/package.json
index f08eb3ccf8..b69e31d3d0 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.9.105-alpha.6",
+  "version": "0.9.105-alpha.7",
   "description": "Budibase background service",
   "main": "src/index.js",
   "repository": {
@@ -23,8 +23,8 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@budibase/auth": "^0.9.105-alpha.6",
-    "@budibase/string-templates": "^0.9.105-alpha.6",
+    "@budibase/auth": "^0.9.105-alpha.7",
+    "@budibase/string-templates": "^0.9.105-alpha.7",
     "@koa/router": "^8.0.0",
     "@techpass/passport-openidconnect": "^0.3.0",
     "aws-sdk": "^2.811.0",