fix: confirm leaving unsaved map edits

This commit is contained in:
Nico 2026-06-03 12:37:02 -07:00
parent d370e23529
commit 82e948ee66
2 changed files with 26 additions and 1 deletions

View File

@ -66,6 +66,7 @@ export default function LocationMapManager() {
const [future, setFuture] = useState([]);
const [dragState, setDragState] = useState(null);
const [pendingDeleteObject, setPendingDeleteObject] = useState(null);
const [pendingLeave, setPendingLeave] = useState(false);
const svgRef = useRef(null);
const toastRef = useRef(toast);
@ -402,7 +403,7 @@ export default function LocationMapManager() {
setZoom(Number(nextZoom.toFixed(2)));
};
const handleBack = useCallback(() => {
const performBackNavigation = useCallback(() => {
if (typeof returnPath === "string" && returnPath.startsWith("/")) {
navigate(returnPath, { replace: true });
return;
@ -410,6 +411,14 @@ export default function LocationMapManager() {
navigate("/");
}, [navigate, returnPath]);
const handleBack = useCallback(() => {
if (hasUnsavedChanges && canManage) {
setPendingLeave(true);
return;
}
performBackNavigation();
}, [canManage, hasUnsavedChanges, performBackNavigation]);
if (!hasLoaded || householdLoading || loading) {
return (
<div className="location-map-page">
@ -522,6 +531,17 @@ export default function LocationMapManager() {
onClose={() => setPendingDeleteObject(null)}
onConfirm={handleDeleteObject}
/>
<ConfirmSlideModal
isOpen={pendingLeave}
title="Leave with unsaved changes?"
description="Your draft edits are only on this screen right now. Save the draft before leaving if you want to keep them."
confirmLabel="Leave Map"
onClose={() => setPendingLeave(false)}
onConfirm={() => {
setPendingLeave(false);
performBackNavigation();
}}
/>
</div>
);
}

View File

@ -320,6 +320,11 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
await confirmSlide(page);
await expect(page.locator(".location-map-object", { hasText: "Temporary Freezer" })).toHaveCount(0);
await page.getByRole("button", { name: "Back" }).click();
await expect(page.getByRole("heading", { name: "Leave with unsaved changes?" })).toBeVisible();
await page.getByRole("button", { name: "Cancel" }).click();
await expect(page).toHaveURL(/\/stores\/100\/locations\/10\/map$/);
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
await page.getByRole("button", { name: "Preview Draft" }).click();
await expect(page.locator(".location-map-object", { hasText: "Bread Wall" })).toBeVisible();