Add ability to add new users to the permissions list and remove existing users

data/model.py

@@ -268,7 +268,7 @@ def set_user_repo_permission(username, namespace_name, repository_name,
     perm.save()
     return perm
   except RepositoryPermission.DoesNotExist:
-    new_perm = RepositoryPermission.create(repository=repo, user=user_obj,
+    new_perm = RepositoryPermission.create(repository=repo, user=user,
                                            role=new_role)
     return new_perm
 

static/css/quay.css

@@ -23,6 +23,15 @@
   text-overflow: ellipsis;
 }
 
+
+.user-mini-listing {
+  margin: 2px;
+}
+
+.user-mini-listing i {
+  margin-right: 8px;
+}
+
 .editable i {
   opacity: 0.2;
   font-size: 85%;
@@ -230,6 +239,38 @@ p.editable:hover i {
   padding-right: 6px;
 }
 
+.delete-ui {
+  outline: none;
+}
+
+.delete-ui i {
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.delete-ui .delete-ui-button {
+  display: inline-block;
+  vertical-align: middle;
+  color: white;
+  width: 0px;
+  overflow: hidden;
+
+  cursor: pointer;
+
+  transition: width 500ms ease-in-out;
+}
+
+.delete-ui .delete-ui-button button {
+  padding: 4px;
+}
+
+.delete-ui:focus i {
+  visibility: hidden;
+}
+
+.delete-ui:focus .delete-ui-button {
+    width: 54px;
+}
 
 /* Overrides for typeahead to work with bootstrap 3. */
 

static/js/controllers.js

@@ -126,23 +126,95 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
   var namespace = $routeParams.namespace;
   var name = $routeParams.name;
 
+    $('#userSearch').typeahead({
+      name: 'users',
+      remote: {
+	  url: '/api/users/%QUERY',
+	  filter: function(data) {
+	      var datums = [];
+	      for (var i = 0; i < data.users.length; ++i) {
+		  var user = data.users[i];
+		  datums.push({
+		      'value': user,
+		      'tokens': [user],
+		      'username': user
+		  });
+	      }
+	      return datums;
+	  }
+      },
+      template: function (datum) {
+	  template = '<div class="user-mini-listing">';
+	  template += '<i class="icon-user icon-large"></i>'
+	  template += '<span class="name">' + datum.username + '</span>'
+	  template += '</div>'
+	  return template;
+      },
+
+  });
+
+  $('#userSearch').on('typeahead:selected', function(e, datum) {
+      $('#userSearch').typeahead('setQuery', '');
+      $scope.addNewPermission(datum.username);
+  });
+
+  $scope.addNewPermission = function(username) {
+    // Don't allow duplicates.
+    if ($scope.permissions[username]) { return; }
+
+    // Need the $scope.apply for both the permission stuff to change and for
+    // the XHR call to be made.
+    $scope.$apply(function() {
+	$scope.addRole(username, 'read')
+    });
+  };
+
+  $scope.deleteRole = function(username) {
+    var permissionDelete = Restangular.one('repository/' + namespace + '/' + name + '/permissions/' + username);
+    permissionDelete.customDELETE().then(function() {
+	delete $scope.permissions[username];
+    }, function(result) {
+	if (result.status == 409) {
+	    $('#onlyadminModal').modal({});
+	} else {
+	    $('#cannotchangeModal').modal({});
+	}
+    });
+  };
+
+  $scope.addRole = function(username, role) {
+    var permission = {
+	'role': role
+    };
+
+    var permissionPost = Restangular.one('repository/' + namespace + '/' + name + '/permissions/' + username);
+    permissionPost.customPOST(permission).then(function() {
+	$scope.permissions[username] = permission;
+	$scope.permissions = $scope.permissions;
+    }, function(result) {
+	$('#cannotchangeModal').modal({});
+    });
+  };
+
   $scope.setRole = function(username, role) {
     var permission = $scope.permissions[username];
+    var currentRole = permission.role;
     permission.role = role;
-
+   
     var permissionPut = Restangular.one('repository/' + namespace + '/' + name + '/permissions/' + username);
     permissionPut.customPUT(permission).then(function() {}, function(result) {
 	if (result.status == 409) {
-	    $('#onlyAdminModal').modal();
+	    permission.role = currentRole;
+	    $('#onlyadminModal').modal({});
 	} else {
-	    $('#cannotchangeModal').modal();
+	    $('#cannotchangeModal').modal({});
 	}
     });
   };
 
   var permissionsFetch = Restangular.one('repository/' + namespace + '/' + name + '/permissions');
   permissionsFetch.get().then(function(resp) {
-    $rootScope.title = 'Permissions - ' + namespace + '/' + name;
+    $rootScope.title = 'Settings - ' + namespace + '/' + name;
     $scope.repo = {
 	'namespace': namespace,
 	'name': name

static/partials/repo-admin.html

@@ -19,6 +19,7 @@
 	    <tr>
 	      <td>User</td>
 	      <td>Permissions</td>
+	      <td></td>
 	    </tr>
 	  </thead>
     
@@ -34,6 +35,18 @@
                 <button type="button" class="btn btn-default" ng-click="setRole(username, 'admin')" ng-class="{read: '', write: '', admin: 'active'}[permission.role]">Admin</button>
 	      </div>
 	    </td>
+	    <td>
+	      <span class="delete-ui" tabindex="0" title="Delete Permission">
+		<span class="delete-ui-button" ng-click="deleteRole(username)"><button class="btn btn-danger">Delete</button></span>
+		<i class="icon-remove"></i>
+	      </span>
+	    </td>
+	  </tr>
+
+	  <tr>
+	    <td colspan="2">
+	      <input id="userSearch" class="form-control" placeholder="Add new user...">
+	    </td>
 	  </tr>
 	</table>
     </div>