[feat] Notification Preferences Page

[Dhanus3133]

Should fix #110, #148 and #255 issues

The Preference Page be like

[nemesifier]

Notes from our last discussion in the weekly meeting:

diff --git a/openwisp_notifications/api/urls.py b/openwisp_notifications/api/urls.py
index 597d2a7..82c236f 100644
--- a/openwisp_notifications/api/urls.py
+++ b/openwisp_notifications/api/urls.py
@@ -9,32 +9,47 @@ def get_api_urls(api_views=None):
     if not api_views:
         api_views = views
     return [
-        path('', views.notifications_list, name='notifications_list'),
-        path('read/', views.notifications_read_all, name='notifications_read_all'),
-        path('<uuid:pk>/', views.notification_detail, name='notification_detail'),
+        path('notification/', views.notifications_list, name='notifications_list'),
+        path('notification/read/', views.notifications_read_all, name='notifications_read_all'),
+        path('notification/<uuid:pk>/', views.notification_detail, name='notification_detail'),
         path(
-            '<uuid:pk>/redirect/',
+            'notification/<uuid:pk>/redirect/',
             views.notification_read_redirect,
             name='notification_read_redirect',
         ),
+        # path(
+        #     'notification/user-setting/',
+        #     views.notification_setting_list,
+        #     name='notification_setting_list',
+        # ),
+        # path(
+        #     'notification/user-setting/<uuid:pk>/',
+        #     views.notification_setting,
+        #     name='notification_setting',
+        # ),
         path(
-            'user-setting/',
-            views.notification_setting_list,
-            name='notification_setting_list',
-        ),
-        path(
-            'user-setting/<uuid:pk>/',
-            views.notification_setting,
-            name='notification_setting',
-        ),
-        path(
-            'ignore/',
+            'notification/ignore/',
             views.ignore_object_notification_list,
             name='ignore_object_notification_list',
         ),
         path(
-            'ignore/<str:app_label>/<str:model_name>/<uuid:object_id>/',
+            'notification/ignore/<str:app_label>/<str:model_name>/<uuid:object_id>/',
             views.ignore_object_notification,
             name='ignore_object_notification',
         ),
+        path(
+            'user/<uuid:user_id>/setting/',
+            # views.admin_user_organization_notification_setting,
+            # name='admin_user_organization_notification_setting',
+        ),
+        path(
+            'user/<uuid:user_id>/setting/<uuid:setting_pk>/',
+            # views.admin_user_organization_notification_setting,
+            # name='admin_user_organization_notification_setting',
+        ),
+        path(
+            'user/<uuid:user_id>/organization/<uuid:organization_id>/setting/',
+            views.admin_user_organization_notification_setting,
+            name='admin_user_organization_notification_setting',
+        )
     ]
