Redo the permissions table to have different sections for users and robot accounts

endpoints/api/permission.py

@@ -17,6 +17,7 @@ def role_view(repo_perm_obj):
   }
 
 def wrap_role_view_user(role_json, user):
+  role_json['name'] = user.username
   role_json['is_robot'] = user.robot
   if not user.robot:
     role_json['avatar'] =  avatar.get_data_for_user(user)
@@ -29,6 +30,7 @@ def wrap_role_view_org(role_json, user, org_members):
 
 
 def wrap_role_view_team(role_json, team):
+  role_json['name'] = team.name
   role_json['avatar'] = avatar.get_data_for_team(team)
   return role_json
 

static/directives/repository-permissions-table.html

@@ -11,14 +11,26 @@
           </tr>
         </thead>
 
+        <tr ng-show="!hasPermissions(permissionResources.team, permissionResources.user)">
+          <td colspan="3">
+             <div class="empty">
+               <div class="empty-primary-msg">No permissions found.</div>
+               <div class="empty-secondary-msg">
+                 To add a permission, enter the information below and click "Add Permission".
+               </div>
+             </div>
+          </td>
+        </tr>
+
         <!-- Team Permissions -->
-        <tr class="co-table-header-row" ng-if="permissionResources.team.value">
+        <tr class="co-table-header-row"
+            ng-if="(permissionResources.team.value | objectFilter:allEntries).length">
           <td colspan="3"><i class="fa fa-group"></i> Team Permissions</td>
         </tr>
         <tr class="indented-row" ng-repeat="(name, permission) in permissionResources.team.value">
           <td class="team entity">
             <span class="entity-reference" namespace="repository.namespace"
-                  entity="buildEntityForPermission(name, permission, 'team')"
+                  entity="buildEntityForPermission(permission, 'team')"
                   avatar-size="24">
             </span>
           </td>
@@ -36,13 +48,15 @@
         </tr>
 
         <!-- User Permissions -->
-        <tr class="co-table-header-row" ng-if="permissionResources.user.value">
+        <tr class="co-table-header-row"
-          <td colspan="3"><i class="fa fa-user"></i>  User and Robot Account Permissions</td>
+            ng-if="(permissionResources.user.value | objectFilter:onlyUser).length">
+          <td colspan="3"><i class="fa fa-user"></i>  User Permissions</td>
         </tr>
-        <tr class="indented-row" ng-repeat="(name, permission) in permissionResources.user.value">
+        <tr class="indented-row"
+            ng-repeat="permission in (permissionResources.user.value | objectFilter:onlyUser)">
           <td class="user-permission-entity">
             <span class="entity-reference" namespace="repository.namespace"
-                  entity="buildEntityForPermission(name, permission, 'user')"
+                  entity="buildEntityForPermission(permission, 'user')"
                   avatar-size="24">
             </span>
             <i class="fa fa-exclamation-triangle outside-org"
@@ -51,12 +65,41 @@
           </td>
           <td class="user-permissions">
             <div class="btn-group btn-group-sm">
-              <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'user')" roles="roles"></span>
+              <span class="role-group" current-role="permission.role"
+                    role-changed="setRole(role, permission.name, 'user')" roles="roles"></span>
             </div>
           </td>
           <td class="options-col">
             <span class="cor-options-menu">
-              <span class="cor-option" option-click="deleteRole(name, 'user')">
+              <span class="cor-option" option-click="deleteRole(permission.name, 'user')">
+                <i class="fa fa-times"></i> Delete Permission
+              </span>
+            </span>
+          </td>
+        </tr>
+
+        <!-- Robot Permissions -->
+        <tr class="co-table-header-row"
+            ng-if="(permissionResources.user.value | objectFilter:onlyRobot).length">
+          <td colspan="3"><i class="fa fa-wrench"></i> Robot Account Permissions</td>
+        </tr>
+        <tr class="indented-row"
+            ng-repeat="permission in (permissionResources.user.value | objectFilter:onlyRobot)">
+          <td class="user-permission-entity">
+            <span class="entity-reference" namespace="repository.namespace"
+                  entity="buildEntityForPermission(permission, 'user')"
+                  avatar-size="24">
+            </span>
+          </td>
+          <td class="user-permissions">
+            <div class="btn-group btn-group-sm">
+              <span class="role-group" current-role="permission.role"
+                    role-changed="setRole(role, permission.name, 'user')" roles="roles"></span>
+            </div>
+          </td>
+          <td class="options-col">
+            <span class="cor-options-menu">
+              <span class="cor-option" option-click="deleteRole(permission.name, 'user')">
                 <i class="fa fa-times"></i> Delete Permission
               </span>
             </span>

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

@@ -2,6 +2,21 @@
  * An element which displays a table of permissions on a repository and allows them to be
  * edited.
  */
+angular.module('quay').filter('objectFilter', function() {
+  return function(obj, filterFn) {
+    if (!obj) { return []; }
+
+    var result = [];
+    angular.forEach(obj, function(value) {
+      if (filterFn(value)) {
+        result.push(value);
+      }
+    });
+
+    return result;
+  };
+});
+
 angular.module('quay').directive('repositoryPermissionsTable', function () {
   var directiveDefinitionObject = {
     priority: 0,
@@ -59,22 +74,50 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
         return Restangular.one(url);
       };
 
-      $scope.buildEntityForPermission = function(name, permission, kind) {
+      $scope.buildEntityForPermission = function(permission, kind) {
-        var key = name + ':' + kind;
+        var key = permission.name + ':' + kind;
         if ($scope.permissionCache[key]) {
           return $scope.permissionCache[key];
         }
 
         return $scope.permissionCache[key] = {
           'kind': kind,
-          'name': name,
+          'name': permission.name,
           'is_robot': permission.is_robot,
           'is_org_member': permission.is_org_member,
           'avatar': permission.avatar
         };
       };
 
-     $scope.addPermission = function() {
+      $scope.hasPermissions = function(teams, users) {
+        if (teams && teams.value) {
+          if (Object.keys(teams.value).length > 0) {
+            return true;
+          }
+        }
+
+        if (users && users.value) {
+          if (Object.keys(users.value).length > 0) {
+            return true;
+          }
+        }
+
+        return false;
+      };
+
+      $scope.allEntries = function() {
+        return true;
+      };
+
+      $scope.onlyRobot = function(permission) {
+        return permission.is_robot == true;
+      };
+
+      $scope.onlyUser = function(permission) {
+        return !permission.is_robot;
+      };
+
+      $scope.addPermission = function() {
         $scope.addPermissionInfo['working'] = true;
         $scope.addNewPermission($scope.addPermissionInfo.entity, $scope.addPermissionInfo.role)
       };