From 3193f32a957eb50ec60da9c6486f09f0296bc72f Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Thu, 10 Nov 2016 14:47:25 -0500
Subject: [PATCH] Fix cannot-use-robot for private base image bug in build
 dialog

There are a number of small state fixes in this PR, which result in the build dialog being properly reset state-wise each time it is displayed, thus fixing the state inconsistency.

Fixes #2106
---
 .../directives/dockerfile-build-dialog.html   |  2 +-
 static/directives/dockerfile-build-form.html  |  6 ++++-
 static/directives/file-upload-box.html        | 24 ++++++++++---------
 .../directives/ui/dockerfile-build-dialog.js  |  2 ++
 .../js/directives/ui/dockerfile-build-form.js | 15 ++++++++++--
 static/js/directives/ui/file-upload-box.js    | 11 ++++++++-
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/static/directives/dockerfile-build-dialog.html b/static/directives/dockerfile-build-dialog.html
index 115cd1daa..57cd95bd9 100644
--- a/static/directives/dockerfile-build-dialog.html
+++ b/static/directives/dockerfile-build-dialog.html
@@ -26,7 +26,7 @@
           <!-- Upload Dockerfile -->
           <div ng-show="!viewTriggers">
             <div class="dockerfile-build-form" repository="repository" is-ready="hasDockerfile"
-                 ready-for-build="readyForBuild(startBuild)"></div>
+                 ready-for-build="readyForBuild(startBuild)" reset="viewCounter"></div>
           </div>
 
           <!-- Start Build Trigger -->
diff --git a/static/directives/dockerfile-build-form.html b/static/directives/dockerfile-build-form.html
index e039532aa..08dded1d6 100644
--- a/static/directives/dockerfile-build-form.html
+++ b/static/directives/dockerfile-build-form.html
@@ -8,7 +8,8 @@
          select-message="Please select a Dockerfile or an archive (.tar.gz or .zip) containing a Dockerfile at the root directory"
          files-cleared="handleFilesCleared()"
          files-selected="handleFilesSelected(files, callback)"
-         files-validated="handleFilesValidated(uploadFiles)"></div>
+         files-validated="handleFilesValidated(uploadFiles)"
+         reset="reset"></div>
 
     <div class="robot-permission" ng-show="privateBaseRepository && state != 'uploading-files'">
       <div class="help-text">
@@ -27,6 +28,9 @@
         Robot account <strong>{{ pullEntity.name }}</strong> does not have
         read permission on repository <strong>{{ privateBaseRepository }}</strong>.
       </div>
+      <div ng-if="state == 'checking-bot'" style="margin-top: 10px;">
+        <span class="cor-loader-inline"></span> Checking robot permissions...
+      </div>
     </div>
   </div>
 </div>
diff --git a/static/directives/file-upload-box.html b/static/directives/file-upload-box.html
index 614e05ae9..f188e4191 100644
--- a/static/directives/file-upload-box.html
+++ b/static/directives/file-upload-box.html
@@ -1,19 +1,21 @@
 <div class="file-upload-box-element">
   <div class="file-input-container">
     <div ng-show="state != 'uploading'">
-      <input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop" type="file" files-changed="handleFilesChanged(files)">
-      <label for="file-drop-{{ boxId }}" ng-class="state">
-        <span class="chosen-file">
-          <span ng-if="selectedFiles.length">
-            {{ selectedFiles[0].name }}
-            <span ng-if="selectedFiles.length > 1">
-              and {{ selectedFiles.length - 1 }} others...
+      <form id="file-drop-form-{{ boxId }}">
+        <input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop" type="file" files-changed="handleFilesChanged(files)">
+        <label for="file-drop-{{ boxId }}" ng-class="state">
+          <span class="chosen-file">
+            <span ng-if="selectedFiles.length">
+              {{ selectedFiles[0].name }}
+              <span ng-if="selectedFiles.length > 1">
+                and {{ selectedFiles.length - 1 }} others...
+              </span>
             </span>