diff --git a/openwisp_notifications/urls.py b/openwisp_notifications/urls.py
index efc6d2b..3c33306 100644
--- a/openwisp_notifications/urls.py
+++ b/openwisp_notifications/urls.py
@@ -10,7 +10,7 @@ def get_urls(api_views=None, social_views=None):
         api_views(optional): views for Notifications API
     """
     urls = [
-        path('api/v1/notifications/notification/', include(get_api_urls(api_views)))
+        path('api/v1/notifications/', include(get_api_urls(api_views)))
     ]
     return urls

[nemesifier]

Good progress @Dhanus3133 👍

Please keep in mind that you need to focus on the point of view of the user (user-centered), making sure the UI provides up to date data and guides the user in a way that allows him/her to understand what's going on.

• Web notification on the left, email on the right (as in the current notification settings)
• Keep in mind web notifications are required for email notifications, therefore the web/email checkbox inputs have work as in the current notification settings (if you disable web, email will be also disabled and when both are disabled, if you enable email, web will be also be enabled)
• Type: show verbose_message in the UI, in the API we call this type_label colors
• Please reuse CSS classes for colors, titles, form row, etc
• Open first org in the UI automatically
• Triangle icon: we should have similar icons to reuse
• Accordion title of the org: reuse the style of other pages, eg:

• Table: reuse styles from any change list page (table headings, table body, table rows, checkbox, etc)
• Make sure email and web are tags
• Preferences saved message: please change as discussed (fixed place, different logic than notification toast)
• Look for drop-in replacements of default checkbox inputs to look more similar to what the UX designers shared (but no execute yet, just look for possible open source options to use)

[pandafy]

Good work @Dhanus3133! In this review, I primarily focused on the UX/UI. I hope these points would help you progress with this PR

• Add link to the notification preference page in the notification widget
• Add link to the notification preference page in the UserAdmin
• When the API request fails, the user operation should rollback. E.g. if the user disabled the global web notifications and the API request fails, then the UI should flag the checkbox as enabled again.
• Add tooltip to the global and organization settings

[pandafy]

In our weekly call, we discussed the following changes to the docs

• explain the new interaction between default notification settings in the type definition and disabled global notifications in the preference of the user
• make sure API docs page is up to date

We also evaluated the feasibility for adding "Notification Settings" button on the UserAdmin. I have attached the git diff below for reference

diff --git a/openwisp_notifications/admin.py b/openwisp_notifications/admin.py
index 0e320be..15636a8 100644
--- a/openwisp_notifications/admin.py
+++ b/openwisp_notifications/admin.py
@@ -10,16 +10,4 @@ Notification = load_model('Notification')
 NotificationSetting = load_model('NotificationSetting')
 
 
-class NotificationSettingInline(
-    NotificationSettingAdminMixin, AlwaysHasChangedMixin, admin.TabularInline
-):
-    model = NotificationSetting
-    extra = 0
-
-    def has_change_permission(self, request, obj=None):
-        return request.user.is_superuser or request.user == obj
-
-
-UserAdmin.inlines = [NotificationSettingInline] + UserAdmin.inlines
-
 _add_object_notification_widget()
diff --git a/openwisp_notifications/templates/admin/openwisp_users/user/change_form_object_tools.html b/openwisp_notifications/templates/admin/openwisp_users/user/change_form_object_tools.html
new file mode 100644
index 0000000..cd2761b
--- /dev/null
+++ b/openwisp_notifications/templates/admin/openwisp_users/user/change_form_object_tools.html
@@ -0,0 +1,6 @@
+{% extends "admin/change_form_object_tools.html" %}
+{% load i18n admin_urls %}
+{% block object-tools-items %}
+    <li><a class="button" href="/notifications/settings/">Notification preferences</a></li>
+    {{ block.super }}
+{% endblock %}

[nemesifier]

Notes from today's weekly meeting:

• Handling of API errors: the UI should not wait for succesful response to update itself, it should just rollback in case of errors
• Switch Input Chekbox: we can use this solution (we need to make the :focus more evident and ajust the colors): https://www.w3schools.com/howto/howto_css_switch.asp

[nemesifier]

• update notification preferences button in user page to link the correct URL
• notification preferences of another user should show the username in the first heading of the page, please do not change the top right header as discussed
• in the notification widget, please change "settings" to "preferences"
• once we are done we will need to update the docs

[nemesifier]

• Toggle all/Untoggle all button
• Fix conflicts
• Make build pass again
• Update Notification Preferences section in the docs, use a temporary image uploaded anywhere

[nemesifier]

Good progress @Dhanus3133.
The test coverage has decreased significantly.
Please address this and other issues I highlighted below.

[nemesifier]

I pushed some UI improvements.

Regaring this image:

Please use the gray version for consistency.

[pandafy]

The feature allowing changes to notification preferences for other users is currently broken. Instead of displaying the target user's preferences, the page incorrectly shows the preferences of the currently logged-in user.

@Dhanus3133, this highlights the crucial need for thorough testing to prevent bugs like this from slipping into a release. While unit tests are valuable for their speed and focus on specific code segments, integration tests are equally important. They ensure that the entire flow is functioning as intended. This bug likely resulted from a minor mistake, perhaps even a typo, but it could have been caught with an integration test that verifies the full flow—from visiting the URL to checking the correct elements in the HTML.

Moving forward, we expect you to prioritize testing more rigorously - both manual and automated.

[pandafy]

This should not check the logged-in user, but the user object for which the change page is being rendered. The user belonging to the object_id.

[nemesifier]

Notes during today's weekly meeting:

• Let's add a selenium test for the notification preferences page which covers the main UI features
• Show notification preferences button in the user page only if:
  • current logged in user is superuser
  • user being viewed is staff
    At a later stage we should improve this aspect as explained in [change] Notification preferences: respect Django permissions #312.