Jens/MobilityOps
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

polish: rebrand to Fleet Ops, add trilingual i18n, adaptive demo guide, and UX overhaul

Browse Source 
Rebrands the product from MobilityOps to Fleet Ops across the UI, backend defaults and
knowledge base, and makes nl-BE/en-GB/fr-BE full first-class languages: i18next with
eager-bundled per-namespace resources, a persisted accessible language switcher (topbar
and mobile drawer), locale-aware date/number formatting, and a coverage test that fails
the build on any missing or empty translation key.

Backend dynamic content (demo scenarios, blocked-reason text, integration status) moves
from fixed English/Dutch prose to stable message codes + params so the frontend can
localize it; the demo knowledge base gains a fully translated NL/EN/FR procedure corpus
(11 documents each) with per-language retrieval and localized evidence-state messages.

The Demo Guide becomes breakpoint-adaptive: a docked rail on extra-wide desktop, a
floating panel that auto-collapses to a persistent, closable progress chip on standard
desktop/tablet, and a collapsed/half/full bottom sheet on mobile -- with scroll+focus+
highlight on "go to this step", Escape handling, and reduced-motion support.

The Data Quality Workbench gets accessible choice-card decisions with a clear primary/
secondary/tertiary action hierarchy; the Automation ledger groups repeated successes and
uses meaningful short refs; the Audit trail groups events by correlation id with human
action labels and readable before/after diffs. Attention Queue, Today's movements,
Vehicles, Bookings and Data Quality rows are fully clickable (stretched-link pattern)
with independent secondary links, keyboard support and mobile touch targets.

