Automatically update old apps with new navigation settings based on old layouts

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 => {

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">

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>