From 38e40665a761b6a8110ecc91d564d1f08a1d31eb Mon Sep 17 00:00:00 2001 From: alecmerdler Date: Fri, 17 Feb 2017 15:46:43 -0800 Subject: [PATCH] refactored DockerfilePathSelectComponent --- static/directives/dockerfile-path-select.html | 32 -------- static/directives/manage-trigger-githost.html | 9 +- .../directives/ui/dockerfile-path-select.js | 54 ------------ .../dockerfile-path-select.component.spec.ts | 59 +++++++++++++ .../dockerfile-path-select.component.ts | 82 +++++++++++++++++++ .../regex-match-view.component.spec.ts | 2 +- .../regex-match-view.component.ts | 1 + static/js/quay.module.ts | 2 + 8 files changed, 151 insertions(+), 90 deletions(-) delete mode 100644 static/directives/dockerfile-path-select.html delete mode 100644 static/js/directives/ui/dockerfile-path-select.js create mode 100644 static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts create mode 100644 static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts diff --git a/static/directives/dockerfile-path-select.html b/static/directives/dockerfile-path-select.html deleted file mode 100644 index 699336bb7..000000000 --- a/static/directives/dockerfile-path-select.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
- - - - - - - -
- -
-
- Path entered for folder containing Dockerfile is invalid: Must start with a '/'. -
-
-
\ No newline at end of file diff --git a/static/directives/manage-trigger-githost.html b/static/directives/manage-trigger-githost.html index 4645a2f2f..6746085b4 100644 --- a/static/directives/manage-trigger-githost.html +++ b/static/directives/manage-trigger-githost.html @@ -220,11 +220,14 @@

Select Dockerfile

- 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 }} -
+
diff --git a/static/js/directives/ui/dockerfile-path-select.js b/static/js/directives/ui/dockerfile-path-select.js deleted file mode 100644 index b968e20f8..000000000 --- a/static/js/directives/ui/dockerfile-path-select.js +++ /dev/null @@ -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; -}); \ No newline at end of file diff --git a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts new file mode 100644 index 000000000..487f99de8 --- /dev/null +++ b/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", () => { + + }); + }); +}); \ No newline at end of file diff --git a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts new file mode 100644 index 000000000..ab3c05756 --- /dev/null +++ b/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: ` +
+
+ + + + + + + +
+ +
+
+ Path entered for folder containing Dockerfile is invalid: Must start with a '/'. +
+
+
+ `, +}) +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; + } +} diff --git a/static/js/directives/ui/regex-match-view/regex-match-view.component.spec.ts b/static/js/directives/ui/regex-match-view/regex-match-view.component.spec.ts index a4a5c0aaf..6bc05a768 100644 --- a/static/js/directives/ui/regex-match-view/regex-match-view.component.spec.ts +++ b/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", () => { diff --git a/static/js/directives/ui/regex-match-view/regex-match-view.component.ts b/static/js/directives/ui/regex-match-view/regex-match-view.component.ts index 946771a95..45995908d 100644 --- a/static/js/directives/ui/regex-match-view/regex-match-view.component.ts +++ b/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[]; diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts index 6e37c162f..76ac3f207 100644 --- a/static/js/quay.module.ts +++ b/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,