[5.0] Use Joomla dialog for confirmation dialog, instead of old school confirm()

build/media_source/system/joomla.asset.json

@@ -580,7 +580,8 @@
         "type": "module"
       },
       "dependencies": [
-        "webcomponent.toolbar-button-legacy"
+        "webcomponent.toolbar-button-legacy",
+        "joomla.dialog"
       ]
     },
     {

build/media_source/system/js/joomla-dialog.w-c.es6.js

@@ -221,6 +221,7 @@ class JoomlaDialog extends HTMLElement {
         label: '',
         ariaLabel: this.textClose,
         className: 'button-close btn-close',
+        data: { buttonClose: '' },
         onClick: () => this.close(),
         location: 'header',
       });
@@ -236,7 +237,7 @@ class JoomlaDialog extends HTMLElement {
       const btn = document.createElement('button');
       btn.type = 'button';
       btn.textContent = btnData.label || '';
-      btn.ariaLabel = btnData.ariaLabel || '';
+      btn.ariaLabel = btnData.ariaLabel || null;
 
       if (btnData.className) {
         btn.classList.add(...btnData.className.split(' '));
@@ -571,6 +572,7 @@ class JoomlaDialog extends HTMLElement {
       popup.textHeader = title || Joomla.Text._('INFO', 'Info');
       popup.popupButtons = [{
         label: Joomla.Text._('JOK', 'Okay'),
+        data: { buttonOk: '' },
         onClick: () => popup.close(),
       }];
       popup.classList.add('joomla-dialog-alert');
@@ -599,18 +601,20 @@ class JoomlaDialog extends HTMLElement {
       popup.popupButtons = [
         {
           label: Joomla.Text._('JYES', 'Yes'),
+          data: { buttonOk: '' },
           onClick: () => {
             result = true;
             popup.destroy();
           },
         },
         {
           label: Joomla.Text._('JNO', 'No'),
+          data: { buttonCancel: '' },
           onClick: () => {
             result = false;
             popup.destroy();
           },
-          className: 'button btn btn-outline-secondary',
+          className: 'button button-secondary btn btn-outline-secondary',
         },
       ];
       popup.cancelable = false;

build/media_source/system/js/joomla-toolbar-button.w-c.es6.js

@@ -25,6 +25,7 @@ window.customElements.define('joomla-toolbar-button', class extends HTMLElement
       throw new Error('Joomla API is not properly initiated');
     }
 
+    this.confirmationReceived = false;
     this.onChange = this.onChange.bind(this);
     this.executeTask = this.executeTask.bind(this);
   }
@@ -101,11 +102,24 @@ window.customElements.define('joomla-toolbar-button', class extends HTMLElement
       return false;
     }
 
-    // eslint-disable-next-line no-restricted-globals
-    if (this.confirmMessage && !confirm(this.confirmMessage)) {
+    // Ask for User confirmation when needed
+    if (this.confirmMessage && !this.confirmationReceived) {
+      // eslint-disable-next-line import/no-unresolved,no-undef
+      import('joomla.dialog')
+        .then((m) => m.default.confirm(this.confirmMessage, Joomla.Text._('WARNING', 'Warning')))
+        .then((confirmed) => {
+          if (confirmed) {
+            // Set confirmation flag, and emulate the click again
+            this.confirmationReceived = true;
+            this.buttonElement.click();
+          }
+        });
       return false;
     }
 
+    // Reset any previous confirmation
+    this.confirmationReceived = false;
+
     if (this.task) {
       Joomla.submitbutton(this.task, this.form, this.formValidation);
     }

layouts/joomla/toolbar/basic.php

@@ -13,10 +13,6 @@
 use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
-Factory::getDocument()->getWebAssetManager()
-    ->useScript('core')
-    ->useScript('webcomponent.toolbar-button');
-
 extract($displayData, EXTR_OVERWRITE);
 
 /**
@@ -38,6 +34,11 @@
  * @var   string  $caretClass
  * @var   string  $toggleSplit
  */
+
+Factory::getApplication()->getDocument()->getWebAssetManager()
+    ->useScript('core')
+    ->useScript('webcomponent.toolbar-button');
+
 $tagName = $tagName ?? 'button';
 
 $taskAttr = '';
@@ -48,8 +49,14 @@
 $validate = !empty($formValidation) ? ' form-validation' : '';
 $msgAttr  = !empty($message)        ? ' confirm-message="' . $this->escape($message) . '"' : '';
 
+if ($msgAttr) {
+    Text::script('WARNING');
+    Text::script('JYES');
+    Text::script('JNO');
+}
+
 if ($id === 'toolbar-help') {
-    $title = ' title="' . Text::_('JGLOBAL_OPENS_IN_A_NEW_WINDOW') . '"';
+    $title = ' title="' . $this->escape(Text::_('JGLOBAL_OPENS_IN_A_NEW_WINDOW')) . '"';
 }
 
 if (!empty($task)) {

layouts/joomla/toolbar/standard.php

@@ -11,6 +11,7 @@
 defined('_JEXEC') or die;
 
 use Joomla\CMS\Factory;
+use Joomla\CMS\Language\Text;
 
 extract($displayData, EXTR_OVERWRITE);
 
@@ -31,7 +32,7 @@
  * @var   string  $message          Confirmation message before run the task
  */
 
-Factory::getDocument()->getWebAssetManager()
+Factory::getApplication()->getDocument()->getWebAssetManager()
     ->useScript('core')
     ->useScript('webcomponent.toolbar-button');
 
@@ -44,6 +45,12 @@
 $validate = !empty($formValidation) ? ' form-validation' : '';
 $msgAttr  = !empty($message)        ? ' confirm-message="' . $this->escape($message) . '"' : '';
 
+if ($msgAttr) {
+    Text::script('WARNING');
+    Text::script('JYES');
+    Text::script('JNO');
+}
+
 if (!empty($task)) {
     $taskAttr = ' task="' . $task . '"';
 } elseif (!empty($onclick)) {

tests/System/integration/administrator/components/com_banners/Banners.cy.js

@@ -29,7 +29,6 @@ describe('Test in backend that the banners list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Publish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Banner published.').should('exist');
     });
@@ -42,7 +41,6 @@ describe('Test in backend that the banners list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unpublish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Banner unpublished.').should('exist');
     });
@@ -55,7 +53,6 @@ describe('Test in backend that the banners list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Banner trashed.').should('exist');
     });
