display notifications in a declarative way

web/static/src/ts/env.ts

@@ -1,7 +1,7 @@
 import { WEnv } from "./core/component";
 import { QWeb } from "./core/qweb_vdom";
 import { idGenerator } from "./core/utils";
-import { INotification, RPC, Services, Store } from "./store/store";
+import { Notification, RPC, Services, Store } from "./store/store";
 
 //------------------------------------------------------------------------------
 // Types
@@ -12,7 +12,7 @@ export interface Env extends WEnv {
 
   // commands
   activateMenuItem(menuId: number): void;
-  addNotification(notif: Partial<INotification>): number;
+  addNotification(notif: Partial<Notification>): number;
   closeNotification(id: number): void;
   toggleHomeMenu(): void;
 

web/static/src/ts/store/notification_mixin.ts

@@ -1,37 +0,0 @@
-import { Type } from "../core/component";
-import { BaseStore } from "./store";
-
-//------------------------------------------------------------------------------
-// Notifications Mixin
-//------------------------------------------------------------------------------
-export interface INotification {
-  id: number;
-  title: string;
-  message: string;
-  type: "notification" | "warning";
-  sticky: boolean;
-}
-
-export function notificationMixin<T extends Type<BaseStore>>(Base: T) {
-  return class extends Base {
-    addNotification(notif: Partial<INotification>): number {
-      const id = this.generateID();
-      const defaultVals = {
-        title: "",
-        message: "",
-        type: "notification",
-        sticky: false
-      };
-      const notification = Object.assign(defaultVals, notif, { id });
-      this.trigger("notification_added", notification);
-      if (!notification.sticky) {
-        setTimeout(() => this.closeNotification(id), 2500);
-      }
-      return id;
-    }
-
-    closeNotification(id: number) {
-      this.trigger("notification_closed", id);
-    }
-  };
-}

web/static/src/ts/store/store.ts

@@ -4,7 +4,6 @@ import { idGenerator } from "../core/utils";
 import { RPC } from "../services/ajax";
 import { IRouter, Query } from "../services/router";
 import { actionManagerMixin, ActionWidget } from "./action_manager_mixin";
-import { notificationMixin } from "./notification_mixin";
 import { rpcMixin } from "./rpc_mixin";
 import { MenuItem } from "./store";
 
@@ -13,7 +12,6 @@ import { MenuItem } from "./store";
 //------------------------------------------------------------------------------
 
 export { ActionWidget } from "./action_manager_mixin";
-export { INotification } from "./notification_mixin";
 export { RPC } from "./rpc_mixin";
 
 export interface MenuItem {
@@ -39,6 +37,7 @@ export interface MenuInfo {
 export interface State {
   inHome: boolean;
   currentApp: MenuItem | null;
+  notifications: Notification[];
 }
 
 export interface Services {
@@ -46,13 +45,22 @@ export interface Services {
   router: IRouter;
 }
 
+export interface Notification {
+  id: number;
+  title: string;
+  message: string;
+  type: "notification" | "warning";
+  sticky: boolean;
+}
+
 //------------------------------------------------------------------------------
 // Store
 //------------------------------------------------------------------------------
 export class BaseStore extends EventBus {
   state: State = {
     inHome: false,
-    currentApp: null
+    currentApp: null,
+    notifications: []
   };
   menuInfo: MenuInfo;
   services: Services;
@@ -93,11 +101,31 @@ export class BaseStore extends EventBus {
     this.currentQuery = query;
     this.services.router.navigate(query);
   }
+
+  addNotification(notif: Partial<Notification>): number {
+    const id = this.generateID();
+    const defaultVals = {
+      title: "",
+      message: "",
+      type: "notification",
+      sticky: false
+    };
+    const notification = Object.assign(defaultVals, notif, { id });
+    const notifs = this.state.notifications.concat(notification);
+    this.update({ notifications: notifs });
+    if (!notification.sticky) {
+      setTimeout(() => this.closeNotification(id), 2500);
+    }
+    return id;
   }
 
-export class Store extends actionManagerMixin(
+  closeNotification(id: number) {
-  rpcMixin(notificationMixin(BaseStore))
+    const notifs = this.state.notifications.filter(n => n.id !== id);
-) {
+    this.update({ notifications: notifs });
+  }
+}
+
+export class Store extends actionManagerMixin(rpcMixin(BaseStore)) {
   constructor(
     services: Services,
     menuInfo: MenuInfo,

web/static/src/ts/ui/notification.ts

@@ -1,4 +1,4 @@
-import { INotification } from "../store/store";
+import { Notification as INotification } from "../store/store";
 import { Widget } from "./widget";
 
 export class Notification extends Widget<INotification, {}> {

web/static/src/ts/ui/root.ts

@@ -13,9 +13,8 @@ import { Action } from "../store/action_manager_mixin";
 
 export class Root extends Widget<Store, State> {
   template = "web.web_client";
-  widgets = { Navbar, HomeMenu };
+  widgets = { Navbar, HomeMenu, Notification };
 
-  notifications: { [id: number]: Notification } = {};
   store: Store;
 
   constructor(env: Env, store: Store) {
@@ -23,22 +22,12 @@ export class Root extends Widget<Store, State> {
     this.store = store;
     this.state = store.state;
   }
+
   mounted() {
     this.store.on("state_updated", this, newState => {
       this.updateState(newState);
     });
 
-    // notifications
-    this.store.on("notification_added", this, notif => {
-      const notification = new Notification(this, notif);
-      this.notifications[notif.id] = notification;
-      notification.mount(<any>this.refs.notification_container);
-    });
-    this.store.on("notification_closed", this, id => {
-      this.notifications[id].destroy();
-      delete this.notifications[id];
-    });
-
     // loading indicator
     this.store.on("rpc_status", this, status => {
       const method = status === "loading" ? "remove" : "add";

web/static/src/xml/templates.xml

@@ -5,7 +5,11 @@
     <t t-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" />
     <t t-widget="HomeMenu" t-if="state.inHome" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}" />
     <div class="o_content" t-att-class="state.inHome ? 'o_hidden' : ''" t-ref="content"/>
-    <div class="o_notification_container" t-ref="notification_container"/>
+    <div class="o_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/store/store.test.ts

@@ -35,56 +35,44 @@ describe("rpc", () => {
 
 describe("notifications", () => {
   test("can subscribe and add notification", () => {
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
+    expect(store.state.notifications.length).toBe(0);
-    store.on("notification_closed", null, () => n--);
-    expect(n).toBe(0);
     const id = store.addNotification({
       title: "test",
       message: "message"
     });
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
     expect(id).toBeDefined();
   });
 
   test("can close a notification", () => {
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
 
     const id = store.addNotification({
       title: "test",
       message: "message"
     });
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
 
     store.closeNotification(id);
-    expect(n).toBe(0);
+    expect(store.state.notifications.length).toBe(0);
   });
 
   test("notifications closes themselves after a while", () => {
     jest.useFakeTimers();
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
 
     store.addNotification({ title: "test", message: "message" });
 
     expect(setTimeout).toHaveBeenCalledTimes(1);
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
     jest.runAllTimers();
-    expect(n).toBe(0);
+    expect(store.state.notifications.length).toBe(0);
   });
 
   test("sticky notifications do not close themselves after a while", () => {
     jest.useFakeTimers();
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
 
     store.addNotification({
       title: "test",
@@ -93,9 +81,9 @@ describe("notifications", () => {
     });
 
     expect(setTimeout).toHaveBeenCalledTimes(0);
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
     jest.runAllTimers();
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
   });
 });
 

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

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

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

@@ -1,5 +1,5 @@
 import { Env, makeEnv } from "../../src/ts/env";
-import { INotification, Store } from "../../src/ts/store/store";
+import { Notification as INotification, Store } from "../../src/ts/store/store";
 import { Notification } from "../../src/ts/ui/notification";
 import * as helpers from "../helpers";
 
@@ -50,23 +50,15 @@ test("can be rendered", async () => {
 });
 
 test("can be closed by clicking on it (if sticky)", async () => {
-  let n = 0;
-  let notif;
-  store.on("notification_added", null, _notif => {
-    n++;
-    notif = _notif;
-  });
-  store.on("notification_closed", null, () => n--);
-
   env.addNotification({
     title: "title",
     message: "message",
     sticky: true
   });
 
-  const navbar = new Notification(env, notif);
+  const navbar = new Notification(env, store.state.notifications[0]);
   await navbar.mount(fixture);
-  expect(n).toBe(1);
+  expect(store.state.notifications.length).toBe(1);
   (<any>fixture.getElementsByClassName("o_close")[0]).click();
-  expect(n).toBe(0);
+  expect(store.state.notifications.length).toBe(0);
 });