add abort button to retry save modal and several other fixes for it (#291)

Croodle shows a modal if saving a participation fails. The modal allows
a user to retry the save attempt. While it was always possible to close
the button by clicking on backdrop or using escape key, a button to do so
was missing. A user may not know about the user ways and may see reloading
the page as only possibilty to close the modal if he doesn't want to retry
again.

This adds the missing abort button and fixes some smaller bugs including:

- The modal was missing a title.
- If the modal was closed once it wasn't reopened on another failed saving
  attemp unless the user has visit another page in between.
- Several arguments were passed to <BsModal> that weren't existing at all.

app/locales/ca/translations.js

@@ -1,4 +1,5 @@
 export default {
+  'action.abort': 'Abort',
   'action.back': 'Enrere',
   'action.next': 'Següent',
   'action.save': 'Desa',

app/locales/de/translations.js

@@ -1,4 +1,5 @@
 export default {
+  'action.abort': 'Abbrechen',
   'action.back': 'Zurück',
   'action.next': 'Weiter',
   'action.save': 'Speichern',

app/locales/en/translations.js

@@ -1,4 +1,5 @@
 export default {
+  'action.abort': 'Abort',
   'action.back': 'Back',
   'action.next': 'Next',
   'action.save': 'Save',

app/locales/es/translations.js

@@ -1,4 +1,5 @@
 export default {
+  'action.abort': 'Abort',
   'action.back': 'Atras',
   'action.next': 'Siguiente',
   'action.save': 'Guardar',

app/locales/it/translations.js

@@ -1,4 +1,5 @@
 export default {
+  'action.abort': 'Abort',
   'action.back': 'Indietro',
   'action.next': 'Avanti',
   'action.save': 'Salvare',

app/templates/poll/participation.hbs

@@ -80,24 +80,32 @@
   {{/bs-form}}
 </div>
 
-{{#bs-modal
+<BsModal
-  open=savingFailed
+  @id="modal-saving-failed-modal"
-  title=(t "modal.save-retry.title")
+  @onHidden={{action (mut savingFailed) false}}
-  body=false
+  @onSubmit={{action "save"}}
-  footer=false
+  @open={{savingFailed}}
-  closeButton=false
+  as |modal|
-  autoClose=false
+>
-  id="modal-saving-failed"
+  <modal.header
-as |modal|
+    @closeButton={{false}}
-}}
+    @title={{t "modal.save-retry.title"}}
-  {{#modal.body}}
+  />
+  <modal.body>
     <p>{{t "modal.save-retry.text"}}</p>
-  {{/modal.body}}
+  </modal.body>
-  {{#modal.footer}}
+  <modal.footer>
-    {{bs-button
+    <BsButton
-      defaultText=(t "modal.save-retry.button-retry")
+      @onClick={{action modal.close}}
-      type="primary"
+    >
-      onClick=(action "save")
+      {{t "action.abort"}}
-    }}
+    </BsButton>
-  {{/modal.footer}}
+    <BsButton
-{{/bs-modal}}
+      @type="primary"
+      @onClick={{action modal.submit}}
+      data-test-button="retry"
+    >
+      {{t "modal.save-retry.button-retry"}}
+    </BsButton>
+  </modal.footer>
+</BsModal>

tests/acceptance/participate-in-a-poll-test.js

@@ -150,18 +150,18 @@ module('Acceptance | participate in a poll', function(hooks) {
 
     await visit(`/poll/${poll.id}/participation?encryptionKey=${encryptionKey}`);
     assert.equal(currentRouteName(), 'poll.participation');
-    assert.dom('modal-saving-failed-modal')
+    assert.dom('#modal-saving-failed-modal .modal-content')
-      .doesNotExist('failed saving notification is not shown before attempt to save');
+      .isNotVisible('failed saving notification is not shown before attempt to save');
 
     await pollParticipate('John Doe', ['yes', 'no']);
-    assert.dom('#modal-saving-failed-modal')
+    assert.dom('#modal-saving-failed-modal .modal-content')
-      .exists('user gets notified that saving failed');
+      .isVisible('user gets notified that saving failed');
 
     this.server.post('/users');
 
-    await click('#modal-saving-failed-modal button');
+    await click('#modal-saving-failed-modal [data-test-button="retry"]');
-    assert.dom('#modal-saving-failed-modal')
+    assert.dom('#modal-saving-failed-modal .modal-content')
-      .doesNotExist('Notification is hidden after another save attempt was successful');
+      .isNotVisible('Notification is hidden after another save attempt was successful');
     assert.equal(currentRouteName(), 'poll.evaluation');
     assert.equal(PollEvaluationPage.participants.length, 1, 'user is added to participants table');