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

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 -->

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>

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)">
+      <form id="file-drop-form-{{ boxId }}">
-      <label for="file-drop-{{ boxId }}" ng-class="state">
+        <input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop" type="file" files-changed="handleFilesChanged(files)">
-        <span class="chosen-file">
+        <label for="file-drop-{{ boxId }}" ng-class="state">
-          <span ng-if="selectedFiles.length">
+          <span class="chosen-file">
-            {{ selectedFiles[0].name }}
+            <span ng-if="selectedFiles.length">
-            <span ng-if="selectedFiles.length > 1">
+              {{ selectedFiles[0].name }}
-              and {{ selectedFiles.length - 1 }} others...
+              <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">
+        </label>
-          <span>Select file</span>
+      </form>
-        </span>
-      </label>
     </div>
 
     <div class="cor-loader-line" ng-if="state == 'checking'"></div>

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({});
 

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) {

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;