NotificationsModal Component Documentation

Purpose

The NotificationsModal component is a part of the Vantage analytics and data platform that displays grouped notifications to users. It provides a user-friendly interface for managing notifications including filtering, marking as read, and dismissal of notifications. This modal is triggered from the homepage notification tile and serves to enhance user engagement with important updates, performance alerts, and actionable items.

How It Works

• The component uses the useNotificationStore to fetch notifications from the application's state management system.
• It utilizes the internal state management to manage the state of filters and to retrieve notifications when the modal is opened.
• Notifications are filtered based on user selection between "All", "Unread", and "Critical" notifications.
• Each notification can be interacted with to mark it as read or dismissed, and it features timestamps to show the recency of notifications.

Settings

The NotificationsModal component does not expose customizable settings directly through props. However, the following functionality can be observed within the code:

State Management Interaction

• activeFilter:
  • Input Type: string
  • Description: Represents the currently active filter for notifications (can be 'all', 'unread', or 'critical'). Changing this affects which notifications are visible in the modal.
  • Default Value: 'all'

Notification Store Interactions

• notifications:

  • Input Type: Array
  • Description: An array of notification objects fetched from the notification store. Each object includes properties like id, title, type, message, severity, status, and created timestamp.

• unreadCount:

  • Input Type: numeric
  • Description: Represents the total number of unread notifications. This value is used to inform the user about the count of unread notifications available when the filter is set to 'unread'.

• isLoading:

  • Input Type: boolean
  • Description: Indicates if notifications are currently being fetched. While true, it shows a loading spinner in the modal.

• fetchNotifications:

  • Input Type: function
  • Description: Function responsible for fetching notifications from the server or state management.

• markAs:

  • Input Type: function
  • Description: Function used to mark specific notifications (by ID) as either read or dismissed. This updates the notification status in the store.

• markAllAsRead:

  • Input Type: function
  • Description: Function that marks all notifications as read.

Filters

• filters:
  • Input Type: Array of Objects
  • Description: An array containing the available filter options for the notifications. Each filter has a key and a label:
    • all: Shows all notifications.
    • unread: Shows only unread notifications.
    • critical: Shows notifications marked as critical.

Footer Actions

• footer:
  • Input Type: JSX Element
  • Description: Contains actions relevant to the notification modal, such as viewing all notifications and marking all as read. The footer appears at the bottom of the modal and is updated based on the state.

Use Cases & Examples

Use Cases

1. Task Management: Users can track important tasks assigned to them via notifications related to task assignments. Each notification can provide context on new assignments or updates.

2. System Monitoring: Operators using the Vantage platform can receive notifications for critical system alerts, such as workflow failures, allowing for timely responses to prevent downtime.

3. Billing Awareness: Users can receive notifications related to billing, ensuring they are aware of any charges or payment issues, thereby improving financial tracking.

Example Configuration

To provide a practical use case, let’s consider the scenario of a user wanting to manage their task assignments effectively.

Configuration for Task Assignment Notifications:

const exampleNotifications = [
    {
        id: 1,
        title: "New Task Assigned",
        type: "task_assignment",
        message: "You have been assigned to review the Q1 budget proposal.",
        severity: "normal",
        status: "unread",
        created: new Date().toISOString(),
    },
    {
        id: 2,
        title: "Workflow Failure",
        type: "workflow_failure",
        message: "The export process for Q2 data failed. Please investigate.",
        severity: "critical",
        status: "unread",
        created: new Date(Date.now() - 1000 * 60 * 10).toISOString(), // 10 minutes ago
    }
];

const notificationsStore = {
    notifications: exampleNotifications,
    unreadCount: exampleNotifications.filter(n => n.status === 'unread').length,
    isLoading: false,
    fetchNotifications: () => {/* Logic to fetch notifications */},
    markAs: (ids, status) => { /* Logic to mark notifications */},
    markAllAsRead: () => {/* Logic to mark all notifications as read */}
};

// Opening the NotificationsModal would display the above notifications to the user, allowing them to filter and manage these effectively.

In this example configuration, the notifications modal is populated with relevant notifications for task assignments and critical alerts, showcasing the versatility of the NotificationsModal component in a real-world scenario.