From 39c18eb21628340877bdd5b2ed2064f94fe3f950 Mon Sep 17 00:00:00 2001 From: alecmerdler Date: Fri, 17 Feb 2017 21:35:33 -0800 Subject: [PATCH] moved component templates to separate files in order to support HTML syntax highlighting in certain editors --- grunt/Gruntfile.js | 5 +- .../dockerfile-path-select.component.html | 37 +++++++++++++ .../dockerfile-path-select.component.ts | 43 ++------------- .../ui/manage-trigger-custom-git.js | 27 ---------- .../manage-trigger-custom-git.component.html} | 24 +++++---- .../manage-trigger-custom-git.component.ts | 53 ++----------------- .../regex-match-view.component.html | 29 ++++++++++ .../regex-match-view.component.ts | 34 +----------- 8 files changed, 93 insertions(+), 159 deletions(-) create mode 100644 static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html delete mode 100644 static/js/directives/ui/manage-trigger-custom-git.js rename static/{directives/manage-trigger-custom-git.html => js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html} (71%) create mode 100644 static/js/directives/ui/regex-match-view/regex-match-view.component.html diff --git a/grunt/Gruntfile.js b/grunt/Gruntfile.js index 29ead6454..f0f8c35f2 100644 --- a/grunt/Gruntfile.js +++ b/grunt/Gruntfile.js @@ -70,8 +70,9 @@ module.exports = function(grunt) { } }, quay: { - src: ['../static/partials/*.html', '../static/directives/*.html', '../static/directives/*.html' - , '../static/directives/config/*.html', '../static/tutorial/*.html'], + src: ['../static/partials/*.html', '../static/directives/*.html', '../static/directives/*.html', + '../static/directives/config/*.html', '../static/tutorial/*.html', + '../static/js/directives/ui/**/*.html'], dest: '../static/dist/template-cache.js' } }, diff --git a/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html new file mode 100644 index 000000000..ef20c83c7 --- /dev/null +++ b/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html @@ -0,0 +1,37 @@ +
+
+ + + + + + + +
+ +
+
+ Path entered for folder containing Dockerfile is invalid: Must start with a '/'. +
+
+
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 index ab3c05756..be0109ef4 100644 --- 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 @@ -1,47 +1,12 @@ import { Input, Component } from 'angular-ts-decorators'; +/** + * A component that allows the user to select the location of the Dockerfile in their source code repository. + */ @Component({ selector: 'dockerfilePathSelect', - template: ` -
-
- - - - - - - -
- -
-
- Path entered for folder containing Dockerfile is invalid: Must start with a '/'. -
-
-
- `, + templateUrl: '/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html' }) export class DockerfilePathSelectComponent implements ng.IComponentController { diff --git a/static/js/directives/ui/manage-trigger-custom-git.js b/static/js/directives/ui/manage-trigger-custom-git.js deleted file mode 100644 index e039e11c0..000000000 --- a/static/js/directives/ui/manage-trigger-custom-git.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * An element which displays the setup and management workflow for a custom git trigger. - */ -angular.module('quay').directive('manageTriggerCustomGit', function () { - var directiveDefinitionObject = { - priority: 0, - templateUrl: '/static/directives/manage-trigger-custom-git.html', - replace: false, - transclude: true, - restrict: 'C', - scope: { - 'trigger': '=trigger', - 'activateTrigger': '&activateTrigger' - }, - controller: function($scope, $element) { - $scope.config = {}; - $scope.currentState = null; - - $scope.$watch('trigger', function(trigger) { - if (trigger) { - $scope.config = trigger['config'] || {}; - } - }); - } - }; - return directiveDefinitionObject; -}); \ No newline at end of file diff --git a/static/directives/manage-trigger-custom-git.html b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html similarity index 71% rename from static/directives/manage-trigger-custom-git.html rename to static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html index 96fb0819a..563ac04f9 100644 --- a/static/directives/manage-trigger-custom-git.html +++ b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html @@ -1,11 +1,13 @@
-
+
+ section-valid="$ctrl.config.build_source">

Enter repository

@@ -13,7 +15,8 @@ Please enter the HTTP or SSH style URL used to clone your git repository: + ng-model="$ctrl.config.build_source" + ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
\ No newline at end of file +
+
diff --git a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts index 3f4f55b83..4addf1a24 100644 --- a/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts +++ b/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts @@ -1,56 +1,12 @@ import { Input, Output, Component } from 'angular-ts-decorators'; +/** + * A component that lets the user set up a build trigger for a custom Git repository. + */ @Component({ selector: 'manageTriggerCustomGit', - template: ` -
-
- -
- -
-

Enter repository

- - Please enter the HTTP or SSH style URL used to clone your git repository: - - -
- -
- - -
- -
-

Select build context directory

- Please select the build context directory under the git repository: - -
- - -
-
- ` + templateUrl: '/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html' }) export class ManageTriggerCustomGitComponent implements ng.IComponentController { @@ -59,7 +15,6 @@ export class ManageTriggerCustomGitComponent implements ng.IComponentController @Output() public activateTrigger: any; private config: any = {}; private currentState: any | null; - private gitUrlRegEx: string = "((ssh|http(s)?)|(git@[\w\.]+))(:(//)?)([\w\.@\:/\-~]+)(\.git)(/)?"; public $onChanges(changes: ng.IOnChangesObject): void { if (changes['trigger'] !== undefined) { diff --git a/static/js/directives/ui/regex-match-view/regex-match-view.component.html b/static/js/directives/ui/regex-match-view/regex-match-view.component.html new file mode 100644 index 000000000..bdfaa597a --- /dev/null +++ b/static/js/directives/ui/regex-match-view/regex-match-view.component.html @@ -0,0 +1,29 @@ +
+
+ Invalid Regular Expression! +
+
+ + + + + + + + + +
Matching: +
    +
  • + {{ item.title }} +
    • +
+
Not Matching: +
    +
  • + {{ item.title }} +
    • +
+
+
+
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 45995908d..256a2d99e 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 @@ -2,42 +2,12 @@ import { Input, Component } from 'angular-ts-decorators'; /** - * An element which displays the matches and non-matches for a regular expression against a set of + * A component that displays the matches and non-matches for a regular expression against a set of * items. */ @Component({ selector: 'regexMatchView', - template: ` -
-
- Invalid Regular Expression! -
-
- - - - - - - - - -
Matching: -
    -
  • - {{ item.title }} -
    • -
-
Not Matching: -
    -
  • - {{ item.title }} -
    • -
-
-
-
- ` + templateUrl: '/static/js/directives/ui/regex-match-view/regex-match-view.component.html' }) export class RegexMatchViewComponent implements ng.IComponentController {