refactored DockerfilePathSelectComponent

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;
+  }
+}