vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

refactored DockerfilePathSelectComponent

Browse source
This commit is contained in:
alecmerdler 2017-02-17 15:46:43 -08:00 committed by Joseph Schorr
parent 389a4cb1c4
commit 38e40665a7
8 changed files with 151 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
static/directives/dockerfile-path-select.html
View file

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

9
static/directives/manage-trigger-githost.html
View file

@ -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"
supports-full-listing="true" is-valid-path="local.hasValidDockerfilePath"></div>
<dockerfile-path-select
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">

54
static/js/directives/ui/dockerfile-path-select.js
View file

@ -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;
});

59
static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.spec.ts Normal file
View file

@ -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", () => {
});
});
});

82
static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.ts Normal file
View file

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

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

@ -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", () => {

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

@ -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[];

2
static/js/quay.module.ts
View file

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