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,6 +40,7 @@
         </button>
       {/if}
     </div>
+    {#if showCloseButton}
       <div class="spectrum-Toast-buttons">
         <button
           class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
@@ -55,6 +57,7 @@
           </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}