@camunda/camunda-composite-components 0.0.29-np-rc13 → 0.0.29-np-rc15

package/lib/esm/api/endpoints.const.js

@@ -1,8 +1,8 @@
 export const NOTIFICATIONS = {
     id: "notifications",
     dev: "https://notifications.cloud.dev.ultrawombat.com",
-    int: "todo",
-    prod: "todo",
+    int: "https://notifications.cloud.ultrawombat.com",
+    prod: "https://notifications.cloud.camunda.io",
 };
 export function getEndpoint(stage, endpoint) {
     switch (stage) {

package/lib/esm/api/notifications.d.ts

@@ -10,6 +10,7 @@ export interface Notification {
     description: string;
     state: string;
     meta?: {
+        identifier?: string;
         href?: string;
         label?: string;
         entity?: {
@@ -25,7 +26,9 @@ export interface Notification {
 export declare class NotificationService {
     static getNotifications(options: C3NotificationsProps): Promise<Notification[]>;
     static changeState(options: C3NotificationsProps, notificationId: string, operation: "read" | "dismiss"): void;
+    static changeManyStates(options: C3NotificationsProps, notificationIds: string[], operation: "read" | "dismiss"): void;
     static notificationsStream(options: C3NotificationsProps, handler: (notification: Notification) => void): void;
     static updateNotifications(allNotifications: Notification[], newNotification: Notification): Notification[];
     static updateNotificationState(allNotifications: Notification[], notificationId: string, newState: "read" | "dismiss"): Notification[];
+    static updateNotificationStates(allNotifications: Notification[], notificationIds: string[], newState: "read" | "dismiss"): Notification[];
 }

package/lib/esm/api/notifications.js

@@ -40,6 +40,27 @@ export class NotificationService {
             console.error(error);
         });
     }
+    static changeManyStates(options, notificationIds, operation) {
+        request({
+            method: "patch",
+            base: "notifications",
+            stage: options.stage,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/batch/state/${operation}`,
+            body: {
+                uuids: notificationIds,
+            },
+        })
+            .then(() => {
+            // do nothing
+        })
+            .catch((error) => {
+            console.error(error);
+        });
+    }
     static notificationsStream(options, handler) {
         const source = new EventSourcePolyfill(`${getEndpoint(options.stage, NOTIFICATIONS)}/notifications/events`, {
             headers: {
@@ -88,4 +109,20 @@ export class NotificationService {
         }
         return updatedNotifications;
     }
+    static updateNotificationStates(allNotifications, notificationIds, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotifications = [];
+        switch (newState) {
+            case "dismiss":
+                updatedNotifications = updatedNotifications.filter((notification) => !notificationIds.includes(notification.uuid));
+                break;
+            case "read":
+                foundNotifications = updatedNotifications.filter((notification) => !notificationIds.includes(notification.uuid));
+                foundNotifications.forEach((foundNotification) => {
+                    foundNotification.state = newState;
+                });
+                break;
+        }
+        return updatedNotifications;
+    }
 }

package/lib/esm/components/c3-navigation/c3-navigation-sidebar/c3-notification-sidebar.js

@@ -1,10 +1,10 @@
 import { Button } from "@carbon/react";
 import { Notification as NotificationIcon } from "@carbon/react/icons";
 import React, { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../icons/c3-icons";
 import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from "../c3-notification-provider/c3-notification-container";
 import { C3NotificationContext } from "../c3-notification-provider/c3-notification-provider";
-import { C3BellIcon, C3NotificationsUnreadIcon } from "../../../icons/c3-icons";
-import styled from "styled-components";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 const PanelHeader = styled.div `
 	background: var(--cds-layer-01);
@@ -37,26 +37,25 @@ const EmptyStateDescription = styled(NotificationDescription) `
 export const C3NotificationSidebar = ({ sideBar }) => {
     const { isOpen, onLinkClick } = sideBar;
     const [isSidebarOpen, setIsSidebarOpen] = useState(isOpen);
-    const { notifications, markAsRead, dismiss } = useContext(C3NotificationContext);
+    const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll } = useContext(C3NotificationContext);
     const [unreadNotifications, setUnreadNotifications] = useState([]);
     const hasUnreadNotifications = notifications.some(({ state }) => state === "new");
-    const markAllAsRead = () => notifications
-        .filter((notification) => notification.state === "new")
-        .forEach((notification) => {
-        markAsRead(notification);
-    });
-    const dismissAll = () => notifications.forEach((notification) => dismiss(notification));
+    const markAllAsReadSidebar = () => {
+        const newNotifications = notifications.filter((notification) => notification.state === "new");
+        markAllAsRead(newNotifications);
+    };
+    const dismissAllSidebar = () => dismissAll(notifications);
     const setIsOpen = (open) => {
         if (open) {
             // remember new notifications, so the dots can be displayed
             setUnreadNotifications(notifications
                 .filter(({ state }) => state === "new")
                 .map(({ uuid }) => uuid));
-            markAllAsRead();
+            markAllAsReadSidebar();
         }
         setIsSidebarOpen(open);
         if (!open) {
-            markAllAsRead();
+            markAllAsReadSidebar();
             setUnreadNotifications([]);
         }
     };
@@ -69,7 +68,7 @@ export const C3NotificationSidebar = ({ sideBar }) => {
         // mark notifications as read on unmount
         return () => {
             if (isSidebarOpen)
-                markAllAsRead();
+                markAllAsReadSidebar();
         };
     }, []);
     return (React.createElement(C3NavigationSideBar, { sideBar: {
@@ -79,7 +78,7 @@ export const C3NotificationSidebar = ({ sideBar }) => {
         }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, label: "Notifications" })) },
         React.createElement(PanelHeader, null,
             React.createElement(PanelTitle, null, "Notifications"),
-            notifications.length > 0 && (React.createElement(Button, { kind: "ghost", size: "sm", onClick: dismissAll }, "Dismiss all"))),
+            notifications.length > 0 && (React.createElement(Button, { kind: "ghost", size: "sm", onClick: dismissAllSidebar }, "Dismiss all"))),
         notifications.length > 0 ? (notifications.sort(sortNotificationsDescending).map((notification) => (React.createElement(C3NotificationContainer, { key: notification.uuid, onRead: () => {
                 if (notification.state === "new") {
                     markAsRead(notification);

package/lib/esm/components/c3-navigation/c3-notification-provider/c3-notification-provider.d.ts

@@ -16,7 +16,9 @@ export declare type C3NotificationContextValue = {
     enabled: boolean;
     notifications: Notification[];
     markAsRead: (notification: Notification) => void;
+    markAllAsRead: (notifications: Notification[]) => void;
     dismiss: (notification: Notification) => void;
+    dismissAll: (notifications: Notification[]) => void;
 };
 export declare const C3NotificationContext: React.Context<C3NotificationContextValue>;
 export declare type C3NotificationProviderProps = {

package/lib/esm/components/c3-navigation/c3-notification-provider/c3-notification-provider.js

@@ -5,7 +5,9 @@ export const C3NotificationContext = React.createContext({
     enabled: false,
     notifications: [],
     markAsRead: () => undefined,
+    markAllAsRead: () => undefined,
     dismiss: () => undefined,
+    dismissAll: () => undefined,
 });
 const C3NotificationProvider = ({ children, }) => {
     const [notifications, setNotifications] = useState([]);
@@ -46,13 +48,24 @@ const C3NotificationProvider = ({ children, }) => {
             NotificationService.changeState(config, uuid, newState);
         }
     };
+    const changeManyStates = (newState, notifications) => {
+        if (enabled) {
+            const notificationIds = notifications.map((notification) => notification.uuid);
+            setNotifications((allNotifications) => NotificationService.updateNotificationStates(allNotifications, notificationIds, newState));
+            NotificationService.changeManyStates(config, notificationIds, newState);
+        }
+    };
     const markAsRead = (notification) => changeState("read", notification);
+    const markAllAsRead = (notifications) => changeManyStates("read", notifications);
     const dismiss = (notification) => changeState("dismiss", notification);
+    const dismissAll = (notifications) => changeManyStates("dismiss", notifications);
     return (React.createElement(C3NotificationContext.Provider, { value: {
             enabled,
             notifications,
             markAsRead,
+            markAllAsRead,
             dismiss,
+            dismissAll,
         } }, children));
 };
 export function withNotifications(Component) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.0.29-np-rc13",
+	"version": "0.0.29-np-rc15",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",