+          </span><span class="choose-button">
+            <span>Select file</span>
           </span>
-        </span><span class="choose-button">
-          <span>Select file</span>
-        </span>
-      </label>
+        </label>
+      </form>
     </div>
 
     <div class="cor-loader-line" ng-if="state == 'checking'"></div>
diff --git a/static/js/directives/ui/dockerfile-build-dialog.js b/static/js/directives/ui/dockerfile-build-dialog.js
index c3afdff94..e88e8e2e5 100644
--- a/static/js/directives/ui/dockerfile-build-dialog.js
+++ b/static/js/directives/ui/dockerfile-build-dialog.js
@@ -16,6 +16,7 @@ angular.module('quay').directive('dockerfileBuildDialog', function () {
     controller: function($scope, $element, ApiService) {
       $scope.viewTriggers = false;
       $scope.triggers = null;
+      $scope.viewCounter = 0;
 
       $scope.startTriggerCounter = 0;
       $scope.startTrigger = null;
@@ -51,6 +52,7 @@ angular.module('quay').directive('dockerfileBuildDialog', function () {
           $scope.viewTriggers = false;
           $scope.startTrigger = null;
           $scope.buildStarting = false;
+          $scope.viewCounter++;
 
           $element.find('.dockerfilebuildModal').modal({});
 
diff --git a/static/js/directives/ui/dockerfile-build-form.js b/static/js/directives/ui/dockerfile-build-form.js
index 958cef047..b2c0a4219 100644
--- a/static/js/directives/ui/dockerfile-build-form.js
+++ b/static/js/directives/ui/dockerfile-build-form.js
@@ -12,6 +12,7 @@ angular.module('quay').directive('dockerfileBuildForm', function () {
       'repository': '=repository',
 
       'isReady': '=?isReady',
+      'reset': '=?reset',
 
       'readyForBuild': '&readyForBuild'
     },
@@ -100,11 +101,13 @@ angular.module('quay').directive('dockerfileBuildForm', function () {
       };
 
       var checkEntity = function() {
-        if (!$scope.pullEntity) { return; }
+        if (!$scope.pullEntity) {
+          $scope.state = 'awaiting-bot';
+          return;
+        }
 
         $scope.state = 'checking-bot';
         $scope.currentRobotHasPermission = null;
-        if (!$scope.pullEntity) { return; }
 
         var permParams = {
           'repository': $scope.privateBaseRepository,
@@ -118,6 +121,14 @@ angular.module('quay').directive('dockerfileBuildForm', function () {
       };
 
       $scope.$watch('pullEntity', checkEntity);
+      $scope.$watch('reset', function(reset) {
+        if (reset) {
+          $scope.state = 'empty';
+          $scope.pullEntity = null;
+          $scope.privateBaseRepository = null;
+        }
+      });
+
       $scope.$watch('state', function(state) {
         $scope.isReady = state == 'ready';
         if ($scope.isReady) {
diff --git a/static/js/directives/ui/file-upload-box.js b/static/js/directives/ui/file-upload-box.js
index c6e276ad8..ee37d1a16 100644
--- a/static/js/directives/ui/file-upload-box.js
+++ b/static/js/directives/ui/file-upload-box.js
@@ -14,7 +14,9 @@ angular.module('quay').directive('fileUploadBox', function () {
 
       'filesSelected': '&filesSelected',
       'filesCleared': '&filesCleared',
-      'filesValidated': '&filesValidated'
+      'filesValidated': '&filesValidated',
+
+      'reset': '=?reset'
     },
     controller: function($rootScope, $scope, $element, ApiService) {
       var MEGABYTE = 1000000;
@@ -148,6 +150,13 @@ angular.module('quay').directive('fileUploadBox', function () {
           });
         }
       };
+
+      $scope.$watch('reset', function(reset) {
+        if (reset) {
+          $scope.state = 'clear';
+          $element.find('#file-drop-' + $scope.boxId).parent().trigger('reset');
+        }
+      });
     }
   };
   return  directiveDefinitionObject;