Add ability to change the members of a team

endpoints/api.py

@@ -288,13 +288,13 @@ def get_organization_private_allowed(orgname):
   })
 
 
+def member_view(m):
+  return {
+    'username': m.username
+  }
+
 @app.route('/api/organization/<orgname>/team/<teamname>/members', methods=['GET'])
 def get_organization_team_members(orgname, teamname):
-  def member_view(m):
-    return {
-      'username': m.username
-    }
-
   if current_user.is_anonymous():
     abort(404)
 
@@ -310,7 +310,7 @@ def get_organization_team_members(orgname, teamname):
     
   members = model.get_organization_team_members(team.id)
   return jsonify({
-    'members': [member_view(m) for m in members]
+    'members': { m.username : member_view(m) for m in members }
   })
 
 
@@ -337,9 +337,7 @@ def update_organization_team_member(orgname, teamname, membername):
   # Add the user to the team.
   model.add_user_to_team(user, team)
 
-  return jsonify({
-    'success': True
-  })
+  return jsonify(member_view(user))
 
 
 @app.route('/api/organization/<orgname>/team/<teamname>/members/<membername>', methods=['DELETE'])

static/css/quay.css

@@ -1153,7 +1153,7 @@ p.editable:hover i {
 }
 
 .delete-ui:focus .delete-ui-button {
-    width: 54px;
+    width: 60px;
 }
 
 .repo-admin .repo-delete {
@@ -1369,14 +1369,27 @@ p.editable:hover i {
 
 .team-view .entity {
   font-size: 1.2em;
-  min-width: 300px;
+  min-width: 510px;
 }
 
 .team-view .entity i {
   margin-right: 6px;
 }
 
+.team-view .entity-search {
+  margin-top: 10px;
+  display: inline-block;
+}
 
+.team-view .delete-ui {
+  display: inline-block;
+  width: 78px;
+}
+
+.team-view .delete-ui i {
+  margin-top: 8px;
+  float: right;
+}
 
 /* Overrides for typeahead to work with bootstrap 3. */
 

static/js/controllers.js

@@ -14,6 +14,17 @@ $.fn.clipboardCopy = function() {
   });
 };
 
+function getRestUrl(args) {
+  var url = '';
+  for (var i = 0; i < arguments.length; ++i) {
+    if (i > 0) {
+       url += '/';
+    }
+    url += encodeURI(arguments[i])
+  }
+  return url;
+}
+
 function getFirstTextLine(commentString) {
   if (!commentString) { return; }
       
@@ -573,7 +584,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
   };
 
   $scope.deleteRole = function(entityName, kind) {
-    var permissionDelete = Restangular.one('repository/' + namespace + '/' + name + '/permissions/' + kind + '/' + entityName);
+    var permissionDelete = Restangular.one(getRestUrl('repository', namespace, name, 'permissions', kind, entityName));
     permissionDelete.customDELETE().then(function() {
       delete $scope.permissions[kind][entityName];
     }, function(result) {
@@ -591,7 +602,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
       'outside_org': !!outside_org
     };
 
-    var permissionPost = Restangular.one('repository/' + namespace + '/' + name + '/permissions/' + kind + '/' + entityName);
+    var permissionPost = Restangular.one(getRestUrl('repository', namespace, name, 'permissions', kind, entityName));
     permissionPost.customPOST(permission).then(function() {
       $scope.permissions[kind][entityName] = permission;
     }, function(result) {
@@ -604,7 +615,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
     var currentRole = permission.role;
     permission.role = role;
    
-    var permissionPut = Restangular.one('repository/' + namespace + '/' + name + '/permissions/' + kind + '/' + entityName);
+    var permissionPut = Restangular.one(getRestUrl('repository', namespace, name, 'permissions', kind, entityName));
     permissionPut.customPUT(permission).then(function() {}, function(result) {
       if (result.status == 409) {
         permission.role = currentRole;
@@ -1191,8 +1202,30 @@ function TeamViewCtrl($rootScope, $scope, Restangular, $routeParams) {
   $scope.loading = true;
   $scope.teamname = teamname;
 
+  $scope.addNewMember = function(member) {
+    if ($scope.members[member.name]) { return; }
+
+    $scope.$apply(function() {
+      var addMember = Restangular.one(getRestUrl('organization', orgname, 'team', teamname, 'members', member.name));
+      addMember.customPOST().then(function(resp) {
+        $scope.members[member.name] = resp;
+      }, function() {
+        $('#cannotChangeMembersModal').modal({});
+      });
+    });
+  };
+
+  $scope.removeMember = function(username) {
+    var removeMember = Restangular.one(getRestUrl('organization', orgname, 'team', teamname, 'members', username));
+    removeMember.customDELETE().then(function(resp) {
+      delete $scope.members[username];
+    }, function() {
+      $('#cannotChangeMembersModal').modal({});
+    });
+  };
+
   var loadOrganization = function() {
-    var getOrganization = Restangular.one('organization/' + orgname);
+    var getOrganization = Restangular.one(getRestUrl('organization', orgname))
     getOrganization.get().then(function(resp) {
       $scope.organization = resp;
       $scope.loading = !$scope.organization || !$scope.members;
@@ -1202,7 +1235,7 @@ function TeamViewCtrl($rootScope, $scope, Restangular, $routeParams) {
   };
 
   var loadMembers = function() {
-    var getMembers = Restangular.one('organization/' + orgname + '/team/' + teamname + '/members');
+    var getMembers = Restangular.one(getRestUrl('organization', orgname, 'team', teamname, 'members'));
     getMembers.get().then(function(resp) {
       $scope.members = resp.members;
       $scope.loading = !$scope.organization || !$scope.members;

static/partials/repo-admin.html

@@ -72,7 +72,7 @@
           <td>
             <span class="delete-ui" tabindex="0" title="Delete Permission">
               <span class="delete-ui-button" ng-click="deleteRole(name, 'user')"><button class="btn btn-danger">Delete</button></span>
-              <i class="fa fa-remove"></i>
+              <i class="fa fa-times"></i>
             </span>
           </td>
         </tr>

static/partials/team-view.html

@@ -14,16 +14,8 @@
       <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Users that inherit all permissions delegated to this team"></i>
     </div>
     <div class="panel-body">
-        
-      <table class="permissions">
-        <thead>
-          <tr>
-            <td>Member</td>
-            <td></td>
-          </tr>
-        </thead>
-        
-        <tr ng-repeat="member in members">
+      <table class="permissions">        
+        <tr ng-repeat="(name, member) in members">
           <td class="user entity">
             <i class="fa fa-user"></i> 
             <span>{{ member.username }}</span>
@@ -31,14 +23,14 @@
           <td>
             <span class="delete-ui" tabindex="0" title="Remove User">
               <span class="delete-ui-button" ng-click="removeMember(member.username)"><button class="btn btn-danger">Remove</button></span>
-              <i class="fa fa-remove"></i>
+              <i class="fa fa-times"></i>
             </span>
           </td>
         </tr>
         
         <tr>
           <td colspan="2">
-            <span class="entity-search" input-title="'Add a user...'" entity-selected="addNewMember"></span>
+            <span class="entity-search" organization="''" input-title="'Add a user...'" entity-selected="addNewMember"></span>
           </td>
         </tr>
       </table>