From 840ff254d14f54646f5032e9040a525dc2142386 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 27 Apr 2022 12:30:35 +0100
Subject: [PATCH] Allow client library to render new screen structure without
 layouts

---
 .../store/screenTemplates/utils/Screen.js     |  2 +-
 .../devtools/DevToolsStatsTab.svelte          |  2 -
 packages/client/src/stores/builder.js         |  4 +-
 packages/client/src/stores/screens.js         | 54 ++++++++++++++++---
 4 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
index 272f627163..c2072f3ced 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
@@ -5,7 +5,7 @@ export class Screen extends BaseStructure {
   constructor() {
     super(true)
     this._json = {
-      layoutId: "layout_private_master",
+      showNavigation: true,
       props: {
         _id: Helpers.uuid(),
         _component: "@budibase/standard-components/container",
diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
index ab029db815..b20b9fafa0 100644
--- a/packages/client/src/components/devtools/DevToolsStatsTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
@@ -14,8 +14,6 @@
       value={`${$appStore.clientLoadTime} ms`}
     />
   {/if}
-  <DevToolsStat label="App layouts" value={$screenStore.layouts?.length || 0} />
-  <DevToolsStat label="Active layout" value={$screenStore.activeLayout?.name} />
   <DevToolsStat label="App screens" value={$screenStore.screens?.length || 0} />
   <DevToolsStat
     label="Active screen"
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 6d57ce7762..817944eaa9 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -9,7 +9,6 @@ const dispatchEvent = (type, data = {}) => {
 const createBuilderStore = () => {
   const initialState = {
     inBuilder: false,
-    layout: null,
     screen: null,
     selectedComponentId: null,
     editMode: false,
@@ -20,6 +19,9 @@ const createBuilderStore = () => {
     customTheme: null,
     previewDevice: "desktop",
     isDragging: false,
+
+    // Legacy - allow the builder to specify a layout
+    layout: null,
   }
   const store = writable(initialState)
   const actions = {
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 9635f2b5a0..2b19ac9aa9 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -13,31 +13,69 @@ const createScreenStore = () => {
     [appStore, routeStore, builderStore],
     ([$appStore, $routeStore, $builderStore]) => {
       let activeLayout, activeScreen
-      let layouts, screens
+      let screens
+
       if ($builderStore.inBuilder) {
         // Use builder defined definitions if inside the builder preview
-        activeLayout = $builderStore.layout
         activeScreen = $builderStore.screen
-        layouts = [activeLayout]
         screens = [activeScreen]
-      } else {
-        activeLayout = { props: { _component: "screenslot" } }
 
+        // Legacy - allow the builder to specify a layout
+        if ($builderStore.layout) {
+          activeLayout = $builderStore.layout
+        }
+      } else {
         // Find the correct screen by matching the current route
         screens = $appStore.screens
-        layouts = $appStore.layouts
         if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
           )
         }
+
+        // Legacy - find the custom layout for the selected screen
         if (activeScreen) {
-          activeLayout = layouts.find(
+          const screenLayout = $appStore.layouts?.find(
             layout => layout._id === activeScreen.layoutId
           )
+          if (screenLayout) {
+            activeLayout = screenLayout
+          }
         }
       }
-      return { layouts, screens, activeLayout, activeScreen }
+
+      // If we don't have a legacy custom layout, build a layout structure
+      // from the screen navigation settings
+      if (!activeLayout) {
+        activeLayout = {
+          _id: "layout",
+          props: {
+            _component: "@budibase/standard-components/layout",
+            _children: [
+              {
+                _component: "screenslot",
+                _id: "screenslot",
+                _styles: {
+                  normal: {
+                    flex: "1 1 auto",
+                    display: "flex",
+                    "flex-direction": "column",
+                    "justify-content": "flex-start",
+                    "align-items": "stretch",
+                  },
+                },
+              },
+            ],
+            // If this is a legacy screen without any navigation settings,
+            // fall back to just showing the app title
+            ...(activeScreen.navigation || {
+              title: $appStore.application?.name,
+            }),
+          },
+        }
+      }
+
+      return { screens, activeLayout, activeScreen }
     }
   )