From 71aedf4d9d9737e84f09dd21dfeaead473d192ba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 13 May 2022 11:23:27 +0100
Subject: [PATCH] Allow deleting built in layouts and hide layouts tab when no
 layouts exist

---
 .../design/[screenId]/_layout.svelte          | 14 ++++----
 .../_components/LayoutDropdownMenu.svelte     |  2 +-
 .../_components/LayoutListPanel.svelte        | 36 ++++++++++---------
 .../design/[screenId]/layouts/_layout.svelte  | 12 +++++++
 .../design/[screenId]/layouts/index.svelte    |  3 +-
 packages/server/src/api/controllers/layout.js | 22 +++++-------
 6 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
index 79e4fecf52..82c8e628de 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
@@ -47,12 +47,14 @@
         active={$isActive("./navigation")}
         on:click={() => $goto("./navigation")}
       />
-      <IconSideNavItem
-        icon="Experience"
-        tooltip="Layouts"
-        active={$isActive("./layouts")}
-        on:click={() => $goto("./layouts")}
-      />
+      {#if $store.layouts?.length}
+        <IconSideNavItem
+          icon="Experience"
+          tooltip="Layouts"
+          active={$isActive("./layouts")}
+          on:click={() => $goto("./layouts")}
+        />
+      {/if}
     </IconSideNav>
   </div>
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
index e5eb1bedd6..cba68f899d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
@@ -13,7 +13,7 @@
       await store.actions.layouts.delete(layout)
       notifications.success("Layout deleted successfully")
     } catch (err) {
-      notifications.error("Error deleting layout")
+      notifications.error(err?.message || "Error deleting layout")
     }
   }
 </script>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
index b481280c28..fd38f08ceb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@@ -1,25 +1,29 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { Layout } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
   import { store } from "builderStore"
   import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
 </script>
 
 <Panel title="Layouts" borderRight>
-  <Layout paddingY="XL" paddingX="">
-    <div>
-      {#each $store.layouts as layout (layout._id)}
-        <NavItem
-          icon="Experience"
-          indentLevel={0}
-          selected={$store.selectedLayoutId === layout._id}
-          text={layout.name}
-          on:click={() => ($store.selectedLayoutId = layout._id)}
-        >
-          <LayoutDropdownMenu {layout} />
-        </NavItem>
-      {/each}
-    </div>
-  </Layout>
+  <div class="layouts">
+    {#each $store.layouts as layout (layout._id)}
+      <NavItem
+        icon="Experience"
+        indentLevel={0}
+        selected={$store.selectedLayoutId === layout._id}
+        text={layout.name}
+        on:click={() => ($store.selectedLayoutId = layout._id)}
+      >
+        <LayoutDropdownMenu {layout} />
+      </NavItem>
+    {/each}
+  </div>
 </Panel>
+
+<style>
+  .layouts {
+    margin-top: var(--spacing-xl);
+    overflow: hidden;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
new file mode 100644
index 0000000000..1333c6afe3
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { store } from "builderStore"
+  import { redirect } from "@roxi/routify"
+
+  $: {
+    if (!$store.layouts?.length) {
+      $redirect("../")
+    }
+  }
+</script>
+
+<slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
index a730949499..09d45f8fde 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
@@ -6,8 +6,7 @@
   onMount(() => {
     if ($store.layouts?.length) {
       $redirect(`./${$store.layouts[0]._id}`)
-    } else {
-      $redirect("../")
     }
+    // The redirection when no layouts exist is handled by the routify layout
   })
 </script>
diff --git a/packages/server/src/api/controllers/layout.js b/packages/server/src/api/controllers/layout.js
index a92eec424a..826922a047 100644
--- a/packages/server/src/api/controllers/layout.js
+++ b/packages/server/src/api/controllers/layout.js
@@ -30,19 +30,15 @@ exports.destroy = async function (ctx) {
   const layoutId = ctx.params.layoutId,
     layoutRev = ctx.params.layoutRev
 
-  if (Object.values(BASE_LAYOUT_PROP_IDS).includes(layoutId)) {
-    ctx.throw(400, "Cannot delete a built-in layout")
-  } else {
-    const layoutsUsedByScreens = (
-      await db.allDocs(
-        getScreenParams(null, {
-          include_docs: true,
-        })
-      )
-    ).rows.map(element => element.doc.layoutId)
-    if (layoutsUsedByScreens.includes(layoutId)) {
-      ctx.throw(400, "Cannot delete a layout that's being used by a screen")
-    }
+  const layoutsUsedByScreens = (
+    await db.allDocs(
+      getScreenParams(null, {
+        include_docs: true,
+      })
+    )
+  ).rows.map(element => element.doc.layoutId)
+  if (layoutsUsedByScreens.includes(layoutId)) {
+    ctx.throw(400, "Cannot delete a layout that's being used by a screen")
   }
 
   await db.remove(layoutId, layoutRev)