From 4d7666fea23a3cd61637650c9f0462340fac89d0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 May 2022 13:10:05 +0100
Subject: [PATCH] Delete old design UI code

---
 .../_old/ComponentNavigationTree.svelte       |  74 -------
 .../design/_old/FrontendNavigatePane.svelte   | 198 ------------------
 .../src/components/design/_old/Layout.svelte  |  36 ----
 .../_old/NavigationSelectionModal.svelte      |  93 --------
 .../design/_old/NewLayoutModal.svelte         |  20 --
 .../design/_old/PathDropdownMenu.svelte       |  82 --------
 .../components/design/_old/PathTree.svelte    |  59 ------
 .../PropertiesPanel/PropertiesPanel.svelte    |  63 ------
 .../ScreenSettingsSection.svelte              | 111 ----------
 .../_old/[assetType]/[asset]/_fallback.svelte |   0
 .../design/_old/[assetType]/_layout.svelte    | 194 -----------------
 .../design/_old/[assetType]/index.svelte      |  59 ------
 12 files changed, 989 deletions(-)
 delete mode 100644 packages/builder/src/components/design/_old/ComponentNavigationTree.svelte
 delete mode 100644 packages/builder/src/components/design/_old/FrontendNavigatePane.svelte
 delete mode 100644 packages/builder/src/components/design/_old/Layout.svelte
 delete mode 100644 packages/builder/src/components/design/_old/NavigationSelectionModal.svelte
 delete mode 100644 packages/builder/src/components/design/_old/NewLayoutModal.svelte
 delete mode 100644 packages/builder/src/components/design/_old/PathDropdownMenu.svelte
 delete mode 100644 packages/builder/src/components/design/_old/PathTree.svelte
 delete mode 100644 packages/builder/src/components/design/_old/PropertiesPanel/PropertiesPanel.svelte
 delete mode 100644 packages/builder/src/components/design/_old/PropertiesPanel/ScreenSettingsSection.svelte
 delete mode 100644 packages/builder/src/components/design/_old/[assetType]/[asset]/_fallback.svelte
 delete mode 100644 packages/builder/src/components/design/_old/[assetType]/_layout.svelte
 delete mode 100644 packages/builder/src/components/design/_old/[assetType]/index.svelte

