Support notifications in the Console

[ryaplots]

Summary

Closes #5458

Changes

• Add notifications view
• Fetch notifications every 5 minutes
• Add more utility classes

Notifications screenshots

Archive screenshots

Responsive screenshots

Testing

To test notification view:

1. Login in the console.
2. Create an API key for each entity (gateways, applications, organizations).
3. Go to console/notifications.
4. See a list of notifications.
5. Click on a notifications with a blue dot (means unseen) and see the content of the notification and blue background for selected notification.
6. See the amount of unseen notifications in the blue bubble go down.
7. Click on "Archive" and see notification disappearing from the list.
8. Click on "Mark all as read" and see all blue dots and unseen notifications bubble disappear.
9. Click on "See archived messages" and see the message you just archived in the list.
10. Click on "Unarchive" and see the notification disappear from the list.
11. Click on "See all messages" and see the notification is back in the list of notifications.

To test new notifications toast:

1. Go to any entity and create an API key, or add a collaborator.
2. Wait for at least 10 minutes and see a toast notification appear in the right bottom of the page saying "You have new notifications"

Notes for Reviewers

1. Let's decide here on the content for the notifications. The information I get from the backend is the following:

api key create

{ "0": { "id": "df40d337-bfd8-4e8d-aa6b-4541a47b44f3", "created_at": "2023-08-16T12:31:23.987086Z", "entity_ids": { "application_ids": { "application_id": "darya" } }, "notification_type": "api_key_created", "data": { "@type": "type.googleapis.com/ttn.lorawan.v3.APIKey", "id": "I337KND3ZIDFEUHTZ2T32UFULF4JVVQYLWEX6EI", "name": "not", "rights": [ "RIGHT_APPLICATION_ALL" ], "created_at": "2023-08-16T12:31:23.966830Z", "updated_at": "2023-08-16T12:31:23.966831Z" }, "sender_ids": { "user_id": "admin" }, "receivers": [ "NOTIFICATION_RECEIVER_ADMINISTRATIVE_CONTACT" ], "status_updated_at": "2023-08-16T12:31:23.987086Z" } }

client requested

{ "0": { "id": "78830284-c575-464b-8b13-eea55c4b01af", "created_at": "2023-08-16T10:23:11.320390Z", "entity_ids": { "client_ids": { "client_id": "triggetnot" } }, "notification_type": "client_requested", "data": { "@type": "type.googleapis.com/ttn.lorawan.v3.CreateClientEmailMessage", "create_client_request": { "client": { "ids": { "client_id": "triggetnot" }, "administrative_contact": { "user_ids": { "user_id": "darya" } }, "technical_contact": { "user_ids": { "user_id": "darya" } }, "secret": "PBKDF2$sha256$20000$BXM4H1FooPZqaQvo$bYvK0Aq_j8MgYkhf0XC8FMZkAzHNQaW6cDipWGSZ4j0", "state_description": "admin approval required", "grants": [ "GRANT_AUTHORIZATION_CODE" ], "rights": [ "RIGHT_APPLICATION_ALL", "RIGHT_CLIENT_ALL", "RIGHT_GATEWAY_ALL", "RIGHT_ORGANIZATION_ALL", "RIGHT_USER_ALL" ] }, "collaborator": { "user_ids": { "user_id": "darya" } } } }, "sender_ids": { "user_id": "darya" }, "receivers": [ "NOTIFICATION_RECEIVER_ADMINISTRATIVE_CONTACT" ], "status_updated_at": "2023-08-16T10:23:11.320390Z" } }

collaborator added or changed

{ "0": { "id": "ad25f7b0-f29f-476d-a2e9-2990b6df5450", "created_at": "2023-08-16T13:10:14.388098Z", "entity_ids": { "application_ids": { "application_id": "darya2-0" } }, "notification_type": "collaborator_changed", "data": { "@type": "type.googleapis.com/ttn.lorawan.v3.Collaborator", "ids": { "user_ids": { "user_id": "admin" } }, "rights": [ "RIGHT_APPLICATION_ALL" ] }, "sender_ids": { "user_id": "darya" }, "receivers": [ "NOTIFICATION_RECEIVER_ADMINISTRATIVE_CONTACT" ], "status_updated_at": "2023-08-16T13:10:14.388098Z" } }

