From 8a8d835a1aa8a3634fb8f008059e520fd514bb4e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 21 Jun 2024 08:25:02 +0100
Subject: [PATCH] Add confirmation before bulk duplicating rows and loading
 spinner

---
 .../controls/BulkDuplicationHandler.svelte    | 53 +++++++++++++++++++
 .../src/components/grid/layout/Grid.svelte    |  4 ++
 .../grid/overlays/MenuOverlay.svelte          | 14 ++---
 3 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/controls/BulkDuplicationHandler.svelte

diff --git a/packages/frontend-core/src/components/grid/controls/BulkDuplicationHandler.svelte b/packages/frontend-core/src/components/grid/controls/BulkDuplicationHandler.svelte
new file mode 100644
index 0000000000..bc321fffde
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/BulkDuplicationHandler.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { Modal, ModalContent } from "@budibase/bbui"
+  import { getContext, onMount } from "svelte"
+  import { getCellID } from "../lib/utils"
+
+  const {
+    selectedRows,
+    rows,
+    subscribe,
+    focusedCellId,
+    stickyColumn,
+    columns,
+    menu,
+    selectedRowCount,
+  } = getContext("grid")
+
+  let modal
+
+  // Deletion callback when confirmed
+  const performDuplication = async () => {
+    menu.actions.close()
+    const rowsToDuplicate = Object.keys($selectedRows).map(id => {
+      return rows.actions.getRow(id)
+    })
+    const newRows = await rows.actions.bulkDuplicate(rowsToDuplicate)
+    if (newRows[0]) {
+      const column = $stickyColumn?.name || $columns[0].name
+      $focusedCellId = getCellID(newRows[0]._id, column)
+    }
+
+    // Ensure menu is closed, as we may have triggered this from there
+    menu.actions.close()
+  }
+
+  onMount(() => subscribe("request-bulk-duplicate", () => modal?.show()))
+</script>
+
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Duplicate rows"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={performDuplication}
+    size="M"
+  >
+    Are you sure you want to duplicate {$selectedRowCount}
+    row{$selectedRowCount === 1 ? "" : "s"}?
+    {#if $selectedRowCount >= 10}
+      <br /><br />
+      This may take a few seconds.
+    {/if}
+  </ModalContent>
+</Modal>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 8a82209162..8496aebd35 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -7,6 +7,7 @@
   import { createAPIClient } from "../../../api"
   import { attachStores } from "../stores"
   import BulkDeleteHandler from "../controls/BulkDeleteHandler.svelte"
+  import BulkDuplicationHandler from "../controls/BulkDuplicationHandler.svelte"
   import GridBody from "./GridBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
@@ -212,6 +213,9 @@
   {#if $config.canDeleteRows}
     <BulkDeleteHandler />
   {/if}
+  {#if $config.canAddRows}
+    <BulkDuplicationHandler />
+  {/if}
   <KeyboardManager />
 </div>
 
diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
index 10bd974260..5535538cf0 100644
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
@@ -52,16 +52,8 @@
     }
   }
 
-  const bulkDuplicate = async () => {
-    menu.actions.close()
-    const rowsToDuplicate = Object.keys($selectedRows).map(id => {
-      return rows.actions.getRow(id)
-    })
-    const newRows = await rows.actions.bulkDuplicate(rowsToDuplicate)
-    if (newRows[0]) {
-      const column = $stickyColumn?.name || $columns[0].name
-      $focusedCellId = getCellID(newRows[0]._id, column)
-    }
+  const bulkDuplicate = () => {
+    dispatch("request-bulk-duplicate")
   }
 
   const copyToClipboard = async value => {
@@ -79,7 +71,7 @@
         {#if $menu.multiRowMode}
           <MenuItem
             icon="Duplicate"
-            disabled={!$config.canAddRows}
+            disabled={!$config.canAddRows || $selectedRowCount > 50}
             on:click={bulkDuplicate}
           >
             Duplicate {$selectedRowCount} rows