Task/jenkins 37685 toaster mobx fixes (#469)

* upgrade mobx version; add devtools

* change ToastService to modify 'toasts' array in-place, and fix a bug in ToastDrawer where it wasn't updating because no observables were actually referenced

* tick Core JS version after publish

blueocean-core-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/blueocean-core-js",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean",
   "main": "dist/js/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "isomorphic-fetch": "2.2.1",
     "jsonwebtoken": "7.1.9",
     "pem-jwk": "1.5.1",
-    "mobx": "2.4.3",
+    "mobx": "2.5.1",
     "react-material-icons-blue": "1.0.4"
   },
   "peerDependencies": {

blueocean-core-js/src/js/ToastService.js

@@ -1,7 +1,7 @@
 /**
  * Created by cmeyers on 8/18/16.
  */
-import { observable, computed } from 'mobx';
+import { action, observable, computed } from 'mobx';
 
 /**
  * Holds one or more toasts in state for display in UI.
@@ -24,6 +24,7 @@ export class ToastService {
      * }
      * @returns {number} unique ID of toast
      */
+    @action
     newToast(toast) {
         // prevent duplicate toasts from appearing when multiple UI elements
         // are listening for an event that triggers creation of a toast
@@ -37,10 +38,7 @@ export class ToastService {
             newToast.id = Math.random() * Math.pow(10, 16);
         }
 
-        // TODO: determine why it's necessary to re-set the "toasts" field to trigger the UI update
-        const toasts = this.toasts.slice();
-        toasts.push(toast);
-        this.toasts = toasts;
+        this.toasts.push(newToast);
 
         return newToast.id;
     }
@@ -50,6 +48,7 @@ export class ToastService {
      *
      * @param toast
      */
+    @action
     removeToast(toast) {
         this.toasts = this.toasts.filter((item) =>
             toast.id !== item.id

blueocean-dashboard/package.json

@@ -35,7 +35,7 @@
     "skin-deep": "^0.16.0"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.9",
+    "@jenkins-cd/blueocean-core-js": "0.0.11-beta1",
     "@jenkins-cd/design-language": "0.0.73",
     "@jenkins-cd/js-extensions": "0.0.23",
     "@jenkins-cd/js-modules": "0.0.7",

blueocean-personalization/package.json

@@ -34,7 +34,7 @@
     "react-addons-test-utils": "15.0.1"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.9",
+    "@jenkins-cd/blueocean-core-js": "0.0.11-beta1",
     "@jenkins-cd/design-language": "0.0.73",
     "@jenkins-cd/js-extensions": "0.0.23",
     "@jenkins-cd/js-modules": "0.0.7",

blueocean-web/package.json

@@ -28,15 +28,16 @@
     "zombie": "^4.2.1"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.9",
+    "@jenkins-cd/blueocean-core-js": "0.0.11-beta1",
     "@jenkins-cd/design-language": "0.0.73",
     "@jenkins-cd/js-extensions": "0.0.23",
     "@jenkins-cd/js-modules": "0.0.7",
     "history": "2.0.2",
     "immutable": "3.8.1",
     "keymirror": "0.1.1",
-    "mobx": "2.4.3",
+    "mobx": "2.5.1",
     "mobx-react": "3.5.5",
+    "mobx-react-devtools": "4.2.5",
     "moment": "2.13.0",
     "react": "15.1.0",
     "react-addons-css-transition-group": "15.1.0",

blueocean-web/src/main/js/components/ToastDrawer.jsx

@@ -19,6 +19,9 @@ export class ToastDrawer extends Component {
     }
 
     render() {
+        // need to reference observable prop in render to trigger subscription
+        toastService.count;
+
         return (
             <Toaster
                 toasts={toastService.toasts}