diff --git a/packages/builder/src/components/design/_old/ComponentNavigationTree.svelte b/packages/builder/src/components/design/_old/ComponentNavigationTree.svelte
deleted file mode 100644
index ee00e9ba98..0000000000
--- a/packages/builder/src/components/design/_old/ComponentNavigationTree.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script>
-  import { store } from "builderStore"
-  import PathTree from "./PathTree.svelte"
-
-  let routes = {}
-  let paths = []
-
-  $: allRoutes = $store.routes
-  $: selectedScreenId = $store.selectedScreenId
-  $: updatePaths(allRoutes, $selectedAccessRole, selectedScreenId)
-
-  const updatePaths = (allRoutes, selectedRoleId, selectedScreenId) => {
-    const sortedPaths = Object.keys(allRoutes || {}).sort()
-
-    let found = false
-    let firstValidScreenId
-    let filteredRoutes = {}
-    let screenRoleId
-
-    // Filter all routes down to only those which match the current role
-    sortedPaths.forEach(path => {
-      const config = allRoutes[path]
-      Object.entries(config.subpaths).forEach(([subpath, pathConfig]) => {
-        Object.entries(pathConfig.screens).forEach(([roleId, screenId]) => {
-          if (screenId === selectedScreenId) {
-            screenRoleId = roleId
-            found = roleId === selectedRoleId
-          }
-          if (roleId === selectedRoleId) {
-            if (!firstValidScreenId) {
-              firstValidScreenId = screenId
-            }
-            if (!filteredRoutes[path]) {
-              filteredRoutes[path] = { subpaths: {} }
-            }
-            filteredRoutes[path].subpaths[subpath] = {
-              screens: {
-                [selectedRoleId]: screenId,
-              },
-            }
-          }
-        })
-      })
-    })
-    routes = { ...filteredRoutes }
-    paths = Object.keys(routes || {}).sort()
-
-    // Select the correct role for the current screen ID
-    if (!found && screenRoleId) {
-      selectedAccessRole.set(screenRoleId)
-      if (screenRoleId !== selectedRoleId) {
-        updatePaths(allRoutes, screenRoleId, selectedScreenId)
-      }
-    }
-
-    // If the selected screen isn't in this filtered list, select the first one
-    else if (!found && firstValidScreenId) {
-      store.actions.screens.select(firstValidScreenId)
-    }
-  }
-</script>
-
-<div class="root" class:has-screens={!!paths?.length}>
-  {#each paths as path, idx (path)}
-    <PathTree border={idx > 0} {path} route={routes[path]} />
-  {/each}
-  {#if !paths.length}{/if}
-</div>
-
-<style>
-  .root.has-screens {
-    min-width: max-content;
-  }
-</style>
diff --git a/packages/builder/src/components/design/_old/FrontendNavigatePane.svelte b/packages/builder/src/components/design/_old/FrontendNavigatePane.svelte
deleted file mode 100644
index 6e319f06a0..0000000000
--- a/packages/builder/src/components/design/_old/FrontendNavigatePane.svelte
+++ /dev/null
@@ -1,198 +0,0 @@
-<script>
-  import { onMount, setContext } from "svelte"
-  import { goto, params } from "@roxi/routify"
-  import { store, selectedAccessRole, screenSearchString } from "builderStore"
-  import { roles } from "stores/backend"
-  import ComponentNavigationTree from "components/design/navigation/ComponentNavigationTree/index.svelte"
-  import Layout from "components/design/navigation/Layout.svelte"
-  import NewLayoutModal from "components/design/navigation/NewLayoutModal.svelte"
-  import {
-    Icon,
-    Modal,
-    Select,
-    Search,
-    Tabs,
-    Tab,
-    Layout as BBUILayout,
-    notifications,
-  } from "@budibase/bbui"
-
-  export let showModal
-
-  let scrollRef
-
-  const scrollTo = bounds => {
-    if (!bounds) {
-      return
-    }
-
-    const sidebarWidth = 259
-    const navItemHeight = 32
-    const { scrollLeft, scrollTop, offsetHeight } = scrollRef
-
-    let scrollBounds = scrollRef.getBoundingClientRect()
-    let newOffsets = {}
-
-    // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft + 20
-    if (offsetX > sidebarWidth) {
-      newOffsets.left = offsetX - sidebarWidth
-    } else {
-      newOffsets.left = 0
-    }
-    if (newOffsets.left === scrollLeft) {
-      delete newOffsets.left
-    }
-
-    // Calculate top offset
-    const offsetY = bounds.top - scrollBounds?.top + scrollTop
-    if (offsetY > scrollTop + offsetHeight - 2 * navItemHeight) {
-      newOffsets.top = offsetY - offsetHeight + 2 * navItemHeight
-    } else if (offsetY < scrollTop + navItemHeight) {
-      newOffsets.top = offsetY - navItemHeight
-    } else {
-      delete newOffsets.top
-    }
-
-    // Skip if offset is unchanged
-    if (newOffsets.left == null && newOffsets.top == null) {
-      return
-    }
-
-    // Smoothly scroll to the offset
-    scrollRef.scroll({
-      ...newOffsets,
-      behavior: "smooth",
-    })
-  }
-
-  setContext("scroll", {
-    scrollTo,
-  })
-
-  const tabs = [
-    {
-      title: "Screens",
-      key: "screen",
-    },
-    {
-      title: "Layouts",
-      key: "layout",
-    },
-  ]
-  let newLayoutModal
-  $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
-
-  const navigate = ({ detail }) => {
-    const { key } = tabs.find(t => t.title === detail)
-    $goto(`../${key}`)
-  }
-
-  const updateAccessRole = event => {
-    const role = event.detail
-
-    // Select a valid screen with this new role - otherwise we'll not be
-    // able to change role at all because ComponentNavigationTree will kick us
-    // back the current role again because the same screen ID is still selected
-    const firstValidScreenId = $store.screens.find(
-      screen => screen.routing.roleId === role
-    )?._id
-    if (firstValidScreenId) {
-      store.actions.screens.select(firstValidScreenId)
-    }
-
-    // Otherwise clear the selected screen ID so that the first new valid screen
-    // can be selected by ComponentNavigationTree
-    else {
-      store.update(state => {
-        state.selectedScreenId = null
-        return state
-      })
-    }
-
-    selectedAccessRole.set(role)
-  }
-
-  onMount(async () => {
-    try {
-      await store.actions.routing.fetch()
-    } catch (error) {
-      notifications.error("Error fetching routes")
-    }
-  })
-</script>
-
-<div class="title">
-  <Tabs {selected} on:select={navigate}>
-    <Tab title="Screens">
-      <div class="tab-content-padding">
-        <BBUILayout noPadding gap="XS" />
-      </div>
-    </Tab>
-    <Tab title="Layouts">
-      <div class="tab-content-padding">
-        <div
-          class="nav-items-container nav-items-container--layouts"
-          bind:this={scrollRef}
-        >
-          <div class="layouts-container">
-            {#each $store.layouts as layout, idx (layout._id)}
-              <Layout {layout} border={idx > 0} />
-            {/each}
-          </div>
-        </div>
-        <Modal bind:this={newLayoutModal}>
-          <NewLayoutModal />
-        </Modal>
-      </div>
-    </Tab>
-  </Tabs>
-  <div class="add-button">
-    <Icon
-      hoverable
-      name="AddCircle"
-      on:click={selected === "Layouts" ? newLayoutModal.show() : showModal()}
-    />
-  </div>
-</div>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    flex: 1 1 auto;
-  }
-  .title :global(.spectrum-Tabs-content),
-  .title :global(.spectrum-Tabs-content > div),
-  .title :global(.spectrum-Tabs-content > div > div) {
-    height: 100%;
-  }
-
-  .add-button {
-    position: absolute;
-    top: var(--spacing-l);
-    right: var(--spacing-xl);
-  }
-
-  .tab-content-padding {
-    padding: 0 var(--spacing-xl);
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: var(--spacing-xl);
-  }
-
-  .nav-items-container--layouts {
-    border-top: none;
-    margin-top: calc(-1 * var(--spectrum-global-dimension-static-size-150));
-  }
-
-  .layouts-container {
-    min-width: max-content;
-  }
-</style>
diff --git a/packages/builder/src/components/design/_old/Layout.svelte b/packages/builder/src/components/design/_old/Layout.svelte
deleted file mode 100644
index d3c89fc9e5..0000000000
--- a/packages/builder/src/components/design/_old/Layout.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
-  import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
-  import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
-  import NavItem from "components/common/NavItem.svelte"
-  import { store, selectedComponent } from "builderStore"
-
-  export let layout
-  export let border
-
-  const dragDropStore = initDragDropStore()
-
-  const selectLayout = () => {
-    store.actions.layouts.select(layout._id)
-  }
-</script>
-
-<NavItem
-  {border}
-  icon="ClassicGridView"
-  text={layout.name}
-  withArrow
-  selected={$store.selectedLayoutId === layout._id}
-  opened={$store.selectedLayoutId === layout._id}
-  on:click={selectLayout}
->
-  <LayoutDropdownMenu {layout} />
-</NavItem>
-
-{#if $store.selectedLayoutId === layout._id && layout.props?._children}
-  <ComponentTree
-    components={layout.props._children}
-    currentComponent={$selectedComponent}
-    {dragDropStore}
-  />
-{/if}
diff --git a/packages/builder/src/components/design/_old/NavigationSelectionModal.svelte b/packages/builder/src/components/design/_old/NavigationSelectionModal.svelte
deleted file mode 100644
index 52a8e91451..0000000000
--- a/packages/builder/src/components/design/_old/NavigationSelectionModal.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-  import { ModalContent, Body, Detail } from "@budibase/bbui"
-
-  export let selectedScreens
-  export let chooseModal
-  export let save
-  let selectedNav
-  let createdScreens = []
-  $: blankSelected = selectedScreens.length === 1
-</script>
-
-<ModalContent
-  title="Select navigation"
-  cancelText="Back"
-  onCancel={() => (blankSelected ? chooseModal(1) : chooseModal(0))}
-  size="M"
-  onConfirm={() => {
-    save(createdScreens)
-  }}
-  disabled={!selectedNav}
->
-  <Body size="S"
-    >Please select your preferred layout for the new application:</Body
-  >
-
-  <div class="wrapper">
-    <div
-      data-cy="left-nav"
-      on:click={() => (selectedNav = "Left")}
-      class:unselected={selectedNav && selectedNav !== "Left"}
-    >
-      <div class="box">
-        <div class="side-nav" />
-      </div>
-      <div><Detail>Side Nav</Detail></div>
-    </div>
-    <div
-      on:click={() => (selectedNav = "Top")}
-      class:unselected={selectedNav && selectedNav !== "Top"}
-    >
-      <div class="box">
-        <div class="top-nav" />
-      </div>
-      <div><Detail>Top Nav</Detail></div>
-    </div>
-    <div
-      on:click={() => (selectedNav = "None")}
-      class:unselected={selectedNav && selectedNav !== "None"}
-    >
-      <div class="box" />
-      <div><Detail>No Nav</Detail></div>
-    </div>
-  </div>
-</ModalContent>
-
-<style>
-  .side-nav {
-    float: left;
-    background: #d3d3d3 0% 0% no-repeat padding-box;
-    border-radius: 2px 0px 0px 2px;
-    height: 100%;
-    width: 10%;
-  }
-
-  .top-nav {
-    background: #d3d3d3 0% 0% no-repeat padding-box;
-    vertical-align: top;
-    width: 100%;
-    height: 15%;
-  }
-  .box {
-    display: inline-block;
-    background: #eaeaea 0% 0% no-repeat padding-box;
-    border: 1px solid #d3d3d3;
-    border-radius: 2px;
-    opacity: 1;
-    width: 120px;
-    height: 70px;
-    margin-right: 20px;
-  }
-
-  .wrapper {
-    display: flex;
-    padding-top: 4%;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    margin-right: 5%;
-  }
-  .unselected {
-    opacity: 0.3;
-  }
-</style>
diff --git a/packages/builder/src/components/design/_old/NewLayoutModal.svelte b/packages/builder/src/components/design/_old/NewLayoutModal.svelte
deleted file mode 100644
index d7288fbe23..0000000000
--- a/packages/builder/src/components/design/_old/NewLayoutModal.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { notifications } from "@budibase/bbui"
-  import { store } from "builderStore"
-  import { Input, ModalContent } from "@budibase/bbui"
-
-  let name = ""
-
-  async function save() {
-    try {
-      await store.actions.layouts.save({ name })
-      notifications.success(`Layout ${name} created successfully`)
-    } catch (error) {
-      notifications.error("Error creating layout")
-    }
-  }
-</script>
-
-<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
-  <Input thin label="Name" bind:value={name} />
-</ModalContent>
diff --git a/packages/builder/src/components/design/_old/PathDropdownMenu.svelte b/packages/builder/src/components/design/_old/PathDropdownMenu.svelte
deleted file mode 100644
index 6de656b6b5..0000000000
--- a/packages/builder/src/components/design/_old/PathDropdownMenu.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-  import { store } from "builderStore"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import {
-    ActionMenu,
-    MenuItem,
-    Icon,
-    Layout,
-    notifications,
-  } from "@budibase/bbui"
-  import { get } from "svelte/store"
-
-  export let path
-  export let screens
-
-  let confirmDeleteDialog
-
-  const deleteScreens = async () => {
-    if (!screens?.length) {
-      return
-    }
-    try {
-      for (let { id } of screens) {
-        // We have to fetch the screen to be deleted immediately before deleting
-        // as otherwise we're very likely to 409
-        const screen = get(store).screens.find(screen => screen._id === id)
-        if (!screen) {
-          continue
-        }
-        await store.actions.screens.delete(screen)
-      }
-      notifications.success("Screens deleted successfully")
-      $goto("../")
-    } catch (error) {
-      notifications.error("Error deleting screens")
-    }
-  }
-</script>
-
-<ActionMenu>
-  <div slot="control" class="icon">
-    <Icon size="S" hoverable name="MoreSmallList" />
-  </div>
-  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
-    Delete all screens
-  </MenuItem>
-</ActionMenu>
-
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  okText="Delete screens"
-  onOk={deleteScreens}
->
-  <Layout noPadding gap="S">
-    <div>
-      Are you sure you want to delete all screens under the <b>{path}</b> route?
-    </div>
-    <div>The following screens will be deleted:</div>
-    <div class="to-delete">
-      {#each screens as screen}
-        <div>{screen.route}</div>
-      {/each}
-    </div>
-  </Layout>
-</ConfirmDialog>
-
-<style>
-  .to-delete {
-    font-weight: bold;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    padding-left: var(--spacing-xl);
-  }
-  .icon {
-    display: grid;
-    place-items: center;
-  }
-</style>
diff --git a/packages/builder/src/components/design/_old/PathTree.svelte b/packages/builder/src/components/design/_old/PathTree.svelte
deleted file mode 100644
index 110338e733..0000000000
--- a/packages/builder/src/components/design/_old/PathTree.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  import { store, selectedComponent, currentAsset } from "builderStore"
-  import instantiateStore from "./dragDropStore"
-  import ComponentTree from "./ComponentTree.svelte"
-  import PathDropdownMenu from "./PathDropdownMenu.svelte"
-  import { get } from "svelte/store"
-
-  const ROUTE_NAME_MAP = {
-    "/": {
-      BASIC: "Home",
-      PUBLIC: "Home",
-      ADMIN: "Home",
-      POWER: "Home",
-    },
-  }
-
-  const dragDropStore = instantiateStore()
-
-  export let route
-  export let path
-  export let indent
-  export let border
-
-  let routeManuallyOpened = false
-
-  $: selectedScreen = $currentAsset
-  $: allScreens = getAllScreens(route)
-  $: hasSearchMatch = $screenSearchString && filteredScreens.length > 0
-  $: noSearchMatch = $screenSearchString && !filteredScreens.length
-  $: routeSelected =
-    route.subpaths[selectedScreen?.routing?.route] !== undefined
-  $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
-
-  const changeScreen = screenId => {
-    store.actions.screens.select(screenId)
-  }
-
-  const toggleManuallyOpened = () => {
-    if (get(screenSearchString)) {
-      return
-    }
-    routeManuallyOpened = !routeManuallyOpened
-  }
-</script>
-
-{#if !noSearchMatch}
-  <NavItem
-    icon="FolderOutline"
-    text={path}
-    on:click={toggleManuallyOpened}
-    opened={routeOpened}
-    {border}
-    withArrow={route.subpaths}
-  >
-    <PathDropdownMenu screens={allScreens} {path} />
-  </NavItem>
-
-  {#if routeOpened}{/if}
-{/if}
diff --git a/packages/builder/src/components/design/_old/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/_old/PropertiesPanel/PropertiesPanel.svelte
deleted file mode 100644
index df91a87456..0000000000
--- a/packages/builder/src/components/design/_old/PropertiesPanel/PropertiesPanel.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-  import { store, selectedComponent, currentAsset } from "builderStore"
-  import { Tabs, Tab } from "@budibase/bbui"
-  import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
-  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
-  import DesignSection from "./DesignSection.svelte"
-  import CustomStylesSection from "./CustomStylesSection.svelte"
-  import ConditionalUISection from "./ConditionalUISection.svelte"
-  import {
-    getBindableProperties,
-    getComponentBindableProperties,
-  } from "builderStore/dataBinding"
-
-  $: componentInstance = $selectedComponent
-  $: componentDefinition = store.actions.components.getDefinition(
-    $selectedComponent?._component
-  )
-  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
-  $: componentBindings = getComponentBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-</script>
-
-<Tabs selected="Settings" noPadding>
-  <Tab title="Settings">
-    <div class="container">
-      {#key componentInstance?._id}
-        <ScreenSettingsSection
-          {componentInstance}
-          {componentDefinition}
-          {bindings}
-        />
-        <ComponentSettingsSection
-          {componentInstance}
-          {componentDefinition}
-          {bindings}
-          {componentBindings}
-        />
-        <DesignSection {componentInstance} {componentDefinition} {bindings} />
-        <CustomStylesSection
-          {componentInstance}
-          {componentDefinition}
-          {bindings}
-        />
-        <ConditionalUISection
-          {componentInstance}
-          {componentDefinition}
-          {bindings}
-        />
-      {/key}
-    </div>
-  </Tab>
-</Tabs>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-</style>
diff --git a/packages/builder/src/components/design/_old/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/_old/PropertiesPanel/ScreenSettingsSection.svelte
deleted file mode 100644
index c8371e66ab..0000000000
--- a/packages/builder/src/components/design/_old/PropertiesPanel/ScreenSettingsSection.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script>
-  import { get } from "svelte/store"
-  import { get as deepGet, setWith } from "lodash"
-  import { Input, DetailSummary, notifications } from "@budibase/bbui"
-  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
-  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
-  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
-  import { currentAsset, store } from "builderStore"
-  import { FrontendTypes } from "constants"
-  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { store, selectedAccessRole } from "builderStore"
-
-  export let componentInstance
-  export let bindings
-
-  let errors = {}
-
-  const routeTaken = url => {
-    const roleId = get(selectedAccessRole) || "BASIC"
-    return get(store).screens.some(
-      screen =>
-        screen.routing.route.toLowerCase() === url.toLowerCase() &&
-        screen.routing.roleId === roleId
-    )
-  }
-
-  const roleTaken = roleId => {
-    const url = get(currentAsset)?.routing.route
-    return get(store).screens.some(
-      screen =>
-        screen.routing.route.toLowerCase() === url.toLowerCase() &&
-        screen.routing.roleId === roleId
-    )
-  }
-
-  const setAssetProps = (name, value, parser, validate) => {
-    if (parser) {
-      value = parser(value)
-    }
-    if (validate) {
-      const error = validate(value)
-      errors = {
-        ...errors,
-        [name]: error,
-      }
-      if (error) {
-        return
-      }
-    } else {
-      errors = {
-        ...errors,
-        [name]: null,
-      }
-    }
-
-    const selectedAsset = get(currentAsset)
-    store.update(state => {
-      if (
-        name === "_instanceName" &&
-        state.currentFrontEndType === FrontendTypes.SCREEN
-      ) {
-        selectedAsset.props._instanceName = value
-      } else {
-        setWith(selectedAsset, name.split("."), value, Object)
-      }
-      return state
-    })
-
-    try {
-      store.actions.preview.saveSelected()
-    } catch (error) {
-      notifications.error("Error saving settings")
-    }
-  }
-
-  const screenSettings = [
-    {
-      key: "routing.route",
-      label: "Route",
-      control: Input,
-      parser: val => {
-        if (!val.startsWith("/")) {
-          val = "/" + val
-        }
-        return sanitizeUrl(val)
-      },
-      validate: val => {
-        const exisingValue = get(currentAsset)?.routing.route
-        if (val !== exisingValue && routeTaken(val)) {
-          return "That URL is already in use for this role"
-        }
-        return null
-      },
-    },
-    {
-      key: "routing.roleId",
-      label: "Access",
-      control: RoleSelect,
-      validate: val => {
-        const exisingValue = get(currentAsset)?.routing.roleId
-        if (val !== exisingValue && roleTaken(val)) {
-          return "That role is already in use for this URL"
-        }
-        return null
-      },
-    },
-    { key: "layoutId", label: "Layout", control: LayoutSelect },
-  ]
-</script>
-
-{#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}{/if}
diff --git a/packages/builder/src/components/design/_old/[assetType]/[asset]/_fallback.svelte b/packages/builder/src/components/design/_old/[assetType]/[asset]/_fallback.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/design/_old/[assetType]/_layout.svelte b/packages/builder/src/components/design/_old/[assetType]/_layout.svelte
deleted file mode 100644
index 6132eaa32c..0000000000
--- a/packages/builder/src/components/design/_old/[assetType]/_layout.svelte
+++ /dev/null
@@ -1,194 +0,0 @@
-<script>
-  import { store, currentAsset, selectedComponent } from "builderStore"
-  import { Detail, Layout, Button, Icon } from "@budibase/bbui"
-
-  import CurrentItemPreview from "components/design/AppPreview"
-  import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte"
-  import ComponentSelectionList from "components/design/AppPreview/ComponentSelectionList.svelte"
-  import FrontendNavigatePane from "components/design/navigation/FrontendNavigatePane.svelte"
-  import { goto, leftover, params } from "@roxi/routify"
-  import { FrontendTypes } from "constants"
-  import { findComponent, findComponentPath } from "builderStore/componentUtils"
-  import { get } from "svelte/store"
-  import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
-  import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
-  import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte"
-  import ScreenWizard from "components/design/navigation/ScreenWizard.svelte"
-
-  // Cache previous values so we don't update the URL more than necessary
-  let previousType
-  let previousAsset
-  let previousComponentId
-  let hydrationComplete = false
-
-  // Manage the layout modal flow from here
-  let showModal
-
-  // Hydrate state from URL params
-  $: hydrateStateFromURL($params, $leftover)
-
-  // Keep URL in sync with state
-  $: updateURLFromState(
-    $store.currentFrontEndType,
-    $currentAsset,
-    $store.selectedComponentId
-  )
-
-  const hydrateStateFromURL = (params, leftover) => {
-    if (hydrationComplete) {
-      return
-    } else {
-      hydrationComplete = true
-    }
-
-    // Do nothing if no asset type, as that means we've left the page
-    if (!params.assetType) {
-      return
-    }
-
-    const state = get(store)
-    const selectedAsset = get(currentAsset)
-
-    // Hydrate asset type
-    let assetType = params.assetType
-    if (![FrontendTypes.LAYOUT, FrontendTypes.SCREEN].includes(assetType)) {
-      assetType = FrontendTypes.SCREEN
-    }
-    if (assetType !== state.currentFrontEndType) {
-      store.update(state => {
-        state.currentFrontEndType = assetType
-        return state
-      })
-    }
-
-    // Hydrate asset
-    const assetId = decodeURI(params.asset)
-    let asset
-    if (assetId) {
-      let assetList
-      let actions
-
-      // Determine screens or layouts based on the URL
-      if (assetType === FrontendTypes.SCREEN) {
-        assetList = get(allScreens)
-        actions = store.actions.screens
-      } else {
-        assetList = state.layouts
-        actions = store.actions.layouts
-      }
-
-      // Find and select the current asset
-      asset = assetList.find(asset => asset._id === assetId)
-      if (asset && asset._id !== selectedAsset?._id) {
-        actions.select(assetId)
-      }
-    }
-
-    // Hydrate component ID if one is present in the URL
-    const selectedComponentId = leftover.split("/").pop()
-    if (asset && selectedComponentId) {
-      const component = findComponent(asset.props, selectedComponentId)
-      if (component && component._id !== state.selectedComponentId) {
-        store.actions.components.select(component)
-      }
-    }
-  }
-
-  // Updates the route params in the URL to the specified values
-  const updateURLFromState = (assetType, asset, componentId) => {
-    // Check we have different params than last invocation
-    if (
-      assetType === previousType &&
-      asset === previousAsset &&
-      componentId === previousComponentId
-    ) {
-      return
-    } else {
-      previousType = assetType
-      previousAsset = asset
-      previousComponentId = componentId
-    }
-
-    // Extract current URL params
-    const currentParams = get(params)
-    const currentLeftover = get(leftover)
-    const paramAssetType = currentParams.assetType
-    const paramAssetId = currentParams.asset
-    const paramComponentId = currentLeftover.split("/").pop()
-
-    // Only update params if the params actually changed
-    if (
-      assetType !== paramAssetType ||
-      asset?._id !== paramAssetId ||
-      componentId !== paramComponentId
-    ) {
-      // Build and navigate to a valid URL
-      let url = "../"
-      if ([FrontendTypes.SCREEN, FrontendTypes.LAYOUT].includes(assetType)) {
-        url += `${assetType}`
-        if (asset?._id) {
-          url += `/${asset._id}`
-          if (componentId) {
-            const componentPath = findComponentPath(asset?.props, componentId)
-            const componentURL = componentPath
-              .slice(1)
-              .map(comp => comp._id)
-              .join("/")
-            url += `/${componentURL}`
-          }
-        }
-      }
-      $goto(url)
-    }
-  }
-</script>
-
-<!-- routify:options index=1 -->
-<div class="root">
-  <div class="ui-nav">
-    <FrontendNavigatePane {showModal} />
-  </div>
-
-  <div class="preview-pane" />
-
-  {#if $selectedComponent != null}
-    <div class="components-pane">
-      <PropertiesPanel />
-    </div>
-  {/if}
-</div>
-
-<slot />
-
-<ScreenWizard bind:showModal />
-
-<style>
-  .root {
-    display: grid;
-    grid-template-columns: 260px 1fr 260px;
-    align-items: stretch;
-    flex: 1 1 auto;
-    height: 0;
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--background);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-l);
-    border-right: var(--border-light);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--background);
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    border-left: var(--border-light);
-    overflow-x: hidden;
-  }
-</style>
diff --git a/packages/builder/src/components/design/_old/[assetType]/index.svelte b/packages/builder/src/components/design/_old/[assetType]/index.svelte
deleted file mode 100644
index 444835de22..0000000000
--- a/packages/builder/src/components/design/_old/[assetType]/index.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  import { get } from "svelte/store"
-  import { store, allScreens, selectedAccessRole } from "builderStore"
-  import { FrontendTypes } from "constants"
-  import { params } from "@roxi/routify"
-
-  $: selectValidAsset($params.assetType)
-
-  // If we ever land on this index page we want to correctly update state
-  // to select a valid asset. The layout page will in turn update the URL
-  // to reflect state.
-  const selectValidAsset = assetType => {
-    let id
-    const state = get(store)
-    const screens = get(allScreens)
-    const role = get(selectedAccessRole)
-
-    // Get ID or first correct asset type and select it
-    if (assetType === FrontendTypes.LAYOUT) {
-      if (
-        state.selectedLayoutId &&
-        state.layouts.find(layout => layout._id === state.selectedLayoutId)
-      ) {
-        id = state.selectedLayoutId
-      } else {
-        id = state.layouts[0]?._id
-      }
-      if (id) {
-        store.actions.layouts.select(id)
-      }
-    } else if (assetType === FrontendTypes.SCREEN) {
-      if (
-        state.selectedScreenId &&
-        screens.find(screen => screen._id === state.selectedScreenId)
-      ) {
-        id = state.selectedScreenId
-      } else {
-        // Select the first screen matching the selected role ID
-        const filteredScreens = screens.filter(screen => {
-          return screen.routing?.roleId === role
-        })
-        id = filteredScreens[0]?._id
-      }
-      if (id) {
-        store.actions.screens.select(id)
-      }
-    }
-
-    // If we didn't find a valid asset, just update the preview type
-    if (!id) {
-      store.update(state => {
-        state.currentFrontEndType = assetType
-        return state
-      })
-    }
-  }
-</script>
-
-<!-- routify:options index=false -->