Start work on the repo permissions table

static/directives/repo-view/repo-panel-settings.html

@@ -0,0 +1,14 @@
+<div class="repo-panel-settings-element">
+  <h3 class="tab-header">Repository Settings</h3>
+
+    <!-- User/Team Permissions -->
+    <div class="co-panel">
+      <div class="co-panel-heading"><i class="fa fa-key"></i> User and Robot Permissions</div>
+      <div class="panel-body">
+        <div class="repository-permissions-table" repository="repository"></div>
+      </div>
+    </div>
+
+    <!-- Access Tokens (DEPRECATED) -->
+
+</div>

static/directives/repository-permissions-table.html

@@ -0,0 +1,75 @@
+<div class="repository-permissions-table-element">
+  <div class="resource-view"
+       resources="[permissionResources.team, permissionResources.user]"
+       error-message="'Could not load repository permissions'">
+      <table class="co-table permissions">
+        <thead>
+          <tr>
+            <td style="min-width: 400px;">Account Name</td>
+            <td>Permissions</td>
+            <td style="width: 95px;"></td>
+          </tr>
+        </thead>
+
+        <!-- Team Permissions -->
+        <tr ng-repeat="(name, permission) in permissionResources.team.value">
+          <td class="team entity">
+            <span class="entity-reference" namespace="repository.namespace"
+                  entity="buildEntityForPermission(name, permission, 'team')">
+            </span>
+          </td>
+          <td class="user-permissions">
+            <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'team')" roles="roles"></span>
+          </td>
+          <td>
+            <span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deleteRole(name, 'team')"></span>
+          </td>
+        </tr>
+
+        <!-- User Permissions -->
+        <tr ng-repeat="(name, permission) in permissionResources.user.value">
+          <td class="{{ 'user entity ' + (permission.is_org_member ? '' : 'outside') }}">
+            <span class="entity-reference" namespace="repository.namespace"
+                  entity="buildEntityForPermission(name, permission, 'user')">
+            </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, name, 'user')" roles="roles"></span>
+            </div>
+          </td>
+          <td>
+            <span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deleteRole(name, 'user')"></span>
+          </td>
+        </tr>
+
+        <tr>
+          <td colspan="3"><a href="asdasdasd">Add New Permission</a></td>
+        </tr>
+
+        <tr style="background: #eee; ">
+          <td id="add-entity-permission" class="admin-search">
+            <span class="entity-search" namespace="repository.namespace"
+                  placeholder="'Add a ' + (repository.is_organization ? 'team or ' : '') + 'user...'"
+                  entity-selected="addNewPermission(entity)"
+                  current-entity="selectedEntity"
+                  auto-clear="true"></span>
+          </td>
+          <td>
+                        <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'team')" roles="roles"></span>
+
+          </td>
+          <td><button class="btn btn-success">Add Permission</button></td>
+        </tr>
+      </table>
+  </div>
+
+  <!-- Grant Permission Confirm -->
+  <div class="cor-confirm-dialog"
+       dialog-context="grantPermissionInfo"
+       dialog-action="grantPermission(info.entity, callback)"
+       dialog-title="Grant Permission"
+       dialog-action-title="Grant Permission">
+      The selected user is outside of your organization. Are you sure you want to grant the user access to this repository?
+  </div>
+</div>

static/js/directives/repo-view/repo-panel-settings.js

@@ -0,0 +1,19 @@
+/**
+ * An element which displays the settings panel for a repository view.
+ */
+angular.module('quay').directive('repoPanelSettings', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repo-view/repo-panel-settings.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository'
+    },
+    controller: function($scope, $element, ApiService) {
+    }
+  };
+  return directiveDefinitionObject;
+});
+

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

