display notifications instantly (imperative way)

web/static/src/ts/core/notifications.ts

@@ -12,14 +12,19 @@ export interface INotification {
   sticky: boolean;
 }
 
-export type NotificationEvent = "notifications_updated";
-
-export type Callback = (notifs: INotification[]) => void;
-
 export interface INotificationManager {
   add(notif: Partial<INotification>): number;
   close(id: number): void;
-  on(event: NotificationEvent, owner: any, callback: Callback): void;
+  on(
+    event: "notification_added",
+    owner: any,
+    callback: (notif: INotification) => void
+  ): void;
+  on(
+    event: "notification_closed",
+    owner: any,
+    callback: (id: number) => void
+  ): void;
 }
 
 //------------------------------------------------------------------------------
@@ -28,7 +33,6 @@ export interface INotificationManager {
 
 export class NotificationManager extends Bus implements INotificationManager {
   nextID = 1;
-  notifications: INotification[] = [];
 
   add(notif: Partial<INotification>): number {
     const id = this.nextID++;
@@ -39,15 +43,13 @@ export class NotificationManager extends Bus implements INotificationManager {
       sticky: false
     };
     const notification = Object.assign(defaultVals, notif, { id });
-    this.notifications.push(notification);
+    this.trigger("notification_added", notification);
-    this.trigger("notifications_updated", this.notifications);
     if (!notification.sticky) {
       setTimeout(() => this.close(id), 2500);
     }
     return id;
   }
   close(id: number) {
-    this.notifications = this.notifications.filter(n => n.id !== id);
+    this.trigger("notification_closed", id);
-    this.trigger("notifications_updated", this.notifications);
   }
 }

web/static/src/ts/widgets/root.ts

@@ -1,4 +1,3 @@
-import { INotification } from "../core/notifications";
 import { Query } from "../core/router";
 import { debounce } from "../core/utils";
 import { ActionStack } from "../services/action_manager";
@@ -37,7 +36,6 @@ export interface Props {
 }
 
 interface State {
-  notifications: INotification[];
   stack: ActionStack;
   inHome: boolean;
   currentApp: MenuItem | null;
@@ -49,15 +47,16 @@ interface State {
 
 export class Root extends Widget<Props, State> {
   template = "web.web_client";
-  widgets = { Navbar, Notification, HomeMenu, ActionContainer };
+  widgets = { Navbar, HomeMenu, ActionContainer };
 
   state: State = {
-    notifications: [],
     stack: [],
     inHome: false,
     currentApp: null
   };
 
+  notifications: { [id: number]: Notification } = {};
+
   constructor(env: Env, props: Props) {
     super(env, props);
     const query = this.env.router.getQuery();
@@ -69,9 +68,15 @@ export class Root extends Widget<Props, State> {
   }
   mounted() {
     // notifications
-    this.env.notifications.on("notifications_updated", this, notifs =>
+    this.env.notifications.on("notification_added", this, notif => {
-      this.updateState({ notifications: notifs })
+      const notification = new Notification(this, notif);
-    );
+      this.notifications[notif.id] = notification;
+      notification.mount(<any>this.refs.notification_container);
+    });
+    this.env.notifications.on("notification_closed", this, id => {
+      this.notifications[id].destroy();
+      delete this.notifications[id];
+    });
 
     // loading indicator
     this.env.ajax.on("rpc_status", this, status => {

web/static/src/xml/templates.xml

@@ -9,11 +9,7 @@
     <t t-else="1">
       <t t-widget="ActionContainer" t-props="{stack:state.stack}" t-keep-alive="1"/>
     </t>
-    <div class="o_notification_container">
+    <div class="o_notification_container" t-ref="notification_container"/>
-      <t t-foreach="state.notifications" t-as="notif">
-        <t t-widget="Notification" t-props="notif"/>
-      </t>
-    </div>
     <div class="o_loading d-none" t-ref="loading_indicator">Loading</div>
   </div>
 

web/static/tests/core/notifications.test.ts

@@ -1,54 +1,55 @@
-import {
+import { NotificationManager } from "../../src/ts/core/notifications";
-  NotificationManager,
-  INotification
-} from "../../src/ts/core/notifications";
 
 test("can subscribe and add notification", () => {
-  let notifs: INotification[] = [];
+  let n = 0;
   const notifications = new NotificationManager();
-  notifications.on("notifications_updated", {}, n => (notifs = n));
+  notifications.on("notification_added", null, () => n++);
-  expect(notifs.length).toBe(0);
+  notifications.on("notification_closed", null, () => n--);
+  expect(n).toBe(0);
   const id = notifications.add({ title: "test", message: "message" });
-  expect(notifs.length).toBe(1);
+  expect(n).toBe(1);
   expect(id).toBeDefined();
 });
 
 test("can close a notification", () => {
-  let notifs: INotification[] = [];
+  let n = 0;
   const notifications = new NotificationManager();
-  notifications.on("notifications_updated", {}, n => (notifs = n));
+  notifications.on("notification_added", null, () => n++);
+  notifications.on("notification_closed", null, () => n--);
 
   const id = notifications.add({ title: "test", message: "message" });
-  expect(notifs.length).toBe(1);
+  expect(n).toBe(1);
 
   notifications.close(id);
-  expect(notifs.length).toBe(0);
+  expect(n).toBe(0);
 });
 
 test("notifications closes themselves after a while", () => {
   jest.useFakeTimers();
-  let notifs: INotification[] = [];
+  let n = 0;
   const notifications = new NotificationManager();
-  notifications.on("notifications_updated", {}, n => (notifs = n));
+  notifications.on("notification_added", null, () => n++);
+  notifications.on("notification_closed", null, () => n--);
 
   notifications.add({ title: "test", message: "message" });
 
   expect(setTimeout).toHaveBeenCalledTimes(1);
-  expect(notifs.length).toBe(1);
+  expect(n).toBe(1);
   jest.runAllTimers();
-  expect(notifs.length).toBe(0);
+  expect(n).toBe(0);
 });
 
 test("sticky notifications do not close themselves after a while", () => {
   jest.useFakeTimers();
-  let notifs: INotification[] = [];
+  let n = 0;
   const notifications = new NotificationManager();
-  notifications.on("notifications_updated", {}, n => (notifs = n));
+  notifications.on("notification_added", null, () => n++);
+  notifications.on("notification_closed", null, () => n--);
 
   notifications.add({ title: "test", message: "message", sticky: true });
 
   expect(setTimeout).toHaveBeenCalledTimes(0);
-  expect(notifs.length).toBe(1);
+  expect(n).toBe(1);
   jest.runAllTimers();
-  expect(notifs.length).toBe(1);
+  expect(n).toBe(1);
 });

web/static/tests/widgets/__snapshots__/root.test.ts.snap

@@ -28,9 +28,7 @@ exports[`can be rendered (in home menu) 1`] = `
     </div>
   </div>
     
-    <div class=\\"o_notification_container\\">
+    <div class=\\"o_notification_container\\"></div>
-      
-    </div>
     <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;
@@ -104,9 +102,7 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
     
       <div class=\\"o_content\\"></div>
     
-    <div class=\\"o_notification_container\\">
+    <div class=\\"o_notification_container\\"></div>
-      
-    </div>
     <div class=\\"o_loading\\">Loading</div>
   </div>"
 `;
@@ -171,9 +167,7 @@ exports[`start with no action => clicks on client action => discuss is rendered
     <button>Add sticky notif</button>
   </div></div>
     
-    <div class=\\"o_notification_container\\">
+    <div class=\\"o_notification_container\\"></div>
-      
-    </div>
     <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;

web/static/tests/widgets/notification.test.ts

@@ -47,21 +47,23 @@ test("can be rendered", async () => {
 });
 
 test("can be closed by clicking on it (if sticky)", async () => {
-  let notifs: INotification[] = [];
+  let n = 0;
-  env.notifications.on(
+  let notif;
-    "notifications_updated",
+  env.notifications.on("notification_added", null, _notif => {
-    null,
+    n++;
-    _notifs => (notifs = _notifs)
+    notif = _notif;
-  );
+  });
+  env.notifications.on("notification_closed", null, () => n--);
+
   env.notifications.add({
     title: "title",
     message: "message",
     sticky: true
   });
 
-  const navbar = new Notification(env, notifs[0]);
+  const navbar = new Notification(env, notif);
   await navbar.mount(fixture);
-  expect(notifs.length).toBe(1);
+  expect(n).toBe(1);
   (<any>fixture.getElementsByClassName("o_close")[0]).click();
-  expect(notifs.length).toBe(0);
+  expect(n).toBe(0);
 });