From 186025e0f066703f27bf8b85cf87c66cdeb516a3 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 1 Jul 2024 18:54:06 +0200
Subject: [PATCH 1/4] chore: add custom prompt

---
 umap/static/umap/css/dialog.css          |  2 +
 umap/static/umap/js/modules/global.js    |  3 +-
 umap/static/umap/js/modules/help.js      |  9 +++--
 umap/static/umap/js/modules/importer.js  |  4 +-
 umap/static/umap/js/modules/ui/dialog.js | 47 ++++++++++++++++++++++--
 umap/static/umap/js/umap.js              |  9 ++---
 umap/static/umap/js/umap.tableeditor.js  | 21 +++++++----
 7 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/umap/static/umap/css/dialog.css b/umap/static/umap/css/dialog.css
index 9fb2c67e..43072f27 100644
--- a/umap/static/umap/css/dialog.css
+++ b/umap/static/umap/css/dialog.css
@@ -11,6 +11,8 @@
     color: var(--text-color);
     border-radius: 5px;
     overflow-y: auto;
+    height: fit-content;
+    max-height: 90vh;
 }
 .umap-dialog .umap-close-link {
     float: right;
diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js
index c4eebe03..366bed6b 100644
--- a/umap/static/umap/js/modules/global.js
+++ b/umap/static/umap/js/modules/global.js
@@ -14,7 +14,7 @@ import { HTTPError, NOKError, Request, RequestError, ServerRequest } from './req
 import Rules from './rules.js'
 import { SCHEMA } from './schema.js'
 import { SyncEngine } from './sync/engine.js'
-import Dialog from './ui/dialog.js'
+import { Dialog, Prompt } from './ui/dialog.js'
 import { EditPanel, FullPanel, Panel } from './ui/panel.js'
 import Tooltip from './ui/tooltip.js'
 import URLs from './urls.js'
@@ -42,6 +42,7 @@ window.U = {
   NOKError,
   Orderable,
   Panel,
+  Prompt,
   Request,
   RequestError,
   Rules,
diff --git a/umap/static/umap/js/modules/help.js b/umap/static/umap/js/modules/help.js
index fe0a8460..0d50e9cd 100644
--- a/umap/static/umap/js/modules/help.js
+++ b/umap/static/umap/js/modules/help.js
@@ -165,6 +165,7 @@ const ENTRIES = {
 export default class Help {
   constructor(map) {
     this.map = map
+    this.dialog = new U.Dialog()
     this.isMacOS = /mac/i.test(
       // eslint-disable-next-line compat/compat -- Fallback available.
       navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform
@@ -207,7 +208,7 @@ export default class Help {
         })
       }
     }
-    this.map.dialog.open({ content: container, className: 'dark' })
+    this.dialog.open({ content: container, className: 'dark' })
   }
 
   button(container, entries, classname) {
@@ -241,10 +242,10 @@ export default class Help {
     const actionsContainer = DomUtil.create('ul', 'umap-edit-actions', container)
     const addAction = (action) => {
       const actionContainer = DomUtil.add('li', '', actionsContainer)
-      DomUtil.add('i', action.options.className, actionContainer),
-        DomUtil.add('span', '', actionContainer, action.options.tooltip)
+      DomUtil.add('i', action.options.className, actionContainer)
+      DomUtil.add('span', '', actionContainer, action.options.tooltip)
       DomEvent.on(actionContainer, 'click', action.addHooks, action)
-      DomEvent.on(actionContainer, 'click', this.map.dialog.close, this.map.dialog)
+      DomEvent.on(actionContainer, 'click', this.dialog.close, this.map.dialog)
     }
     title.textContent = translate('Where do we go from here?')
     for (const id in this.map.helpMenuActions) {
diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js
index ba227fd9..4ab13f18 100644
--- a/umap/static/umap/js/modules/importer.js
+++ b/umap/static/umap/js/modules/importer.js
@@ -2,7 +2,7 @@ import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { translate } from './i18n.js'
 import { SCHEMA } from './schema.js'
-import Dialog from './ui/dialog.js'
+import { Dialog } from './ui/dialog.js'
 import * as Utils from './utils.js'
 
 const TEMPLATE = `
@@ -53,7 +53,7 @@ export default class Importer {
     this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
     this.IMPORTERS = []
     this.loadImporters()
-    this.dialog = new Dialog(this.map._controlContainer)
+    this.dialog = new Dialog()
   }
 
   loadImporters() {
diff --git a/umap/static/umap/js/modules/ui/dialog.js b/umap/static/umap/js/modules/ui/dialog.js
index 9cfea1b1..ebc12cb0 100644
--- a/umap/static/umap/js/modules/ui/dialog.js
+++ b/umap/static/umap/js/modules/ui/dialog.js
@@ -1,11 +1,10 @@
 import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 
-export default class Dialog {
-  constructor(parent) {
-    this.parent = parent
+export class Dialog {
+  constructor() {
     this.className = 'umap-dialog window'
-    this.container = DomUtil.create('dialog', this.className, this.parent)
+    this.container = DomUtil.create('dialog', this.className, document.body)
     DomEvent.disableClickPropagation(this.container)
     DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
     DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
@@ -48,5 +47,45 @@ export default class Dialog {
     DomEvent.on(closeButton, 'click', this.close, this)
     this.container.appendChild(buttonsContainer)
     this.container.appendChild(content)
+    DomEvent.once(this.container, 'keydown', (e) => {
+      DomEvent.stop(e)
+      if (e.key === 'Escape') this.close()
+    })
+  }
+}
+
+const PROMPT = `
+<form>
+  <h3></h3>
+  <input type="text" name="prompt" />
+  <input type="submit" value="${translate('Ok')}" />
+</form>
+`
+
+export class Prompt extends Dialog {
+  get input() {
+    return this.container.querySelector('input[name="prompt"]')
+  }
+
+  get title() {
+    return this.container.querySelector('h3')
+  }
+
+  get form() {
+    return this.container.querySelector('form')
+  }
+
+  open({ className, title } = {}) {
+    const content = DomUtil.element({ tagName: 'div', safeHTML: PROMPT })
+    super.open({ className, content })
+    this.title.textContent = title
+    const promise = new Promise((resolve, reject) => {
+      DomEvent.on(this.form, 'submit', (e) => {
+        DomEvent.stop(e)
+        resolve(this.input.value)
+        this.close()
+      })
+    })
+    return promise
   }
 }
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index c1aaa9f7..c5907661 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -57,7 +57,6 @@ U.Map = L.Map.extend({
 
     this.panel = new U.Panel(this)
     this.tooltip = new U.Tooltip(this._controlContainer)
-    this.dialog = new U.Dialog(this._controlContainer)
     if (this.hasEditMode()) {
       this.editPanel = new U.EditPanel(this)
       this.fullPanel = new U.FullPanel(this)
@@ -539,18 +538,16 @@ U.Map = L.Map.extend({
   initShortcuts: function () {
     const globalShortcuts = function (e) {
       if (e.key === 'Escape') {
-        if (this.dialog.visible) {
-          this.dialog.close()
-        } else if (this.importer.dialog.visible) {
+        if (this.importer.dialog.visible) {
           this.importer.dialog.close()
         } else if (this.editEnabled && this.editTools.drawing()) {
           this.editTools.stopDrawing()
         } else if (this.measureTools.enabled()) {
           this.measureTools.stopDrawing()
-        } else if (this.editPanel?.isOpen()) {
-          this.editPanel?.close()
         } else if (this.fullPanel?.isOpen()) {
           this.fullPanel?.close()
+        } else if (this.editPanel?.isOpen()) {
+          this.editPanel?.close()
         } else if (this.panel.isOpen()) {
           this.panel.close()
         }
diff --git a/umap/static/umap/js/umap.tableeditor.js b/umap/static/umap/js/umap.tableeditor.js
index 9fc2e1e3..861a2b96 100644
--- a/umap/static/umap/js/umap.tableeditor.js
+++ b/umap/static/umap/js/umap.tableeditor.js
@@ -89,6 +89,19 @@ U.TableEditor = L.Class.extend({
     return true
   },
 
+  addProperty: function () {
+    new U.Prompt()
+      .open({
+        className: 'dark',
+        title: L._('Please enter the name of the property'),
+      })
+      .then((newName) => {
+        if (!newName || !this.validateName(newName)) return
+        this.datalayer.indexProperty(newName)
+        this.edit()
+      })
+  },
+
   edit: function () {
     const id = 'tableeditor:edit'
     this.compileProperties()
@@ -102,13 +115,7 @@ U.TableEditor = L.Class.extend({
     )
     const iconElement = L.DomUtil.createIcon(addButton, 'icon-add')
     addButton.insertBefore(iconElement, addButton.firstChild)
-    const addProperty = function () {
-      const newName = prompt(L._('Please enter the name of the property'))
-      if (!newName || !this.validateName(newName)) return
-      this.datalayer.indexProperty(newName)
-      this.edit()
-    }
-    L.DomEvent.on(addButton, 'click', addProperty, this)
+    L.DomEvent.on(addButton, 'click', this.addProperty, this)
     this.datalayer.map.fullPanel.open({
       content: this.table,
       className: 'umap-table-editor',

From 91badcdb5e9838c0b4dc99cf8443486d51c19cc9 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 2 Jul 2024 18:11:22 +0200
Subject: [PATCH 2/4] wip: rework dialog class

---
 umap/static/umap/css/dialog.css               |  27 ++-
 umap/static/umap/css/window.css               |   1 +
 .../umap/js/components/alerts/alert.css       |  20 +-
 umap/static/umap/js/modules/autocomplete.js   |   1 +
 umap/static/umap/js/modules/global.js         |   3 +-
 umap/static/umap/js/modules/help.js           |   4 +-
 umap/static/umap/js/modules/importer.js       |   8 +-
 .../umap/js/modules/importers/communesfr.js   |   4 +-
 .../umap/js/modules/importers/datasets.js     |  14 +-
 .../umap/js/modules/importers/geodatamine.js  |  20 +-
 .../umap/js/modules/importers/overpass.js     |  27 ++-
 umap/static/umap/js/modules/ui/dialog.js      | 226 ++++++++++++------
 umap/static/umap/js/umap.features.js          |  20 +-
 umap/static/umap/js/umap.js                   |  10 +-
 umap/static/umap/js/umap.tableeditor.js       |  73 +++---
 .../umap/components/alerts/alert.html         |   6 +-
 umap/tests/integration/test_browser.py        |   5 +-
 umap/tests/integration/test_edit_datalayer.py |   1 +
 umap/tests/integration/test_edit_polygon.py   |   2 +-
 umap/tests/integration/test_tableeditor.py    |   4 +-
 20 files changed, 296 insertions(+), 180 deletions(-)

diff --git a/umap/static/umap/css/dialog.css b/umap/static/umap/css/dialog.css
index 43072f27..d186d7e3 100644
--- a/umap/static/umap/css/dialog.css
+++ b/umap/static/umap/css/dialog.css
@@ -14,7 +14,28 @@
     height: fit-content;
     max-height: 90vh;
 }
-.umap-dialog .umap-close-link {
-    float: right;
-    width: 100px;
+:where([data-component="no-dialog"]:not([hidden])) {
+  display: block;
+  inset-inline-start: 50%;
+  position: fixed;
+  transform: translateX(-50%);
+}
+:where([data-component*="dialog"] menu) {
+  display: flex;
+  gap: calc(var(--gutter) / 2);
+  justify-content: flex-end;
+  margin: 0;
+  padding: 0;
+}
+:where([data-component*="dialog"] [data-ref="fieldset"]) {
+  border: 0;
+  margin: unset;
+  padding: unset;
+}
+/* hack for Firefox */
+@-moz-document url-prefix() {
+  [data-component="no-dialog"]:not([hidden]) {
+    inset-inline-start: 0;
+     transform: none;
+  }
 }
diff --git a/umap/static/umap/css/window.css b/umap/static/umap/css/window.css
index a4768fbd..e45e9056 100644
--- a/umap/static/umap/css/window.css
+++ b/umap/static/umap/css/window.css
@@ -10,6 +10,7 @@
     position: sticky;
     top: 0;
     height: var(--panel-header-height);
+    float: right;
 }
 .window .buttons li {
     cursor: pointer;
diff --git a/umap/static/umap/js/components/alerts/alert.css b/umap/static/umap/js/components/alerts/alert.css
index 737ee71a..af445e6f 100644
--- a/umap/static/umap/js/components/alerts/alert.css
+++ b/umap/static/umap/js/components/alerts/alert.css
@@ -1,4 +1,4 @@
-[role="dialog"] {
+.umap-alert[role="dialog"] {
     box-sizing: border-box;
     min-height: 46px;
     line-height: 46px;
@@ -20,36 +20,36 @@
     width: max-content;
     z-index: var(--zindex-alert);
 }
-[role="dialog"] > div {
+.umap-alert[role="dialog"] > div {
     margin: 0 auto;
     min-width: 60%;
     background-size: 20px;
     background-position: 0 15px;
     padding-left: 28px;
 }
-[role="dialog"][data-level="info"] > div {
+.umap-alert[role="dialog"][data-level="info"] > div {
     background-image: url('../../../img/alert-icon-info.svg');
     background-repeat: no-repeat;
 }
-[role="dialog"][data-level="success"] > div {
+.umap-alert[role="dialog"][data-level="success"] > div {
     background-image: url('../../../img/alert-icon-success.svg');
     background-repeat: no-repeat;
 }
-[role="dialog"][data-level="error"] > div {
+.umap-alert[role="dialog"][data-level="error"] > div {
     background-image: url('../../../img/alert-icon-error.svg');
     background-repeat: no-repeat;
 }
-[role="dialog"][data-level="error"] {
+.umap-alert[role="dialog"][data-level="error"] {
     background-color: var(--color-darkRed);
 }
-[role="dialog"] a {
+.umap-alert[role="dialog"] a {
     text-decoration: underline;
 }
-[role="dialog"] label {
+.umap-alert[role="dialog"] label {
     font-size: .8rem;
     font-weight: normal;
 }
-[role="dialog"] a[target="_blank"] {
+.umap-alert[role="dialog"] a[target="_blank"] {
     background: url('../../../img/icon-external-link.svg') no-repeat right center;
     padding-right: 14px;
     background-size: 12px;
@@ -127,7 +127,7 @@ h3[role="alert"] + p {
 #link-wrapper {
     margin-bottom: 1rem;
 }
-[role="dialog"] #conflict-wrapper a[target="_blank"] {
+.umap-alert[role="dialog"] #conflict-wrapper a[target="_blank"] {
     background-position-y: 16px;
 }
 
diff --git a/umap/static/umap/js/modules/autocomplete.js b/umap/static/umap/js/modules/autocomplete.js
index 8e4bfae2..54f7697a 100644
--- a/umap/static/umap/js/modules/autocomplete.js
+++ b/umap/static/umap/js/modules/autocomplete.js
@@ -45,6 +45,7 @@ export class BaseAutocomplete {
       placeholder: this.options.placeholder,
       autocomplete: 'off',
       className: this.options.className,
+      name: this.options.name || 'autocomplete'
     })
     DomEvent.on(this.input, 'keydown', this.onKeyDown, this)
     DomEvent.on(this.input, 'keyup', this.onKeyUp, this)
diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js
index 366bed6b..c4eebe03 100644
--- a/umap/static/umap/js/modules/global.js
+++ b/umap/static/umap/js/modules/global.js
@@ -14,7 +14,7 @@ import { HTTPError, NOKError, Request, RequestError, ServerRequest } from './req
 import Rules from './rules.js'
 import { SCHEMA } from './schema.js'
 import { SyncEngine } from './sync/engine.js'
-import { Dialog, Prompt } from './ui/dialog.js'
+import Dialog from './ui/dialog.js'
 import { EditPanel, FullPanel, Panel } from './ui/panel.js'
 import Tooltip from './ui/tooltip.js'
 import URLs from './urls.js'
@@ -42,7 +42,6 @@ window.U = {
   NOKError,
   Orderable,
   Panel,
-  Prompt,
   Request,
   RequestError,
   Rules,
diff --git a/umap/static/umap/js/modules/help.js b/umap/static/umap/js/modules/help.js
index 0d50e9cd..aafbc42e 100644
--- a/umap/static/umap/js/modules/help.js
+++ b/umap/static/umap/js/modules/help.js
@@ -208,7 +208,7 @@ export default class Help {
         })
       }
     }
-    this.dialog.open({ content: container, className: 'dark' })
+    this.dialog.open({ template: container, className: 'dark', cancel: false, accept: false })
   }
 
   button(container, entries, classname) {
@@ -245,7 +245,7 @@ export default class Help {
       DomUtil.add('i', action.options.className, actionContainer)
       DomUtil.add('span', '', actionContainer, action.options.tooltip)
       DomEvent.on(actionContainer, 'click', action.addHooks, action)
-      DomEvent.on(actionContainer, 'click', this.dialog.close, this.map.dialog)
+      DomEvent.on(actionContainer, 'click', this.dialog.close, this.dialog)
     }
     title.textContent = translate('Where do we go from here?')
     for (const id in this.map.helpMenuActions) {
diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js
index 4ab13f18..65069c09 100644
--- a/umap/static/umap/js/modules/importer.js
+++ b/umap/static/umap/js/modules/importer.js
@@ -2,7 +2,7 @@ import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { translate } from './i18n.js'
 import { SCHEMA } from './schema.js'
-import { Dialog } from './ui/dialog.js'
+import Dialog from './ui/dialog.js'
 import * as Utils from './utils.js'
 
 const TEMPLATE = `
@@ -114,7 +114,7 @@ export default class Importer {
   }
 
   get action() {
-    return this.qs('[name=action]:checked').value
+    return this.qs('[name=action]:checked')?.value
   }
 
   get layerId() {
@@ -234,7 +234,7 @@ export default class Importer {
   }
 
   submit() {
-    let hasErrors = false
+    let hasErrors
     if (this.format === 'umap') {
       hasErrors = !this.full()
     } else if (!this.url) {
@@ -242,7 +242,7 @@ export default class Importer {
     } else if (this.action) {
       hasErrors = !this[this.action]()
     }
-    if (!hasErrors) {
+    if (hasErrors === false) {
       Alert.info(translate('Data successfully imported!'))
     }
   }
diff --git a/umap/static/umap/js/modules/importers/communesfr.js b/umap/static/umap/js/modules/importers/communesfr.js
index 6a7348cc..6b4c0f15 100644
--- a/umap/static/umap/js/modules/importers/communesfr.js
+++ b/umap/static/umap/js/modules/importers/communesfr.js
@@ -37,8 +37,10 @@ export class Importer {
     this.autocomplete = new Autocomplete(container, options)
 
     importer.dialog.open({
-      content: container,
+      template: container,
       className: `${this.id} importer dark`,
+      cancel: false,
+      accept: false,
     })
   }
 }
diff --git a/umap/static/umap/js/modules/importers/datasets.js b/umap/static/umap/js/modules/importers/datasets.js
index a376f696..eb2c4049 100644
--- a/umap/static/umap/js/modules/importers/datasets.js
+++ b/umap/static/umap/js/modules/importers/datasets.js
@@ -30,13 +30,15 @@ export class Importer {
         importer.format = select.options[select.selectedIndex].dataset.format
         importer.layerName = select.options[select.selectedIndex].textContent
       }
-      importer.dialog.close()
     }
-    L.DomUtil.createButton('', container, translate('Choose this dataset'), confirm)
 
-    importer.dialog.open({
-      content: container,
-      className: `${this.id} importer dark`,
-    })
+    importer.dialog
+      .open({
+        template: container,
+        className: `${this.id} importer dark`,
+        accept: translate('Choose this dataset'),
+        cancel: false,
+      })
+      .then(confirm)
   }
 }
diff --git a/umap/static/umap/js/modules/importers/geodatamine.js b/umap/static/umap/js/modules/importers/geodatamine.js
index cfbef595..816fcbcb 100644
--- a/umap/static/umap/js/modules/importers/geodatamine.js
+++ b/umap/static/umap/js/modules/importers/geodatamine.js
@@ -25,7 +25,6 @@ const TEMPLATE = `
   </label>
   <label id="boundary">
   </label>
-  <button class="button">${translate('Choose this data')}</button>
 `
 
 class Autocomplete extends SingleMixin(BaseAjax) {
@@ -66,7 +65,6 @@ export class Importer {
     } else {
       console.error(response)
     }
-    const asPoint = container.querySelector('[name=aspoint]')
     this.autocomplete = new Autocomplete(container.querySelector('#boundary'), {
       placeholder: translate('Search admin boundary'),
       url: `${this.baseUrl}/boundaries/search?text={q}`,
@@ -75,21 +73,23 @@ export class Importer {
         boundaryName = choice.item.label
       },
     })
-    const confirm = () => {
+    const confirm = (form) => {
       if (!boundary || !select.value) {
         Alert.error(translate('Please choose a theme and a boundary first.'))
         return
       }
-      importer.url = `${this.baseUrl}/data/${select.value}/${boundary}?format=geojson&aspoint=${asPoint.checked}`
+      importer.url = `${this.baseUrl}/data/${form.theme}/${boundary}?format=geojson&aspoint=${Boolean(form.aspoint)}`
       importer.format = 'geojson'
       importer.layerName = `${boundaryName} — ${select.options[select.selectedIndex].textContent}`
-      importer.dialog.close()
     }
-    DomEvent.on(container.querySelector('button'), 'click', confirm)
 
-    importer.dialog.open({
-      content: container,
-      className: `${this.id} importer dark`,
-    })
+    importer.dialog
+      .open({
+        template: container,
+        className: `${this.id} importer dark`,
+        accept: translate('Choose this data'),
+        cancel: false,
+      })
+      .then(confirm)
   }
 }
diff --git a/umap/static/umap/js/modules/importers/overpass.js b/umap/static/umap/js/modules/importers/overpass.js
index 8bd7f058..4e9c5190 100644
--- a/umap/static/umap/js/modules/importers/overpass.js
+++ b/umap/static/umap/js/modules/importers/overpass.js
@@ -11,7 +11,7 @@ const TEMPLATE = `
   </label>
   <label>
     ${translate('Geometry mode')}
-    <select name="out-mode">
+    <select name="out">
       <option value="geom" selected>${translate('Default')}</option>
       <option value="center">${translate('Only geometry centers')}</option>
     </select>
@@ -58,27 +58,28 @@ export class Importer {
     })
     this.map.help.parse(container)
 
-    const confirm = () => {
-      let tags = container.querySelector('[name=tags]').value
-      if (!tags) {
-        Alert.error(translate('Please define an expression for the query first'))
+    const confirm = (form) => {
+      if (!form.tags) {
+        Alert.error(translate('Expression is empty'))
         return
       }
-      const outMode = container.querySelector('[name=out-mode]').value
+      let tags = form.tags
       if (!tags.startsWith('[')) tags = `[${tags}]`
       let area = '{south},{west},{north},{east}'
       if (boundary) area = `area:${boundary}`
-      const query = `[out:json];nwr${tags}(${area});out ${outMode};`
+      const query = `[out:json];nwr${tags}(${area});out ${form.out};`
       importer.url = `${this.baseUrl}?data=${query}`
       if (boundary) importer.layerName = boundaryName
       importer.format = 'osm'
-      importer.dialog.close()
     }
-    L.DomUtil.createButton('', container, translate('Choose this data'), confirm)
 
-    importer.dialog.open({
-      content: container,
-      className: `${this.id} importer dark`,
-    })
+    importer.dialog
+      .open({
+        template: container,
+        className: `${this.id} importer dark`,
+        accept: translate('Choose this data'),
+        cancel: false
+      })
+      .then(confirm)
   }
 }
diff --git a/umap/static/umap/js/modules/ui/dialog.js b/umap/static/umap/js/modules/ui/dialog.js
index ebc12cb0..32d0b85b 100644
--- a/umap/static/umap/js/modules/ui/dialog.js
+++ b/umap/static/umap/js/modules/ui/dialog.js
@@ -1,22 +1,89 @@
 import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 
-export class Dialog {
-  constructor() {
-    this.className = 'umap-dialog window'
-    this.container = DomUtil.create('dialog', this.className, document.body)
-    DomEvent.disableClickPropagation(this.container)
-    DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
-    DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
-    DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
+// From https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/
+export default class Dialog {
+  constructor(settings = {}) {
+    this.settings = Object.assign(
+      {
+        accept: translate('OK'),
+        cancel: translate('Cancel'),
+        className: '',
+        message: '',
+        template: '',
+      },
+      settings
+    )
+    this.init()
   }
 
-  get visible() {
-    return this.container.open
+  collectFormData(formData) {
+    const object = {}
+    formData.forEach((value, key) => {
+      if (!Reflect.has(object, key)) {
+        object[key] = value
+        return
+      }
+      if (!Array.isArray(object[key])) {
+        object[key] = [object[key]]
+      }
+      object[key].push(value)
+    })
+    return object
   }
 
-  close() {
-    this.container.close()
+  getFocusable() {
+    return [
+      ...this.dialog.querySelectorAll(
+        'button,[href],select,textarea,input:not([type="hidden"]),[tabindex]:not([tabindex="-1"])'
+      ),
+    ]
+  }
+
+  init() {
+    this.dialogSupported = typeof HTMLDialogElement === 'function'
+    this.dialog = document.createElement('dialog')
+    this.dialog.role = 'dialog'
+    this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
+    this.dialog.innerHTML = `
+    <form method="dialog" data-ref="form">
+      <ul class="buttons">
+        <li><i class="icon icon-16 icon-close" data-close></i></li>
+      </ul>
+      <h3 data-ref="message" id="${Math.round(Date.now()).toString(36)}"></h3>
+      <fieldset data-ref="fieldset" role="document">
+        <div data-ref="template"></div>
+      </fieldset>
+      <menu>
+        <button${this.dialogSupported ? '' : ` type="button"`} class="button" data-ref="cancel" data-close value="cancel"></button>
+        <button${this.dialogSupported ? ' type="submit"' : ` type="button"`} class="button" data-ref="accept" value="accept"></button>
+      </menu>
+    </form>`
+    document.body.appendChild(this.dialog)
+
+    this.elements = {}
+    this.focusable = []
+    this.dialog
+      .querySelectorAll('[data-ref]')
+      .forEach((el) => (this.elements[el.dataset.ref] = el))
+    this.dialog.setAttribute('aria-labelledby', this.elements.message.id)
+    this.dialog.addEventListener('click', (event) => {
+      if (event.target.closest('[data-close]')) {
+        this.dialog.close('cancel')
+      }
+    })
+    this.dialog.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        if (!this.dialogSupported) e.preventDefault()
+        console.log('Enter')
+        this.elements.accept.click()
+      }
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        this.dialog.close('cancel')
+      }
+    })
+    this.toggle()
   }
 
   currentZIndex() {
@@ -27,65 +94,84 @@ export class Dialog {
     )
   }
 
-  open({ className, content, modal } = {}) {
-    this.container.innerHTML = ''
-    const currentZIndex = this.currentZIndex()
-    if (currentZIndex) this.container.style.zIndex = currentZIndex + 1
-    if (modal) this.container.showModal()
-    else this.container.show()
-    if (className) {
-      // Reset
-      this.container.className = this.className
-      this.container.classList.add(...className.split(' '))
+  open(settings = {}) {
+    const dialog = Object.assign({}, this.settings, settings)
+    this.dialog.className = 'umap-dialog window'
+    if (dialog.className) {
+      this.dialog.classList.add(...dialog.className.split(' '))
     }
-    const buttonsContainer = DomUtil.create('ul', 'buttons', this.container)
-    const closeButton = DomUtil.createButtonIcon(
-      DomUtil.create('li', '', buttonsContainer),
-      'icon-close',
-      translate('Close')
+    this.elements.accept.textContent = dialog.accept
+    this.elements.accept.hidden = !dialog.accept
+    this.elements.cancel.textContent = dialog.cancel
+    this.elements.cancel.hidden = !dialog.cancel
+    this.elements.message.textContent = dialog.message
+    this.elements.message.hidden = !dialog.message
+    this.elements.target = dialog.target || ''
+    this.elements.template.innerHTML = ''
+    if (dialog.template?.nodeType === 1) {
+      this.elements.template.appendChild(dialog.template)
+    } else {
+      this.elements.template.innerHTML = dialog.template || ''
+    }
+
+    this.focusable = this.getFocusable()
+    this.hasFormData = this.elements.fieldset.elements.length > 0
+
+    const currentZIndex = this.currentZIndex()
+    if (currentZIndex) this.dialog.style.zIndex = currentZIndex + 1
+
+    this.toggle(true)
+
+    if (this.hasFormData) this.focusable[0].focus()
+    else this.elements.accept.focus()
+
+    return this.waitForUser()
+  }
+
+  close() {
+    this.toggle(false)
+  }
+
+  toggle(open = false) {
+    if (this.dialogSupported && open) this.dialog.show()
+    if (!this.dialogSupported) {
+      this.dialog.hidden = !open
+      if (this.elements.target && !open) {
+        this.elements.target.focus()
+      }
+    }
+  }
+
+  waitForUser() {
+    return new Promise((resolve) => {
+      this.dialog.addEventListener(
+        'close',
+        (status) => {
+          this.toggle()
+          if (this.dialog.returnValue === 'accept') {
+            const value = this.hasFormData
+              ? this.collectFormData(new FormData(this.elements.form))
+              : true
+            resolve(value)
+          }
+        },
+        { once: true }
+      )
+    })
+  }
+
+  alert(config) {
+    return this.open(
+      Object.assign({}, config, { cancel: false, message, template: false })
     )
-    DomEvent.on(closeButton, 'click', this.close, this)
-    this.container.appendChild(buttonsContainer)
-    this.container.appendChild(content)
-    DomEvent.once(this.container, 'keydown', (e) => {
-      DomEvent.stop(e)
-      if (e.key === 'Escape') this.close()
-    })
-  }
-}
-
-const PROMPT = `
-<form>
-  <h3></h3>
-  <input type="text" name="prompt" />
-  <input type="submit" value="${translate('Ok')}" />
-</form>
-`
-
-export class Prompt extends Dialog {
-  get input() {
-    return this.container.querySelector('input[name="prompt"]')
-  }
-
-  get title() {
-    return this.container.querySelector('h3')
-  }
-
-  get form() {
-    return this.container.querySelector('form')
-  }
-
-  open({ className, title } = {}) {
-    const content = DomUtil.element({ tagName: 'div', safeHTML: PROMPT })
-    super.open({ className, content })
-    this.title.textContent = title
-    const promise = new Promise((resolve, reject) => {
-      DomEvent.on(this.form, 'submit', (e) => {
-        DomEvent.stop(e)
-        resolve(this.input.value)
-        this.close()
-      })
-    })
-    return promise
+  }
+
+  confirm(message, config = {}) {
+    return this.open(Object.assign({}, config, { message, template: false }))
+  }
+
+  prompt(message, fallback = '', config = {}) {
+    const template = `<input type="text" name="prompt" value="${fallback}">`
+    return this.open(Object.assign({}, config, { message, template }))
   }
 }
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index e4670255..df355a9a 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -194,16 +194,9 @@ U.FeatureMixin = {
   },
 
   getAdvancedEditActions: function (container) {
-    L.DomUtil.createButton(
-      'button umap-delete',
-      container,
-      L._('Delete'),
-      function (e) {
-        L.DomEvent.stop(e)
-        if (this.confirmDelete()) this.map.editPanel.close()
-      },
-      this
-    )
+    L.DomUtil.createButton('button umap-delete', container, L._('Delete'), (e) => {
+      this.confirmDelete().then(() => this.map.editPanel.close())
+    })
   },
 
   appendEditFieldsets: function (container) {
@@ -272,8 +265,11 @@ U.FeatureMixin = {
     this.bindPopup(new Class(this))
   },
 
-  confirmDelete: function () {
-    if (confirm(L._('Are you sure you want to delete the feature?'))) {
+  confirmDelete: async function () {
+    const confirmed = await this.map.dialog.confirm(
+      L._('Are you sure you want to delete the feature?')
+    )
+    if (confirmed) {
       this.del()
       return true
     }
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index c5907661..d1ef06d2 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -56,6 +56,7 @@ U.Map = L.Map.extend({
     this.urls = new U.URLs(this.options.urls)
 
     this.panel = new U.Panel(this)
+    this.dialog = new U.Dialog({ className: 'dark' })
     this.tooltip = new U.Tooltip(this._controlContainer)
     if (this.hasEditMode()) {
       this.editPanel = new U.EditPanel(this)
@@ -1639,9 +1640,12 @@ U.Map = L.Map.extend({
   },
 
   askForReset: function (e) {
-    if (!confirm(L._('Are you sure you want to cancel your changes?'))) return
-    this.reset()
-    this.disableEdit()
+    this.dialog
+      .confirm(L._('Are you sure you want to cancel your changes?'))
+      .then(() => {
+        this.reset()
+        this.disableEdit()
+      })
   },
 
   startMarker: function () {
diff --git a/umap/static/umap/js/umap.tableeditor.js b/umap/static/umap/js/umap.tableeditor.js
index 861a2b96..20e1dbcc 100644
--- a/umap/static/umap/js/umap.tableeditor.js
+++ b/umap/static/umap/js/umap.tableeditor.js
@@ -21,35 +21,8 @@ U.TableEditor = L.Class.extend({
     const rename = L.DomUtil.create('i', 'umap-edit', container)
     del.title = L._('Delete this property on all the features')
     rename.title = L._('Rename this property on all the features')
-    const doDelete = function () {
-      if (
-        confirm(
-          L._('Are you sure you want to delete this property on all the features?')
-        )
-      ) {
-        this.datalayer.eachLayer((feature) => {
-          feature.deleteProperty(property)
-        })
-        this.datalayer.deindexProperty(property)
-        this.resetProperties()
-        this.edit()
-      }
-    }
-    const doRename = function () {
-      const newName = prompt(
-        L._('Please enter the new name of this property'),
-        property
-      )
-      if (!newName || !this.validateName(newName)) return
-      this.datalayer.eachLayer((feature) => {
-        feature.renameProperty(property, newName)
-      })
-      this.datalayer.deindexProperty(property)
-      this.datalayer.indexProperty(newName)
-      this.edit()
-    }
-    L.DomEvent.on(del, 'click', doDelete, this)
-    L.DomEvent.on(rename, 'click', doRename, this)
+    L.DomEvent.on(del, 'click', () => this.deleteProperty(property))
+    L.DomEvent.on(rename, 'click', () => this.renameProperty(property))
   },
 
   renderRow: function (feature) {
@@ -89,15 +62,41 @@ U.TableEditor = L.Class.extend({
     return true
   },
 
-  addProperty: function () {
-    new U.Prompt()
-      .open({
-        className: 'dark',
-        title: L._('Please enter the name of the property'),
+  renameProperty: function (property) {
+    this.datalayer.map.dialog
+      .prompt(L._('Please enter the new name of this property'))
+      .then(({ prompt }) => {
+        if (!prompt || !this.validateName(prompt)) return
+        this.datalayer.eachLayer((feature) => {
+          feature.renameProperty(property, prompt)
+        })
+        this.datalayer.deindexProperty(property)
+        this.datalayer.indexProperty(prompt)
+        this.edit()
       })
-      .then((newName) => {
-        if (!newName || !this.validateName(newName)) return
-        this.datalayer.indexProperty(newName)
+  },
+
+  deleteProperty: function (property) {
+    this.datalayer.map.dialog
+      .confirm(
+        L._('Are you sure you want to delete this property on all the features?')
+      )
+      .then(() => {
+        this.datalayer.eachLayer((feature) => {
+          feature.deleteProperty(property)
+        })
+        this.datalayer.deindexProperty(property)
+        this.resetProperties()
+        this.edit()
+      })
+  },
+
+  addProperty: function () {
+    this.datalayer.map.dialog
+      .prompt(L._('Please enter the name of the property'))
+      .then(({ prompt }) => {
+        if (!prompt || !this.validateName(prompt)) return
+        this.datalayer.indexProperty(prompt)
         this.edit()
       })
   },
diff --git a/umap/templates/umap/components/alerts/alert.html b/umap/templates/umap/components/alerts/alert.html
index 8c7c7686..75ebaf6f 100644
--- a/umap/templates/umap/components/alerts/alert.html
+++ b/umap/templates/umap/components/alerts/alert.html
@@ -5,7 +5,7 @@
 </style>
 
 <template id="umap-alert-template">
-  <div role="dialog" class="dark window">
+  <div role="dialog" class="dark window umap-alert">
     <div>
       <p role="alert"></p>
     </div>
@@ -20,7 +20,7 @@
 <umap-alert></umap-alert>
 
 <template id="umap-alert-creation-template">
-  <div role="dialog" class="dark window">
+  <div role="dialog" class="dark window umap-alert">
     <div>
       <h3 role="alert"></h3>
       {% url "login" as login_url %}
@@ -55,7 +55,7 @@
 <umap-alert-creation></umap-alert-creation>
 
 <template id="umap-alert-conflict-template">
-  <div role="dialog" class="dark window">
+  <div role="dialog" class="dark window umap-alert">
     <div>
       <p role="alert"></p>
       <div id="conflict-wrapper">
diff --git a/umap/tests/integration/test_browser.py b/umap/tests/integration/test_browser.py
index 77495833..835b769f 100644
--- a/umap/tests/integration/test_browser.py
+++ b/umap/tests/integration/test_browser.py
@@ -320,10 +320,11 @@ def test_should_redraw_list_on_feature_delete(live_server, openmap, page, bootst
     page.get_by_role("button", name="Edit").click()
     buttons = page.locator(".umap-browser .datalayer li .icon-delete")
     expect(buttons).to_have_count(3)
-    page.on("dialog", lambda dialog: dialog.accept())
-    buttons.nth(0).click()
+    buttons.first.click()
+    page.locator("dialog").get_by_role("button", name="OK").click()
     expect(buttons).to_have_count(2)
     page.get_by_role("button", name="Cancel edits").click()
+    page.locator("dialog").get_by_role("button", name="OK").click()
     expect(buttons).to_have_count(3)
 
 
diff --git a/umap/tests/integration/test_edit_datalayer.py b/umap/tests/integration/test_edit_datalayer.py
index 3ef0fd44..b511d385 100644
--- a/umap/tests/integration/test_edit_datalayer.py
+++ b/umap/tests/integration/test_edit_datalayer.py
@@ -67,6 +67,7 @@ def test_cancel_deleting_datalayer_should_restore(
     expect(page.get_by_text("test datalayer")).to_be_hidden()
     page.once("dialog", lambda dialog: dialog.accept())
     page.get_by_role("button", name="Cancel edits").click()
+    page.locator("dialog").get_by_role("button", name="OK").click()
     expect(markers).to_have_count(1)
     expect(page.locator(".umap-browser").get_by_text("test datalayer")).to_be_visible()
 
diff --git a/umap/tests/integration/test_edit_polygon.py b/umap/tests/integration/test_edit_polygon.py
index be65bb6a..5f60087b 100644
--- a/umap/tests/integration/test_edit_polygon.py
+++ b/umap/tests/integration/test_edit_polygon.py
@@ -117,8 +117,8 @@ def test_should_reset_style_on_cancel(live_server, openmap, page, bootstrap):
     expect(page.locator(".leaflet-overlay-pane path[fill='GoldenRod']")).to_have_count(
         1
     )
-    page.once("dialog", lambda dialog: dialog.accept())
     page.get_by_role("button", name="Cancel edits").click()
+    page.locator("dialog").get_by_role("button", name="OK").click()
     expect(page.locator(".leaflet-overlay-pane path[fill='DarkBlue']")).to_have_count(1)
 
 
diff --git a/umap/tests/integration/test_tableeditor.py b/umap/tests/integration/test_tableeditor.py
index b2d3cc89..cbedf3aa 100644
--- a/umap/tests/integration/test_tableeditor.py
+++ b/umap/tests/integration/test_tableeditor.py
@@ -9,12 +9,14 @@ def test_table_editor(live_server, openmap, datalayer, page):
     page.goto(f"{live_server.url}{openmap.get_absolute_url()}?edit")
     page.get_by_role("link", name="Manage layers").click()
     page.locator(".panel").get_by_title("Edit properties in a table").click()
-    page.once("dialog", lambda dialog: dialog.accept(prompt_text="newprop"))
     page.get_by_text("Add a new property").click()
+    page.locator("dialog").locator("input").fill("newprop")
+    page.locator("dialog").get_by_role("button", name="OK").click()
     page.locator('input[name="newprop"]').fill("newvalue")
     page.once("dialog", lambda dialog: dialog.accept())
     page.hover(".umap-table-editor .tcell")
     page.get_by_title("Delete this property on all").first.click()
+    page.locator("dialog").get_by_role("button", name="OK").click()
     with page.expect_response(re.compile(r".*/datalayer/update/.*")):
         page.get_by_role("button", name="Save").click()
     saved = DataLayer.objects.last()

From 4c1ea8b97f02ab8f5e13a54b99f36587010396dd Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 2 Jul 2024 20:45:45 +0200
Subject: [PATCH 3/4] wip: make sure dialog polyfill works

---
 umap/static/umap/css/dialog.css          |  4 +--
 umap/static/umap/css/window.css          |  1 -
 umap/static/umap/js/modules/ui/dialog.js | 37 +++++++++++++++---------
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/umap/static/umap/css/dialog.css b/umap/static/umap/css/dialog.css
index d186d7e3..a3ffca7e 100644
--- a/umap/static/umap/css/dialog.css
+++ b/umap/static/umap/css/dialog.css
@@ -16,9 +16,7 @@
 }
 :where([data-component="no-dialog"]:not([hidden])) {
   display: block;
-  inset-inline-start: 50%;
-  position: fixed;
-  transform: translateX(-50%);
+  position: relative;
 }
 :where([data-component*="dialog"] menu) {
   display: flex;
diff --git a/umap/static/umap/css/window.css b/umap/static/umap/css/window.css
index e45e9056..a4768fbd 100644
--- a/umap/static/umap/css/window.css
+++ b/umap/static/umap/css/window.css
@@ -10,7 +10,6 @@
     position: sticky;
     top: 0;
     height: var(--panel-header-height);
-    float: right;
 }
 .window .buttons li {
     cursor: pointer;
diff --git a/umap/static/umap/js/modules/ui/dialog.js b/umap/static/umap/js/modules/ui/dialog.js
index 32d0b85b..798ef167 100644
--- a/umap/static/umap/js/modules/ui/dialog.js
+++ b/umap/static/umap/js/modules/ui/dialog.js
@@ -1,4 +1,3 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 
 // From https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/
@@ -55,8 +54,8 @@ export default class Dialog {
         <div data-ref="template"></div>
       </fieldset>
       <menu>
-        <button${this.dialogSupported ? '' : ` type="button"`} class="button" data-ref="cancel" data-close value="cancel"></button>
-        <button${this.dialogSupported ? ' type="submit"' : ` type="button"`} class="button" data-ref="accept" value="accept"></button>
+        <button type="button" data-ref="cancel" data-close value="cancel"></button>
+        <button type="submit" class="button" data-ref="accept" value="accept"></button>
       </menu>
     </form>`
     document.body.appendChild(this.dialog)
@@ -69,21 +68,29 @@ export default class Dialog {
     this.dialog.setAttribute('aria-labelledby', this.elements.message.id)
     this.dialog.addEventListener('click', (event) => {
       if (event.target.closest('[data-close]')) {
-        this.dialog.close('cancel')
+        this.close()
       }
     })
+    if (!this.dialogSupported) {
+      this.elements.form.addEventListener('submit', (event) => {
+        event.preventDefault()
+        this.dialog.returnValue = 'accept'
+        this.close()
+        this.dialog.returnValue = undefined
+      })
+    }
     this.dialog.addEventListener('keydown', (e) => {
       if (e.key === 'Enter') {
-        if (!this.dialogSupported) e.preventDefault()
-        console.log('Enter')
-        this.elements.accept.click()
+        if (!this.dialogSupported) {
+          e.preventDefault()
+          this.elements.form.requestSubmit()
+        }
       }
       if (e.key === 'Escape') {
         e.stopPropagation()
-        this.dialog.close('cancel')
+        this.close()
       }
     })
-    this.toggle()
   }
 
   currentZIndex() {
@@ -133,12 +140,17 @@ export default class Dialog {
   }
 
   toggle(open = false) {
-    if (this.dialogSupported && open) this.dialog.show()
-    if (!this.dialogSupported) {
+    if (this.dialogSupported) {
+      if (open) this.dialog.show()
+      else this.dialog.close()
+    } else {
       this.dialog.hidden = !open
       if (this.elements.target && !open) {
         this.elements.target.focus()
       }
+      if (!open) {
+        this.dialog.dispatchEvent(new CustomEvent('close'))
+      }
     }
   }
 
@@ -146,8 +158,7 @@ export default class Dialog {
     return new Promise((resolve) => {
       this.dialog.addEventListener(
         'close',
-        (status) => {
-          this.toggle()
+        (event) => {
           if (this.dialog.returnValue === 'accept') {
             const value = this.hasFormData
               ? this.collectFormData(new FormData(this.elements.form))

From 6872a584bee6d6e1299b9e47bc55714026dcac83 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 2 Jul 2024 21:09:23 +0200
Subject: [PATCH 4/4] wip: fix tests

---
 umap/tests/integration/test_websocket_sync.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/umap/tests/integration/test_websocket_sync.py b/umap/tests/integration/test_websocket_sync.py
index 604bdc6a..a038f784 100644
--- a/umap/tests/integration/test_websocket_sync.py
+++ b/umap/tests/integration/test_websocket_sync.py
@@ -69,8 +69,8 @@ def test_websocket_connection_can_sync_markers(
 
     # Delete a marker from peer A and check it's been deleted on peer B
     a_first_marker.click(button="right")
-    peerA.on("dialog", lambda dialog: dialog.accept())
     peerA.get_by_role("link", name="Delete this feature").click()
+    peerA.locator("dialog").get_by_role("button", name="OK").click()
     expect(a_marker_pane).to_have_count(1)
     expect(b_marker_pane).to_have_count(1)
 
@@ -153,8 +153,8 @@ def test_websocket_connection_can_sync_polygons(
 
     # Delete a polygon from peer A and check it's been deleted on peer B
     a_polygon.click(button="right")
-    peerA.on("dialog", lambda dialog: dialog.accept())
     peerA.get_by_role("link", name="Delete this feature").click()
+    peerA.locator("dialog").get_by_role("button", name="OK").click()
     expect(a_polygons).to_have_count(0)
     expect(b_polygons).to_have_count(0)