nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: compact map message state

Browse Source
This commit is contained in:
Nico 2026-06-04 15:47:20 -07:00
parent 1a01c788f6
commit 155ab77541
4 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/maps/LocationMapStateViews.jsx
View File

@ -9,7 +9,19 @@ export function LocationMapMessageState({ message, location, status = "Loading",
<LocationMapTopbar location={location} status={status} onBack={onBack} />
) : null}
<main className="location-map-workspace location-map-message-workspace">
<p className="location-map-loading">{message}</p>
<section className="location-map-setup location-map-message-card" aria-live="polite">
<h2>{status}</h2>
<div className="location-map-setup-rows" role="group" aria-label="Map message status">
<div className="location-map-setup-row">
<span>Status</span>
<strong>{status}</strong>
</div>
<div className="location-map-setup-row">
<span>Detail</span>
<strong>{message}</strong>
</div>
</div>
</section>
</main>
</div>
);

7
frontend/src/pages/LocationMapManager.jsx
View File

@ -381,7 +381,12 @@ export default function LocationMapManager() {
}
if (!activeHousehold) {
return <LocationMapMessageState message="Select a household to manage maps." />;
return (
<LocationMapMessageState
status="Select Household"
message="Select a household to manage maps."
/>
);
}
if (loadError) {

5
frontend/src/styles/pages/LocationMapManager.css
View File

@ -935,11 +935,6 @@
gap: 0.6rem;
}
.location-map-loading {
margin: 3rem auto;
color: #9fb3c8;
}
.location-map-message-workspace {
display: flex;
align-items: center;

26
frontend/tests/location-map-manager.spec.ts
View File

@ -432,6 +432,27 @@ test("admin setup uses compact status rows when no zones exist yet", async ({ pa
await expect(page.getByLabel("Map controls")).toHaveCount(0);
});
test("map message prompts for a household with compact status rows", async ({ page }) => {
await seedAuthStorage(page, { username: "map-user", role: "member" });
await mockConfig(page);
await page.route("**/households", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify([]),
});
});
await page.goto("/stores/100/locations/10/map");
await expect(page.getByRole("heading", { name: "Select Household" })).toBeVisible();
const messageStatus = page.getByRole("group", { name: "Map message status" });
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Select Household");
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Select a household to manage maps.");
await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
await expect(page.getByLabel("Map controls")).toHaveCount(0);
});
test("load failure shows retryable error instead of no-map setup", async ({ page }) => {
await mockMapShell(page);
@ -545,7 +566,10 @@ test("loading map keeps location context visible", async ({ page }) => {
await expect(page.getByText("Eastvale")).toBeVisible();
await expect(page.getByRole("button", { name: "Back to grocery list" })).toBeVisible();
await expect(page.locator(".location-map-status")).toHaveText("Loading");
await expect(page.getByText("Loading map...")).toBeVisible();
const messageStatus = page.getByRole("group", { name: "Map message status" });
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Loading");
await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Loading map...");
await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
releaseMapResponse();
await mapResponseSent;