@@ -68,7 +65,7 @@ describe('Test in backend that the banners list', () => {
       cy.searchForItem('Test banner');
       cy.checkAllResults();
       cy.clickToolbarButton('empty trash');
-      cy.on('window:confirm', () => true);
+      cy.clickDialogConfirm(true);
 
       cy.get('#system-message-container').contains('Banner deleted.').should('exist');
     });

tests/System/integration/administrator/components/com_banners/Clients.cy.js

@@ -29,7 +29,6 @@ describe('Test in backend that the clients list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Publish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Client published.').should('exist');
     });
@@ -42,7 +41,6 @@ describe('Test in backend that the clients list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unpublish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Client unpublished.').should('exist');
     });
@@ -55,7 +53,6 @@ describe('Test in backend that the clients list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Client trashed.').should('exist');
     });
@@ -68,7 +65,7 @@ describe('Test in backend that the clients list', () => {
       cy.searchForItem('test banner client');
       cy.checkAllResults();
       cy.clickToolbarButton('empty trash');
-      cy.on('window:confirm', () => true);
+      cy.clickDialogConfirm(true);
 
       cy.get('#system-message-container').contains('Client deleted.').should('exist');
     });

tests/System/integration/administrator/components/com_categories/Categories.cy.js

@@ -29,7 +29,6 @@ describe('Test in backend that the categories list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Publish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Category published.').should('exist');
     });
@@ -42,7 +41,6 @@ describe('Test in backend that the categories list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unpublish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Category unpublished.').should('exist');
     });