Fixes a topbar overflow on mobile caused by the new language switcher (moved into the
mobile drawer at <=960px) and two dangling aria-labelledby references introduced this
session. Updates all affected Playwright specs for the new nl-BE default and the new
Audit/DemoGuide DOM structure, and adds new i18n-coverage, demo-guide-adaptive and
clickable-rows specs. 131 backend tests, Ruff and mypy, and 71 Playwright tests pass.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
NuklearRabbit
2026-08-03 18:33:22 +02:00
co-authored by Claude Sonnet 5
parent 257a4cf6c0
commit 337f8716bb
127 changed files with 5529 additions and 1287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/guided-demo-full.spec.ts
+21 -16
View File
@@ -14,6 +14,11 @@ test("full guided demo walkthrough, start to finish, restoring the environment a
request,
}) => {
await resetDemoData(request);
// Wide desktop viewport: the guide docks as a rail and never auto-collapses to a chip
// (see useViewportTier.ts), so this walkthrough can keep interacting with the panel
// directly across every step -- the standard-tier auto-collapse behaviour itself is
// covered separately in demo-guide.spec.ts.
await page.setViewportSize({ width: 1600, height: 1000 });
await test.step("start the guided demo from the login screen", async () => {
await page.goto("/login");
@@ -24,7 +29,7 @@ test("full guided demo walkthrough, start to finish, restoring the environment a
await test.step("step 1: understand the operational state", async () => {
await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
await expect(page.getByRole("heading", { name: "Fleet readiness" })).toBeVisible();
await expect(page.getByRole("heading", { name: "Wagenparkstatus" })).toBeVisible();
await page.getByRole("button", { name: "Volgende" }).click();
});
@@ -38,10 +43,10 @@ test("full guided demo walkthrough, start to finish, restoring the environment a
await test.step("step 3: process the return with the pre-filled odometer anomaly", async () => {
await expect(page.getByRole("heading", { name: "3. Verwerk een retour" })).toBeVisible();
await expect(page.getByText("Demonstratiescenario: afwijkende kilometerstand")).toBeVisible();
await page.getByRole("button", { name: "Review return" }).click();
await expect(page.getByText(/below.*canonical reading/)).toBeVisible();
await page.getByRole("button", { name: "Confirm return" }).click();
await expect(page.getByRole("heading", { name: "Return registered" })).toBeVisible();
await page.getByRole("button", { name: "Retour nakijken" }).click();
await expect(page.getByText(/laatst bevestigde stand/)).toBeVisible();
await page.getByRole("button", { name: "Retour bevestigen" }).click();
await expect(page.getByRole("heading", { name: "Retour geregistreerd" })).toBeVisible();
await page.getByRole("button", { name: "Ga verder met de demo" }).click();
});
@@ -50,28 +55,28 @@ test("full guided demo walkthrough, start to finish, restoring the environment a
await expect(page.getByRole("heading", { name: "4. Bekijk en behandel" })).toBeVisible();
const firstIssueLink = page.locator(".data-table tbody tr").first().locator("a");
await firstIssueLink.click();
await expect(page.getByText("What's wrong")).toBeVisible();
await expect(page.getByText("Wat is er mis")).toBeVisible();
// The newest issue is the odometer regression this return just created.
await page.getByRole("radio", { name: /Retain canonical/ }).check();
await page.getByRole("button", { name: "Resolve issue" }).click();
await expect(page.getByText(/Issue .* resolved/)).toBeVisible();
await page.getByRole("radio", { name: /Laatst bevestigde stand behouden/ }).check();
await page.getByRole("button", { name: "Probleem oplossen" }).click();
await expect(page.getByText(/Probleem .* opgelost/)).toBeVisible();
await page.getByRole("button", { name: "Ga verder met de demo" }).click();
});
await test.step("step 5: review and merge the possible duplicate customer", async () => {
await expect(page).toHaveURL(/\/data-quality\/DQ-DEMO-DUPLICATE$/);
await expect(page.getByRole("heading", { name: "5. Beoordeel en behandel" })).toBeVisible();
await page.getByRole("button", { name: /^Merge into/ }).click();
await page.getByRole("button", { name: "Yes, merge" }).click();
await expect(page.getByText(/Issue .* resolved/)).toBeVisible();
await page.getByRole("button", { name: /^Samenvoegen met/ }).click();
await page.getByRole("button", { name: "Ja, samenvoegen" }).click();
await expect(page.getByText(/Probleem .* opgelost/)).toBeVisible();
await page.getByRole("button", { name: "Ga verder met de demo" }).click();
});
await test.step("step 6: ask the procedure assistant a question", async () => {
await expect(page).toHaveURL(/\/knowledge$/);
await expect(page.getByRole("heading", { name: "6. Stel een vraag" })).toBeVisible();
await page.getByRole("button", { name: "What must I do when a vehicle returns with damage?" }).click();
await expect(page.getByText("Grounded in cited procedures")).toBeVisible();
await page.getByRole("button", { name: "Wat moet ik doen wanneer een voertuig terugkomt met schade?" }).click();
await expect(page.getByText("Onderbouwd met geciteerde procedures")).toBeVisible();
await page.getByRole("button", { name: "Volgende" }).click();
});
@@ -83,7 +88,7 @@ test("full guided demo walkthrough, start to finish, restoring the environment a
await expect(page.locator(".integration-cards")).not.toContainText("degraded");
await expect(page.locator(".integration-cards")).not.toContainText("no_evidence");
await page.goto("/audit");
await expect(page.locator(".data-table tbody tr").first()).toBeVisible();
await expect(page.locator(".audit-group-list li").first()).toBeVisible();
await page.getByRole("button", { name: /Demo-gids/ }).click();
await page.getByRole("button", { name: "Volgende" }).click();
});
@@ -92,7 +97,7 @@ test("full guided demo walkthrough, start to finish, restoring the environment a
await expect(page.getByRole("heading", { name: "8. Bekijk wat echt is" })).toBeVisible();
await page.getByRole("button", { name: "Ga naar deze stap" }).click();
await expect(page).toHaveURL(/\/about$/);
await expect(page.getByRole("heading", { name: "Wat MobilityOps wel en niet is" })).toBeVisible();
await expect(page.getByRole("heading", { name: "Wat Fleet Ops wel en niet is" })).toBeVisible();
await expect(page.getByText("Demomodus", { exact: false }).first()).toBeVisible();
await expect(page.getByText("Niet gekoppeld").first()).toBeVisible();
});