Merge lp:~allenap/maas/notifications-style-mk2 into lp:~maas-committers/maas/trunk

[Gavin Panella]

Use the new styling for notifications in the UI and group by category.

[Gavin Panella (allenap)]

See "Notifications" in http://ubuntudesign.github.io/maas-gui-vanilla-theme/ for more info on how notifications should now be styled.

[Andres Rodriguez (andreserl)]

lgtm!

review: Approve

=== modified file 'src/maasserver/static/js/angular/directives/notifications.js'
--- src/maasserver/static/js/angular/directives/notifications.js	2017-02-08 15:30:56 +0000
+++ src/maasserver/static/js/angular/directives/notifications.js	2017-02-17 08:03:16 +0000
@@ -7,16 +7,40 @@
 angular.module('MAAS').run(['$templateCache', function ($templateCache) {
     // Inject notifications.html into the template cache.
     $templateCache.put('directive/templates/notifications.html', [
-      '<div ng-repeat="n in notifications" ng-class="classes[n.category]">',
-        '<p class="p-notification__response">',
-          '<span class="p-notification__status"></span>',
-          '<span ng-bind-html="n.message"></span> — ',
-          '<a ng-click="dismiss(n)">Dismiss</a>',
-          '<br><small>(id: {$ n.id $}, ',
-          'ident: {$ n.ident || "-" $}, user: {$ n.user || "-" $}, ',
-          'users: {$ n.users $}, admins: {$ n.admins $}, ',
-          'created: {$ n.created $}, updated: {$ n.updated $})</small>',
-        '</p>',
+      '<div ng-repeat="category in categories"',
+        ' ng-init="notifications = categoryNotifications[category]">',
+        // 1 notification.
+        '<div ng-if="notifications.length == 1"',
+        ' ng-class="categoryClasses[category]">',
+          '<p ng-repeat="notification in notifications"',
+          ' class="p-notification__response">',
+            '<span ng-bind-html="notification.message"></span> ',
+            '<a ng-click="dismiss(notification)">Dismiss</a>',
+          '</p>',
+        '</div>',
+        // 2 or more notifications.
+        '<div ng-if="notifications.length >= 2"',
+        ' ng-class="categoryClasses[category]"',
+        ' ng-init="shown = false"',
+        ' class="p-notification--group">',
+          '<p class="p-notification__response" ng-click="shown = !shown">',
+            '<span class="p-notification__status"',
+            ' data-count="{$ notifications.length $}"',
+            ' ng-bind="categoryTitles[category]"></span>',
+            '<i class="icon icon--open"></i>',
+          '</p>',
+          '<ul class="p-notification__list" ng-class="{\'is-open\': shown}">',
+            '<li ng-repeat="notification in notifications"',
+            ' class="p-notification__item">',
+              '<p class="p-notification__msg">',
+                '<span ng-bind-html="notification.message"></span> ',
+                '<a ng-click="dismiss(notification)">Dismiss</a>',
+              '</p>',
+              '<time class="p-notification__date" ',
+              ' ng-bind="notification.updated"></time>',
+            '</li>',
+          '</ul>',
+        '</div>',
       '</div>'
     ].join(''));
 }]);
@@ -32,12 +56,47 @@
                 $scope.notifications = NotificationsManager.getItems();
                 $scope.dismiss = angular.bind(
                     NotificationsManager, NotificationsManager.dismiss);
-                $scope.classes = {
-                    "error": "p-notification--error",
-                    "warning": "p-notification--warning",
-                    "success": "p-notification--success",
-                    "info": "p-notification"  // No suffix.
-                };
+
+                $scope.categories = [
+                    "error",
+                    "warning",
+                    "success",
+                    "info"
+                ];
+                $scope.categoryTitles = {
+                    error: "Errors",
+                    warning: "Warnings",
+                    success: "Successes",
+                    info: "Other messages"
+                };
+                $scope.categoryClasses = {
+                    error: "p-notification--error",
+                    warning: "p-notification--warning",
+                    success: "p-notification--success",
+                    info: "p-notification"  // No suffix.
+                };
+                $scope.categoryNotifications = {
+                    error: [],
+                    warning: [],
+                    success: [],
+                    info: []
+                };
+
+                $scope.$watchCollection(
+                    "notifications", function() {
+                        var cns = $scope.categoryNotifications;
+                        angular.forEach(
+                            $scope.categories, function(category) {
+                                cns[category].length = 0;
+                            }
+                        );
+                        angular.forEach(
+                            $scope.notifications, function(notification) {
+                                cns[notification.category].push(notification);
+                            }
+                        );
+                    }
+                );
             }
         };
     }]);

