From ff3dac613a56ea9b556162d4e15107c09c7aee9b Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 9 Oct 2017 15:40:39 -0400
Subject: [PATCH] Fix bug in entity search that caused all robots and teams to
 be non-lazy loaded

Should help immensely with repository page load time

Fixes https://coreosdev.atlassian.net/browse/QS-30
---
 static/directives/entity-search.html     | 22 ++++-----
 static/js/directives/ui/entity-search.js | 62 ++++++++++++++++++------
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/static/directives/entity-search.html b/static/directives/entity-search.html
index 1259ff508..1ace7fda2 100644
--- a/static/directives/entity-search.html
+++ b/static/directives/entity-search.html
@@ -7,28 +7,28 @@
     </button>
     <ul class="dropdown-menu entity-menu" ng-class="pullRight == 'true' ? 'pull-right': ''" role="menu"
         aria-labelledby="entityDropdownMenu">
-      <li ng-show="lazyLoading" style="padding: 10px"><div class="cor-loader"></div></li>
+      <li ng-show="requiresLazyLoading" style="padding: 10px"><div class="cor-loader"></div></li>
 
-      <li role="presentation" class="dropdown-header" ng-show="!lazyLoading && !page.robots && !isAdmin && !teams">
+      <li role="presentation" class="dropdown-header" ng-show="!requiresLazyLoading && !page.robots && !isAdmin && !teams">
         You do not have permission to manage teams and robots for this organization
       </li>
 
-      <li role="presentation" ng-show="includeTeams && isOrganization && !lazyLoading && isAdmin">
+      <li role="presentation" ng-show="includeTeams && isOrganization && !requiresLazyLoading && isAdmin">
         <a role="menuitem" class="new-action" tabindex="-1" ng-click="askCreateTeam()">
           <i class="fa fa-group"></i> Create team
         </a>
       </li>
-      <li role="presentation" ng-show="includeRobots && !lazyLoading && isAdmin">
+      <li role="presentation" ng-show="includeRobots && !requiresLazyLoading && isAdmin">
         <a role="menuitem" class="new-action" tabindex="-1" ng-click="askCreateRobot()">
           <i class="fa ci-robot"></i>
           Create robot account
         </a>
       </li>
 
-      <li role="presentation" class="divider" ng-show="!lazyLoading && page.robots && isAdmin"></li>
+      <li role="presentation" class="divider" ng-show="!requiresLazyLoading && page.robots && isAdmin"></li>
 
       <li role="presentation" class="dropdown-header"
-          ng-show="!lazyLoading && !teams.length && !page.robots.length && !((includeTeams && isOrganization && isAdmin) || (includeRobots && isAdmin))">
+          ng-show="!requiresLazyLoading && !teams.length && !page.robots.length && !((includeTeams && isOrganization && isAdmin) || (includeRobots && isAdmin))">
         <span ng-if="includeRobots && includeTeams && isOrganization">
           No robot accounts or teams found
         </span>
@@ -50,20 +50,20 @@
         </span>
       </li>
 
-      <li role="presentation" class="dropdown-header" ng-show="!lazyLoading && teams">Teams</li>
+      <li role="presentation" class="dropdown-header" ng-show="!requiresLazyLoading && teams">Teams</li>
 
-      <li class="menuitem" role="presentation" ng-repeat="team in teams | orderBy: 'name'" ng-show="!lazyLoading"
+      <li class="menuitem" role="presentation" ng-repeat="team in teams | orderBy: 'name'" ng-show="!requiresLazyLoading"
           ng-click="setEntity(team.name, 'team', false, team.avatar)">
         <a role="menuitem" tabindex="-1">
           <span class="avatar" data="team.avatar" size="16"></span> <span>{{ team.name }}</span>
         </a>
       </li>
 
-      <li role="presentation" class="divider" ng-show="!lazyLoading && teams && (isAdmin || page.robots)"></li>
+      <li role="presentation" class="divider" ng-show="!requiresLazyLoading && teams && (isAdmin || page.robots)"></li>
 
-      <li role="presentation" class="dropdown-header" ng-show="!lazyLoading && page.robots">Robot Accounts</li>
+      <li role="presentation" class="dropdown-header" ng-show="!requiresLazyLoading && page.robots">Robot Accounts</li>
 
