Add a roles directive and properly recolor the roles

static/css/quay.css

@@ -1408,10 +1408,14 @@ p.editable:hover i {
   margin-left: 10px;
 }
 
-.org-view .team-listing .btn-group {
+.org-view .team-listing .control-col {
   margin-top: 20px;
 }
 
+.org-view .team-listing .delete-col button {
+  padding: 4px;
+}
+
 .org-view .team-listing i {
   margin-right: 10px;
 }

static/directives/role-group.html

@@ -0,0 +1,5 @@
+<div class="btn-group btn-group-sm">
+  <button ng-repeat="role in roles"
+          type="button" class="btn" ng-click="setRole(role.id)"
+          ng-class="(currentRole == role.id) ? ('active btn-' + role.kind) : 'btn-default'">{{ role.title }}</button>
+</div>

static/js/app.js

@@ -436,6 +436,34 @@ quayApp.directive('entitySearch', function () {
 });
 
 
+quayApp.directive('roleGroup', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/role-group.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'roles': '=roles',
+      'currentRole': '=currentRole',
+      'roleChanged': '&roleChanged'
+    },
+    controller: function($scope, $element) {
+      $scope.setRole = function(role) {
+        $scope.currentRole = role;
+        if ($scope.roleChanged) {
+          if ($scope.changeParams) {
+            $scope.changeParams();
+          }
+          $scope.roleChanged({'role': role});
+        }
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('namespaceSelector', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -536,7 +536,13 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
     });
   };
 
-  $scope.setRole = function(entityName, role, kind) {
+ $scope.roles = [
+      { 'id': 'read', 'title': 'Read', 'kind': 'success' },
+      { 'id': 'write', 'title': 'Write', 'kind': 'success' },
+      { 'id': 'admin', 'title': 'Admin', 'kind': 'primary' }
+  ];
+
+  $scope.setRole = function(role, entityName, kind) {
     var permission = $scope.permissions[kind][entityName];
     var currentRole = permission.role;
     permission.role = role;
@@ -544,7 +550,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
     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;
+        $scope.permissions[kind][entityName] = currentRole;
         $('#onlyadminModal').modal({});
       } else {
         $('#cannotchangeModal').modal({});
@@ -1098,7 +1104,13 @@ function OrgViewCtrl($rootScope, $scope, Restangular, $routeParams) {
     });
   };
 
-  $scope.setRole = function(teamname, role) {
+  $scope.teamRoles = [
+      { 'id': 'member', 'title': 'Member', 'kind': 'default' },
+      { 'id': 'creator', 'title': 'Creator', 'kind': 'success' },
+      { 'id': 'admin', 'title': 'Admin', 'kind': 'primary' }
+  ];
+  
+  $scope.setRole = function(role, teamname) {
     $scope.organization.teams[teamname].role = role;
 
     var updateTeam = Restangular.one(getRestUrl('organization', orgname, 'team', teamname));
@@ -1109,6 +1121,26 @@ function OrgViewCtrl($rootScope, $scope, Restangular, $routeParams) {
     });
   };
 
+  $scope.askDeleteTeam = function(teamname) {
+    $scope.currentDeleteTeam = teamname;
+    $('#confirmdeleteModal').modal({});
+  };
+
+  $scope.deleteTeam = function() {
+    $('#confirmdeleteModal').modal('hide');
+    if (!$scope.currentDeleteTeam) { return; }
+
+    var teamname = $scope.currentDeleteTeam;
+    var deleteAction = Restangular.one(getRestUrl('organization', orgname, 'team', teamname));
+    deleteAction.customDELETE().then(function() {
+      delete $scope.organization.teams[teamname];
+      $scope.currentDeleteTeam = null;
+    }, function() {
+      $('#cannotchangeModal').modal({});
+      $scope.currentDeleteTeam = null;
+    });
+  };
+
   loadOrganization();
 }
 

static/partials/org-view.html

@@ -9,9 +9,9 @@
 <div class="org-view container" ng-show="!loading && organization">
   <div class="organization-header" organization="organization"></div>
 
