fix: close map layers on mode switches

This commit is contained in:
Nico 2026-06-04 15:03:03 -07:00
parent 0d05bf761e
commit 9f4420b23c
3 changed files with 76 additions and 1 deletions

View File

@ -19,6 +19,7 @@ export default function useLocationMapViewControls({
setFuture,
setHasUnsavedChanges,
setHistory,
setLayersOpen,
setMode,
setObjects,
setPreviewDraft,
@ -72,13 +73,15 @@ export default function useLocationMapViewControls({
const handlePreviewDraft = useCallback(() => {
setMode("view");
setEditorTool("pan");
setLayersOpen(false);
setPreviewDraft(true);
setSelectedObjectKey(null);
}, [setEditorTool, setMode, setPreviewDraft, setSelectedObjectKey]);
}, [setEditorTool, setLayersOpen, setMode, setPreviewDraft, setSelectedObjectKey]);
const handleViewMode = useCallback(() => {
setMode("view");
setEditorTool("pan");
setLayersOpen(false);
if (hasUnsavedChanges) {
setPreviewDraft(true);
setSelectedObjectKey(null);
@ -92,6 +95,7 @@ export default function useLocationMapViewControls({
hasUnsavedChanges,
mapState,
setEditorTool,
setLayersOpen,
setMode,
setPreviewDraft,
setSelectedObjectKey,
@ -101,6 +105,7 @@ export default function useLocationMapViewControls({
const handleEditMode = useCallback(() => {
setMode("edit");
setEditorTool("edit");
setLayersOpen(false);
setPreviewDraft(true);
if (!previewDraft && mapState && !hasUnsavedChanges) {
syncMapDraftFromState(mapState, "edit", true);
@ -110,6 +115,7 @@ export default function useLocationMapViewControls({
mapState,
previewDraft,
setEditorTool,
setLayersOpen,
setMode,
setPreviewDraft,
syncMapDraftFromState,

View File

@ -340,6 +340,7 @@ export default function LocationMapManager() {
setFuture,
setHasUnsavedChanges,
setHistory,
setLayersOpen,
setMode,
setObjects,
setPreviewDraft,

View File

@ -1182,6 +1182,74 @@ test("admin status follows the visible map when a saved draft exists", async ({
await expect(page.locator(".location-map-object", { hasText: "Live Bakery" })).toBeVisible();
});
test("mode switches close open map layers without resetting filters", async ({ page }) => {
await mockMapShell(page);
const publishedObjects = [
{
id: 1241,
location_map_id: 901,
zone_id: 501,
zone_name: "Bakery",
type: "zone",
label: "Live Bakery",
x: 40,
y: 40,
width: 260,
height: 160,
rotation: 0,
locked: false,
visible: true,
sort_order: 1,
},
];
const draftObjects = [
{
...publishedObjects[0],
id: 1242,
location_map_id: 900,
label: "Draft Bakery",
x: 80,
y: 80,
},
];
await page.route("**/households/1/locations/10/map", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify(draftAndPublishedMapState(draftObjects, publishedObjects, true)),
});
});
await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Layers" }).click();
await page.getByRole("button", { name: "Pins" }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "true");
await expect(page.locator(".location-map-display-panel")).toBeVisible();
await page.getByRole("button", { name: "Edit Draft" }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
await page.getByRole("button", { name: "Layers, 1 changed" }).click();
await expect(page.locator(".location-map-display-panel")).toBeVisible();
await page.getByRole("button", { name: "View", exact: true }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
await page.getByRole("button", { name: "Edit Draft" }).click();
await page.getByRole("button", { name: "Layers, 1 changed" }).click();
await expect(page.locator(".location-map-display-panel")).toBeVisible();
await page.getByRole("button", { name: "Preview Draft" }).click();
await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toHaveAttribute("aria-expanded", "false");
await expect(page.locator(".location-map-display-panel")).toHaveCount(0);
});
test("mobile keeps draft preview status compact in the topbar", async ({ page }) => {
await page.setViewportSize({ width: 409, height: 838 });
await mockMapShell(page);