=== modified file 'src/maasserver/static/js/angular/directives/tests/test_notifications.js'
--- src/maasserver/static/js/angular/directives/tests/test_notifications.js	2017-02-08 15:30:56 +0000
+++ src/maasserver/static/js/angular/directives/tests/test_notifications.js	2017-02-17 08:03:16 +0000
@@ -45,6 +45,17 @@
             "updated": "Fri, 27 Jan. 2017 12:19:52"
         }
     ];
+    var exampleAdditionalNotification = {
+        "id": 4,
+        "ident": null,
+        "message": "I'm only sleeping",
+        "category": "info",
+        "user": null,
+        "users": true,
+        "admins": true,
+        "created": "Thu, 16 Feb. 2017 16:39:36",
+        "updated": "Thu, 16 Feb. 2017 16:39:36"
+    };
 
     // Load the NotificationsManager and
     // create a new scope before each test.
@@ -77,11 +88,11 @@
             theNotificationsManager._items = exampleNotifications;
             var directive = compileDirective();
             // The directive renders an outer div for each notification.
-            expect(directive.find("div").length).toBe(
+            expect(directive.find("div > div").length).toBe(
                 exampleNotifications.length, directive.html());
             // Messages are rendered in the nested tree.
             var messages = directive.find(
-                "div > p > span:nth-child(2)").map(
+                "div > div > p > span:nth-child(1)").map(
                     function() { return $(this).text(); }).get();
             expect(messages).toEqual(exampleNotifications.map(
                 function(notification) { return notification.message; }));
@@ -92,14 +103,14 @@
             theNotificationsManager._items = [notification];
             var dismiss = spyOn(theNotificationsManager, "dismiss");
             var directive = compileDirective();
-            directive.find("div > p > a").click();
+            directive.find("div > div > p > a").click();
             expect(dismiss).toHaveBeenCalledWith(notification);
         });
 
         it("adjusts class according to category", function() {
             theNotificationsManager._items = exampleNotifications;
             var directive = compileDirective();
-            var classes = directive.find("div").map(
+            var classes = directive.find("div > div").map(
                 function() { return $(this).attr("class"); }).get();
             expect(classes.length).toBe(3);
             var p_classes = [];
@@ -115,6 +126,54 @@
             ]);
         });
 
+        it("adjusts class according to number in category", function() {
+            // Get the message from a notification object.
+            var getMessage = function(ntfn) { return ntfn.message; };
+            // Is the notification object an "info" notification.
+            var isInfo = function(ntfn) { return ntfn.category === "info"; };
+            // Find message texts rendered into the DOM.
+            var findRenderedMessages = function() {
+                return directive.find(
+                    "div > div > p > span:nth-child(1)").map(
+                        function() { return $(this).text(); }).get();
+            };
+            // Find grouped message texts rendered into the DOM.
+            var findRenderedGroupedMessages = function() {
+                return directive.find(
+                    "div > div > ul > li > p > span:nth-child(1)").map(
+                        function() { return $(this).text(); }).get();
+            };
+
+            theNotificationsManager._items =
+                angular.copy(exampleNotifications);
+            var directive = compileDirective();
+
+            // At first there is only one message per category.
+            var messagesExpected1 = exampleNotifications.map(getMessage);
+            expect(findRenderedMessages()).toEqual(messagesExpected1);
+
+            // Now we add an additional "info" message.
+            theNotificationsManager._items.push(exampleAdditionalNotification);
+            $scope.$digest();
+
+            // A category title can now be found at the point where we
+            // previously found the "info" message.
+            var messagesExpected2 = angular.copy(messagesExpected1);
+            messagesExpected2.splice(
+                messagesExpected2.length - 1, 1, $scope.categoryTitles[
+                    exampleAdditionalNotification.category]);
+            expect(findRenderedMessages())
+                .toEqual(messagesExpected2);
+
+            // The "info" messages are now grouped.
+            var groupedMessagesExpected = (
+                exampleNotifications.filter(isInfo).map(getMessage)
+                    .concat([exampleAdditionalNotification.message])
+            );
+            expect(findRenderedGroupedMessages())
+                .toEqual(groupedMessagesExpected);
+        });
+
         it("sanitizes messages", function() {
             var harmfulNotification = angular.copy(exampleNotifications[0]);
             harmfulNotification.message =