IBX-10609: Enhance notification deletion by integrating modal confirmation. (#1736)

Co-authored-by: Aleksandra Bozek <aleksandra.m.bozek@gmail.com>
Co-authored-by: KamilSznajdrowicz <kamil.sznajdrowicz@ibexa.co>

Author: 3 people

src/bundle/Resources/public/js/scripts/admin.notifications.modal.js

@@ -2,15 +2,18 @@
     let currentPageLink = null;
     let getNotificationsStatusErrorShowed = false;
     let lastFailedCountFetchNotificationNode = null;
+    let selectedNotificationId = null;
     const SELECTOR_MODAL_ITEM = '.ibexa-notifications-modal__item';
     const SELECTOR_MODAL_RESULTS = '.ibexa-notifications-modal__results .ibexa-scrollable-wrapper';
     const SELECTOR_MODAL_TITLE = '.ibexa-side-panel__header';
     const SELECTOR_LIST = '.ibexa-list--notifications';
     const CLASS_MODAL_LOADING = 'ibexa-notifications-modal--loading';
     const INTERVAL = 30000;
     const panel = doc.querySelector('.ibexa-notifications-modal');
+    const deleteConfirmationModal = doc.querySelector('#delete-notification-modal');
     const { showErrorNotification, showWarningNotification } = ibexa.helpers.notification;
     const { getJsonFromResponse, getTextFromResponse } = ibexa.helpers.request;
+    const { controlManyZIndexes } = ibexa.helpers.modal;
     const handleNotificationClickRequest = (notification, response) => {
         if (response.status === 'success') {
             notification.classList.add('ibexa-notifications-modal__item--read');
@@ -214,9 +217,19 @@
 
         currentTarget.textContent.trim() === markAsReadLabel ? markAsRead({ currentTarget }) : markAsUnread({ currentTarget });
     };
-    const deleteNotification = ({ currentTarget }) => {
-        const { notificationId } = currentTarget.dataset;
-        const deleteLink = Routing.generate('ibexa.notifications.delete', { notificationId });
+    const hidePopupMenu = (btn) => {
+        const menuBranch = btn.closest('.ibexa-multilevel-popup-menu__branch');
+
+        if (!menuBranch?.menuInstanceElement) {
+            return;
+        }
+
+        const menuInstance = ibexa.helpers.objectInstances.getInstance(menuBranch.menuInstanceElement);
+
+        menuInstance.closeMenu();
+    };
+    const deleteNotification = () => {
+        const deleteLink = Routing.generate('ibexa.notifications.delete', { notificationId: selectedNotificationId });
         const message = Translator.trans(
             /* @Desc("Cannot delete notification") */ 'notifications.modal.message.error.delete',
             {},
@@ -227,11 +240,10 @@
             .then(getJsonFromResponse)
             .then((response) => {
                 if (response.status === 'success') {
-                    const notification = doc.querySelector(`.ibexa-notifications-modal__item[data-notification-id="${notificationId}"]`);
-                    const menuBranch = currentTarget.closest('.ibexa-multilevel-popup-menu__branch');
-                    const menuInstance = ibexa.helpers.objectInstances.getInstance(menuBranch.menuInstanceElement);
+                    const notification = doc.querySelector(
+                        `.ibexa-notifications-modal__item[data-notification-id="${selectedNotificationId}"]`,
+                    );
 
-                    menuInstance.closeMenu();
                     notification.remove();
                     getNotificationsStatus();
                 } else {
@@ -244,15 +256,19 @@
     };
     const attachActionsListeners = () => {
         const attachListener = (node, callback) => node.addEventListener('click', callback, false);
-        const markAsButtons = doc.querySelectorAll('.ibexa-notifications-modal--mark-as');
-        const deleteButtons = doc.querySelectorAll('.ibexa-notifications-modal--delete');
-
-        markAsButtons.forEach((markAsButton) => {
-            attachListener(markAsButton, handleMarkAsAction);
+        const markAsBtns = doc.querySelectorAll('.ibexa-notifications-modal--mark-as');
+        const deleteBtns = doc.querySelectorAll('.ibexa-notifications-open-modal-button');
+        const setNotificationId = ({ currentTarget }) => {
+            hidePopupMenu(currentTarget);
+            selectedNotificationId = currentTarget.dataset.notificationId;
+        };
+
+        markAsBtns.forEach((markAsBtn) => {
+            attachListener(markAsBtn, handleMarkAsAction);
         });
 
-        deleteButtons.forEach((deleteButton) => {
-            attachListener(deleteButton, deleteNotification);
+        deleteBtns.forEach((deleteBtn) => {
+            attachListener(deleteBtn, setNotificationId);
         });
     };
     const showNotificationPage = (pageHtml) => {
@@ -308,8 +324,15 @@
     currentPageLink = notificationsTable.dataset.notifications;
     const interval = Number.parseInt(notificationsTable.dataset.notificationsCountInterval, 10) || INTERVAL;
 
+    if (deleteConfirmationModal) {
+        controlManyZIndexes([{ container: panel, zIndex: '1040' }], deleteConfirmationModal);
+    }
+
     panel.querySelectorAll(SELECTOR_MODAL_RESULTS).forEach((link) => link.addEventListener('click', handleModalResultsClick, false));
     markAllAsReadBtn.addEventListener('click', markAllAsRead, false);
+    deleteConfirmationModal
+        ?.querySelector('.ibexa-notifications-modal--delete--confirm')
+        ?.addEventListener('click', deleteNotification, false);
 
     const getNotificationsStatusLoop = () => {
         getNotificationsStatus().finally(() => {

src/bundle/Resources/public/js/scripts/helpers/modal.helper.js

@@ -1,5 +1,6 @@
-const controlZIndex = (container) => {
+const controlZIndex = (container, ZIndexValue) => {
     const initialZIndex = getComputedStyle(container).zIndex;
+    container.style.zIndex = ZIndexValue;
 
     container.addEventListener('show.bs.modal', () => {
         container.style.zIndex = 'initial';

src/bundle/Resources/translations/ibexa_notifications.en.xliff

@@ -96,6 +96,11 @@
         <target state="new">Mark as unread</target>
         <note>key: notification.mark_as_unread</note>
       </trans-unit>
+      <trans-unit id="1b5f287ab1b01d5f0402378d633e8924aad59c98" resname="notification.modal.delete.confirm_message">
+        <source>Are you sure you want to delete this notification?</source>
+        <target state="new">Are you sure you want to delete this notification?</target>
+        <note>key: notification.modal.delete.confirm_message</note>
+      </trans-unit>
       <trans-unit id="5b03625b8de51d296ad7f4bc980e631c964185d8" resname="notification.no_longer_available">
         <source>The Content item is no longer available</source>
         <target state="new">The Content item is no longer available</target>

src/bundle/Resources/views/themes/admin/account/notifications/list_item.html.twig

@@ -47,7 +47,11 @@
 
 {% set popup_items = popup_items|merge([{
     label: 'notification.delete'|trans|desc('Delete'),
-    action_attr: { class: 'ibexa-notifications-modal--delete', 'data-notification-id': notification.id },
+    action_attr: {
+        class: 'ibexa-notifications-open-modal-button',
+        'data-notification-id': notification.id,
+        'data-bs-toggle': 'modal',
+        'data-bs-target': '#delete-notification-modal', }
 }]) %}
 
 {% embed '@ibexadesign/ui/component/table/table_body_row.html.twig' with {

src/bundle/Resources/views/themes/admin/account/notifications/side_panel.html.twig

@@ -44,3 +44,14 @@
         </div>
     {% endblock %}
 {% endembed %}
+
+{% embed '@ibexadesign/ui/modal/delete_confirmation.html.twig' with {
+    id: 'delete-notification-modal',
+    message: 'notification.modal.delete.confirm_message'|trans({}, 'ibexa_notifications')|desc('Are you sure you want to delete this notification?'),
+} %}
+    {% block confirm_button %}
+        <button class="btn ibexa-btn ibexa-btn--primary ibexa-notifications-modal--delete--confirm" data-bs-dismiss="modal">
+            {{ 'modal.delete'|trans|desc('Delete') }}
+        </button>
+    {% endblock %}
+{% endembed %}

src/lib/Behat/BrowserContext/UserNotificationContext.php

@@ -82,6 +82,14 @@ public function iPerformNotificationAction(string $action): void
         $this->userNotificationPopup->clickActionButton($action);
     }
 
+    /**
+     * @When I confirm deletion of notification
+     */
+    public function iConfirmDeletionOfNotification(): void
+    {
+        $this->userNotificationPopup->confirmDeletion();
+    }
+
     /**
      * @Then the notification should have :expectedAction action available
      */

src/lib/Behat/Component/UserNotificationPopup.php

@@ -8,6 +8,7 @@
 
 namespace Ibexa\AdminUi\Behat\Component;
 
+use Behat\Mink\Session;
 use Exception;
 use Ibexa\Behat\Browser\Component\Component;
 use Ibexa\Behat\Browser\Element\Action\MouseOverAndClick;
@@ -20,6 +21,14 @@
 
 class UserNotificationPopup extends Component
 {
+    private Dialog $dialog;
+
+    public function __construct(Session $session, Dialog $dialog)
+    {
+        parent::__construct($session);
+        $this->dialog = $dialog;
+    }
+
     public function clickNotification(string $expectedType, string $expectedDescription)
     {
         $notifications = $this->getHTMLPage()->findAll($this->getLocator('notificationItem'));
@@ -123,6 +132,12 @@ public function clickActionButton(string $buttonText): void
             );
     }
 
+    public function confirmDeletion(): void
+    {
+        $this->dialog->verifyIsLoaded();
+        $this->dialog->confirm();
+    }
+
     public function findActionButton(string $buttonText): ?ElementInterface
     {
         $this->getHTMLPage()