- Fix a bug with subscribing in the new repo view

- Have conversion to organization update its plan to a business plan
- Fix bug in the repo donut usage graph thingy where it had zero size when not in the default tab

endpoints/api.py

@@ -120,6 +120,10 @@ def convert_user_to_organization():
     error_resp.status_code = 400
     return error_resp
 
+  # Subscribe the organization to the new plan.
+  plan = convert_data['plan']
+  subscribe(user, plan, None, BUSINESS_PLANS)
+
   # Convert the user to an organization.
   model.convert_user_to_organization(user, model.get_user(admin_username))
 

static/css/quay.css

@@ -1714,23 +1714,10 @@ p.editable:hover i {
   padding-left: 10px;
 }
 
-.create-org .plan-group table {
-  margin: 20px;
-  border: 1px solid #eee;
-}
-
 .create-org .plan-group strong {
   margin-bottom: 10px;
 }
 
-.create-org .plan-group td {
-  vertical-align: middle;
-}
-
-.create-org .plan-group .plan-price {
-  font-size: 16px;
-}
-
 .create-org .step-container .description {
   margin-top: 10px;
   display: block;
@@ -1748,26 +1735,40 @@ p.editable:hover i {
   margin-bottom: 20px;
 }
 
-.plan-manager-element .plans-table thead td {
+.plan-manager-element .plans-list-table thead td {
   color: #aaa;
   font-weight: bold;
 }
 
-.plan-manager-element .plans-table td {
+.plan-manager-element .plans-list-table td {
   padding: 10px;
   font-size: 16px;
   vertical-align: middle;
 }
 
-.plan-manager-element .plans-table td.controls {
+.plan-manager-element .plans-list-table td.controls {
   text-align: right;
 }
 
-.plan-manager-element .plans-table .plan-price {
+.plan-manager-element .plans-list-table .plan-price {
   font-size: 16px;
   margin-bottom: 0px;
 }
 
+.plans-table-element table {
+  margin: 20px;
+  border: 1px solid #eee;
+}
+
+.plans-table-element td {
+  vertical-align: middle !important;
+}
+
+.plans-table-element .plan-price {
+  font-size: 16px;
+}
+
+
 /* Overrides for typeahead to work with bootstrap 3. */
 
 .twitter-typeahead .tt-query,

static/directives/plan-manager.html

@@ -24,7 +24,7 @@
   </div>
 
   <!-- Plans Table -->
-  <table class="table table-hover plans-table" ng-show="!planLoading">
+  <table class="table table-hover plans-list-table" ng-show="!planLoading">
     <thead>
       <td>Plan</td>
       <td>Private Repositories</td>

static/directives/plans-table.html

@@ -0,0 +1,23 @@
+<div class="plans-table-element">
+  <table class="table table-hover plans-table-table" ng-show="plans">
+    <thead>
+      <th>Plan</th>
+      <th>Private Repositories</th>
+      <th style="min-width: 85px">Price</th>
+      <th></th>
+    </thead>
+             
+    <tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
+      <td>{{ plan.title }}</td>
+      <td>{{ plan.privateRepos }}</td>
+      <td><div class="plan-price">${{ plan.price / 100 }}</div></td>
+      <td class="controls">
+        <a class="btn" href="javascript:void(0)"
+           ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
+           ng-click="setPlan(plan)">
+          {{ currentPlan == plan ? 'Selected' : 'Choose' }}
+        </a>
+      </td>
+    </tr>
+  </table>
+</div>

static/js/app.js

@@ -140,6 +140,23 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment', 'angulartics',
         }, function() { callback([]); });
       };
 
+      planService.getMatchingBusinessPlan = function(callback) {
+        planService.getPlans(function() {
+          planService.getSubscription(null, function(sub) {
+            var plan = planDict[sub.plan];
+            if (!plan) {
+              planService.getMinimumPlan(0, true, callback);
+              return;
+            }
+
+            var count = Math.max(sub.usedPrivateRepos, plan.privateRepos);
+            planService.getMinimumPlan(count, true, callback);
+          }, function() {
+            planService.getMinimumPlan(0, true, callback);
+          });
+        });
+      };
+
       planService.getPlans = function(callback) {
         planService.verifyLoaded(callback);
       };
@@ -387,6 +404,27 @@ quayApp.directive('signinForm', function () {
 });
 
 
+quayApp.directive('plansTable', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/plans-table.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'plans': '=plans',
+      'currentPlan': '=currentPlan'
+    },
+    controller: function($scope, $element) {
+      $scope.setPlan = function(plan) {
+        $scope.currentPlan = plan;
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('organizationHeader', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/js/controllers.js

@@ -712,11 +712,19 @@ function UserAdminCtrl($scope, $timeout, $location, Restangular, PlanService, Us
   $scope.updatingUser = false;
   $scope.changePasswordSuccess = false;
   $scope.convertStep = 0;
-  
+  $scope.org = {};
 
   $('.form-change-pw').popover();
 
   $scope.showConvertForm = function() {
+    PlanService.getMatchingBusinessPlan(function(plan) {
+      $scope.org.plan = plan;
+    });
+
+    PlanService.getPlans(function(plans) {
+      $scope.orgPlans = plans.business;
+    });
+      
     $scope.convertStep = 1;
   };
 
@@ -729,7 +737,8 @@ function UserAdminCtrl($scope, $timeout, $location, Restangular, PlanService, Us
 
     var data = {
       'adminUser': $scope.org.adminUser,
-      'adminPassword': $scope.org.adminPassword
+      'adminPassword': $scope.org.adminPassword,
+      'plan': $scope.org.plan.stripeId
     };
 
     var convertAccount = Restangular.one('user/convert');
@@ -1017,7 +1026,7 @@ function NewRepoCtrl($scope, $location, $http, $timeout, UserService, Restangula
   };
 
   $scope.upgradePlan = function() {
-    PlanService.showSubscribeDialog($scope, $scope.planRequired.stripeId, null, function() {
+    PlanService.changePlan($scope, null, $scope.planRequired.stripeId, null, function() {
       // Subscribing.
       $scope.planChanging = true;
     }, function(plan) {

static/js/graphing.js

@@ -1219,8 +1219,8 @@ RepositoryUsageChart.prototype.drawInternal_ = function() {
  * Draws the chart in the given container.
  */
 RepositoryUsageChart.prototype.draw = function(container) {
-  var cw = document.getElementById(container).clientWidth;
-  var ch = document.getElementById(container).clientHeight;
+  var cw = 200;
+  var ch = 200;
   var radius = Math.min(cw, ch) / 2;
 
   var pie = d3.layout.pie().sort(null);

static/partials/new-organization.html

@@ -68,26 +68,7 @@
           <!-- Plans Table -->
           <div class="form-group plan-group">
            <strong>Choose your organization's plan</strong>
-           <table class="table table-hover plans-table" ng-show="plans">
-             <thead>
-               <th>Plan</th>
-               <th>Private Repositories</th>
-               <th style="min-width: 64px">Price</th>
-               <th></th>
-             </thead>
-             
-             <tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
-               <td>{{ plan.title }}</td>
-               <td>{{ plan.privateRepos }}</td>
-               <td><div class="plan-price">${{ plan.price / 100 }}</div></td>
-               <td class="controls">
-                 <a class="btn" href="javascript:void(0)" ng-class="currentPlan == plan ? 'btn-primary' : 'btn-default'"
-                    ng-click="setPlan(plan)">
-                   {{ currentPlan == plan ? 'Selected' : 'Choose' }}
-                 </a>
-               </td>
-             </tr>
-           </table>
+           <div class="plans-table" plans="plans" current-plan="currentPlan"></div>          
           </div>
            
           <div class="button-bar">

static/partials/user-admin.html

@@ -101,8 +101,14 @@
                 <span class="description">The username and password for an <b>existing account</b> that will become administrator of the organization</span>
               </div>
 
+              <!-- Plans Table -->
+              <div class="form-group plan-group">
+                <label>Organization Plan</label>
+                <div class="plans-table" plans="orgPlans" current-plan="org.plan"></div>          
+              </div>
+
               <div class="button-bar">
-                <button class="btn btn-large btn-danger" type="submit" ng-disabled="convertForm.$invalid">
+                <button class="btn btn-large btn-danger" type="submit" ng-disabled="convertForm.$invalid || !org.plan">
                   Convert To Organization
                 </button>
               </div>