[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

@@ -257,6 +257,7 @@
 .ow-notification-level-text {
   padding: 0px 6px;
   text-transform: uppercase;
+  font-weight: bold;
 }
 .ow-notification-elem .icon,
 .ow-notification-toast .icon {
@@ -300,6 +301,66 @@
 }
 .ow-notification-elem:last-child .ow-notification-inner { border-bottom: none }
 
+/* Generic notification dialog */
+.ow-overlay-notification {
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.3s;
+}
+.ow-dialog-notification {
+  position: relative;
+  background-color: white;
+  padding: 20px;
+  padding-top: 20px;
+  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 .ow-notification-date {
+  padding-right: 15px;
+}
+.ow-dialog-notification .button {
+  margin-right: 10px;
+}
+.ow-dialog-notification-level-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.ow-dialog-notification .icon {
+  min-height: 15;
+  min-width: 15px;
+  background-repeat: no-repeat;
+}
+.ow-dialog-close-x {
+  cursor: pointer;
+  font-size: 1.75em;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  top: 3px;
+  right: 10px;
+}
+.ow-dialog-close-x:hover {
+  color: #df5d43;
+}
+.ow-message-title {
+  color: #333;
+  margin-bottom: 10px;
+}
+.ow-message-title a {
+  color: #df5d43;
+}
+.ow-message-title a:hover {
+  text-decoration: underline;
+}
+.ow-dialog-buttons {
+  line-height: 3em;
+}
+
 @media screen and (max-width: 600px) {
   .ow-notification-dropdown {
     width: 98%;

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());
+let fetchedPages = [];
 
 if (typeof gettext === 'undefined') {
     var gettext = function(word){ return word; };
@@ -56,10 +57,15 @@ function initNotificationDropDown($) {
 
     $(document).click(function (e) {
         e.stopPropagation();
-        // Check if the clicked area is dropDown / notification-btn or not
         if (
+            // Check if the clicked area is dropDown
             $('.ow-notification-dropdown').has(e.target).length === 0 &&
-            !$(e.target).is($('.ow-notifications'))
+            // Check notification-btn or not
+            !$(e.target).is($('.ow-notifications')) &&
+             // Hide the notification dropdown when a click occurs outside of it
+            !$(e.target).is($('.ow-dialog-close')) &&
+            // Do not hide if the user is interacting with the notification dialog
+            !$('.ow-overlay-notification').is(':visible')
         ) {
             $('.ow-notification-dropdown').addClass('ow-hide');
         }
@@ -69,30 +75,54 @@ 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 &&
+            // Do not hide if the user is interacting with the notification dialog
+            !$('.ow-overlay-notification').is(':visible')
+        ) {
             // 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();
+        if (e.keyCode !== 27) {
+            return;
+        }
         // Hide notification widget on "Escape" key
-        if (e.keyCode == 27){
+        if ($('.ow-overlay-notification').is(':visible')) {
+            $('.ow-overlay-notification').addClass('ow-hide');
+            $('.ow-message-target-redirect').addClass('ow-hide');
+        } else {
             $('.ow-notification-dropdown').addClass('ow-hide');
             $('#openwisp_notifications').focus();
         }
     });
 }
 
+// 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/'),
         renderedPages = 2,
         busy = false,
-        fetchedPages = [],
         lastRenderedPage = 0;
     // 1 based indexing (0 -> no page rendered)
 
@@ -197,7 +227,8 @@ function notificationWidget($) {
     function notificationListItem(elem) {
         let klass;
         const datetime = dateTimeStampToDateTimeLocaleString(new Date(elem.timestamp)),
-              target_url = new URL(elem.target_url);
+            // target_url can be null or '#', so we need to handle it without any errors
+            target_url = new URL(elem.target_url, window.location.href);
 
         if (!notificationReadStatus.has(elem.id)) {
             if (elem.unread) {
@@ -208,32 +239,18 @@ 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;
-        }
-
+        // Remove hyperlinks from notification messages if description is present
         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>`;
     }
@@ -320,11 +337,16 @@ function notificationWidget($) {
             return;
         }
         let elem = $(this);
-        // If notification is unread then send read request
-        if (elem.hasClass('unread')) {
-            markNotificationRead(elem.get(0));
+        notificationHandler($, elem);
+    });
+
+    // 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;
         }
-        window.location = elem.data('location');
+        $('.ow-overlay-notification').addClass('ow-hide');
+        $('.ow-message-target-redirect').addClass('ow-hide');
     });
 
     // Handler for marking notification as read on mouseout event
@@ -353,6 +375,45 @@ function markNotificationRead(elem) {
     );
 }
 
+function notificationHandler($, elem) {
+    var notification = fetchedPages.flat().find((notification) =>
+      notification.id == elem.get(0).id.replace('ow-', '')),
+      targetUrl = elem.data('location');
+
+    // If notification is unread then send read request
+    if (!notification.description && elem.hasClass('unread')) {
+        markNotificationRead(elem.get(0));
+    }
+
+    if (notification.target_url && notification.target_url !== '#') {
+        targetUrl = new URL(notification.target_url).pathname;
+    }
+
+    // Notification with overlay dialog
+    if (notification.description) {
+        var datetime = dateTimeStampToDateTimeLocaleString(new Date(notification.timestamp));
+
+        $('.ow-dialog-notification-level-wrapper').html(`
+            <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>
+        `);
+        $('.ow-message-title').html(convertMessageWithRelativeURL(notification.message));
+        $('.ow-message-description').html(notification.description);
+        $('.ow-overlay-notification').removeClass('ow-hide');
+
+        $(document).on('click', '.ow-message-target-redirect', function() {
+            window.location = targetUrl;
+        });
+        $('.ow-message-target-redirect').removeClass('ow-hide');
+    // standard notification
+    } else {
+        window.location = targetUrl;
+    }
+}
+
 function initWebSockets($) {
     notificationSocket.addEventListener('message', function (e) {
         let data = JSON.parse(e.data);
@@ -407,7 +468,7 @@ function initWebSockets($) {
     // Make toast message clickable
     $(document).on('click', '.ow-notification-toast', function () {
         markNotificationRead($(this).get(0));
-        window.location = $(this).data('location');
+        notificationHandler($, $(this));
     });
     $(document).on('click', '.ow-notification-toast .ow-notify-close.btn', function (event) {
         event.stopPropagation();

openwisp_notifications/templates/admin/base_site.html

@@ -38,6 +38,22 @@
 {% endblock  %}
 
 {% block footer %}
+  <div class="ow-overlay ow-overlay-notification 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>
+          <div class="ow-dialog-buttons">
+            <button class="ow-message-target-redirect ow-hide button default success-btn">
+              {% trans 'Open' %}
+            </button>
+            <button class="ow-dialog-close button default">
+              {% trans 'Close' %}
+            </button>
+          </div>
+      </div>
+  </div>
   {{ block.super }}
   {% if request.user.is_authenticated %}
     <script type="text/javascript" src="{% static 'openwisp-notifications/js/vendor/reconnecting-websocket.min.js' %}"></script>

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

@@ -61,7 +61,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',
@@ -323,6 +322,13 @@ def test_default_notification_type(self):
         )
         self.assertEqual(n.email_subject, '[example.com] Default Notification Subject')
 
+    def test_notification_level_kwarg_precedence(self):
+        # Create a notification with level kwarg set to 'warning'
+        self.notification_options.update({'level': 'warning'})
+        self._create_notification()
+        n = notification_queryset.first()
+        self.assertEqual(n.level, 'warning')
+
     @mock_notification_types
     def test_misc_notification_type_validation(self):
         with self.subTest('Registering with incomplete notification configuration.'):