Merge pull request #1839 from coreos-inc/better-notifications

Better notifications UI and features

static/js/directives/ui/create-external-notification.js

@@ -1,16 +1,15 @@
 /**
- * An element which displays a dialog to register a new external notification on a repository.
+ * An element which displays a form to register a new external notification on a repository.
  */
-angular.module('quay').directive('createExternalNotificationDialog', function () {
+angular.module('quay').directive('createExternalNotification', function () {
   var directiveDefinitionObject = {
     priority: 0,
-    templateUrl: '/static/directives/create-external-notification-dialog.html',
+    templateUrl: '/static/directives/create-external-notification.html',
     replace: false,
     transclude: false,
     restrict: 'C',
     scope: {
       'repository': '=repository',
-      'counter': '=counter',
       'notificationCreated': '&notificationCreated',
       'defaultData': '=defaultData'
     },
@@ -27,7 +26,12 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
       $scope.methods = ExternalNotificationData.getSupportedMethods();
 
       $scope.getPattern = function(field) {
-        return new RegExp(field.regex);
+        if (field._cached_regex) {
+          return field._cached_regex;
+        }
+
+        field._cached_regex = new RegExp(field.pattern);
+        return field._cached_regex;
       };
 
       $scope.setEvent = function(event) {
@@ -99,14 +103,6 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
         ApiService.createRepoNotification(data, params).then(function(resp) {
           $scope.status = '';
           $scope.notificationCreated({'notification': resp});
-
-          // Used by repository-events-summary.
-          if (!$scope.repository._notificationCounter) {
-            $scope.repository._notificationCounter = 0;
-          }
-
-          $scope.repository._notificationCounter++;
-          $('#createNotificationModal').modal('hide');
         });
       };
 
@@ -123,6 +119,7 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
         }
 
         $scope.unauthorizedEmail = true;
+        $('#authorizeEmailModal').modal({});
       };
 
       $scope.sendAuthEmail = function() {
@@ -146,6 +143,11 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
         }, 1000);
       };
 
+      $scope.cancelEmailAuth = function() {
+        $scope.status = '';
+        $('#authorizeEmailModal').modal('hide');
+      };
+
       $scope.getHelpUrl = function(field, config) {
         var helpUrl = field['help_url'];
         if (!helpUrl) {
@@ -155,21 +157,9 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
         return StringBuilderService.buildUrl(helpUrl, config);
       };
 
-      $scope.$watch('counter', function(counter) {
-        if (counter) {
-          $scope.clearCounter++;
-          $scope.status = '';
-          $scope.currentEvent = null;
-          $scope.currentMethod = null;
-          $scope.unauthorizedEmail = false;
-
-          $timeout(function() {
-            if ($scope.defaultData && $scope.defaultData['currentEvent']) {
-              $scope.setEvent($scope.defaultData['currentEvent']);
-            }
-          }, 100);
-
-          $('#createNotificationModal').modal({});
+      $scope.$watch('defaultData', function(counter) {
+        if ($scope.defaultData && $scope.defaultData['currentEvent']) {
+          $scope.setEvent($scope.defaultData['currentEvent']);
         }
       });
     }

static/js/directives/ui/regex-editor.js

@@ -0,0 +1,39 @@
+/**
+ * An element which displays an edit box for regular expressions.
+ */
+angular.module('quay').directive('regexEditor', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/regex-editor.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'placeholder': '@placeholder',
+      'optional': '=optional',
+      'binding': '=binding'
+    },
+    controller: function($scope, $element) {
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+angular.module('quay').directive('requireValidRegex', function() {
+  return {
+    require: 'ngModel',
+    link: function(scope, element, attr, ctrl) {
+      function validator(value) {
+        try {
+          new RegExp(value)
+          ctrl.$setValidity('regex', true);
+        } catch (e) {
+          ctrl.$setValidity('regex', false);
+        }
+        return value;
+      }
+
+      ctrl.$parsers.push(validator);
+    }
+  };
+});

static/js/directives/ui/repository-events-table.js

@@ -53,14 +53,6 @@ angular.module('quay').directive('repositoryEventsTable', function () {
 
       loadNotifications();
 
-      $scope.handleNotificationCreated = function(notification) {
-        $scope.notifications.push(notification);
-      };
-
-      $scope.askCreateNotification = function() {
-        $scope.showNewNotificationCounter++;
-      };
-
       $scope.findEnumValue = function(values, index) {
         var found = null;
         Object.keys(values).forEach(function(key) {