chore: improve message/choice in case of conflicts

docs-users/fr/tutorials/2-first-map.md

@@ -90,7 +90,7 @@ texte est affiché en haut de la carte, comme celui ci-dessous :
     data-width="790"
     data-height="226"
     data-selector="#umap-alert-container"
-    data-wait-for="document.querySelector('#umap-alert-container .umap-alert-actions')"
+    data-wait-for="document.querySelector('#umap-alert-container .TODO')"
     data-javascript="document.querySelector('button.leaflet-control-edit-save').click()"
     >Message d’alerte contenant le lien d’édition.</shot-scraper>
 

umap/static/umap/js/components/alerts/alert.css

@@ -25,7 +25,7 @@
 [role="dialog"] > div {
     margin: 0 auto;
 }
-[role="dialog"] [data-close] {
+[role="dialog"] [data-close].umap-close-link {
     color: #fff;
     max-width: 42px;
     line-height: initial;
@@ -34,7 +34,7 @@
     background-color: #202425;
     font-size: 0.7rem;
 }
-[role="dialog"] [data-close] .icon + span {
+[role="dialog"] [data-close].umap-close-link .icon + span {
     margin-left: 0;
 }
 #link-wrapper form {
@@ -43,3 +43,19 @@
 #link-wrapper form input[type='button'] {
     max-width: 100px;
 }
+#choice-wrapper form {
+    display: flex;
+    justify-content: space-between;
+}
+@media only screen and (max-width:770px) {
+    #choice-wrapper form {
+        flex-direction: column;
+    }
+}
+#choice-wrapper form > * {
+    max-width: 300px;
+}
+umap-alert-choice a {
+    color: white;
+    text-decoration: underline;
+}

umap/static/umap/js/components/alerts/alert.html

@@ -20,14 +20,14 @@
     <div>
       <p role="alert"></p>
       <div id="link-wrapper">
-        <form class="umap-alert-actions">
+        <form>
           <input type="url" name="url">
           <input type="button" value="{% translate "Copy link" %}">
         </form>
       </div>
       <div id="form-wrapper" hidden>
         <p>{% translate "You can also receive that URL by email:" %}</p>
-        <form class="umap-alert-actions">
+        <form>
           <input type="email" name="email" class="umap-alert-input" required>
           <input type="submit" value="{% translate "Send me the link" %}" class="umap-action">
         </form>
@@ -42,15 +42,12 @@
 <umap-alert-choice hidden>
   <div role="dialog">
     <div>
-      <p role="alert">
-        {% blocktranslate %}
-          Woops! Someone else seems to have edited the data. You can save anyway, but this will erase the changes made by others.
-        {% endblocktranslate %}
-      </p>
+      <p role="alert"></p>
       <div id="choice-wrapper">
-        <form class="umap-alert-actions">
-          <button type="button" data-close>{% translate "Cancel" %}</button>
-          <input type="submit" value="{% translate "Save anyway" %}">
+        <form>
+          <a href="" onclick="document.url" target="_blank">{% translate "See their edits in another tab" %}</a>
+          <input id="your-changes" type="submit" value="{% translate "Keep your changes and loose theirs" %}">
+          <input id="their-changes" type="submit" value="{% translate "Keep their changes and loose yours" %}">
         </form>
       </div>
     </div>

umap/static/umap/js/components/alerts/alert.js

@@ -129,7 +129,7 @@ class uMapAlertChoice extends uMapAlert {
     const event = new CustomEvent('umap:alert-choice', {
       bubbles: true,
       cancelable: true,
-      detail: { message, duration },
+      detail: { level: 'error', message, duration },
     })
     document.dispatchEvent(event)
   }
@@ -140,17 +140,25 @@ class uMapAlertChoice extends uMapAlert {
   }
 
   _displayChoiceAlert(detail) {
-    const { level = 'error', duration = 5000, message = '' } = detail
+    const { level = 'info', duration = 5000, message = '' } = detail
     uMapAlert.prototype._displayAlert.call(this, { level, duration, message })
-    const button = this.choiceWrapper.querySelector('input[type="submit"]')
-    button.addEventListener('click', (event) => {
+    const form = this.choiceWrapper.querySelector('form')
+    form.addEventListener('submit', (event) => {
       event.preventDefault()
-      document.dispatchEvent(
-        new CustomEvent('umap:alert-choice-confirm', {
-          bubbles: true,
-          cancelable: true,
-        })
-      )
+      switch (event.submitter.id) {
+        case 'your-changes':
+          document.dispatchEvent(
+            new CustomEvent('umap:alert-choice-override', {
+              bubbles: true,
+              cancelable: true,
+            })
+          )
+          break
+        case 'their-changes':
+          window.location.reload()
+          break
+      }
+      this._hide()
     })
   }
 

umap/static/umap/js/umap.layer.js

@@ -1707,11 +1707,11 @@ U.DataLayer = L.Evented.extend({
       if (response && response.status === 412) {
         U.AlertChoice.error(
           L._(
-            'Woops! Someone else seems to have edited the data. ' +
-              'You can save anyway, but this will erase the changes made by others.'
+            'Whoops! Other contributor(s) changed some of the same map elements as you. ' +
+              'This situation is tricky, you have to choose carefully which version is pertinent.'
           )
         )
-        document.addEventListener('umap:alert-choice-confirm', async (event) => {
+        document.addEventListener('umap:alert-choice-override', async (event) => {
           await this._trySave(url, {}, formData)
         })
       }

umap/views.py

@@ -1110,7 +1110,7 @@ class DataLayerUpdate(FormLessEditMixin, GZipMixin, UpdateView):
                     reference = json.loads(f.read())
                 break
         else:
-            # If the document is not found, we can't merge.
+            # If the reference document is not found, we can't merge.
             return None
         # New data received in the request.
         incoming = json.loads(self.request.FILES["geojson"].read())