From 8b4e464e8a9f388f31e3d86a3c4809cb68efdf8f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 2 Mar 2022 19:52:10 +0000
Subject: [PATCH] Allow bulk deleting all screens under a route

---
 .../ComponentDropdownMenu.svelte              |  0
 .../ComponentTree.svelte                      |  2 +-
 .../LayoutDropdownMenu.svelte                 |  2 +-
 .../PathDropdownMenu.svelte                   | 78 +++++++++++++++++++
 .../ComponentNavigationTree/PathTree.svelte   |  5 +-
 .../ScreenDropdownMenu.svelte                 |  2 +-
 6 files changed, 85 insertions(+), 4 deletions(-)
 rename packages/builder/src/components/design/NavigationPanel/{ => ComponentNavigationTree}/ComponentDropdownMenu.svelte (100%)
 create mode 100644 packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte

diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
similarity index 100%
rename from packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
rename to packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
index c5dfd63cf9..d0095b2c0d 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@@ -1,7 +1,7 @@
 <script>
   import { store } from "builderStore"
   import { DropEffect, DropPosition } from "./dragDropStore"
-  import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
+  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { capitalise } from "helpers"
   import { notifications } from "@budibase/bbui"
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
index 4aa6696659..a947d2095f 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@@ -51,7 +51,7 @@
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
   body={"Are you sure you wish to delete this layout?"}
-  okText="Delete Layout"
+  okText="Delete layout"
   onOk={deleteLayout}
 />
 
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte
new file mode 100644
index 0000000000..5d9eb2568c
--- /dev/null
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte
@@ -0,0 +1,78 @@
+<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);
+  }
+</style>
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
index 841d8970f4..ee6de5c797 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@@ -8,6 +8,7 @@
   import instantiateStore from "./dragDropStore"
   import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
+  import PathDropdownMenu from "./PathDropdownMenu.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import { get } from "svelte/store"
 
@@ -73,7 +74,9 @@
     opened={routeOpened}
     {border}
     withArrow={route.subpaths}
-  />
+  >
+    <PathDropdownMenu screens={allScreens} {path} />
+  </NavItem>
 
   {#if routeOpened}
     {#each filteredScreens as screen (screen.id)}
diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
index 33e4d89dda..7d0b88c235 100644
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -76,7 +76,7 @@
   bind:this={confirmDeleteDialog}
   title="Confirm Deletion"
   body={"Are you sure you wish to delete this screen?"}
-  okText="Delete Screen"
+  okText="Delete screen"
   onOk={deleteScreen}
 />