Abstract out the display of entities (users, robot accounts, and teams) into a nice directive to ensure that we always display the correctly formatted entity information (icon and name)

endpoints/api.py

@@ -427,6 +427,7 @@ def get_organization_members(orgname):
     for member in members:
       if not member.user.username in members_dict:
         members_dict[member.user.username] = {'username': member.user.username,
+                                              'is_robot': member.user.robot,
                                               'teams': []}
     
       members_dict[member.user.username]['teams'].append(member.team.name)

static/css/quay.css

@@ -21,6 +21,25 @@ html, body {
   border-bottom: 1px dashed #aaa;
 }
 
+.entity-reference .prefix {
+  color: #aaa;
+}
+
+.entity-reference-element i.fa-user {
+  margin-left: 2px;
+  margin-right: 7px;
+}
+
+.entity-reference-element i.fa-wrench {
+  margin-left: 1px;
+  margin-right: 5px;
+}
+
+.entity-reference-element i.fa-group {
+  margin-right: 4px;
+}
+
+
 .docker-auth-dialog .token-dialog-body .well {
   margin-bottom: 0px;
 }
@@ -1175,20 +1194,6 @@ p.editable:hover i {
   padding-top: 20px;
 }
 
-.repo-admin .user i.fa-user {
-  margin-left: 2px;
-  margin-right: 7px;
-}
-
-.repo-admin .user i.fa-wrench {
-  margin-left: 1px;
-  margin-right: 5px;
-}
-
-.repo-admin .team i.fa-group {
-  margin-right: 4px;
-}
-
 .repo-admin .entity {
   font-size: 1.2em;
   min-width: 300px;

static/directives/entity-reference.html

@@ -0,0 +1,7 @@
+<span class="entity-reference-element">
+  <i class="fa fa-user" ng-show="!team && !isrobot" title="User" bs-tooltip="tooltip.title" data-container="body"></i>
+  <i class="fa fa-wrench" ng-show="!team && isrobot" title="Robot Account" bs-tooltip="tooltip.title" data-container="body"></i> 
+  <i class="fa fa-group" ng-show="team" title="Team" bs-tooltip="tooltip.title" data-container="body"></i> 
+  <span ng-show="team"><a href="/organization/{{ orgname }}/teams/{{ team }}">{{team}}</a></span>
+  <span ng-show="isrobot" class="prefix">{{getPrefix(name)}}</span><span>{{getShortenedName(name)}}</span>
+</span>

static/js/app.js

@@ -460,6 +460,37 @@ quayApp = angular.module('quay', ['ngRoute', 'restangular', 'angularMoment', 'an
   });
 
 
+quayApp.directive('entityReference', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/entity-reference.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'name': '=name',
+      'orgname': '=orgname',
+      'team': '=team',
+      'isrobot': '=isrobot'
+    },
+    controller: function($scope, $element) {      
+      $scope.getPrefix = function(name) {
+        if (!name) { return ''; }
+        var plus = name.indexOf('+');
+        return name.substr(0, plus + 1);
+      };
+
+      $scope.getShortenedName = function(name) {
+        if (!name) { return ''; }
+        var plus = name.indexOf('+');
+        return name.substr(plus + 1);
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('markdownView', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -427,16 +427,6 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
 
   $scope.permissions = {'team': [], 'user': []};
 
-  $scope.getPrefix = function(name) {
-    var plus = name.indexOf('+');
-    return name.substr(0, plus + 1);
-  };
-
-  $scope.getShortenedName = function(name) {
-    var plus = name.indexOf('+');
-    return name.substr(plus + 1);
-  };
-
   $scope.grantRole = function() {
     $('#confirmaddoutsideModal').modal('hide');
     var entity = $scope.currentAddEntity;

static/partials/org-admin.html

@@ -113,14 +113,13 @@
 
             <table class="table table-striped">
               <thead>
-                <th>User</th>
+                <th>User/Robot Account</th>
                 <th>Teams</th>
               </thead>
               
               <tr ng-repeat="memberInfo in (membersFound | filter:search | limitTo:50)">
                 <td>
-                  <i class="fa fa-user"></i>
-                  {{ memberInfo.username }}
+                  <span class="entity-reference" name="memberInfo.username" isrobot="memberInfo.is_robot"></span>
                 </td>
                 <td>
                   <span class="team-link" ng-repeat="team in memberInfo.teams">

static/partials/repo-admin.html

@@ -52,8 +52,7 @@
                 <!-- Team Permissions -->
                 <tr ng-repeat="(name, permission) in permissions['team']">
                   <td class="team entity">
-                    <i class="fa fa-group" title="Team" bs-tooltip="tooltip.title"></i> 
-                    <span><a href="/organization/{{ repo.namespace }}/teams/{{ name }}">{{name}}</a></span>
+                    <span class="entity-reference" orgname="repo.namespace" team="name"></span>
                   </td>
                   <td class="user-permissions">
                     <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'team')" roles="roles"></span>
@@ -69,9 +68,7 @@
                 <!-- User Permissions -->
                 <tr ng-repeat="(name, permission) in permissions['user']">
                   <td class="{{ 'user entity ' + (permission.is_org_member ? '' : 'outside') }}">
-                    <i class="fa fa-user" ng-show="!permission.is_robot" title="User" bs-tooltip="tooltip.title"></i> 
-                    <i class="fa fa-wrench" ng-show="permission.is_robot" title="Robot Account" bs-tooltip="tooltip.title"></i> 
-                    <span class="prefix">{{getPrefix(name)}}</span><span>{{getShortenedName(name)}}</span>
+                    <span class="entity-reference" name="name" isrobot="permission.is_robot"></span>
                     <i class="fa fa-exclamation-triangle" ng-show="permission.is_org_member === false" data-trigger="hover" bs-popover="{'content': 'This user is not a member of the organization'}"></i>
                   </td>
                   <td class="user-permissions">

static/partials/team-view.html

@@ -20,9 +20,7 @@
       <table class="permissions">        
         <tr ng-repeat="(name, member) in members">
           <td class="user entity">
-            <i class="fa fa-user" ng-show="!member.is_robot"></i> 
-            <i class="fa fa-wrench" ng-show="member.is_robot"></i> 
-            <span>{{ member.username }}</span>
+            <span class="entity-reference" name="member.username" isrobot="member.is_robot"></span>
           </td>
           <td>
             <span class="delete-ui" tabindex="0" title="Remove User" ng-show="canEditMembers">