Add a namespace selector for choosing the namespace in the new repo view

endpoints/api.py

@@ -221,13 +221,15 @@ def get_organization(orgname):
 def create_repo_api():
   owner = current_user.db_user()
 
-  namespace_name = owner.username
+  # TODO(jake): Verify that the user can create a repo in this namespace.
-  repository_name = request.get_json()['repository']
+  json = request.get_json()
-  visibility = request.get_json()['visibility']
+  namespace_name = json['namespace'] if 'namespace' in  json else owner.username
+  repository_name = json['repository']
+  visibility = json['visibility']
 
   repo = model.create_repository(namespace_name, repository_name, owner,
                                  visibility)
-  repo.description = request.get_json()['description']
+  repo.description = json['description']
   repo.save()
 
   return jsonify({

static/css/quay.css

@@ -2,6 +2,13 @@
   font-family: 'Droid Sans', sans-serif;
 }
 
+.namespace-selector-dropdown .namespace {
+  padding: 6px;
+  padding-left: 10px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
 .user-notification {
   background: red;
 }

static/directives/namespace-selector.html

@@ -0,0 +1,25 @@
+<span class="namespace-selector-dropdown">
+  <span ng-show="user.organizations.length == 0">{{user.username}}</span>
+
+  <div class="btn-group" ng-show="user.organizations.length > 0">
+  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+    <img src="//www.gravatar.com/avatar/{{ namespaceObj.gravatar }}?s=16&d=identicon" />
+    {{namespace}} <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" role="menu">
+    <li ng-repeat="org in user.organizations">
+      <a class="namespace" href="javascript:void(0)" ng-click="setNamespace(org)">
+        <img src="//www.gravatar.com/avatar/{{ org.gravatar }}?s=24&d=identicon" />
+        <span class="namespace-name">{{ org.name }}</span>
+      </a>
+    </li>
+    <li class="divider"></li>
+    <li>
+      <a class="namespace" href="javascript:void(0)" ng-click="setNamespace(user)">
+        <img src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=24&d=identicon" />
+        <span class="namespace-name">{{ user.username }}</span>
+      </a>
+    </li>
+  </ul>
+</div>
+</span>

static/js/app.js

@@ -231,6 +231,36 @@ quayApp.directive('repoCircle', function () {
 });
 
 
+quayApp.directive('namespaceSelector', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/namespace-selector.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'user': '=user',
+      'namespace': '=namespace'
+    },
+    controller: function($scope, $element) {
+      $scope.setNamespace = function(namespaceObj) {
+        if (!namespaceObj) {
+          namespaceObj = {'name': '', 'gravatar': ''};
+        }
+        $scope.namespaceObj = namespaceObj;
+        $scope.namespace = namespaceObj.name || namespaceObj.username;
+      };
+      $scope.setNamespace($scope.user);
+
+      $scope.$watch('user', function(user) {
+        $scope.setNamespace(user);
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('buildStatus', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -1078,6 +1078,7 @@ function NewRepoCtrl($scope, $location, $http, UserService, Restangular, PlanSer
     $scope.creating = true;
     var repo = $scope.repo;
     var data = {
+      'namespace': repo.namespace,
       'repository': repo.name,
       'visibility': repo.is_public == '1' ? 'public' : 'private',
       'description': repo.description

static/partials/new-repo.html

@@ -28,8 +28,12 @@
     <div class="col-md-8">
       <div class="section">
         <div class="new-header">
-          <span class="repo-circle no-background" repo="repo"></span>
+          <span style="color: #444;">
-          <span style="color: #444;"> {{user.username}}</span> <span style="color: #ccc">/</span> <span class="name-container"><input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name" required autofocus></span>
+            <span class="namespace-selector" user="user" namespace="repo.namespace"></span>
+            <span style="color: #ccc">/</span>
+            <span class="name-container">
+              <input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name" required autofocus>
+            </span>
         </div>
       </div>