jupyterlab_notifications_extension 1.0.20 → 1.1.10

package/README.md

@@ -6,9 +6,30 @@
 [![Total PyPI downloads](https://static.pepy.tech/badge/jupyterlab-notifications-extension)](https://pepy.tech/project/jupyterlab-notifications-extension)
 [![JupyterLab 4](https://img.shields.io/badge/JupyterLab-4-orange.svg)](https://jupyterlab.readthedocs.io/en/stable/)
 
-JupyterLab extension enabling external systems to send notifications that appear in JupyterLab's notification center. Administrators, monitoring systems, and CI/CD pipelines broadcast alerts and status updates to users via a simple REST API.
+JupyterLab extension for sending notifications using the native JupyterLab notification system. External systems and extensions send alerts and status updates that appear in JupyterLab's notification center.
 
-The extension provides a POST endpoint for notification ingestion and polls every 30 seconds to display new notifications using JupyterLab's native notification system. Supports multiple notification types, configurable auto-close behavior, and optional action buttons.
+Five notification types with distinct visual styling provide clear status communication:
+
+![Notification Types](.resources/screenshot-notifications.png)
+
+Access via command palette for quick manual notification sending:
+
+![Command Palette](.resources/screenshot-palette.png)
+
+Interactive dialog with message input, type selection, auto-close timing, and action button options:
+
+![Send Dialog](.resources/screenshot-command.png)
+
+**Key Features:**
+
+- REST API for external systems to POST notifications with authentication
+- Command palette integration with interactive dialog
+- Programmatic command API for extensions and automation
+- Five notification types (info, success, warning, error, in-progress)
+- Configurable auto-close with millisecond precision or manual dismiss
+- Optional action buttons (currently dismiss only)
+- Broadcast delivery via 30-second polling
+- In-memory queue cleared after delivery
 
 ## Installation
 
@@ -22,7 +43,7 @@ pip install jupyterlab_notifications_extension
 
 ### POST /jupyterlab-notifications-extension/ingest
 
-Send notifications to JupyterLab users. Requires authentication via `Authorization: token <TOKEN>` header or `?token=<TOKEN>` query parameter.
+Send notifications to JupyterLab. Requires authentication via `Authorization: token <TOKEN>` header or `?token=<TOKEN>` query parameter.
 
 **Endpoint**: `POST /jupyterlab-notifications-extension/ingest`
 
@@ -47,7 +68,7 @@ Send notifications to JupyterLab users. Requires authentication via `Authorizati
 
 | Field       | Type           | Required | Default  | Description                                                                                                             |
 | ----------- | -------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `message`   | string         | Yes      | -        | Notification text displayed to users                                                                                    |
+| `message`   | string         | Yes      | -        | Notification text (max 140 characters)                                                                                  |
 | `type`      | string         | No       | `"info"` | Visual style: `default`, `info`, `success`, `warning`, `error`, `in-progress`                                           |
 | `autoClose` | number/boolean | No       | `5000`   | Milliseconds before auto-dismiss. `false` = manual dismiss only. `0` = silent mode (notification center only, no toast) |
 | `actions`   | array          | No       | `[]`     | Action buttons (see below)                                                                                              |
@@ -79,6 +100,32 @@ Note: Action buttons are purely visual. Clicking any button dismisses the notifi
 
 ## Usage Examples
 
+### From JupyterLab Extensions
+
+Send notifications programmatically from other extensions:
+
+```javascript
+// Basic notification
+await app.commands.execute('jupyterlab-notifications:send', {
+  message: 'Operation complete'
+});
+
+// Custom type and auto-close
+await app.commands.execute('jupyterlab-notifications:send', {
+  message: 'Build finished successfully',
+  type: 'success',
+  autoClose: 3000
+});
+
+// With action button
+await app.commands.execute('jupyterlab-notifications:send', {
+  message: 'Error processing data',
+  type: 'error',
+  autoClose: false,
+  actions: [{ label: 'View Details', displayType: 'accent' }]
+});
+```
+
 ### Python Script
 
 The included script auto-detects tokens from `JUPYTERHUB_API_TOKEN`, `JPY_API_TOKEN`, or `JUPYTER_TOKEN` environment variables:
@@ -121,7 +168,7 @@ curl -X POST http://localhost:8888/jupyterlab-notifications-extension/ingest \
 
 ## Architecture
 
-Broadcast-only model - all notifications delivered to all users.
+Broadcast-only model - all notifications delivered to the JupyterLab server.
 
 **Flow**: External system POSTs to `/jupyterlab-notifications-extension/ingest` -> Server queues in memory -> Frontend polls `/jupyterlab-notifications-extension/notifications` every 30 seconds -> Displays via JupyterLab notification manager -> Clears queue after fetch.
 

package/lib/index.js

@@ -1,3 +1,5 @@
+import { ICommandPalette, Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
 import { requestAPI } from './request';
 /**
  * Poll interval in milliseconds (30 seconds)
@@ -55,8 +57,154 @@ const plugin = {
     id: 'jupyterlab_notifications_extension:plugin',
     description: 'Jupyterlab extension to receive and display notifications in the main panel. Those can be from the jupyterjub administrator or from other places.',
     autoStart: true,
-    activate: (app) => {
+    requires: [ICommandPalette],
+    activate: (app, palette) => {
         console.log('JupyterLab extension jupyterlab_notifications_extension is activated!');
+        // Register command to send notifications
+        const commandId = 'jupyterlab-notifications:send';
+        app.commands.addCommand(commandId, {
+            label: 'Send Notification',
+            caption: 'Send a notification to all JupyterLab users',
+            execute: async (args) => {
+                let message = args.message;
+                let type = args.type || 'info';
+                let autoClose = args.autoClose !== undefined ? args.autoClose : 5000;
+                let actions = args.actions || [];
+                const data = args.data;
+                // If no message provided, show input dialog
+                if (!message) {
+                    // Create dialog body with form elements
+                    const body = document.createElement('div');
+                    body.style.display = 'flex';
+                    body.style.flexDirection = 'column';
+                    body.style.gap = '10px';
+                    // Message input
+                    const messageLabel = document.createElement('label');
+                    messageLabel.textContent = 'Message:';
+                    const messageInput = document.createElement('input');
+                    messageInput.type = 'text';
+                    messageInput.placeholder = 'Enter notification message';
+                    messageInput.style.width = '100%';
+                    messageInput.style.padding = '5px';
+                    // Type select
+                    const typeLabel = document.createElement('label');
+                    typeLabel.textContent = 'Type:';
+                    const typeSelect = document.createElement('select');
+                    typeSelect.style.width = '100%';
+                    typeSelect.style.padding = '5px';
+                    ['info', 'success', 'warning', 'error', 'in-progress'].forEach(t => {
+                        const option = document.createElement('option');
+                        option.value = t;
+                        option.textContent = t;
+                        typeSelect.appendChild(option);
+                    });
+                    // Auto-close checkbox and seconds input
+                    const autoCloseContainer = document.createElement('div');
+                    autoCloseContainer.style.display = 'flex';
+                    autoCloseContainer.style.alignItems = 'center';
+                    autoCloseContainer.style.gap = '10px';
+                    const autoCloseCheckbox = document.createElement('input');
+                    autoCloseCheckbox.type = 'checkbox';
+                    autoCloseCheckbox.id = 'autoCloseCheckbox';
+                    autoCloseCheckbox.checked = true;
+                    const autoCloseLabel = document.createElement('label');
+                    autoCloseLabel.htmlFor = 'autoCloseCheckbox';
+                    autoCloseLabel.textContent = 'Auto-close after';
+                    autoCloseLabel.style.cursor = 'pointer';
+                    const autoCloseInput = document.createElement('input');
+                    autoCloseInput.type = 'number';
+                    autoCloseInput.value = '5';
+                    autoCloseInput.min = '1';
+                    autoCloseInput.style.width = '60px';
+                    autoCloseInput.style.padding = '3px';
+                    const secondsLabel = document.createElement('span');
+                    secondsLabel.textContent = 'seconds';
+                    autoCloseContainer.appendChild(autoCloseCheckbox);
+                    autoCloseContainer.appendChild(autoCloseLabel);
+                    autoCloseContainer.appendChild(autoCloseInput);
+                    autoCloseContainer.appendChild(secondsLabel);
+                    // Disable/enable input based on checkbox
+                    autoCloseCheckbox.addEventListener('change', () => {
+                        autoCloseInput.disabled = !autoCloseCheckbox.checked;
+                    });
+                    // Dismiss button checkbox
+                    const dismissCheckbox = document.createElement('input');
+                    dismissCheckbox.type = 'checkbox';
+                    dismissCheckbox.id = 'dismissCheckbox';
+                    const dismissLabel = document.createElement('label');
+                    dismissLabel.htmlFor = 'dismissCheckbox';
+                    dismissLabel.textContent = ' Include dismiss button';
+                    dismissLabel.style.display = 'flex';
+                    dismissLabel.style.alignItems = 'center';
+                    dismissLabel.style.gap = '5px';
+                    dismissLabel.style.cursor = 'pointer';
+                    dismissLabel.prepend(dismissCheckbox);
+                    body.appendChild(messageLabel);
+                    body.appendChild(messageInput);
+                    body.appendChild(typeLabel);
+                    body.appendChild(typeSelect);
+                    body.appendChild(autoCloseContainer);
+                    body.appendChild(dismissLabel);
+                    const widget = new Widget({ node: body });
+                    const dialog = new Dialog({
+                        title: 'Send Notification',
+                        body: widget,
+                        buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Send' })]
+                    });
+                    const result = await dialog.launch();
+                    if (result.button.accept) {
+                        message = messageInput.value;
+                        if (!message) {
+                            return; // No message entered
+                        }
+                        // Override with dialog values
+                        type = typeSelect.value;
+                        // Set autoClose based on checkbox and input
+                        if (autoCloseCheckbox.checked) {
+                            autoClose = parseInt(autoCloseInput.value) * 1000; // Convert to milliseconds
+                        }
+                        else {
+                            autoClose = false;
+                        }
+                        actions = dismissCheckbox.checked
+                            ? [
+                                {
+                                    label: 'Dismiss',
+                                    caption: 'Close this notification',
+                                    displayType: 'default'
+                                }
+                            ]
+                            : [];
+                    }
+                    else {
+                        return; // User cancelled
+                    }
+                }
+                try {
+                    const payload = {
+                        message,
+                        type,
+                        autoClose
+                    };
+                    if (actions.length > 0) {
+                        payload.actions = actions;
+                    }
+                    if (data !== undefined) {
+                        payload.data = data;
+                    }
+                    await requestAPI('ingest', {
+                        method: 'POST',
+                        body: JSON.stringify(payload)
+                    });
+                    console.log('Notification sent successfully');
+                }
+                catch (error) {
+                    console.error('Failed to send notification:', error);
+                }
+            }
+        });
+        // Add command to palette
+        palette.addItem({ command: commandId, category: 'Notifications' });
         // Fetch notifications immediately on startup
         fetchAndDisplayNotifications(app);
         // Set up periodic polling for new notifications

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_notifications_extension",
-    "version": "1.0.20",
+    "version": "1.1.10",
     "description": "Jupyterlab extension to receive and display notifications in the main panel. Those can be from the jupyterjub administrator or from other places.",
     "keywords": [
         "jupyter",

package/src/index.ts

@@ -3,6 +3,9 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
+import { ICommandPalette, Dialog } from '@jupyterlab/apputils';
+import { Widget } from '@lumino/widgets';
+
 import { requestAPI } from './request';
 
 /**
@@ -91,11 +94,180 @@ const plugin: JupyterFrontEndPlugin<void> = {
   description:
     'Jupyterlab extension to receive and display notifications in the main panel. Those can be from the jupyterjub administrator or from other places.',
   autoStart: true,
-  activate: (app: JupyterFrontEnd) => {
+  requires: [ICommandPalette],
+  activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {
     console.log(
       'JupyterLab extension jupyterlab_notifications_extension is activated!'
     );
 
+    // Register command to send notifications
+    const commandId = 'jupyterlab-notifications:send';
+    app.commands.addCommand(commandId, {
+      label: 'Send Notification',
+      caption: 'Send a notification to all JupyterLab users',
+      execute: async (args: any) => {
+        let message = args.message as string;
+        let type = (args.type as string) || 'info';
+        let autoClose = args.autoClose !== undefined ? args.autoClose : 5000;
+        let actions = args.actions || [];
+        const data = args.data;
+
+        // If no message provided, show input dialog
+        if (!message) {
+          // Create dialog body with form elements
+          const body = document.createElement('div');
+          body.style.display = 'flex';
+          body.style.flexDirection = 'column';
+          body.style.gap = '10px';
+
+          // Message input
+          const messageLabel = document.createElement('label');
+          messageLabel.textContent = 'Message:';
+          const messageInput = document.createElement('input');
+          messageInput.type = 'text';
+          messageInput.placeholder = 'Enter notification message';
+          messageInput.style.width = '100%';
+          messageInput.style.padding = '5px';
+
+          // Type select
+          const typeLabel = document.createElement('label');
+          typeLabel.textContent = 'Type:';
+          const typeSelect = document.createElement('select');
+          typeSelect.style.width = '100%';
+          typeSelect.style.padding = '5px';
+          ['info', 'success', 'warning', 'error', 'in-progress'].forEach(t => {
+            const option = document.createElement('option');
+            option.value = t;
+            option.textContent = t;
+            typeSelect.appendChild(option);
+          });
+
+          // Auto-close checkbox and seconds input
+          const autoCloseContainer = document.createElement('div');
+          autoCloseContainer.style.display = 'flex';
+          autoCloseContainer.style.alignItems = 'center';
+          autoCloseContainer.style.gap = '10px';
+
+          const autoCloseCheckbox = document.createElement('input');
+          autoCloseCheckbox.type = 'checkbox';
+          autoCloseCheckbox.id = 'autoCloseCheckbox';
+          autoCloseCheckbox.checked = true;
+
+          const autoCloseLabel = document.createElement('label');
+          autoCloseLabel.htmlFor = 'autoCloseCheckbox';
+          autoCloseLabel.textContent = 'Auto-close after';
+          autoCloseLabel.style.cursor = 'pointer';
+
+          const autoCloseInput = document.createElement('input');
+          autoCloseInput.type = 'number';
+          autoCloseInput.value = '5';
+          autoCloseInput.min = '1';
+          autoCloseInput.style.width = '60px';
+          autoCloseInput.style.padding = '3px';
+
+          const secondsLabel = document.createElement('span');
+          secondsLabel.textContent = 'seconds';
+
+          autoCloseContainer.appendChild(autoCloseCheckbox);
+          autoCloseContainer.appendChild(autoCloseLabel);
+          autoCloseContainer.appendChild(autoCloseInput);
+          autoCloseContainer.appendChild(secondsLabel);
+
+          // Disable/enable input based on checkbox
+          autoCloseCheckbox.addEventListener('change', () => {
+            autoCloseInput.disabled = !autoCloseCheckbox.checked;
+          });
+
+          // Dismiss button checkbox
+          const dismissCheckbox = document.createElement('input');
+          dismissCheckbox.type = 'checkbox';
+          dismissCheckbox.id = 'dismissCheckbox';
+          const dismissLabel = document.createElement('label');
+          dismissLabel.htmlFor = 'dismissCheckbox';
+          dismissLabel.textContent = ' Include dismiss button';
+          dismissLabel.style.display = 'flex';
+          dismissLabel.style.alignItems = 'center';
+          dismissLabel.style.gap = '5px';
+          dismissLabel.style.cursor = 'pointer';
+          dismissLabel.prepend(dismissCheckbox);
+
+          body.appendChild(messageLabel);
+          body.appendChild(messageInput);
+          body.appendChild(typeLabel);
+          body.appendChild(typeSelect);
+          body.appendChild(autoCloseContainer);
+          body.appendChild(dismissLabel);
+
+          const widget = new Widget({ node: body });
+
+          const dialog = new Dialog({
+            title: 'Send Notification',
+            body: widget,
+            buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Send' })]
+          });
+
+          const result = await dialog.launch();
+
+          if (result.button.accept) {
+            message = messageInput.value;
+            if (!message) {
+              return; // No message entered
+            }
+
+            // Override with dialog values
+            type = typeSelect.value;
+
+            // Set autoClose based on checkbox and input
+            if (autoCloseCheckbox.checked) {
+              autoClose = parseInt(autoCloseInput.value) * 1000; // Convert to milliseconds
+            } else {
+              autoClose = false;
+            }
+
+            actions = dismissCheckbox.checked
+              ? [
+                  {
+                    label: 'Dismiss',
+                    caption: 'Close this notification',
+                    displayType: 'default'
+                  }
+                ]
+              : [];
+          } else {
+            return; // User cancelled
+          }
+        }
+
+        try {
+          const payload: any = {
+            message,
+            type,
+            autoClose
+          };
+
+          if (actions.length > 0) {
+            payload.actions = actions;
+          }
+
+          if (data !== undefined) {
+            payload.data = data;
+          }
+
+          await requestAPI('ingest', {
+            method: 'POST',
+            body: JSON.stringify(payload)
+          });
+
+          console.log('Notification sent successfully');
+        } catch (error) {
+          console.error('Failed to send notification:', error);
+        }
+      }
+    });
+
+    // Add command to palette
+    palette.addItem({ command: commandId, category: 'Notifications' });
+
     // Fetch notifications immediately on startup
     fetchAndDisplayNotifications(app);