strapi-plugin-bulk-updater 1.2.9 → 1.2.11

package/dist/_chunks/{BulkUpdater-NpSxrH3b.mjs → BulkUpdater-B_COVQmo.mjs}

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { useState, useEffect, useMemo, useRef } from "react";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { Box, Flex, Typography, Button, SingleSelect, SingleSelectOption, Checkbox, Badge, Alert, Table, Thead, Tr, Th, Tbody, Td, Loader, TextInput, ComboboxOption, Field, Combobox } from "@strapi/design-system";
-import { ArrowClockwise, Download, Upload, Check, Play } from "@strapi/icons";
+import { ArrowClockwise, Download, Upload, Check, Eye, Play } from "@strapi/icons";
 import { V as ValidationRulesTab } from "./ValidationRulesTab-BGcqM9cN.mjs";
 function CsvManagerTab() {
   const { get, post } = useFetchClient();
@@ -1113,6 +1113,330 @@ function ProcessingDashboardModal({
     }
   );
 }
+const BulkUpdatePreviewModal = ({
+  isOpen,
+  onClose,
+  onProceed,
+  loading,
+  previewData,
+  attribute,
+  targetValueDisplay
+}) => {
+  const [filterTab, setFilterTab] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const filteredDiffs = useMemo(() => {
+    if (!previewData || !previewData.diffs) return [];
+    let items = previewData.diffs;
+    if (filterTab !== "all") {
+      items = items.filter((d) => d.status === filterTab);
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase().trim();
+      items = items.filter(
+        (d) => d.label.toLowerCase().includes(q) || d.documentId.toLowerCase().includes(q) || d.collectionName.toLowerCase().includes(q) || String(d.oldDisplay || "").toLowerCase().includes(q) || String(d.newDisplay || "").toLowerCase().includes(q)
+      );
+    }
+    return items;
+  }, [previewData, filterTab, searchQuery]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "rgba(20, 20, 30, 0.7)",
+        backdropFilter: "blur(3px)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999,
+        padding: 16,
+        boxSizing: "border-box"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          background: "neutral0",
+          hasRadius: true,
+          shadow: "popupShadow",
+          style: {
+            maxWidth: 1040,
+            width: "95%",
+            maxHeight: "calc(100vh - 48px)",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            position: "relative",
+            boxShadow: "0 24px 48px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.2)"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 5,
+                background: "neutral100",
+                style: {
+                  borderBottom: "1px solid rgba(120, 120, 150, 0.2)",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", wrap: "wrap", gap: 3, children: [
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", marginBottom: 1, children: [
+                      /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", children: "Pre-Update Change Preview" }),
+                      /* @__PURE__ */ jsxs(Badge, { backgroundColor: "primary100", textColor: "primary700", children: [
+                        "Target: ",
+                        attribute
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Inspect exact before & after values across target records before applying changes to the database." })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "New Value:" }),
+                    /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: targetValueDisplay || "(empty)" })
+                  ] })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 5,
+                style: {
+                  flex: "1 1 auto",
+                  minHeight: 0,
+                  overflowY: "auto",
+                  WebkitOverflowScrolling: "touch"
+                },
+                children: loading ? /* @__PURE__ */ jsx(Box, { padding: 8, style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx(Loader, { children: "Inspecting target records from database..." }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "semiBold", children: "Inspecting Target Records..." }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Computing proposed diffs and verifying against database schema." })
+                ] }) }) : !previewData ? /* @__PURE__ */ jsx(Box, { padding: 6, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No preview data available." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Flex, { gap: 3, marginBottom: 4, wrap: "wrap", children: [
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        padding: 3,
+                        background: "neutral100",
+                        hasRadius: true,
+                        style: { flex: 1, minWidth: 140, border: "1px solid rgba(120, 120, 150, 0.15)" },
+                        children: [
+                          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", display: "block", children: "TOTAL TARGETS" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", textColor: "neutral800", children: previewData.summary.total })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        padding: 3,
+                        background: "success100",
+                        hasRadius: true,
+                        style: { flex: 1, minWidth: 140, border: "1px solid #b7eb8f" },
+                        children: [
+                          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "success700", display: "block", children: "WILL UPDATE" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", textColor: "success700", children: previewData.summary.willUpdate })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        padding: 3,
+                        background: "neutral100",
+                        hasRadius: true,
+                        style: { flex: 1, minWidth: 140, border: "1px solid rgba(120, 120, 150, 0.15)" },
+                        children: [
+                          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", display: "block", children: "ALREADY UP-TO-DATE" }),
+                          /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", textColor: "neutral600", children: previewData.summary.unchanged })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        padding: 3,
+                        background: previewData.summary.skipped > 0 ? "warning100" : "neutral100",
+                        hasRadius: true,
+                        style: { flex: 1, minWidth: 140, border: "1px solid rgba(120, 120, 150, 0.15)" },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "sigma",
+                              textColor: previewData.summary.skipped > 0 ? "warning700" : "neutral600",
+                              display: "block",
+                              children: "WILL SKIP (NO FIELD)"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "beta",
+                              fontWeight: "bold",
+                              textColor: previewData.summary.skipped > 0 ? "warning700" : "neutral600",
+                              children: previewData.summary.skipped
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, wrap: "wrap", gap: 3, children: [
+                    /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: filterTab === "all" ? "default" : "tertiary",
+                          size: "S",
+                          onClick: () => setFilterTab("all"),
+                          children: [
+                            "All (",
+                            previewData.summary.total,
+                            ")"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: filterTab === "will_update" ? "default" : "tertiary",
+                          size: "S",
+                          onClick: () => setFilterTab("will_update"),
+                          children: [
+                            "Will Update (",
+                            previewData.summary.willUpdate,
+                            ")"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: filterTab === "unchanged" ? "default" : "tertiary",
+                          size: "S",
+                          onClick: () => setFilterTab("unchanged"),
+                          children: [
+                            "Unchanged (",
+                            previewData.summary.unchanged,
+                            ")"
+                          ]
+                        }
+                      ),
+                      previewData.summary.skipped > 0 && /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: filterTab === "will_skip" ? "default" : "tertiary",
+                          size: "S",
+                          onClick: () => setFilterTab("will_skip"),
+                          children: [
+                            "Skipped (",
+                            previewData.summary.skipped,
+                            ")"
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(Box, { style: { width: 260 }, children: /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        placeholder: "Search records or values...",
+                        size: "S",
+                        value: searchQuery,
+                        onChange: (e) => setSearchQuery(e.target.value)
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      hasRadius: true,
+                      style: {
+                        border: "1px solid #eaeaef",
+                        maxHeight: 380,
+                        overflowY: "auto",
+                        overflowX: "auto"
+                      },
+                      children: /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: filteredDiffs.length + 1, style: { width: "100%", minWidth: 780 }, children: [
+                        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+                          /* @__PURE__ */ jsx(Th, { style: { width: 150 }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "COLLECTION" }) }),
+                          /* @__PURE__ */ jsx(Th, { style: { minWidth: 200 }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "RECORD IDENTIFIER" }) }),
+                          /* @__PURE__ */ jsx(Th, { style: { minWidth: 180 }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "CURRENT VALUE (BEFORE)" }) }),
+                          /* @__PURE__ */ jsx(Th, { style: { minWidth: 180 }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "NEW VALUE (AFTER)" }) }),
+                          /* @__PURE__ */ jsx(Th, { style: { width: 140, textAlign: "right" }, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "IMPACT" }) })
+                        ] }) }),
+                        /* @__PURE__ */ jsx(Tbody, { children: filteredDiffs.length === 0 ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, style: { textAlign: "center", padding: "24px" }, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No records match the current filter or search criteria." }) }) }) : filteredDiffs.map((diff) => /* @__PURE__ */ jsxs(Tr, { children: [
+                          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral700", children: diff.collectionName }) }),
+                          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Box, { children: [
+                            /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", display: "block", children: diff.label }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: /* @__PURE__ */ jsx("code", { children: diff.documentId }) })
+                          ] }) }),
+                          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "omega",
+                              style: {
+                                color: diff.hasChange ? "#666687" : "#272635",
+                                textDecoration: diff.hasChange ? "line-through" : "none",
+                                wordBreak: "break-all"
+                              },
+                              children: diff.oldDisplay || "(empty)"
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Td, { children: diff.status === "will_skip" ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "warning700", children: "— Skipped (field absent) —" }) : diff.hasChange ? /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "success700", style: { wordBreak: "break-all" }, children: diff.newDisplay || "(empty)" }) : /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: diff.newDisplay || "(already matching)" }) }),
+                          /* @__PURE__ */ jsxs(Td, { style: { textAlign: "right" }, children: [
+                            diff.status === "will_update" && /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: "✓ Will Update" }),
+                            diff.status === "unchanged" && /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: "= Unchanged" }),
+                            diff.status === "will_skip" && /* @__PURE__ */ jsx(Badge, { backgroundColor: "warning100", textColor: "warning700", children: "⚠ Will Skip" })
+                          ] })
+                        ] }, `${diff.uid}-${diff.documentId}`)) })
+                      ] })
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: 4,
+                background: "neutral100",
+                style: {
+                  borderTop: "1px solid rgba(120, 120, 150, 0.2)",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+                  /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "M", onClick: onClose, children: "Close Preview" }),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      variant: "default",
+                      size: "M",
+                      startIcon: /* @__PURE__ */ jsx(Check, {}),
+                      onClick: () => {
+                        onClose();
+                        onProceed();
+                      },
+                      disabled: loading || !previewData || previewData.summary.total === 0,
+                      children: [
+                        "Proceed to Execute (",
+                        previewData?.summary.willUpdate || 0,
+                        " updates)"
+                      ]
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 function getNestedValue(obj, path) {
   if (!obj || !path) return void 0;
   if (!path.includes(".")) return obj[path];
@@ -1307,6 +1631,9 @@ const BulkUpdater = () => {
   const [dashboardBatchId, setDashboardBatchId] = useState("");
   const [dashboardJob, setDashboardJob] = useState(null);
   const [isSubmittingBatch, setIsSubmittingBatch] = useState(false);
+  const [showPreviewModal, setShowPreviewModal] = useState(false);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewData, setPreviewData] = useState(null);
   const MODELS_CACHE_KEY = "strapi_bulk_updater_models_cache";
   const LAST_ATTR_KEY = "strapi_bulk_updater_last_attr";
   const getInitialAttribute = () => {
@@ -1459,10 +1786,13 @@ const BulkUpdater = () => {
         }
       }
     } catch (err) {
-      toggleNotification({
-        type: "danger",
-        message: err.message || "Failed to load collections data"
-      });
+      const isAborted = err?.name === "AbortError" || err?.name === "CanceledError" || err?.code === "ERR_CANCELED" || err?.message?.includes("aborted") || err?.message?.includes("canceled");
+      if (!isAborted) {
+        toggleNotification({
+          type: "danger",
+          message: err?.message || "Failed to load collections data"
+        });
+      }
     } finally {
       setLoading(false);
     }