@@ -55,7 +53,6 @@ describe('Test in backend that the categories list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Category trashed.').should('exist');
     });
@@ -71,7 +68,7 @@ describe('Test in backend that the categories list', () => {
     cy.searchForItem('Test category');
     cy.checkAllResults();
     cy.clickToolbarButton('empty trash');
-    cy.on('window:confirm', () => true);
+    cy.clickDialogConfirm(true);
 
     cy.get('#system-message-container').contains('Category deleted.').should('exist');
   });

tests/System/integration/administrator/components/com_contact/Contacts.cy.js

@@ -29,7 +29,6 @@ describe('Test in backend that the contacts list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Publish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Contact published.').should('exist');
     });
@@ -42,7 +41,6 @@ describe('Test in backend that the contacts list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unpublish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Contact unpublished.').should('exist');
     });
@@ -55,7 +53,6 @@ describe('Test in backend that the contacts list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('.button-featured', 'Feature').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Contact featured.').should('exist');
     });
@@ -68,7 +65,6 @@ describe('Test in backend that the contacts list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unfeature').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Contact unfeatured.').should('exist');
     });
@@ -81,7 +77,6 @@ describe('Test in backend that the contacts list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Contact trashed.').should('exist');
     });
@@ -94,7 +89,7 @@ describe('Test in backend that the contacts list', () => {
       cy.searchForItem('Test contact');
       cy.checkAllResults();
       cy.clickToolbarButton('empty trash');
-      cy.on('window:confirm', () => true);
+      cy.clickDialogConfirm(true);
 
       cy.get('#system-message-container').contains('Contact deleted.').should('exist');
     });

tests/System/integration/administrator/components/com_content/Articles.cy.js

@@ -29,7 +29,6 @@ describe('Test in backend that the articles list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Publish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Article published.').should('exist');
     });
@@ -42,7 +41,6 @@ describe('Test in backend that the articles list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unpublish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Article unpublished.').should('exist');
     });
@@ -55,7 +53,6 @@ describe('Test in backend that the articles list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('.button-featured', 'Feature').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Article featured.').should('exist');
     });
@@ -68,7 +65,6 @@ describe('Test in backend that the articles list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unfeature').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Article unfeatured.').should('exist');
     });
@@ -81,7 +77,6 @@ describe('Test in backend that the articles list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Article trashed.').should('exist');
     });
@@ -94,7 +89,7 @@ describe('Test in backend that the articles list', () => {
       cy.searchForItem('Test article');
       cy.checkAllResults();
       cy.clickToolbarButton('empty trash');
-      cy.on('window:confirm', () => true);
+      cy.clickDialogConfirm(true);
 
       cy.get('#system-message-container').contains('Article deleted.').should('exist');
     });

tests/System/integration/administrator/components/com_fields/Fields.cy.js

@@ -29,7 +29,6 @@ describe('Test in backend that the custom fields list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Publish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Field published').should('exist');
     });
@@ -42,7 +41,6 @@ describe('Test in backend that the custom fields list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Unpublish').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Field unpublished').should('exist');
     });
@@ -55,7 +53,6 @@ describe('Test in backend that the custom fields list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Field trashed').should('exist');
     });
@@ -68,7 +65,7 @@ describe('Test in backend that the custom fields list', () => {
       cy.searchForItem('Test field');
       cy.checkAllResults();
       cy.clickToolbarButton('empty trash');
-      cy.on('window:confirm', () => true);
+      cy.clickDialogConfirm(true);
 
       cy.get('#system-message-container').contains('Field deleted').should('exist');
     });

tests/System/integration/administrator/components/com_menu/MenuItem.cy.js

@@ -26,7 +26,6 @@ describe('Test in backend that the menu list', () => {
       cy.checkAllResults();
       cy.clickToolbarButton('Action');
       cy.contains('Trash').click();
-      cy.on('window:confirm', () => true);
 
       cy.get('#system-message-container').contains('Menu item trashed.').should('exist');
     });