Add warning banner for old screens and allow updating screens to remove custom layouts

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>

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}