Remove all traces of legacy custom layouts

packages/backend-core/src/events/backfill.ts

@@ -6,7 +6,7 @@
   AutomationCreatedEvent,
   AutomationStepCreatedEvent,
   DatasourceCreatedEvent,
   LayoutCreatedEvent,
   QueryCreatedEvent,
   RoleCreatedEvent,
   ScreenCreatedEvent,
@@ -105,9 +105,6 @@
   [Event.DATASOURCE_CREATED]: (properties: DatasourceCreatedEvent) => {
     return properties.datasourceId
   },
-  [Event.LAYOUT_CREATED]: (properties: LayoutCreatedEvent) => {
-    return properties.layoutId
-  },
   [Event.QUERY_CREATED]: (properties: QueryCreatedEvent) => {
     return properties.queryId
   },

packages/backend-core/src/events/publishers/index.ts

@@ -6,7 +6,6 @@ export { default as datasource } from "./datasource"
 export { default as email } from "./email"
 export { default as ai } from "./ai"
 export { default as license } from "./license"
-export { default as layout } from "./layout"
 export { default as org } from "./org"
 export { default as query } from "./query"
 export { default as role } from "./role"

packages/backend-core/src/events/publishers/screen.ts

@@ -8,7 +8,6 @@ import {
 
 async function created(screen: Screen, timestamp?: string | number) {
   const properties: ScreenCreatedEvent = {
-    layoutId: screen.layoutId,
     screenId: screen._id as string,
     roleId: screen.routing.roleId,
     audited: {
@@ -20,7 +19,6 @@ async function created(screen: Screen, timestamp?: string | number) {
 
 async function deleted(screen: Screen) {
   const properties: ScreenDeletedEvent = {
-    layoutId: screen.layoutId,
     screenId: screen._id as string,
     roleId: screen.routing.roleId,
     audited: {

packages/backend-core/tests/core/utilities/mocks/events.ts

@@ -47,9 +47,6 @@ beforeAll(async () => {
   jest.spyOn(events.email, "SMTPCreated")
   jest.spyOn(events.email, "SMTPUpdated")
 
-  jest.spyOn(events.layout, "created")
-  jest.spyOn(events.layout, "deleted")
-
   jest.spyOn(events.org, "nameUpdated")
   jest.spyOn(events.org, "logoUpdated")
   jest.spyOn(events.org, "platformURLUpdated")

packages/builder/src/dataBinding.js

@@ -12,7 +12,6 @@ import {
   componentStore,
   screenStore,
   appStore,
-  layoutStore,
   queries as queriesStores,
   tables as tablesStore,
   roles as rolesStore,
@@ -1239,13 +1238,9 @@ export const getAllStateVariables = () => {
   return Array.from(bindingSet)
 }
 
+// Get all component containing assets
 export const getAllAssets = () => {
-  // Get all component containing assets
-  let allAssets = []
-  allAssets = allAssets.concat(get(layoutStore).layouts || [])
-  allAssets = allAssets.concat(get(screenStore).screens || [])
-
-  return allAssets
+  return get(screenStore).screens || []
 }
 
 /**

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte

@@ -4,7 +4,7 @@
     Helpers,
     Input,
     Checkbox,
     Banner,
     Select,
     notifications,
   } from "@budibase/bbui"
@@ -72,7 +72,6 @@
         props: {
           options: ["Extra small", "Small", "Medium", "Large", "Max"],
           placeholder: "Default",
-          disabled: !!screen.layoutId,
         },
       },
       {
@@ -149,22 +148,8 @@
       notifications.error("Error saving screen settings")
     }
   }
-
-  const removeCustomLayout = async () => {
-    return screenStore.removeCustomLayout(get(selectedScreen))
-  }
 </script>
 
-{#if $selectedScreen.layoutId}
-  <Banner
-    type="warning"
-    extraButtonText="Detach custom layout"
-    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}

packages/builder/src/stores/builder/index.js

@@ -1,4 +1,3 @@
-import { layoutStore } from "./layouts.js"
 import { appStore } from "./app.js"
 import { componentStore, selectedComponent } from "./components"
 import { navigationStore } from "./navigation.js"
@@ -34,7 +33,6 @@ import { appPublished } from "./published"
 
 export {
   componentTreeNodesStore,
-  layoutStore,
   appStore,
   componentStore,
   navigationStore,
@@ -74,7 +72,6 @@ export const reset = () => {
   builderStore.reset()
   screenStore.reset()
   componentStore.reset()
-  layoutStore.reset()
   navigationStore.reset()
   rowActions.reset()
 }
@@ -109,7 +106,6 @@ export const initialise = async pkg => {
   themeStore.syncAppTheme(application)
   snippets.syncMetadata(application)
   screenStore.syncAppScreens(pkg)
-  layoutStore.syncAppLayouts(pkg)
   resetBuilderHistory()
   await refreshBuilderData()
 }

packages/builder/src/stores/builder/screens.js

@@ -4,7 +4,6 @@ import { Helpers } from "@budibase/bbui"
 import { RoleUtils, Utils } from "@budibase/frontend-core"
 import { findAllMatchingComponents } from "helpers/components"
 import {
-  layoutStore,
   appStore,
   componentStore,
   navigationStore,
@@ -35,7 +34,6 @@ export class ScreenStore extends BudiStore {
     this.syncScreenData = this.syncScreenData.bind(this)
     this.updateSetting = this.updateSetting.bind(this)
     this.sequentialScreenPatch = this.sequentialScreenPatch.bind(this)
-    this.removeCustomLayout = this.removeCustomLayout.bind(this)
 
     this.history = createHistoryStore({
       getDoc: id => get(this.store).screens?.find(screen => screen._id === id),
@@ -436,18 +434,6 @@ export class ScreenStore extends BudiStore {
     }
   }
 
-  // Move to layouts store
-  async removeCustomLayout(screen) {
-    // Pull relevant settings from old layout, if required
-    const layout = get(layoutStore).layouts.find(x => x._id === screen.layoutId)
-    const patchFn = screen => {
-      screen.layoutId = null
-      screen.showNavigation = layout?.props.navigation !== "None"
-      screen.width = layout?.props.width || "Large"
-    }
-    await this.patch(patchFn, screen._id)
-  }
-
   /**
    * Parse the entire screen component tree and ensure settings are valid
    * and up-to-date. Ensures stability after a product update.

packages/builder/src/stores/builder/tests/screens.test.js

@@ -19,7 +19,6 @@ const COMP_PREFIX = "@budibase/standard-components"
 vi.mock("stores/builder", async () => {
   const mockAppStore = writable()
   const mockComponentStore = writable()
-  const mockLayoutStore = writable()
 
   const componentStore = {
     getDefinition: vi.fn(),
@@ -42,10 +41,6 @@ vi.mock("stores/builder", async () => {
     componentStore,
     appStore,
     navigationStore,
-    layoutStore: {
-      update: mockLayoutStore.update,
-      subscribe: mockComponentStore.subscribe,
-    },
   }
 })
 

packages/client/src/components/ClientApp.svelte

@@ -5,7 +5,7 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
   import { Constants, CookieUtils } from "@budibase/frontend-core"
   import { getThemeClassNames } from "@budibase/shared-core"
-  import Component from "./Component.svelte"
+  import Router from "./Router.svelte"
   import SDK from "sdk"
   import {
     featuresStore,
@@ -206,20 +206,6 @@
                                 </Body>
                               </Layout>
                             </div>
-                          {:else if !$screenStore.activeLayout}
-                            <div class="error">
-                              <Layout justifyItems="center" gap="S">
-                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                                {@html ErrorSVG}
-                                <Heading size="L">
-                                  Something went wrong rendering your app
-                                </Heading>
-                                <Body size="S">
-                                  Get in touch with support if this issue
-                                  persists
-                                </Body>
-                              </Layout>
-                            </div>
                           {:else if embedNoScreens}
                             <div class="error">
                               <Layout justifyItems="center" gap="S">
@@ -232,12 +218,7 @@
                             </div>
                           {:else}
                             <CustomThemeWrapper>
-                              {#key $screenStore.activeLayout._id}
-                                <Component
-                                  isLayout
-                                  instance={$screenStore.activeLayout.props}
-                                />
-                              {/key}
+                              <Router />
 
                               <!-- Layers on top of app -->
                               <NotificationDisplay />

packages/client/src/components/Component.svelte

@@ -43,7 +43,6 @@
 
   export let instance = {}
   export let parent = null
-  export let isLayout = false
   export let isRoot = false
   export let isBlock = false
 
@@ -158,7 +157,6 @@
   $: draggable =
     !inDragPath &&
     interactive &&
-    !isLayout &&
     !isRoot &&
     !isBlock &&
     definition?.draggable !== false

packages/client/src/components/app/Layout.svelte → packages/client/src/components/Layout.svelte

@@ -3,7 +3,7 @@
   import { writable } from "svelte/store"
   import { Heading, Icon, clickOutside } from "@budibase/bbui"
   import { Constants } from "@budibase/frontend-core"
-  import NavItem from "./NavItem.svelte"
+  import NavItem from "./app/NavItem.svelte"
 
   const sdk = getContext("sdk")
   const {
@@ -18,17 +18,13 @@
   const context = getContext("context")
   const navStateStore = writable({})
 
-  // Legacy props which must remain unchanged for backwards compatibility
   export let title
   export let hideTitle = false
   export let logoUrl
   export let hideLogo = false
   export let navigation = "Top"
   export let sticky = false
   export let links
-  export let width = "Large"
-
-  // New props from new design UI
   export let navBackground
   export let navTextColor
   export let navWidth
@@ -65,8 +61,8 @@
 
   $: enrichedNavItems = enrichNavItems(links, $roleStore)
   $: typeClass = NavigationClasses[navigation] || NavigationClasses.None
   $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
   $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
   $: navStyle = getNavStyle(
     navBackground,
     navTextColor,