-  <div class="row visible-sm visible-md visible-lg">
+  <div class="row visible-md visible-lg">
-    <div class="col-sm-8"></div>
+    <div class="col-md-7"></div>
-    <div class="col-sm-4 header-col">
+    <div class="col-md-3 header-col" ng-show="organization.is_admin">
       Team Permissions
       <i class="info-icon fa fa-info-circle" data-placement="bottom" data-original-title="" title=""
          data-content="Global permissions for the team and its members<br><br><dl><dt>Member</dt><dd>Permissions are assigned on a per repository basis</dd><dt>Creator</dt><dd>A team can create its own repositories</dd><dt>Admin</dt><dd>A team has full control of the organization</dd></dl>"></i>
@@ -20,7 +20,7 @@
 
   <div class="team-listing" ng-repeat="(name, team) in organization.teams">
     <div class="row">
-      <div class="col-sm-8">
+      <div class="col-md-7">
         <div class="team-title">
           <i class="fa fa-group"></i>
           <span ng-show="team.can_view">
@@ -34,10 +34,12 @@
         <div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
       </div>
 
-      <div class="btn-group btn-group-sm col-sm-4" ng-show="organization.is_admin">
+      <div class="col-md-3 control-col" ng-show="organization.is_admin">
-        <button type="button" class="btn btn-default" ng-click="setRole(name, 'member')" ng-class="{admin: '', creator: '', member: 'active'}[team.role]">Member</button>
+        <span class="role-group" current-role="team.role" role-changed="setRole(role, team.name)" roles="teamRoles"></span>
-        <button type="button" class="btn btn-default" ng-click="setRole(name, 'creator')" ng-class="{admin: '', creator: 'active', member: ''}[team.role]">Creator</button>
+      </div>
-        <button type="button" class="btn btn-primary" ng-click="setRole(name, 'admin')" ng-class="{admin: 'active', creator: '', member: ''}[team.role]">Admin</button>
+
+      <div class="col-md-1 control-col delete-col" ng-show="organization.is_admin">
+        <button class="btn btn-danger" ng-click="askDeleteTeam(team.name)">Delete Team</button>
       </div>
     </div>
   </div>
@@ -60,3 +62,23 @@
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+
+
+<!-- Modal message dialog -->
+<div class="modal fade" id="confirmdeleteModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Delete Team?</h4>
+      </div>
+      <div class="modal-body">
+        Are you sure you would like to delete this team? This <b>cannot be undone</b>.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-danger" ng-click="deleteTeam()">Delete Team</button>
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->

static/partials/repo-admin.html

@@ -42,11 +42,7 @@
             <span><a href="/organization/{{ repo.namespace }}/teams/{{ name }}">{{name}}</a></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, 'team')" roles="roles"></span>
-              <button type="button" class="btn btn-default" ng-click="setRole(name, 'read', 'team')" ng-class="{read: 'active', write: '', admin: ''}[permission.role]">Read only</button>
-              <button type="button" class="btn btn-default" ng-click="setRole(name, 'write', 'team')" ng-class="{read: '', write: 'active', admin: ''}[permission.role]">Write</button>
-              <button type="button" class="btn btn-default" ng-click="setRole(name, 'admin', 'team')" ng-class="{read: '', write: '', admin: 'active'}[permission.role]">Admin</button>
-            </div>
           </td>
           <td>
             <span class="delete-ui" tabindex="0" title="Delete Permission">
@@ -64,9 +60,7 @@
           </td>
           <td class="user-permissions">
             <div class="btn-group btn-group-sm">
-              <button type="button" class="btn btn-default" ng-click="setRole(name, 'read', 'user')" ng-class="{read: 'active', write: '', admin: ''}[permission.role]">Read only</button>
+              <span class="role-group" current-role="permission.role" role-changed="setRole(role, name, 'user')" roles="roles"></span>
-              <button type="button" class="btn btn-default" ng-click="setRole(name, 'write', 'user')" ng-class="{read: '', write: 'active', admin: ''}[permission.role]">Write</button>
-              <button type="button" class="btn btn-primary" ng-click="setRole(name, 'admin', 'user')" ng-class="{read: '', write: '', admin: 'active'}[permission.role]">Admin</button>
             </div>
           </td>
           <td>