feat: dialogues themes et conflits non bloquants pour la visionneuse XLSX #154

tests/e2e/xlsx-viewer.spec.js

@@ -116,12 +116,6 @@ test.describe('Excel viewer — garde-fous d\'écriture et valeurs calculées (#
     await login(page);
     await openFixture(page);
 
-    let dialogMessage = null;
-    page.on('dialog', async (dialog) => {
-      dialogMessage = dialog.message();
-      await dialog.accept();
-    });
-
     const cell = page.locator('#content-area td[data-cell="A2"]');
     await cell.click();
     await cell.fill('Total confirmé');
@@ -131,7 +125,11 @@ test.describe('Excel viewer — garde-fous d\'écriture et valeurs calculées (#
     await expect(save).toBeEnabled();
     await save.click();
 
-    await expect.poll(() => dialogMessage, { timeout: 10000 }).toContain('segments');
+    // #154-A2 — the lossy confirmation is a themed in-app dialog, not a native one.
+    const dialog = page.locator('.obsigate-modal-overlay .obsigate-modal');
+    await expect(dialog).toBeVisible({ timeout: 10000 });
+    await expect(dialog).toContainText('segments');
+    await dialog.locator('[data-dialog="confirm"]').click();
     await expect(page.locator('.toast-success')).toBeVisible({ timeout: 10000 });
 
     // La cellule reste modifiée côté UI (plus de marque « sale »).
@@ -145,13 +143,19 @@ test.describe('Excel viewer — garde-fous d\'écriture et valeurs calculées (#
     const toggle = page.locator('#xlsx-formula-btn');
     await expect(toggle).toHaveAttribute('aria-pressed', 'false');
 
-    // 409 → confirmation, puis reprise avec force (le toggle reste désactivé).
-    page.on('dialog', (dialog) => dialog.accept());
+    // 409 → confirmation thémée, puis reprise avec force (le toggle reste désactivé).
     const cell = page.locator('#content-area td[data-cell="B2"]');
     await cell.click();
     await cell.fill('=B1*3');
     await cell.press('Enter');
     await page.locator('#xlsx-save-btn').click();
+    const dialog = page.locator('.obsigate-modal-overlay .obsigate-modal');
+    // A lossy workbook asks for confirmation. A previous test's save may already
+    // have dropped the slicers part, in which case the PUT succeeds directly.
+    await dialog.waitFor({ state: 'visible', timeout: 3000 }).catch(() => {});
+    if (await dialog.isVisible()) {
+      await dialog.locator('[data-dialog="confirm"]').click();
+    }
     await expect(page.locator('.toast-success')).toBeVisible({ timeout: 10000 });
   });
 });

tests/frontend/xlsx-viewer.test.mjs

@@ -105,6 +105,9 @@ async function test(name, fn) {
     if (apiQueue.length) return apiQueue.shift();
     return { ok: true, status: 200, body: { status: "ok" } };
   };