-      <li class="menuitem" role="presentation" ng-repeat="robot in page.robots | orderBy:'name'" ng-show="!lazyLoading">
+      <li class="menuitem" role="presentation" ng-repeat="robot in page.robots | orderBy:'name'" ng-show="!requiresLazyLoading">
         <a role="menuitem" tabindex="-1" ng-click="setEntity(robot.name, 'user', true)">
           <i class="fa ci-robot"></i> <span>{{ robot.name }}</span>
         </a>
diff --git a/static/js/directives/ui/entity-search.js b/static/js/directives/ui/entity-search.js
index a6cad6f31..d768c46f6 100644
--- a/static/js/directives/ui/entity-search.js
+++ b/static/js/directives/ui/entity-search.js
@@ -44,7 +44,9 @@ angular.module('quay').directive('entitySearch', function () {
       'pullRight': '@pullRight'
     },
     controller: function($rootScope, $scope, $element, Restangular, UserService, ApiService, UtilService, AvatarService, Config) {
-      $scope.lazyLoading = true;
+      $scope.requiresLazyLoading = true;
+      $scope.isLazyLoading = false;
+      $scope.userRequestedLazyLoading = false;
 
       $scope.teams = null;
       $scope.page = {};
@@ -67,37 +69,67 @@ angular.module('quay').directive('entitySearch', function () {
         return $.inArray(kind, opt_array || $scope.allowedEntities || ['user', 'team', 'robot']) >= 0;
       };
 
+      var resetCache = function() {
+        $scope.requiresLazyLoading = true;
+
+        $scope.teams = null;
+        $scope.page.robots = null;
+      };
+
       $scope.lazyLoad = function() {
-        if (!$scope.namespace || !$scope.thisUser || !$scope.lazyLoading) { return; }
+        $scope.userRequestedLazyLoading = true;
+        $scope.checkLazyLoad();
+      };
+
+      $scope.checkLazyLoad = function() {
+        if (!$scope.namespace || !$scope.thisUser || !$scope.requiresLazyLoading ||
+             $scope.isLazyLoading || !$scope.userRequestedLazyLoading) {
+              return;
+        }
+
+        $scope.isLazyLoading = true;
         $scope.isAdmin = UserService.isNamespaceAdmin($scope.namespace);
         $scope.isOrganization = !!UserService.getOrganization($scope.namespace);
 
-
-        // Reset the cached teams and robots.
+        // Reset the cached teams and robots, just to be sure.
         $scope.teams = null;
         $scope.page.robots = null;
 
+        var requiredOperations = 0;
+        var operationComplete = function() {
+          requiredOperations--;
+          if (requiredOperations <= 0) {
+            $scope.isLazyLoading = false;
+            $scope.requiresLazyLoading = false;
+          }
+        };
+
         // Load the organization's teams (if applicable).
         if ($scope.isOrganization && isSupported('team')) {
-          // Note: We load the org here again so that we always have the fully up-to-date
+          requiredOperations++;
+
+          // Note: We load the org here directly so that we always have the fully up-to-date
           // teams list.
           ApiService.getOrganization(null, {'orgname': $scope.namespace}).then(function(resp) {
             $scope.teams = Object.keys(resp.teams).map(function(key) {
               return resp.teams[key];
             });
-          });
+            operationComplete();
+          }, operationComplete);
         }
 
         // Load the user/organization's robots (if applicable).
         if ($scope.isAdmin && isSupported('robot')) {
+          requiredOperations++;
+          
           ApiService.getRobots($scope.isOrganization ? $scope.namespace : null).then(function(resp) {
             $scope.page.robots = resp.robots;
-            $scope.lazyLoading = false;
-          }, function() {
-            $scope.lazyLoading = false;
-          });
-        } else {
-          $scope.lazyLoading = false;
+            operationComplete();
+          }, operationComplete);
+        }
+
+        if (requiredOperations == 0) {
+          operationComplete();
         }
       };
 
@@ -362,13 +394,15 @@ angular.module('quay').directive('entitySearch', function () {
 
       $scope.$watch('namespace', function(namespace) {
         if (!namespace) { return; }
-        $scope.lazyLoad();
+        resetCache();
+        $scope.checkLazyLoad();
       });
 
       UserService.updateUserIn($scope, function(currentUser){
         if (currentUser.anonymous) { return; }
         $scope.thisUser = currentUser;
-        $scope.lazyLoad();
+        resetCache();
+        $scope.checkLazyLoad();
       });
 
       $scope.$watch('currentEntity', function(entity) {