From a4b6b3e1e3f3ddaeace00f4f76f88ec940ff602c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 27 Apr 2022 15:47:59 +0100
Subject: [PATCH] Add warning banner for old screens and allow updating screens
 to remove custom layouts

---
 packages/bbui/src/Banner/Banner.svelte        | 39 +++++++++++--------
 .../_components/ScreenSettingsPanel.svelte    | 18 +++++++++
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/bbui/src/Banner/Banner.svelte b/packages/bbui/src/Banner/Banner.svelte
index f41fb5f803..47103de742 100644
--- a/packages/bbui/src/Banner/Banner.svelte
+++ b/packages/bbui/src/Banner/Banner.svelte
@@ -8,6 +8,7 @@
   export let size = "S"
   export let extraButtonText
   export let extraButtonAction
+  export let showCloseButton = true
 
   let show = true
 
@@ -39,22 +40,24 @@
         </button>
       {/if}
     </div>
-    <div class="spectrum-Toast-buttons">
-      <button
-        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
-        on:click={clear}
-      >
-        <div class="spectrum-ClearButton-fill">
-          <svg
-            class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-css-icon-Cross100" />
-          </svg>
-        </div>
-      </button>
-    </div>
+    {#if showCloseButton}
+      <div class="spectrum-Toast-buttons">
+        <button
+          class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
+          on:click={clear}
+        >
+          <div class="spectrum-ClearButton-fill">
+            <svg
+              class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Cross100" />
+            </svg>
+          </div>
+        </button>
+      </div>
+    {/if}
   </div>
 {/if}
 
@@ -63,4 +66,8 @@
     pointer-events: all;
     width: 100%;
   }
+  .spectrum-Button {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    margin: 8px 0 4px 0;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
index f6d47e888d..7764ea04bf 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte
@@ -8,6 +8,7 @@
     Button,
     Toggle,
     Checkbox,
+    Banner,
     notifications,
   } from "@budibase/bbui"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@@ -128,6 +129,13 @@
       },
     },
   ]
+
+  const removeCustomLayout = async () => {
+    let screen = get(selectedScreen)
+    screen.layoutId = null
+    screen.showNavigation = true
+    await store.actions.screens.save(screen)
+  }
 </script>
 
 <SettingsPanel
@@ -135,6 +143,16 @@
   icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
 >
   <Layout gap="S" paddingX="L" paddingY="XL">
+    {#if $selectedScreen.layoutId}
+      <Banner
+        type="warning"
+        extraButtonText="Update"
+        extraButtonAction={removeCustomLayout}
+        showCloseButton={false}
+      >
+        This screen uses a custom layout, which is deprecated
+      </Banner>
+    {/if}
     {#each screenSettings as setting (setting.key)}
       <PropertyControl
         control={setting.control}