refactored DockerfilePathSelectComponent

static/directives/dockerfile-path-select.html

@@ -1,32 +0,0 @@
-<div class="dockerfile-path-select-element">
-  <div class="dropdown-select" placeholder="'Enter path containing a Dockerfile'"
-       selected-item="selectedPath"
-       lookahead-items="paths"
-       handle-input="setPath(input)"
-       handle-item-selected="setSelectedPath(datum.value)"
-       allow-custom-input="true"
-       hide-dropdown="!supportsFullListing">
-    <!-- Icons -->
-    <i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg" ng-show="isUnknownPath"></i>
-    <i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;" ng-show="!isUnknownPath"></i>
-    <i class="dropdown-select-icon fa fa-folder fa-lg"></i>
-
-    <!-- Dropdown menu -->
-    <ul class="dropdown-select-menu pull-right" role="menu">
-      <li ng-repeat="path in paths">
-        <a ng-click="setSelectedPath(path)" ng-if="path">
-          <i class="fa fa-folder fa-lg"></i> {{ path }}
-        </a>
-      </li>
-      <li class="dropdown-header" role="presentation" ng-show="!paths.length">
-        No Dockerfiles found in repository
-      </li>
-    </ul>
-  </div>
-
-  <div style="padding: 10px">
-    <div class="co-alert co-alert-danger" ng-show="!isValidPath && currentPath">
-      Path entered for folder containing Dockerfile is invalid: Must start with a '/'.
-    </div>
-  </div>
-</div>

static/directives/manage-trigger-githost.html

@@ -220,11 +220,14 @@
       <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-show="local.dockerfileLocations.status == 'success'">
         <h3>Select Dockerfile</h3>
         <strong>
-          Please select the location of the Dockerfile to build when this trigger is invoked
+          Please select the location of the Dockerfile to build when this trigger is invoked {{ local.paths }}
         </strong>
 
-        <div class="dockerfile-path-select" current-path="local.dockerfilePath" paths="local.dockerfileLocations.subdir"
+        <dockerfile-path-select
-             supports-full-listing="true" is-valid-path="local.hasValidDockerfilePath"></div>
+          current-path="local.dockerfilePath"
+          paths="local.dockerfileLocations.subdir"
+          supports-full-listing="true"
+          is-valid-path="local.hasValidDockerfilePath"></dockerfile-path-select>
       </div>
 
       <div class="col-lg-8 col-md-8 col-sm-12 main-col" ng-show="!local.dockerfileLocations">

static/js/directives/ui/dockerfile-path-select.js

@@ -1,54 +0,0 @@
-/**
- * An element which displays a list of selectable paths containing Dockerfiles.
- */
-angular.module('quay').directive('dockerfilePathSelect', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/dockerfile-path-select.html',
-    replace: false,
-    transclude: true,
-    restrict: 'C',
-    scope: {
-      'currentPath': '=currentPath',
-      'isValidPath': '=?isValidPath',
-      'paths': '=paths',
-      'supportsFullListing': '=supportsFullListing'
-    },
-    controller: function($scope, $element) {
-      $scope.isUnknownPath = true;
-      $scope.selectedPath = null;
-
-      var checkPath = function() {
-        $scope.isUnknownPath = false;
-        $scope.isValidPath = false;
-
-        var path = $scope.currentPath || '';
-        if (path.length == 0 || path[0] != '/') {
-          return;
-        }
-
-        $scope.isValidPath = true;
-
-        if (!$scope.paths) {
-          return;
-        }
-
-        $scope.isUnknownPath = $scope.supportsFullListing && $scope.paths.indexOf(path) < 0;
-      };
-
-      $scope.setPath = function(path) {
-        $scope.currentPath = path;
-        $scope.selectedPath = null;
-      };
-
-      $scope.setSelectedPath = function(path) {
-        $scope.currentPath = path;
-        $scope.selectedPath = path;
-      };
-
-      $scope.$watch('currentPath', checkPath);
-      $scope.$watch('paths', checkPath);
-    }
-  };
-  return directiveDefinitionObject;
-});

static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts

@@ -0,0 +1,59 @@
+import { DockerfilePathSelectComponent } from './dockerfile-path-select.component';
+
+
+describe("DockerfilePathSelectComponent", () => {
+  var component: DockerfilePathSelectComponent;
+  var currentPath: string;
+  var isValidPath: boolean;
+  var paths: string[];
+  var supportsFullListing: boolean;
+
+  beforeEach(() => {
+    component = new DockerfilePathSelectComponent();
+  });
+
+  describe("$onChanges", () => {
+
+    it("sets valid path flag to true if current path is valid", () => {
+
+    });
+
+    it("sets valid path flag to false if current path is invalid", () => {
+
+    });
+  });
+
+  describe("setPath", () => {
+
+    it("sets current path to given path", () => {
+
+    });
+
+    it("sets selected path to null", () => {
+
+    });
+
+    it("sets valid path flag to true if given path is valid", () => {
+
+    });
+
+    it("sets valid path flag to false if given path is invalid", () => {
+
+    });
+  });
+
+  describe("setCurrentPath", () => {
+
+    it("sets current path and selected path to given path", () => {
+
+    });
+
+    it("sets valid path flag to true if given path is valid", () => {
+
+    });
+
+    it("sets valid path flag to false if given path is invalid", () => {
+
+    });
+  });
+});

