From 90436a01674357211e35ba22c7000d12937e4343 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 10 May 2022 16:20:28 +0100
Subject: [PATCH] Automatically update old apps with new navigation settings
 based on old layouts

---
 .../src/builderStore/store/frontend.js        | 30 +++++++++++++++++++
 .../design/[screenId]/navigation/index.svelte | 21 -------------
 .../_components/ScreenSettingsPanel.svelte    | 11 ++++++-
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index b7bf4bfd92..ff6385c1f4 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -27,6 +27,7 @@ import {
   makeComponentUnique,
 } from "../componentUtils"
 import { Helpers } from "@budibase/bbui"
+import { DefaultAppTheme, LAYOUT_NAMES } from "../../constants"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -110,6 +111,35 @@ export const getFrontendStore = () => {
       await integrations.init()
       await queries.init()
       await tables.init()
+
+      // Add navigation settings to old apps
+      if (!application.navigation) {
+        const layout = layouts.find(x => x._id === LAYOUT_NAMES.MASTER.PRIVATE)
+        const customTheme = application.customTheme
+        let navigationSettings = {
+          navigation: "Top",
+          title: application.name,
+          navWidth: "Large",
+          navBackground:
+            customTheme?.navBackground || DefaultAppTheme.navBackground,
+          navTextColor:
+            customTheme?.navTextColor || DefaultAppTheme.navTextColor,
+        }
+        if (layout) {
+          navigationSettings.hideLogo = layout.props.hideLogo
+          navigationSettings.hideTitle = layout.props.hideTitle
+          navigationSettings.title = layout.props.title || application.name
+          navigationSettings.logoUrl = layout.props.logoUrl
+          navigationSettings.links = layout.props.links
+          navigationSettings.navigation = layout.props.navigation || "Top"
+          navigationSettings.sticky = layout.props.sticky
+          navigationSettings.navWidth = layout.props.width || "Large"
+          if (navigationSettings.navigation === "None") {
+            navigationSettings.navigation = "Top"
+          }
+        }
+        await store.actions.navigation.save(navigationSettings)
+      }
     },
     theme: {
       save: async theme => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
index f3dc9017f4..625b29a435 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
@@ -14,7 +14,6 @@
   } from "@budibase/bbui"
   import NavigationLinksEditor from "./_components/NavigationLinksEditor.svelte"
   import { store } from "builderStore"
-  import { onMount } from "svelte"
   import { DefaultAppTheme } from "constants"
 
   const update = async (key, value) => {
@@ -26,26 +25,6 @@
       notifications.error("Error updating navigation settings")
     }
   }
-
-  onMount(() => {
-    // Add navigation settings to old apps
-    let changed = false
-    if (!$store.navigation.navigation) {
-      $store.navigation.navigation = "Top"
-      changed = true
-    }
-    if (!$store.navigation.hideTitle && !$store.navigation.title) {
-      $store.navigation.title = $store.name
-      changed = true
-    }
-    if (!$store.navigation.width) {
-      $store.navigation.width = "Large"
-      changed = true
-    }
-    if (changed) {
-      store.actions.navigation.save($store.navigation)
-    }
-  })
 </script>
 
 <NavigationPanel title="Navigation">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
index 74ff403aa7..c5c14ad402 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
@@ -149,8 +149,17 @@
 
   const removeCustomLayout = async () => {
     let screen = get(selectedScreen)
+
+    // Pull relevant settings from old layout, if required
+    const layout = get(store).layouts.find(x => x._id === screen.layoutId)
     screen.layoutId = null
-    screen.showNavigation = true
+    if (screen.showNavigation == null) {
+      screen.showNavigation = layout?.props.navigation !== "None"
+    }
+    if (screen.width == null) {
+      screen.width = layout?.props.width || "Large"
+    }
+
     await store.actions.screens.save(screen)
   }
 </script>