entity state changed

{ "0": { "id": "0dc087d8-9dbb-4511-bc4b-13d3ce720f48", "created_at": "2023-08-16T13:24:53.893772Z", "entity_ids": { "user_ids": { "user_id": "darya" } }, "notification_type": "entity_state_changed", "data": { "@type": "type.googleapis.com/ttn.lorawan.v3.EntityStateChangedNotification", "state": "STATE_APPROVED" }, "sender_ids": { "user_id": "admin" }, "receivers": [ "NOTIFICATION_RECEIVER_COLLABORATOR" ], "status_updated_at": "2023-08-16T13:24:53.893772Z" } }

password changed

{ "0": { "id": "d7b0d00c-4ea6-4252-bdb9-f96a18b0f16f", "created_at": "2023-08-16T14:02:39.461763Z", "entity_ids": { "user_ids": { "user_id": "darya" } }, "notification_type": "password_changed", "sender_ids": { "user_id": "darya" }, "receivers": [ "NOTIFICATION_RECEIVER_COLLABORATOR" ], "status_updated_at": "2023-08-16T14:02:39.461763Z" } }

user requested

{ "3": { "id": "72a40b96-b5fb-4ab3-b1ca-302a1a5f34c6", "created_at": "2022-09-01T18:18:56.544863Z", "entity_ids": { "user_ids": { "user_id": "anton" } }, "notification_type": "user_requested", "data": { "@type": "type.googleapis.com/ttn.lorawan.v3.CreateUserRequest", "user": { "ids": { "user_id": "anton" }, "contact_info": [ { "contact_method": "CONTACT_METHOD_EMAIL", "value": "[email protected]" } ], "primary_email_address": "[email protected]", "password": "PBKDF2$sha256$20000$6vi-0PIQ1S5dYaKi$eetS9YYWOe4UHVfzpMJ73FipWc8EVQpaq8weTcoNbcI", "password_updated_at": "2022-09-01T18:18:56.518911135Z", "state_description": "admin approval required" }, "invitation_token": "YJZEKJZ6EP24R2GD5BUO2AM3KTMOXAIIFRHP3B4BB6HLG3QZD4DA" }, "status": "NOTIFICATION_STATUS_SEEN", "status_updated_at": "2023-08-16T14:30:46.961697Z" } }

2. Where in the header should I put the link to the notifications for now?

Checklist

• Scope: The referenced issue is addressed, there are no unrelated changes.
• Compatibility: The changes are backwards compatible with existing API, storage, configuration and CLI, according to the compatibility commitments in README.md for the chosen target branch.
• Documentation: Relevant documentation is added or updated.
• The steps/process to test this feature are clearly explained including testing for regressions.
• Changelog: Significant features, behavior changes, deprecations and fixes are added to CHANGELOG.md.
• Commits: Commit messages follow guidelines in CONTRIBUTING.md, there are no fixup commits left.

[kschiffer]

Cutting my review off because I think this needs an iteration that addresses the code repetition.
While the code works fine, I find that there is just way too much repetition with regard to how the templates work. Since the shape of the notifications is quite similar except for different messages and maybe slightly different markup, I think it would be good to refactor the code to use one templating component that accepts different messages and maybe a couple of configuration props but is then able to handle all notification templates at once, simply by switching the messages.

This will address the problem of repetition in messages, prop types, and markup and I think will serve us better in terms of maintainability as well.

I'm not through with the review but wanted to make this point so you can start with this already.

[kschiffer]

This still needs some rework in terms of code repetition, fetching logic, and mobile styles. See my comments for details.

[KrishnaIyer]

This is blocked until we have a clear map of the console redesign https://github.com/TheThingsIndustries/lorawan-stack/issues/2663

[KrishnaIyer]

Moved to Phase 3 of the console redesign: https://github.com/TheThingsIndustries/product-management/issues/29

[ryaplots]

Added notifications dropdown:

[kschiffer]

🎉

[adriansmares]

The notification events PR (#6917) has been merged - you can consider in this PR, or another PR, adding support for user subscriptions instead of periodical polling.

[kschiffer]

Yes, thanks! We'll do this separately.