static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts

@@ -0,0 +1,82 @@
+import { Input, Component } from 'angular-ts-decorators';
+
+
+@Component({
+  selector: 'dockerfilePathSelect',
+  template: `
+    <div class="dockerfile-path-select-element">
+      <div class="dropdown-select" placeholder="'Enter path containing a Dockerfile'"
+           selected-item="$ctrl.selectedPath"
+           lookahead-items="$ctrl.paths"
+           handle-input="$ctrl.setPath(input)"
+           handle-item-selected="$ctrl.setSelectedPath(datum.value)"
+           allow-custom-input="true"
+           hide-dropdown="!$ctrl.supportsFullListing">
+        <!-- Icons -->
+        <i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg" 
+           ng-show="$ctrl.isUnknownPath"></i>
+        <i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;" 
+           ng-show="!$ctrl.isUnknownPath"></i>
+        <i class="dropdown-select-icon fa fa-folder fa-lg"></i>
+    
+        <!-- Dropdown menu -->
+        <ul class="dropdown-select-menu pull-right" role="menu">
+          <li ng-repeat="path in $ctrl.paths">
+            <a ng-click="$ctrl.setSelectedPath(path)" 
+               ng-if="path">
+              <i class="fa fa-folder fa-lg"></i> {{ path }}
+            </a>
+          </li>
+          <li class="dropdown-header" role="presentation" 
+              ng-show="!$ctrl.paths.length">
+            No Dockerfiles found in repository
+          </li>
+        </ul>
+      </div>
+    
+      <div style="padding: 10px">
+        <div class="co-alert co-alert-danger" 
+             ng-show="!$ctrl.isValidPath && $ctrl.currentPath">
+          Path entered for folder containing Dockerfile is invalid: Must start with a '/'.
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class DockerfilePathSelectComponent implements ng.IComponentController {
+
+  // FIXME: Use one-way data binding
+  @Input('=') public currentPath: string;
+  @Input('=') public isValidPath: boolean;
+  @Input('=') public paths: string[];
+  @Input('=') public supportsFullListing: boolean;
+  private isUnknownPath: boolean = true;
+  private selectedPath: string | null = null;
+
+  public $onChanges(changes: ng.IOnChangesObject): void {
+    this.isValidPath = this.checkPath(this.currentPath, this.paths, this.supportsFullListing);
+  }
+
+  public setPath(path: string): void {
+    this.currentPath = path;
+    this.selectedPath = null;
+    this.isValidPath = this.checkPath(path, this.paths, this.supportsFullListing);
+  }
+
+  public setSelectedPath(path: string): void {
+    this.currentPath = path;
+    this.selectedPath = path;
+    this.isValidPath = this.checkPath(path, this.paths, this.supportsFullListing);
+  }
+
+  private checkPath(path: string = '', paths: string[] = [], supportsFullListing: boolean): boolean {
+    this.isUnknownPath = false;
+    var isValidPath: boolean = false;
+
+    if (path.length > 0 && path[0] === '/') {
+      isValidPath = true;
+      this.isUnknownPath = supportsFullListing && paths.indexOf(path) < 0;
+    }
+    return isValidPath;
+  }
+}

static/js/directives/ui/regex-match-view/regex-match-view.component.spec.ts

@@ -12,7 +12,7 @@ describe("RegexMatchViewComponent", () => {
     var items: ({value: string})[];
 
     beforeEach(() => {
-      items = [{value: "master"}, {value: "develop"}, {value: "production"}];
+      items = [{value: "heads/master"}, {value: "heads/develop"}, {value: "heads/production"}];
     });
 
     it("returns null if given invalid regex expression", () => {

static/js/directives/ui/regex-match-view/regex-match-view.component.ts

@@ -41,6 +41,7 @@ import { Input, Component } from 'angular-ts-decorators';
 })
 export class RegexMatchViewComponent implements ng.IComponentController {
 
+  // FIXME: Use one-way data binding
   @Input('=') private regex: string;
   @Input('=') private items: any[];
 

static/js/quay.module.ts

@@ -6,6 +6,7 @@ import { INJECTED_CONFIG, INJECTED_FEATURES, INJECTED_ENDPOINTS } from "./consta
 import { RegexMatchViewComponent } from "./directives/ui/regex-match-view/regex-match-view.component";
 import { NgModule } from "angular-ts-decorators";
 import { QuayRoutes } from "./quay-routes.module";
+import { DockerfilePathSelectComponent } from './directives/ui/dockerfile-path-select/dockerfile-path-select.component';
 
 
 var quayDependencies: any[] = [
@@ -53,6 +54,7 @@ if (INJECTED_CONFIG && INJECTED_CONFIG.RECAPTCHA_SITE_KEY) {
   imports: quayDependencies,
   declarations: [
     RegexMatchViewComponent,
+    DockerfilePathSelectComponent,
   ],
   providers: [
     ViewArrayImpl,