+  // #154-A2 — themed dialogs live in document.body; clear any left behind by a
+  // previous test so the helpers always reach the current one.
+  document.querySelectorAll(".obsigate-modal-overlay").forEach((n) => n.remove());
   try {
     await fn();
     console.log(`  ✓ ${name}`);
@@ -165,6 +168,17 @@ function editCell(area, ref, text) {
   return td;
 }
 
+/** #154-A2 — the themed dialog is the last overlay in document.body. */
+const lastDialog = () => {
+  const overlays = document.querySelectorAll(".obsigate-modal-overlay");
+  return overlays[overlays.length - 1] || null;
+};
+const clickDialog = (which) => {
+  const btn = lastDialog()?.querySelector(`[data-dialog="${which}"]`);
+  assert.ok(btn, `dialog button "${which}" is present`);
+  btn.click();
+};
+
 const lossyError = {
   ok: false,
   status: 409,
@@ -248,12 +262,17 @@ await test("409 xlsx_lossy_content asks once then retries with force", async ()
   nextResponse = () => (calls.length === 1 ? lossyError : { ok: true, status: 200, body: {} });
   area.querySelector("#xlsx-save-btn").click();
   await new Promise((r) => setTimeout(r, 10));
-  assert.equal(confirmCalls, 1);
+  // #154-A2 — a themed dialog replaces window.confirm(), and no retry happens
+  // before the user answers.
+  const dialog = lastDialog();
+  assert.ok(dialog, "a themed confirmation is shown");
+  assert.ok(dialog.textContent.includes(FR["xlsx.feature_slicers"]), dialog.textContent);
+  assert.equal(calls.length, 1, "nothing is retried before the answer");
+  clickDialog("confirm");
+  await new Promise((r) => setTimeout(r, 10));
   assert.equal(calls.length, 2);
   assert.equal(calls[0].body.force, false);
   assert.equal(calls[1].body.force, true);
-  // The prompt names the features the backend reported.
-  assert.ok(confirmPrompts[0].includes(FR["xlsx.feature_slicers"]), confirmPrompts[0]);
   // Save succeeded → cells are no longer dirty.
   assert.equal(area.querySelectorAll("td.xlsx-dirty").length, 0);
 });
@@ -264,27 +283,52 @@ await test("confirming once is enough for the following saves", async () => {
   nextResponse = () => (calls.length === 1 ? lossyError : { ok: true, status: 200, body: {} });
   area.querySelector("#xlsx-save-btn").click();
   await new Promise((r) => setTimeout(r, 10));
+  clickDialog("confirm");
+  await new Promise((r) => setTimeout(r, 10));
   editCell(area, "A1", "2");
   area.querySelector("#xlsx-save-btn").click();
   await new Promise((r) => setTimeout(r, 10));
-  assert.equal(confirmCalls, 1, "the user is not asked twice");
   assert.equal(calls.length, 3);
   assert.equal(calls[2].body.force, true);
+  // Wait out the dialog close animation, then confirm none is left.
+  await new Promise((r) => setTimeout(r, 250));
+  assert.equal(document.querySelectorAll(".obsigate-modal-overlay").length, 0, "the user is not asked twice");
 });
 
 await test("refusing the confirmation writes nothing and keeps the cells dirty", async () => {
   const area = mount({ lossy: ["slicers"] });
   editCell(area, "A1", "250");
   nextResponse = () => lossyError;
-  confirmAnswer = false;
   area.querySelector("#xlsx-save-btn").click();
   await new Promise((r) => setTimeout(r, 10));
-  assert.equal(confirmCalls, 1);
+  clickDialog("cancel");
+  await new Promise((r) => setTimeout(r, 10));
   assert.equal(calls.length, 1, "no retry after a refusal");
   assert.equal(area.querySelectorAll("td.xlsx-dirty").length, 1);
   assert.equal(area.querySelector("#xlsx-save-btn").disabled, false);
 });
 
+await test("a 409 conflict shows a non-blocking retry banner and keeps the edits", async () => {
+  const area = mount();
+  editCell(area, "A1", "250");
+  nextResponse = () => ({ ok: false, status: 409, body: { detail: "busy", code: "conflict" } });
+  area.querySelector("#xlsx-save-btn").click();
+  await new Promise((r) => setTimeout(r, 10));
+  const banner = area.querySelector(".xlsx-banner-conflict");
+  assert.ok(banner, "a conflict banner is shown");
+  assert.ok(banner.textContent.includes(FR["xlsx.conflict_msg"]), banner.textContent);
+  // The edit is preserved and the save button is usable again.
+  assert.equal(area.querySelectorAll("td.xlsx-dirty").length, 1);
+  assert.equal(area.querySelector("#xlsx-save-btn").disabled, false);
+  // The retry re-runs the save.
+  nextResponse = () => ({ ok: true, status: 200, body: {} });
+  banner.querySelector(".xlsx-banner-retry").click();
+  await new Promise((r) => setTimeout(r, 10));
+  assert.equal(calls.length, 2);
+  assert.equal(area.querySelectorAll("td.xlsx-dirty").length, 0);
+  assert.equal(area.querySelector(".xlsx-banner-conflict"), null, "banner cleared on retry");
+});
+
 await test("a non-409 failure is not retried", async () => {
   const area = mount();
   editCell(area, "A1", "250");
@@ -582,29 +626,25 @@ await test("CSV export downloads the visible sheet without the cached shadows",
 
 await test("sheet_add asks for a name, PUTs the action and re-renders", async () => {
   const area = mount();
-  // The prompt is resolved through the module scope: stub it globally.
-  const realPrompt = globalThis.prompt;
-  globalThis.prompt = () => "Feuille 2";
   apiQueue.push({ ok: true, status: 200, body: { status: "ok" } }); // PUT
   apiQueue.push({
     ok: true, status: 200,
     body: { is_xlsx: true, vault: "V", path: "data.xlsx", xlsx_sheets: [{ name: "Feuille 2", html: sheetHtml("neuf") }], xlsx_lossy_features: [] },
   }); // re-read
   area.querySelector("#xlsx-structure-btn").click();
-  const items = [...area.querySelectorAll(".xlsx-structure-item")];
-  const addBtn = items.find((b) => b.textContent === FR["xlsx.sheet_add"]);
+  const addBtn = [...area.querySelectorAll(".xlsx-structure-item")].find((b) => b.textContent === FR["xlsx.sheet_add"]);
   addBtn.click();
   await new Promise((r) => setTimeout(r, 5));
-  globalThis.prompt = realPrompt;
+  // #154-A2 — a themed prompt replaces window.prompt().
+  const input = lastDialog()?.querySelector('[data-dialog="input"]');
+  assert.ok(input, "a themed prompt asks for the sheet name");
+  input.value = "Feuille 2";
+  clickDialog("confirm");
+  await new Promise((r) => setTimeout(r, 10));
   assert.equal(calls.length, 2);
   assert.match(calls[0].url, /\/xlsx\/structure\?path=data\.xlsx/);
   assert.deepEqual(calls[0].body.actions, [{ op: "sheet_add", name: "Feuille 2" }]);
   assert.equal(calls[0].body.force, false);
-  // The viewer re-rendered from the server payload (a single sheet → no tabs).
-  assert.ok(
-    area.querySelector("#content-area, .xlsx-viewer") || area,
-    "the viewer was rebuilt",
-  );
   assert.ok(
     area.querySelector('td[data-cell="A1"]')?.textContent === "neuf",
     "the re-render shows the fresh payload",
@@ -626,9 +666,7 @@ await test("sheet_delete confirms and is refused on the last sheet", async () =>
 
 await test("the 409 lossy flow re-emits with force after confirmation", async () => {
   const area = mount();
-  // The prompt is resolved through the module scope: stub it globally.
-  const realPrompt = globalThis.prompt;
-  globalThis.prompt = () => "Feuille 2";
+  // The prompt is answered through the themed dialog.
   apiQueue.push({
     ok: false, status: 409,
     body: { detail: "…", code: "xlsx_lossy_content", details: { features: ["slicers"] } },
@@ -639,11 +677,15 @@ await test("the 409 lossy flow re-emits with force after confirmation", async ()
     body: { is_xlsx: true, vault: "V", path: "data.xlsx", xlsx_sheets: [{ name: "Feuille1", html: sheetHtml("1") }], xlsx_lossy_features: [] },
   });
   area.querySelector("#xlsx-structure-btn").click();
-  const items = [...area.querySelectorAll(".xlsx-structure-item")];
-  items.find((b) => b.textContent === FR["xlsx.sheet_add"]).click();
+  [...area.querySelectorAll(".xlsx-structure-item")].find((b) => b.textContent === FR["xlsx.sheet_add"]).click();
+  await new Promise((r) => setTimeout(r, 5));
+  lastDialog().querySelector('[data-dialog="input"]').value = "Feuille 2";
+  clickDialog("confirm");
+  await new Promise((r) => setTimeout(r, 10));
+  const lossyDialog = lastDialog();
+  assert.ok(lossyDialog && lossyDialog.textContent.includes(FR["xlsx.feature_slicers"]), "a lossy confirmation is shown");
+  clickDialog("confirm");
   await new Promise((r) => setTimeout(r, 10));
-  globalThis.prompt = realPrompt;
-  assert.equal(confirmCalls, 1, "the user is asked about the lossy write");
   assert.equal(calls.length, 3);
   assert.equal(calls[1].body.force, true);
 });
@@ -743,8 +785,6 @@ await test("a csv shows no tab strip and no + button", () => {
 
 await test("the + button adds a sheet through the structure endpoint", async () => {
   const area = mount();
-  const realPrompt = globalThis.prompt;
-  globalThis.prompt = () => "Feuille 2";
   apiQueue.push({ ok: true, status: 200, body: { status: "ok" } }); // PUT
   apiQueue.push({
     ok: true, status: 200,
@@ -752,7 +792,9 @@ await test("the + button adds a sheet through the structure endpoint", async ()
   }); // re-read
   area.querySelector("#xlsx-tab-add").click();
   await new Promise((r) => setTimeout(r, 5));
-  globalThis.prompt = realPrompt;
+  lastDialog().querySelector('[data-dialog="input"]').value = "Feuille 2";
+  clickDialog("confirm");
+  await new Promise((r) => setTimeout(r, 10));
   assert.equal(calls.length, 2);
   assert.match(calls[0].url, /\/xlsx\/structure\?path=data\.xlsx/);
   assert.deepEqual(calls[0].body.actions, [{ op: "sheet_add", name: "Feuille 2" }]);