@@ -0,0 +1,136 @@
+/**
+ * An element which displays a table of permissions on a repository and allows them to be
+ * edited.
+ */
+angular.module('quay').directive('repositoryPermissionsTable', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repository-permissions-table.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repository': '=repository'
+    },
+    controller: function($scope, $element, ApiService, Restangular, UtilService) {
+      $scope.roles = [
+          { 'id': 'read', 'title': 'Read', 'kind': 'success' },
+          { 'id': 'write', 'title': 'Write', 'kind': 'success' },
+          { 'id': 'admin', 'title': 'Admin', 'kind': 'primary' }
+      ];
+
+      $scope.permissionResources = {'team': {}, 'user': {}};
+      $scope.permissionCache = {};
+      $scope.permissions = {};
+
+      var loadAllPermissions = function() {
+        if (!$scope.repository) { return; }
+        fetchPermissions('user');
+        fetchPermissions('team');
+      };
+
+      var fetchPermissions = function(kind) {
+        if ($scope.permissionResources[kind]['loading'] != null) {
+          return;
+        }
+
+        var params = {
+          'repository': $scope.repository.namespace + '/' + $scope.repository.name
+        };
+
+        var Kind = kind[0].toUpperCase() + kind.substring(1);
+        var r = ApiService['listRepo' + Kind + 'PermissionsAsResource'](params).get(function(resp) {
+          $scope.permissions[kind] = resp.permissions;
+          return resp.permissions;
+        });
+
+        $scope.permissionResources[kind] = r;
+      };
+
+      $scope.$watch('repository', loadAllPermissions);
+      loadAllPermissions();
+
+      var getPermissionEndpoint = function(entityName, kind) {
+        var namespace = $scope.repository.namespace;
+        var name = $scope.repository.name;
+        var url = UtilService.getRestUrl('repository', namespace, name, 'permissions', kind, entityName);
+        return Restangular.one(url);
+      };
+
+      $scope.buildEntityForPermission = function(name, permission, kind) {
+        var key = name + ':' + kind;
+        if ($scope.permissionCache[key]) {
+          return $scope.permissionCache[key];
+        }
+
+        return $scope.permissionCache[key] = {
+          'kind': kind,
+          'name': name,
+          'is_robot': permission.is_robot,
+          'is_org_member': permission.is_org_member
+        };
+      };
+
+      $scope.grantPermission = function(entity, callback) {
+        $scope.addRole(entity.name, 'read', entity.kind, callback);
+      };
+
+      $scope.addNewPermission = function(entity) {
+        // Don't allow duplicates.
+        if (!entity || !entity.kind || $scope.permissions[entity.kind][entity.name]) { return; }
+
+        if (entity.is_org_member === false) {
+          $scope.grantPermissionInfo = {
+            'entity': entity
+          };
+          return;
+        }
+
+        $scope.addRole(entity.name, 'read', entity.kind);
+      };
+
+      $scope.deleteRole = function(entityName, kind) {
+        var errorHandler = ApiService.errorDisplay('Cannot change permission', function(resp) {
+          if (resp.status == 409) {
+            return 'Cannot change permission as you do not have the authority';
+          }
+        });
+
+        var endpoint = getPermissionEndpoint(entityName, kind);
+        endpoint.customDELETE().then(function() {
+          delete $scope.permissions[kind][entityName];
+        }, errorHandler);
+      };
+
+      $scope.addRole = function(entityName, role, kind, opt_callback) {
+        var permission = {
+          'role': role,
+        };
+
+        var errorHandler = ApiService.errorDisplay('Cannot change permission', function() {
+          opt_callback && opt_callback(false);
+        });
+
+        var endpoint = getPermissionEndpoint(entityName, kind);
+        endpoint.customPUT(permission).then(function(result) {
+          $scope.permissions[kind][entityName] = result;
+          opt_callback && opt_callback(true)
+        }, errorHandler);
+      };
+
+      $scope.setRole = function(role, entityName, kind) {
+        var errorDisplay = ApiService.errorDisplay(function(resp) {
+          $scope.permissions[kind][entityName] = {'role': currentRole};
+        });
+
+        var permission = $scope.permissions[kind][entityName];
+        var currentRole = permission.role;
+        permission.role = role;
+
+        var endpoint = getPermissionEndpoint(entityName, kind);
+        endpoint.customPUT(permission).then(function() {}, errorDisplay);
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/pages/repo-admin.js

@@ -1,6 +1,6 @@
 (function() {
   /**
-   * Repository admin/settings page.
+   * DEPRECATED: Repository admin/settings page.
    */
   angular.module('quayPages').config(['pages', function(pages) {
     pages.create('repo-admin', 'repo-admin.html', RepoAdminCtrl);

static/partials/repo-view.html

@@ -80,9 +80,8 @@
 
         <!-- Settings -->
         <div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin">
-          settings
+          <div class="repo-panel-settings" repository="viewScope.repository"></div>
         </div>
-
       </div> <!-- /cor-tab-content -->
     </div>
   </div>