Add confirmation before bulk duplicating rows and loading spinner

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>

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>
 

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