From 793b6f543c7fec2d3eb7d64b052aabe8787f1685 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Mon, 27 Oct 2014 17:05:16 -0400
Subject: [PATCH] Make github trigger setup a bit nicer when there are a lot of
 repos

---
 static/css/quay.css                         |  5 +++++
 static/directives/trigger-setup-github.html | 18 +++++++++---------
 static/js/app.js                            |  7 ++++---
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index f0bf4883d..7f711f79a 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -19,6 +19,11 @@
   }
 }
 
+.scrollable-menu {
+  max-height: 400px;
+  overflow: auto;
+}
+
 .dropdown.input-group-addon {
   padding: 0px;
   border: 0px;
diff --git a/static/directives/trigger-setup-github.html b/static/directives/trigger-setup-github.html
index bb5635a0e..77981d8f2 100644
--- a/static/directives/trigger-setup-github.html
+++ b/static/directives/trigger-setup-github.html
@@ -2,15 +2,15 @@
   <!-- Current selected info -->
   <div class="selected-info" ng-show="nextStepCounter > 0">
     <table style="width: 100%;">
-      <tr ng-show="currentRepo && nextStepCounter > 0">
+      <tr ng-show="state.currentRepo && nextStepCounter > 0">
         <td width="200px">
           Repository:
         </td>
         <td>
           <div class="current-repo">
             <img class="dropdown-select-icon github-org-icon"
-               ng-src="{{ currentRepo.avatar_url ? currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">
-            <a ng-href="https://github.com/{{ currentRepo.repo }}" target="_blank">{{ currentRepo.repo }}</a>
+               ng-src="{{ state.currentRepo.avatar_url ? state.currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">
+            <a ng-href="https://github.com/{{ state.currentRepo.repo }}" target="_blank">{{ state.currentRepo.repo }}</a>
           </div>
         </td>
       </tr>
@@ -45,18 +45,18 @@
   <div class="step-view" next-step-counter="nextStepCounter" current-step-valid="currentStepValid"
                          steps-completed="stepsCompleted()">
     <!-- Repository select -->
-    <div class="step-view-step" complete-condition="currentRepo" load-callback="loadRepositories(callback)"
+    <div class="step-view-step" complete-condition="state.currentRepo" load-callback="loadRepositories(callback)"
          load-message="Loading Repositories">
       <div style="margin-bottom: 12px">Please choose the GitHub repository that will trigger the build:</div>
-      <div class="dropdown-select" placeholder="'Select a repository'" selected-item="currentRepo"
-           lookahead-items="repoLookahead">
+      <div class="dropdown-select" placeholder="'Enter or select a repository'" selected-item="state.currentRepo"
+           lookahead-items="repoLookahead" allow-custom-input="true">
         <!-- Icons -->
         <i class="dropdown-select-icon none-icon fa fa-github fa-lg"></i>
         <img class="dropdown-select-icon github-org-icon"
-             ng-src="{{ currentRepo.avatar_url ? currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">
+             ng-src="{{ state.currentRepo.avatar_url ? state.currentRepo.avatar_url : '//www.gravatar.com/avatar/' }}">
 
         <!-- Dropdown menu -->
-        <ul class="dropdown-select-menu" role="menu">
+        <ul class="dropdown-select-menu scrollable-menu" role="menu">
           <li ng-repeat-start="org in orgs" role="presentation" class="dropdown-header github-org-header">
             <img ng-src="{{ org.info.avatar_url }}" class="github-org-icon">{{ org.info.name }}
           </li>
@@ -178,7 +178,7 @@
 
       <div class="quay-spinner" ng-show="!locations && !locationError"></div>
       <div class="alert alert-warning" ng-show="locations && !locations.length">
-        Warning: No Dockerfiles were found in {{ currentRepo.repo }}
+        Warning: No Dockerfiles were found in {{ state.currentRepo.repo }}
       </div>
       <div class="alert alert-warning" ng-show="locationError">
         {{ locationError }}
diff --git a/static/js/app.js b/static/js/app.js
index a52d4566e..aae470c32 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -5263,6 +5263,7 @@ quayApp.directive('triggerSetupGithub', function () {
       $scope.tagNames = null;
 
       $scope.state = {
+        'currentRepo': null,
         'branchTagFilter': '',
         'hasBranchTagFilter': false,
         'isInvalidLocation': true,
@@ -5384,7 +5385,7 @@ quayApp.directive('triggerSetupGithub', function () {
       };
  
       $scope.selectRepo = function(repo, org) {
-        $scope.currentRepo = {
+        $scope.state.currentRepo = {
           'repo': repo,
           'avatar_url': org['info']['avatar_url'],
           'toString': function() {
@@ -5435,8 +5436,8 @@ quayApp.directive('triggerSetupGithub', function () {
         $scope.repoLookahead = repos;
       };
 
-      $scope.$watch('currentRepo', function(repo) {
-        if (repo) {
+      $scope.$watch('state.currentRepo', function(repo) {
+        if (repo) {          
           $scope.selectRepoInternal(repo);
         }
       });