Nicer handling of robots: sort the robots by name and add a filtering box

static/css/directives/ui/robots-manager.css

@@ -78,3 +78,9 @@
 .robots-manager-element .member-perm-summary {
   margin-right: 14px;
 }
+
+.robots-manager-element .co-filter-box {
+  float: right;
+  min-width: 175px;
+  margin-bottom: 10px;
+}

static/directives/robots-manager.html

@@ -19,6 +19,10 @@
       be shared, such as deployment systems.
     </div>
 
+    <span class="co-filter-box" ng-show="robots.length">
+       <input class="form-control" type="text" ng-model="robotFilter" placeholder="Filter Robot Accounts...">
+    </span>
+
     <div class="empty" ng-if="!robots.length">
       <div class="empty-primary-msg">No robot accounts defined.</div>
       <div class="empty-secondary-msg">
@@ -26,7 +30,14 @@
       </div>
     </div>
 
-    <table class="co-table" ng-if="robots.length">
+    <div class="empty" ng-if="robots.length && !(robots | filter:robotFilter).length">
+      <div class="empty-primary-msg">No robot accounts found matching filter.</div>
+      <div class="empty-secondary-msg">
+        Please change your filter to display robot accounts.
+      </div>
+    </div>
+
+    <table class="co-table" ng-if="(robots | filter:robotFilter).length">
       <thead>
         <td class="caret-col" ng-if="(user || organization.is_admin) && Config.isNewLayout()"></td>
         <td>Robot Account Name</td>
@@ -35,7 +46,7 @@
         <td class="options-col"></td>
       </thead>
 
-      <tbody ng-repeat="robotInfo in robots">
+      <tbody ng-repeat="robotInfo in robots | filter:robotFilter | orderBy:getShortenedRobotName">
         <tr ng-class="robotInfo.showing_permissions ? 'open' : 'closed'">
           <td class="caret-col" ng-if="(user || organization.is_admin) && Config.isNewLayout()">
             <span ng-if="robotInfo.repositories.length > 0" ng-click="showPermissions(robotInfo)">

static/js/directives/ui/robots-manager.js

@@ -73,6 +73,10 @@ angular.module('quay').directive('robotsManager', function () {
         return -1;
       };
 
+      $scope.getShortenedRobotName = function(info) {
+        return $scope.getShortenedName(info.name);
+      };
+
       $scope.getShortenedName = function(name) {
         var plus = name.indexOf('+');
         return name.substr(plus + 1);