Add warning to navigation section when using an old screen with a custom layout, and allow upgrading

4 years ago · b488293e92
3 changed files with 39 additions and 16 deletions
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -1,6 +1,12 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { currentAsset, mainLayout, selectedComponent } from "builderStore"
+import {
+  currentAsset,
+  mainLayout,
+  selectedComponent,
+  selectedScreen,
+  store,
+} from "builderStore"
 import {
  datasources,
  integrations,
@ -280,6 +286,18 @@ export const getFrontendStore = () => {
        promises.push(store.actions.screens.save(screen))
        return await Promise.all(promises)
      },
+      removeCustomLayout: async screen => {
+        // Pull relevant settings from old layout, if required
+        const layout = get(store).layouts.find(x => x._id === screen.layoutId)
+        screen.layoutId = null
+        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)
+      },
    },
    preview: {
      saveSelected: async () => {
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
@ -1,10 +1,27 @@
 <script>
  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
+  import { Body, Layout, Banner } from "@budibase/bbui"
+  import { selectedScreen, store } from "builderStore"
+  import { get } from "svelte/store"
+
+  const removeCustomLayout = async () => {
+    return store.actions.screens.removeCustomLayout(get(selectedScreen))
+  }
 </script>

 <Panel borderLeft title="Navigation" icon="InfoOutline">
  <Layout paddingX="L" paddingY="XL" gap="S">
+    {#if $selectedScreen.layoutId}
+      <Banner
+        type="warning"
+        extraButtonText="Detach custom layout"
+        extraButtonAction={removeCustomLayout}
+        showCloseButton={false}
+      >
+        You can't preview your navigation settings using this screen as it uses
+        a custom layout, which is deprecated
+      </Banner>
+    {/if}
    <Body size="S">
      Your navigation is configured for all the screens within your app.
    </Body>
--- 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
@ -148,19 +148,7 @@
  ]

  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
-    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)
+    return store.actions.screens.removeCustomLayout(get(selectedScreen))
  }
 </script>

@ -173,7 +161,7 @@
    {#if $selectedScreen.layoutId}
      <Banner
        type="warning"
-        extraButtonText="Update"
+        extraButtonText="Detach custom layout"
        extraButtonAction={removeCustomLayout}
        showCloseButton={false}
      >