[feature] Added generic message notification type (shown in dialg box)

openwisp_notifications/api/serializers.py

@@ -55,10 +55,13 @@ def data(self):
 
 
 class NotificationListSerializer(NotificationSerializer):
+    description = serializers.CharField(source='rendered_description')
+
     class Meta(NotificationSerializer.Meta):
         fields = [
             'id',
             'message',
+            'description',
             'unread',
             'target_url',
             'email_subject',

openwisp_notifications/base/models.py

@@ -105,6 +105,10 @@ def target_url(self):
     def message(self):
         return self.get_message()
 
+    @cached_property
+    def rendered_description(self):
+        return mark_safe(markdown(self.description)) if self.description else None
+
     @property
     def email_message(self):
         return self.get_message(email_message=True)
@@ -120,7 +124,9 @@ def get_message(self, email_message=False):
             try:
                 config = get_notification_configuration(self.type)
                 data = self.data or {}
-                if 'message' in config:
+                if 'message' in data:
+                    md_text = data['message']
+                elif 'message' in config:
                     md_text = config['message'].format(notification=self, **data)
                 else:
                     md_text = render_to_string(

openwisp_notifications/handlers.py

@@ -57,8 +57,8 @@ def notify_handler(**kwargs):
     except NotificationRenderException as error:
         logger.error(f'Error encountered while creating notification: {error}')
         return
-    level = notification_template.get(
-        'level', kwargs.pop('level', Notification.LEVELS.info)
+    level = kwargs.pop(
+        'level', notification_template.get('level', Notification.LEVELS.info)
     )
     verb = notification_template.get('verb', kwargs.pop('verb', None))
     user_app_name = User._meta.app_label

openwisp_notifications/static/openwisp-notifications/css/notifications.css

@@ -5,6 +5,66 @@
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
+.ow-dialog-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.3s;
+  z-index: 9999;
+}
+.ow-dialog-notification {
+  position: relative;
+  background-color: white;
+  padding: 20px;
+  padding-top: 40px;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-width: 500px;
+  text-align: left;
+}
+.ow-dialog-notification-level-wrapper {
+  display: flex;
+  justify-content: space-between;
+  color: #777;
+}
+.ow-dialog-notification .icon {
+  min-height: 15;
+  min-width: 15px;
+  background-repeat: no-repeat;
+}
+.ow-dialog-close-x {
+  color: #333;
+  cursor: pointer;
+  font-size: 1.75em;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  top: 10px;
+  right: 10px;
+}
+.ow-dialog-close-x:hover {
+  color: #e04343;
+}
+.ow-message-title {
+  color: #333;
+  margin-bottom: 10px;
+}
+.ow-message-title a {
+  color: #df5d43 !important;
+  font-weight: bold;
+}
+.ow-message-description {
+  margin-bottom: 20px;
+  line-height: 1.6;
+  color: #666;
+}
 
 /* Notification bell */
 .ow-notifications {
@@ -257,6 +317,7 @@
 .ow-notification-level-text {
   padding: 0px 6px;
   text-transform: uppercase;
+  font-weight: bold;
 }
 .ow-notification-elem .icon,
 .ow-notification-toast .icon {

openwisp_notifications/static/openwisp-notifications/js/notifications.js

@@ -2,6 +2,7 @@
 const notificationReadStatus = new Map();
 const userLanguage = navigator.language || navigator.userLanguage;
 const owWindowId = String(Date.now());
+var isNotificationDialogOpen = false;
 
 if (typeof gettext === 'undefined') {
     var gettext = function(word){ return word; };
@@ -13,6 +14,7 @@ if (typeof gettext === 'undefined') {
         initNotificationDropDown($);
         initWebSockets($);
         owNotificationWindow.init($);
+        moveNotificationDialog($);
     });
 })(django.jQuery);
 
@@ -59,7 +61,9 @@ function initNotificationDropDown($) {
         // Check if the clicked area is dropDown / notification-btn or not
         if (
             $('.ow-notification-dropdown').has(e.target).length === 0 &&
-            !$(e.target).is($('.ow-notifications'))
+            !$(e.target).is($('.ow-notifications')) &&
+            !$(e.target).is($('.ow-dialog-close')) &&
+            !isNotificationDialogOpen
         ) {
             $('.ow-notification-dropdown').addClass('ow-hide');
         }
@@ -69,24 +73,59 @@ function initNotificationDropDown($) {
     $(document).focusin(function(e){
         // Hide notification widget if focus is shifted to an element outside it
         e.stopPropagation();
-        if ($('.ow-notification-dropdown').has(e.target).length === 0){
+        if (
+            $('.ow-notification-dropdown').has(e.target).length === 0 &&
+            !isNotificationDialogOpen
+        ) {
             // Don't hide if focus changes to notification bell icon
             if (e.target != $('#openwisp_notifications').get(0)) {
                 $('.ow-notification-dropdown').addClass('ow-hide');
             }
         }
     });
 
-    $('.ow-notification-dropdown').on('keyup', '*', function(e){
+    $(document).on('keyup', '*', function(e){
         e.stopPropagation();
         // Hide notification widget on "Escape" key
-        if (e.keyCode == 27){
-            $('.ow-notification-dropdown').addClass('ow-hide');
-            $('#openwisp_notifications').focus();
+        if (e.keyCode == 27) {
+            if (isNotificationDialogOpen) {
+                $('.ow-dialog-overlay').addClass('ow-hide');
+                $('.ow-message-target-redirect').addClass('ow-hide');
+                isNotificationDialogOpen = false;
+            } else {
+                $('.ow-notification-dropdown').addClass('ow-hide');
+            }
+            if ($(e.target).is($('.ow-notification-dropdown'))) {
+                $('#openwisp_notifications').focus();
+            }
         }
     });
 }
 
+function moveNotificationDialog($) {
+    var $container = $('#container');
+    var $overlayElement = $('.ow-dialog-overlay');
+    // Remove the overlay element from its current parent
+    $overlayElement.detach();
+    // Append the overlay element to the container
+    $container.append($overlayElement);
+}
+
+// Used to convert absolute URLs in notification messages to relative paths
+function convertMessageWithRelativeURL(htmlString) {
+    const parser = new DOMParser(),
+    doc = parser.parseFromString(htmlString, 'text/html'),
+    links = doc.querySelectorAll('a');
+    links.forEach((link) => {
+        let url = link.getAttribute('href');
+        if (url) {
+          url = new URL(url, window.location.href);
+          link.setAttribute('href', url.pathname);
+        }
+    });
+    return doc.body.innerHTML;
+}
+
 function notificationWidget($) {
 
     let nextPageUrl = getAbsoluteUrl('/api/v1/notifications/notification/'),
@@ -197,7 +236,7 @@ function notificationWidget($) {
     function notificationListItem(elem) {
         let klass;
         const datetime = dateTimeStampToDateTimeLocaleString(new Date(elem.timestamp)),
-              target_url = new URL(elem.target_url);
+              target_url = new URL(elem.target_url, window.location.href);
 
         if (!notificationReadStatus.has(elem.id)) {
             if (elem.unread) {
@@ -208,32 +247,17 @@ function notificationWidget($) {
         }
         klass = notificationReadStatus.get(elem.id);
 
-        // Used to convert absolute URLs in notification messages to relative paths
-        function convertMessageWithRelativeURL(htmlString) {
-          const parser = new DOMParser(),
-                doc = parser.parseFromString(htmlString, 'text/html'),
-                links = doc.querySelectorAll('a');
-          links.forEach((link) => {
-            let url = link.getAttribute('href');
-            if (url) {
-              url = new URL(url);
-              link.setAttribute('href', url.pathname);
-            }
-          });
-          return doc.body.innerHTML;
-        }
-
         return `<div class="ow-notification-elem ${klass}" id=ow-${elem.id}
                         data-location="${target_url.pathname}" role="link" tabindex="0">
                     <div class="ow-notification-inner">
                         <div class="ow-notification-meta">
-                        <div class="ow-notification-level-wrapper">
-                            <div class="ow-notify-${elem.level} icon"></div>
-                            <div class="ow-notification-level-text">${elem.level}</div>
-                        </div>
-                        <div class="ow-notification-date">${datetime}</div>
+                            <div class="ow-notification-level-wrapper">
+                                <div class="ow-notify-${elem.level} icon"></div>
+                                <div class="ow-notification-level-text">${elem.level}</div>
+                            </div>
+                            <div class="ow-notification-date">${datetime}</div>
                         </div>
-                    ${convertMessageWithRelativeURL(elem.message)}
+                    ${elem.description ? elem.message.replace(/<a [^>]*>([^<]*)<\/a>/g, '$1') : convertMessageWithRelativeURL(elem.message)}
                     </div>
                 </div>`;
     }
@@ -324,7 +348,41 @@ function notificationWidget($) {
         if (elem.hasClass('unread')) {
             markNotificationRead(elem.get(0));
         }
-        window.location = elem.data('location');
+
+        var notification = fetchedPages.flat().find((notification) => notification.id == elem.get(0).id.replace('ow-', ''));
+        if (notification.description) {
+            isNotificationDialogOpen = true;
+            const datetime = dateTimeStampToDateTimeLocaleString(new Date(notification.timestamp));
+            document.querySelector('.ow-dialog-notification-level-wrapper').innerHTML = `
+                        <div class="ow-notification-level-wrapper">
+                            <div class="ow-notify-${notification.level} icon"></div>
+                            <div class="ow-notification-level-text">${notification.level}</div>
+                        </div>
+                        <div class="ow-notification-date">${datetime}</div>
+            `;
+            document.querySelector('.ow-message-title').innerHTML = convertMessageWithRelativeURL(notification.message);
+            document.querySelector('.ow-message-description').innerHTML = notification.description;
+            $('.ow-dialog-overlay').removeClass('ow-hide');
+            if (notification.target_url) {
+                var target_url = new URL(notification.target_url, window.location.href);
+                $(document).on('click', '.ow-message-target-redirect', function () {
+                    window.location = target_url.pathname;
+                });
+                $('.ow-message-target-redirect').removeClass('ow-hide');
+            }
+        } else {
+            window.location = elem.data('location');
+        }
+    });
+
+    // Close dialog on click, keypress or esc
+    $('.ow-dialog-close').on('click keypress', function (e) {
+        if (e.type === 'keypress' && e.which !== 13 && e.which !== 27) {
+            return;
+        }
+        isNotificationDialogOpen = false;
+        $('.ow-dialog-overlay').addClass('ow-hide');
+        $('.ow-message-target-redirect').addClass('ow-hide');
     });
 
     // Handler for marking notification as read on mouseout event

openwisp_notifications/templates/admin/base_site.html

@@ -34,6 +34,16 @@
     <div class="ow-no-notifications ow-round-bottom-border ow-hide">
         <p>{% trans 'No new notification.' %}</p>
     </div>
+    <div class="ow-dialog-overlay ow-overlay-inner ow-hide">
+        <div class="ow-dialog-notification">
+            <span class="ow-dialog-close ow-dialog-close-x">&times;</span>
+            <div class="ow-notification-level-wrapper ow-dialog-notification-level-wrapper"></div>
+            <h2 class="ow-message-title"></h2>
+            <div class="ow-message-description"></div>
+            <button class="ow-message-target-redirect ow-hide button default">{% trans 'Open' %}</button>
+            <button class="ow-dialog-close button default">{% trans 'Close' %}</button>
+        </div>
+    </div>
   </div>
 {% endblock  %}
 

openwisp_notifications/tests/test_api.py

@@ -533,7 +533,7 @@ def test_notification_setting_list_api(self):
             self.assertEqual(len(response.data['results']), number_of_settings)
 
         with self.subTest('Test "page_size" query'):
-            page_size = 1
+            page_size = 2
             url = f'{url}?page_size={page_size}'
             response = self.client.get(url)
             self.assertEqual(response.status_code, 200)

openwisp_notifications/tests/test_notifications.py

@@ -60,7 +60,6 @@ def setUp(self):
         self.notification_options = dict(
             sender=self.admin,
             description='Test Notification',
-            level='info',
             verb='Test Notification',
             email_subject='Test Email subject',
             url='https://localhost:8000/admin',