From d8048b09d2387c920b14ada9625f743c1aa41900 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Thu, 26 Feb 2015 12:35:28 -0500
Subject: [PATCH] Make the hip chat setup field show more help information if
 the user enters a room name instead of a number

---
 .../create-external-notification-dialog.html  | 19 +++++++++++++++----
 static/js/directives/ng-name.js               | 11 +++++++++++
 .../ui/create-external-notification-dialog.js | 17 +++++++++++++++++
 .../js/services/external-notification-data.js |  7 +++++--
 4 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 static/js/directives/ng-name.js

diff --git a/static/directives/create-external-notification-dialog.html b/static/directives/create-external-notification-dialog.html
index 03479015b..dda01936f 100644
--- a/static/directives/create-external-notification-dialog.html
+++ b/static/directives/create-external-notification-dialog.html
@@ -81,9 +81,19 @@
                   </span>
                   <input type="url" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="url" required>
                   <input type="text" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="string" required>
-                  <input type="text" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="regex" required
-                         ng-pattern="getPattern(field)"
-                         placeholder="{{ field.placeholder }}">
+                  <div ng-switch-when="regex">
+                    <input type="text" class="form-control" ng-model="currentConfig[field.name]"
+                           ng-pattern="getPattern(field)"
+                           placeholder="{{ field.placeholder }}"
+                           ng-name="field.name"
+                           id="{{ field.name }}"
+                           required>
+
+                    <div class="alert alert-warning" style="margin-top: 10px; margin-bottom: 10px"
+                          ng-if="field.regex_fail_message && hasRegexMismatch(createForm.$error, field.name)">
+                      <span ng-bind-html="field.regex_fail_message"></span>
+                    </div>
+                  </div>
                   <div class="entity-search" namespace="repository.namespace"
                        placeholder="''"
                        current-entity="currentConfig[field.name]"
@@ -91,7 +101,8 @@
                        allowed-entities="['user', 'team', 'org']"
                        ng-switch-when="entity"></div>
 
-                  <div ng-if="getHelpUrl(field, currentConfig)" style="margin-top: 10px">
+                  <div ng-if="getHelpUrl(field, currentConfig)"
+                       style="margin-top: 10px;  margin-bottom: 10px">
                     See: <a href="{{ getHelpUrl(field, currentConfig) }}" target="_blank">{{ getHelpUrl(field, currentConfig) }}</a>
                   </div>
                 </div>
diff --git a/static/js/directives/ng-name.js b/static/js/directives/ng-name.js
new file mode 100644
index 000000000..9b69a5fbf
--- /dev/null
+++ b/static/js/directives/ng-name.js
@@ -0,0 +1,11 @@
+/**
+ * Adds an ng-name attribute which sets the name of a form field. Using the normal name field
+ * in Angular 1.3 works, but we're still on 1.2.
+ */
+angular.module('quay').directive('ngName', function () {
+  return function (scope, element, attr) {
+    scope.$watch(attr.ngName, function (name) {
+      element.attr('name', name);
+    });
+  };
+});
\ No newline at end of file
diff --git a/static/js/directives/ui/create-external-notification-dialog.js b/static/js/directives/ui/create-external-notification-dialog.js
index 7d50eb6c5..1e8613e8a 100644
--- a/static/js/directives/ui/create-external-notification-dialog.js
+++ b/static/js/directives/ui/create-external-notification-dialog.js
@@ -38,6 +38,23 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
         $scope.unauthorizedEmail = false;
       };
 
+      $scope.hasRegexMismatch = function(err, fieldName) {
+        if (!err.pattern) {
+          return;
+        }
+
+        for (var i = 0; i < err.pattern.length; ++i) {
+          var current = err.pattern[i];
+          var value = current.$viewValue;
+          var elem = $element.find('#' + fieldName);
+          if (value == elem[0].value) {
+            return true;
+          }
+        }
+
+        return false;
+      };
+
       $scope.createNotification = function() {
         if (!$scope.currentConfig.email) {
           $scope.performCreateNotification();
diff --git a/static/js/services/external-notification-data.js b/static/js/services/external-notification-data.js
index 10a73dea9..92517732c 100644
--- a/static/js/services/external-notification-data.js
+++ b/static/js/services/external-notification-data.js
@@ -101,8 +101,11 @@ function(Config, Features) {
       'fields': [
         {
           'name': 'room_id',
-          'type': 'string',
-          'title': 'Room ID #'
+          'type': 'regex',
+          'title': 'Room ID #',
+          'regex': '^[0-9]+$',
+          'help_url': 'https://hipchat.com/admin/rooms',
+          'regex_fail_message': 'We require the HipChat room <b>number</b>, not name.'
         },
         {
           'name': 'notification_token',