@@ -1503,13 +1833,17 @@ const BulkUpdater = () => {
       const res = await get(`/bulk-updater/collections/${colUid}/entries?${params.toString()}`);
       if (res.data && (res.data.success || res.data.entries !== void 0)) {
         const fetchedEntries = res.data.entries || [];
+        const pageNum = res.data.pagination?.page ?? targetPage ?? 1;
+        const pageSizeNum = res.data.pagination?.pageSize ?? size ?? defaultPageSize;
+        const totalNum = res.data.pagination?.total !== void 0 ? res.data.pagination.total : fetchedEntries.length;
+        const pageCountNum = res.data.pagination?.pageCount ?? Math.max(1, Math.ceil(totalNum / pageSizeNum));
         setCollectionPages((prev) => ({
           ...prev,
           [colUid]: {
-            page: res.data.pagination.page,
-            pageSize: res.data.pagination.pageSize,
-            total: res.data.pagination.total,
-            pageCount: res.data.pagination.pageCount,
+            page: pageNum,
+            pageSize: pageSizeNum,
+            total: totalNum,
+            pageCount: pageCountNum,
             entries: fetchedEntries,
             loading: false
           }
@@ -1526,10 +1860,13 @@ const BulkUpdater = () => {
         }
       }
     } catch (err) {
-      toggleNotification({
-        type: "danger",
-        message: `Failed to load entries for ${colUid}: ${err.message}`
-      });
+      const isAborted = err?.name === "AbortError" || err?.name === "CanceledError" || err?.code === "ERR_CANCELED" || err?.message?.includes("aborted") || err?.message?.includes("canceled");
+      if (!isAborted) {
+        toggleNotification({
+          type: "danger",
+          message: `Failed to load entries for ${colUid}: ${err?.message || "Network error"}`
+        });
+      }
       setCollectionPages((prev) => ({
         ...prev,
         [colUid]: {
@@ -1553,10 +1890,13 @@ const BulkUpdater = () => {
         }
       }
     } catch (err) {
-      toggleNotification({
-        type: "danger",
-        message: err.message || "Failed to fetch audit history."
-      });
+      const isAborted = err?.name === "AbortError" || err?.name === "CanceledError" || err?.code === "ERR_CANCELED" || err?.message?.includes("aborted") || err?.message?.includes("canceled");
+      if (!isAborted) {
+        toggleNotification({
+          type: "danger",
+          message: err?.message || "Failed to fetch audit history."
+        });
+      }
     } finally {
       setAuditLoading(false);
     }
@@ -1893,6 +2233,56 @@ const BulkUpdater = () => {
     }
     setShowConfirmModal(true);
   };
+  const handleOpenPreviewModal = async () => {
+    if (!selectedAttribute) {
+      toggleNotification({
+        type: "warning",
+        message: "Please select an attribute from the dropdown"
+      });
+      return;
+    }
+    const targets = [];
+    Object.keys(selectedEntries).forEach((key) => {
+      if (selectedEntries[key]) {
+        const parts = key.split(KEY_SEP);
+        if (parts.length === 2) {
+          targets.push({ uid: parts[0], documentId: parts[1] });
+        }
+      }
+    });
+    if (targets.length === 0) {
+      toggleNotification({
+        type: "warning",
+        message: "Please select at least one collection type or entry to preview"
+      });
+      return;
+    }
+    setShowPreviewModal(true);
+    setPreviewLoading(true);
+    try {
+      const res = await post("/bulk-updater/preview", {
+        attribute: selectedAttribute,
+        value: attributeValue,
+        selectedEntries: targets,
+        isRegex: useRegex,
+        regexPattern,
+        publishOnApproval
+      });
+      if (res.data && res.data.success) {
+        setPreviewData(res.data);
+      } else {
+        throw new Error(res.data?.error || "Failed to generate preview");
+      }
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: err.message || "Failed to fetch preview diffs"
+      });
+      setShowPreviewModal(false);
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
   const executeBatchWithMode = async (executionMode, forceImmediate = false) => {
     const targets = [];
     Object.keys(selectedEntries).forEach((key) => {
@@ -2481,22 +2871,40 @@ const BulkUpdater = () => {
                       onChange: (e) => setAttributeValue(e.target.value)
                     }
                   ) }),
-                  /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      startIcon: /* @__PURE__ */ jsx(Play, {}),
-                      variant: "default",
-                      size: "L",
-                      onClick: handleOpenConfirmModal,
-                      loading: updating,
-                      disabled: loading || totalSelectedCount === 0,
-                      children: [
-                        "Update Selected (",
-                        totalSelectedCount,
-                        ")"
-                      ]
-                    }
-                  ) })
+                  /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        startIcon: /* @__PURE__ */ jsx(Eye, {}),
+                        variant: "secondary",
+                        size: "L",
+                        onClick: handleOpenPreviewModal,
+                        loading: previewLoading,
+                        disabled: loading || totalSelectedCount === 0 || !selectedAttribute,
+                        children: [
+                          "Preview Changes (",
+                          totalSelectedCount,
+                          ")"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        startIcon: /* @__PURE__ */ jsx(Play, {}),
+                        variant: "default",
+                        size: "L",
+                        onClick: handleOpenConfirmModal,
+                        loading: updating,
+                        disabled: loading || totalSelectedCount === 0 || !selectedAttribute,
+                        children: [
+                          "Update Selected (",
+                          totalSelectedCount,
+                          ")"
+                        ]
+                      }
+                    )
+                  ] })
                 ] }),
                 /* @__PURE__ */ jsx(Box, { marginTop: 4, padding: 4, background: "neutral100", hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", wrap: "wrap", gap: 3, children: [
                   /* @__PURE__ */ jsx(Flex, { gap: 2, alignItems: "center", children: /* @__PURE__ */ jsx(
@@ -3673,6 +4081,22 @@ const BulkUpdater = () => {
                                   children: publishOnApproval ? "Publish Immediately" : "Keep as Draft"
                                 }
                               )
+                            ] }),
+                            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginTop: 2, paddingTop: 2, style: { borderTop: "1px solid #eaeaef" }, children: [
+                              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Need to inspect before & after values?" }),
+                              /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  variant: "secondary",
+                                  size: "S",
+                                  startIcon: /* @__PURE__ */ jsx(Eye, {}),
+                                  onClick: () => {
+                                    setShowConfirmModal(false);
+                                    handleOpenPreviewModal();
+                                  },
+                                  children: "Open Change Preview"
+                                }
+                              )
                             ] })
                           ] })
                         ] }),
@@ -3809,6 +4233,21 @@ const BulkUpdater = () => {
             )
           }
         ),
+        /* @__PURE__ */ jsx(
+          BulkUpdatePreviewModal,
+          {
+            isOpen: showPreviewModal,
+            onClose: () => setShowPreviewModal(false),
+            onProceed: () => {
+              setShowPreviewModal(false);
+              handleOpenConfirmModal();
+            },
+            loading: previewLoading,
+            previewData,
+            attribute: selectedAttribute,
+            targetValueDisplay: relationsMeta[selectedAttribute] ? selectedRelationDocId === "__clear__" ? "Clear / Unlink Relation" : relationOptions.find((o) => o.documentId === selectedRelationDocId)?.label || selectedRelationDocId || "(none)" : useRegex ? `Replace /${regexPattern}/g with "${attributeValue}"` : attributeValue
+          }
+        ),
         /* @__PURE__ */ jsx(
           ProcessingDashboardModal,
           {
@@ -3829,4 +4268,4 @@ export {
   getAvailableColumnsForCollection,
   getNestedValue
 };
-//# sourceMappingURL=BulkUpdater-NpSxrH3b.mjs.map
+//# sourceMappingURL=BulkUpdater-B_COVQmo.mjs.map