Extract the add repo permissions UI into its own directive

static/css/directives/ui/add-repo-permissions.css

@@ -0,0 +1,35 @@
+.add-repo-permissions-element label {
+  margin-top: 4px;
+}
+
+.add-repo-permissions-element .co-table {
+  margin-top: 20px;
+}
+
+.add-repo-permissions-element .fa-hdd-o {
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.add-repo-permissions-element .co-filter-box {
+  display: block;
+  float: right;
+  margin-bottom: 20px;
+}
+
+.add-repo-permissions-element .co-filter-box .filter-message {
+  left: -180px;
+  top: 4px;
+}
+
+.add-repo-permissions-element .co-filter-box input {
+  width: 100%;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  height: 28px;
+}
+
+.add-repo-permissions-element label .avatar {
+  vertical-align: text-bottom;
+  margin-left: 4px;
+}

static/directives/add-repo-permissions.html

@@ -0,0 +1,69 @@
+<div class="add-repo-permissions-entity">
+  <span class="co-filter-box">
+    <span class="filter-message" ng-if="options.filter">
+      Showing {{ orderedRepositories.entries.length }} of {{ repositories.length }} repositories
+    </span>
+    <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Repositories...">
+  </span>
+
+  <label>
+    Select repositories in
+    <span class="avatar" size="16" data="namespace.avatar"></span>
+    {{ namespace }}:
+  </label>
+
+  <table class="co-table" style="margin-bottom: 210px;">
+    <thead>
+      <td class="checkbox-col checkbox-menu-col">
+        <span class="cor-checkable-menu" controller="checkedRepos">
+          <div class="cor-checkable-menu-item" item-filter="allRepositoriesFilter(item)">
+            <i class="fa fa-check-square-o"></i>All Repositories
+          </div>
+          <div class="cor-checkable-menu-item" item-filter="noRepositoriesFilter(item)">
+            <i class="fa fa-square-o"></i>No Repositories
+          </div>
+          <div class="cor-checkable-menu-item" item-filter="missingPermsRepositoriesFilter(item)">
+            <i class="fa fa-circle-o"></i>Missing Permissions
+          </div>
+        </span>
+      </td>
+      <td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
+        <a ng-click="TableService.orderBy('name', options)">Repository Name</a>
+      </td>
+      <td>Permission</td>
+      <td ng-class="TableService.tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)">
+        <a ng-click="TableService.orderBy('last_modified_datetime', options)">Last Updated</a>
+      </td>
+     </thead>
+
+     <tr class="co-checkable-row"
+         ng-repeat="repo in orderedRepositories.visibleEntries"
+         ng-class="checkedRepos.isChecked(repo, checkedRepos.checked) ? 'checked' : ''"
+         bindonce>
+      <td class="offset-check-col">
+        <span class="cor-checkable-item" controller="checkedRepos" item="repo"></span>
+      </td>
+      <td>
+        <i class="fa fa-hdd-o"></i>
+        <span bo-text="repo.name"></span>
+      </td>
+      <td>
+        <span class="role-group small" current-role="repo.permission"
+              roles="repoRolesOrNone"
+              role-changed="setRole(role, repo)"></span>
+      </td>
+      <td>
+         <span ng-if="repo.last_modified">
+           {{ repo.last_modified * 1000 | amCalendar }}
+         </span>
+         <span class="empty" ng-if="!repo.last_modified">(Empty Repository)</span>
+      </td>
+    </tr>
+  </table>
+
+  <div class="empty" ng-if="!orderedRepositories.entries.length"
+       style="margin-top: 20px;">
+    <div class="empty-primary-msg">No matching repositories found.</div>
+    <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
+  </div>
+</div>

static/directives/create-entity-dialog.html

@@ -16,73 +16,16 @@
           <div class="cor-loader"></div>
         </div>
         <div class="modal-body co-modal-body-scrollable" ng-show="view == 'addperms'">
-          <span class="co-filter-box">
-            <span class="filter-message" ng-if="options.filter">
-              Showing {{ orderedRepositories.entries.length }} of {{ repositories.length }} repositories
-            </span>
-            <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Repositories...">
-          </span>
-
-          <label>
-            Select repositories in
-            <span class="avatar" size="16" data="namespace.avatar"></span>
-            {{ info.namespace }}:
-          </label>
-
-          <table class="co-table" style="margin-bottom: 210px;">
-            <thead>
-              <td class="checkbox-col checkbox-menu-col">
-                <span class="cor-checkable-menu" controller="checkedRepos">
-                  <div class="cor-checkable-menu-item" item-filter="allRepositoriesFilter(item)">
-                    <i class="fa fa-check-square-o"></i>All Repositories
-                  </div>
-                  <div class="cor-checkable-menu-item" item-filter="noRepositoriesFilter(item)">
-                    <i class="fa fa-square-o"></i>No Repositories
-                  </div>
-                  <div class="cor-checkable-menu-item" item-filter="missingPermsRepositoriesFilter(item)">
-                    <i class="fa fa-circle-o"></i>Missing Permissions
-                  </div>
-                </span>
-              </td>
-              <td ng-class="TableService.tablePredicateClass('name', options.predicate, options.reverse)">
-                <a ng-click="TableService.orderBy('name', options)">Repository Name</a>
-              </td>
-              <td>Permission</td>
-              <td ng-class="TableService.tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)">
-                <a ng-click="TableService.orderBy('last_modified_datetime', options)">Last Updated</a>
-              </td>
-             </thead>
-
-             <tr class="co-checkable-row"
-                 ng-repeat="repo in orderedRepositories.visibleEntries"
-                 ng-class="checkedRepos.isChecked(repo, checkedRepos.checked) ? 'checked' : ''"
-                 bindonce>
-              <td class="offset-check-col">
-                <span class="cor-checkable-item" controller="checkedRepos" item="repo"></span>
-              </td>
-              <td>
-                <i class="fa fa-hdd-o"></i>
-                <span bo-text="repo.name"></span>
-              </td>
-              <td>
-                <span class="role-group small" current-role="repo.permission"
-                      roles="repoRolesOrNone"
-                      role-changed="setRole(role, repo)"></span>
-              </td>
-              <td>
-                 <span ng-if="repo.last_modified">
-                   {{ repo.last_modified * 1000 | amCalendar }}
-                 </span>
-                 <span class="empty" ng-if="!repo.last_modified">(Empty Repository)</span>
-              </td>
-            </tr>
-          </table>
-
-          <div class="empty" ng-if="!orderedRepositories.entries.length"
-               style="margin-top: 20px;">
-            <div class="empty-primary-msg">No matching repositories found.</div>
-            <div class="empty-secondary-msg">Try expanding your filtering terms.</div>
-          </div>
+          <div class="add-repo-permissions" namespace="info.namespace"
+               entity-name="entity.name"
+               entity-kind="entityKind"
+               checked-repository="info.repository"
+               has-checked-repositories="context.hasCheckedRepositories"
+               repositories-loaded="repositoriesLoaded(repositories)"
+               adding-permissions="addingPermissions()"
+               permissions-added="permissionsAdded()"
+               add-permissions="context.addPermissionsCounter"
+               ng-if="entity"></div>
         </div>
         <div class="modal-body" ng-show="view == 'enterName'">
           <form name="enterNameForm" ng-submit="createEntity()">
@@ -96,7 +39,7 @@
         </div> <!-- /.modal-body -->
         <div class="modal-footer" ng-show="view == 'addperms'">
           <button type="button" class="btn btn-primary" ng-click="addPermissions()"
-                  ng-show="checkedRepos.checked.length">Add permissions</button>
+                  ng-show="context.hasCheckedRepositories">Add permissions</button>
           <button type="button" class="btn btn-default" ng-click="hide()">Close</button>
         </div> <!-- /.footer-body -->
         <div class="modal-footer" ng-show="view == 'enterName'">

static/js/directives/ui/add-repo-permissions.js

@@ -0,0 +1,188 @@
+/**
+ * An element which displays a table for adding permissions for an entity to repositories under
+ * a namespace.
+ */
+angular.module('quay').directive('addRepoPermissions', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/add-repo-permissions.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'namespace': '=namespace',
+      'entityName': '=entityName',
+      'entityKind': '=entityKind',
+
+      'checkedRepository': '=checkedRepository',
+
+      'addPermissions': '=addPermissions',
+
+      'hasCheckedRepositories': '=hasCheckedRepositories',
+
+      'repositoriesLoaded': '&repositoriesLoaded',
+      'addingPermissions': '&addingPermissions',
+      'permissionsAdded': '&permissionsAdded',
+    },
+
+    controller: function($scope, $element, ApiService, UIService, TableService, RolesService) {
+      $scope.TableService = TableService;
+
+      $scope.options = {
+        'predicate': 'last_modified_datetime',
+        'reverse': false,
+        'filter': ''
+      };
+
+      $scope.repositories = null;
+      $scope.currentNamespace = null;
+
+      var handleRepoCheckChange = function() {
+        $scope.repositories.forEach(function(repo) {
+          if ($scope.checkedRepos.isChecked(repo)) {
+            if (repo['permission'] == 'none') {
+              repo['permission'] = 'read';
+            }
+          } else {
+            repo['permission'] = 'none';
+          }
+        });
+
+        $scope.hasCheckedRepositories = !!$scope.checkedRepos.checked.length;
+      };
+
+      var setRepoState = function() {
+        if (!$scope.repositories) {
+          return;
+        }
+
+        $scope.orderedRepositories = TableService.buildOrderedItems(
+            $scope.repositories, $scope.options,
+            ['name', 'permission'],
+            ['last_modified_datetime']);
+      };
+
+      var loadRepositories = function() {
+        if (!$scope.namespace || !$scope.entityName || !$scope.entityKind) {
+          return;
+        }
+
+        if ($scope.namespace == $scope.currentNamespace) {
+          return;
+        }
+
+        // Load the repositories under the entity's namespace.
+        var params = {
+          'namespace': $scope.namespace,
+          'last_modified': true
+        };
+
+        ApiService.listRepos(null, params).then(function(resp) {
+          $scope.currentNamespace = $scope.namespace;
+
+          var repos = [];
+          resp['repositories'].forEach(function(repo) {
+            repos.push({
+              'namespace': repo.namespace,
+              'name': repo.name,
+              'last_modified': repo.last_modified,
+              'last_modified_datetime': TableService.getReversedTimestamp(repo.last_modified),
+              'permission': 'none'
+            });
+          });
+
+          if (repos.length == 0) {
+            $scope.repositoriesLoaded({'repositories': repos});
+            return;
+          }
+
+          $scope.repositories = repos;
+          $scope.checkedRepos = UIService.createCheckStateController($scope.repositories, 'name');
+          $scope.checkedRepos.listen(handleRepoCheckChange);
+
+          if ($scope.checkedRepository) {
+            repos.forEach(function(repo) {
+              if (repo['namespace'] == $scope.checkedRepository.namespace &&
+                  repo['name'] == $scope.checkedRepository.name) {
+                $scope.checkedRepos.checkItem(repo);
+                $scope.options.filter = $scope.checkedRepository.name;
+              }
+            });
+          }
+
+          setRepoState();
+          $scope.repositoriesLoaded({'repositories': repos});
+        }, ApiService.errorDisplay('Could not load repositories'));
+      };
+
+      var addPermissions = function() {
+        if (!$scope.checkedRepos || !$scope.namespace || !$scope.repositories) {
+          return;
+        }
+
+        $scope.addingPermissions();
+
+        var repos = $scope.checkedRepos.checked;
+        var counter = 0;
+
+        var addPerm = function() {
+          if (counter >= repos.length) {
+            $scope.permissionsAdded();
+            return;
+          }
+
+          var repo = repos[counter];
+          RolesService.setRepositoryRole(repo, repo.permission, $scope.entityKind,
+                                         $scope.entityName,
+            function(status) {
+              if (status) {
+                counter++;
+                addPerm();
+              } else {
+                $scope.permissionsAdded();
+              }
+            });
+        };
+
+        addPerm();
+      };
+
+      $scope.setRole = function(role, repo) {
+        repo['permission'] = role;
+
+        if (role == 'none') {
+          $scope.checkedRepos.uncheckItem(repo);
+        } else {
+          $scope.checkedRepos.checkItem(repo);
+        }
+      };
+
+      $scope.allRepositoriesFilter = function(item) {
+        return true;
+      };
+
+      $scope.noRepositoriesFilter = function(item) {
+        return false;
+      };
+
+      $scope.missingPermsRepositoriesFilter = function(item) {
+        return !item.perm;
+      };
+
+      $scope.$watch('options.predicate', setRepoState);
+      $scope.$watch('options.reverse', setRepoState);
+      $scope.$watch('options.filter', setRepoState);
+
+      $scope.$watch('namespace', loadRepositories);
+      $scope.$watch('entityName', loadRepositories);
+      $scope.$watch('entityKind', loadRepositories);
+
+      $scope.$watch('addPermissions', function(value) {
+        if (value) {
+          addPermissions();
+        }
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/create-entity-dialog.js

@@ -20,25 +20,9 @@ angular.module('quay').directive('createEntityDialog', function () {
       'entityCreateCompleted': '&entityCreateCompleted'
     },
 
-    controller: function($scope, $element, ApiService, UIService, TableService, RolesService, UserService) {
-      $scope.TableService = TableService;
-
-      $scope.options = {
-        'predicate': 'last_modified_datetime',
-        'reverse': false,
-        'filter': ''
-      };
-
-      var handleRepoCheckChange = function() {
-        $scope.repositories.forEach(function(repo) {
-          if ($scope.checkedRepos.isChecked(repo)) {
-            if (repo['permission'] == 'none') {
-              repo['permission'] = 'read';
-            }
-          } else {
-            repo['permission'] = 'none';
-          }
-        });
+    controller: function($scope, $element, ApiService, UIService, UserService) {
+      $scope.context = {
+        'addPermissionsCounter': 0
       };
 
       $scope.$on('$destroy', function() {
@@ -47,16 +31,6 @@ angular.module('quay').directive('createEntityDialog', function () {
         }
       });
 
-      $scope.setRole = function(role, repo) {
-        repo['permission'] = role;
-
-        if (role == 'none') {
-          $scope.checkedRepos.uncheckItem(repo);
-        } else {
-          $scope.checkedRepos.checkItem(repo);
-        }
-      };
-
       $scope.hide = function() {
         $element.find('.modal').modal('hide');
         if ($scope.entity) {
@@ -68,6 +42,7 @@ angular.module('quay').directive('createEntityDialog', function () {
       $scope.show = function() {
         $scope.entityName = null;
         $scope.entity = null;
+        $scope.entityForPermissions = null;
         $scope.creating = false;
         $scope.view = 'enterName';
         $scope.enterNameForm.$setPristine(true);
@@ -79,92 +54,13 @@ angular.module('quay').directive('createEntityDialog', function () {
         document.body.appendChild($element[0]);
       };
 
-      var setRepoState = function() {
-        if (!$scope.repositories) {
-          return;
-        }
-
-        $scope.orderedRepositories = TableService.buildOrderedItems($scope.repositories, $scope.options,
-            ['name', 'permission'],
-            ['last_modified_datetime']);
-      };
-
       var entityCreateCallback = function(entity) {
+        $scope.entity = entity;
+
         if (!entity || $scope.info.skip_permissions) {
-          $scope.entity = entity;
           $scope.hide();
           return;
         }
-
-        // Load the repositories under the entity's namespace.
-        var params = {
-          'namespace': $scope.info.namespace,
-          'last_modified': true
-        };
-
-        ApiService.listRepos(null, params).then(function(resp) {
-          $scope.view = 'addperms';
-          $scope.entity = entity;
-
-          var repos = [];
-          resp['repositories'].forEach(function(repo) {
-            repos.push({
-              'namespace': repo.namespace,
-              'name': repo.name,
-              'last_modified': repo.last_modified,
-              'last_modified_datetime': TableService.getReversedTimestamp(repo.last_modified),
-              'permission': 'none'
-            });
-          });
-
-          if (repos.length == 0) {
-            $scope.hide();
-            return;
-          }
-
-          $scope.repositories = repos;
-          $scope.checkedRepos = UIService.createCheckStateController($scope.repositories, 'name');
-          $scope.checkedRepos.listen(handleRepoCheckChange);
-
-          if ($scope.info.repository) {
-            repos.forEach(function(repo) {
-              if (repo['namespace'] == $scope.info.repository.namespace &&
-                  repo['name'] == $scope.info.repository.name) {
-                $scope.checkedRepos.checkItem(repo);
-                $scope.options.filter = $scope.info.repository.name;
-              }
-            });
-          }
-
-          setRepoState();
-        }, ApiService.errorDisplay('Could not load repositories'));
-      };
-
-      $scope.addPermissions = function() {
-        $scope.view = 'addingperms';
-
-        var repos = $scope.checkedRepos.checked;
-        var counter = 0;
-
-        var addPerm = function() {
-          if (counter >= repos.length) {
-            $scope.hide();
-            return;
-          }
-
-          var repo = repos[counter];
-          RolesService.setRepositoryRole(repo, repo.permission, $scope.entityKind, $scope.entity.name,
-            function(status) {
-              if (status) {
-                counter++;
-                addPerm();
-              } else {
-                $scope.hide();
-              }
-            });
-        };
-
-        addPerm();
       };
 
       $scope.createEntity = function() {
@@ -175,21 +71,26 @@ angular.module('quay').directive('createEntityDialog', function () {
         });
       };
 
-      $scope.allRepositoriesFilter = function(item) {
-        return true;
+      $scope.permissionsAdded = function() {
+        $scope.hide();
       };
 
-      $scope.noRepositoriesFilter = function(item) {
-        return false;
+      $scope.addingPermissions = function() {
+        $scope.view = 'addingperms';
       };
 
-      $scope.missingPermsRepositoriesFilter = function(item) {
-        return !item.perm;
+      $scope.addPermissions = function() {
+        $scope.context.addPermissionsCounter++;
       };
 
-      $scope.$watch('options.predicate', setRepoState);
-      $scope.$watch('options.reverse', setRepoState);
-      $scope.$watch('options.filter', setRepoState);
+      $scope.repositoriesLoaded = function(repositories) {
+        if (repositories && !repositories.length) {
+          $scope.hide();
+          return;
+        }
+
+        $scope.view = 'addperms';
+      };
 
       $scope.$watch('entityNameRegex', function(r) {
         if (r) {