Use ng-metadata as a Backport of Angular 2+ API (#2486)

* starting UtilService refactor

* pre find-replace angular.module('quay') => angular.module('QuayModule')

* successfully switched to ng-metadata for backported Angular2 API

* working with parent component reference in child

* fixing @Output to use EventEmitter

* fixed @Output events for custom git trigger

* more fixes

* refactored QuayPages module for backwards-compatibility

* reinitialized test.db

* use minified libraries

* replaced references for angular-ts-decorators

* fixed ng-show

package.json

@@ -28,10 +28,12 @@
     "d3": "^3.3.3",
     "eonasdan-bootstrap-datetimepicker": "^4.17.43",
     "jquery": "1.12.4",
+    "ng-metadata": "^4.0.1",
     "raven-js": "^3.1.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "restangular": "^1.2.0",
+    "rxjs": "^5.0.1",
     "underscore": "^1.5.2"
   },
   "devDependencies": {
@@ -39,7 +41,7 @@
     "@types/angular-mocks": "^1.5.8",
     "@types/angular-route": "^1.3.3",
     "@types/angular-sanitize": "^1.3.4",
-    "@types/es6-shim": "^0.31.32",
+    "@types/core-js": "^0.9.39",
     "@types/jasmine": "^2.5.41",
     "@types/jquery": "^2.0.40",
     "@types/react": "0.14.39",

static/js/directives/ui/app-public-view/app-public-view.component.ts

@@ -1,19 +1,20 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component, Inject } from 'ng-metadata/core';
+
 
 /**
  * A component that displays the public information associated with an application repository.
  */
 @Component({
-  selector: 'appPublicView',
+  selector: 'app-public-view',
   templateUrl: '/static/js/directives/ui/app-public-view/app-public-view.component.html'
 })
-export class AppPublicViewComponent implements ng.IComponentController {
+export class AppPublicViewComponent {
   @Input('<') public repository: any;
   private currentTab: string = 'description';
   private settingsShown: number = 0;
 
-  constructor(private Config: any) {
+  constructor(@Inject('Config') private Config: any) {
-      this.updateDescription = this.updateDescription.bind(this);
+    this.updateDescription = this.updateDescription.bind(this);
   }
 
   private updateDescription(content: string) {
@@ -22,9 +23,9 @@ export class AppPublicViewComponent implements ng.IComponentController {
   }
 
   public showTab(tab: string): void {
-      this.currentTab = tab;
+    this.currentTab = tab;
-      if (tab == 'settings') {
+    if (tab == 'settings') {
-          this.settingsShown++;
+      this.settingsShown++;
-      }
+    }
   }
 }

static/js/directives/ui/channel-icon/channel-icon.component.ts

@@ -1,18 +1,18 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component, Inject } from 'ng-metadata/core';
+
 
 /**
  * A component that displays the icon of a channel.
  */
 @Component({
-  selector: 'channelIcon',
+  selector: 'channel-icon',
   templateUrl: '/static/js/directives/ui/channel-icon/channel-icon.component.html',
 })
-export class ChannelIconComponent implements ng.IComponentController {
+export class ChannelIconComponent {
   @Input('<') public name: string;
-
   private colors: any;
 
-  constructor(Config: any, private md5: any) {
+  constructor(@Inject('Config') Config: any, @Inject('md5') private md5: any) {
     this.colors = Config['CHANNEL_COLORS'];
   }
 

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

@@ -17,23 +17,23 @@ describe("ContextPathSelectComponent", () => {
     component.contexts = contexts;
   });
 
-  describe("$onChanges", () => {
+  describe("ngOnChanges", () => {
 
     it("sets valid context flag to true if current context is valid", () => {
-      component.$onChanges({});
+      component.ngOnChanges({});
 
       expect(component.isValidContext).toBe(true);
     });
 
     it("sets valid context flag to false if current context is invalid", () => {
       component.currentContext = "asdfdsf";
-      component.$onChanges({});
+      component.ngOnChanges({});
 
       expect(component.isValidContext).toBe(false);
     });
   });
 
-  describe("setcontext", () => {
+  describe("setContext", () => {
     var newContext: string;
 
     beforeEach(() => {
@@ -59,7 +59,7 @@ describe("ContextPathSelectComponent", () => {
     });
   });
 
-  describe("setCurrentcontext", () => {
+  describe("setSelectedContext", () => {
     var context: string;
 
     beforeEach(() => {

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

@@ -1,14 +1,14 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
 
 
 /**
  * A component that allows the user to select the location of the Context in their source code repository.
  */
 @Component({
-  selector: 'contextPathSelect',
+  selector: 'context-path-select',
   templateUrl: '/static/js/directives/ui/context-path-select/context-path-select.component.html'
 })
-export class ContextPathSelectComponent implements ng.IComponentController {
+export class ContextPathSelectComponent implements OnChanges {
 
   // FIXME: Use one-way data binding
   @Input('=') public currentContext: string;
@@ -17,7 +17,7 @@ export class ContextPathSelectComponent implements ng.IComponentController {
   private isUnknownContext: boolean = true;
   private selectedContext: string | null = null;
 
-  public $onChanges(changes: ng.IOnChangesObject): void {
+  public ngOnChanges(changes: SimpleChanges): void {
     this.isValidContext = this.checkContext(this.currentContext, this.contexts);
   }
 

static/js/directives/ui/cor-table/cor-table-col.component.ts

@@ -1,28 +1,27 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component, OnInit, Inject, Host } from 'ng-metadata/core';
 import { CorTableComponent } from './cor-table.component';
 
+
 /**
  * Defines a column (optionally sortable) in the table.
  */
 @Component({
-  selector: 'corTableCol',
+  selector: 'cor-table-col',
   template: '',
-  require: {
-    parent: '^^corTable'
-  },
 })
-export class CorTableColumn implements ng.IComponentController {
+export class CorTableColumn implements OnInit {
   @Input('@') public title: string;
   @Input('@') public templateurl: string;
-
   @Input('@') public datafield: string;
   @Input('@') public sortfield: string;
   @Input('@') public selected: string;
   @Input('@') public dataKind: string;
 
-  private parent: CorTableComponent;
+  constructor(@Host() @Inject(CorTableComponent) private parent: CorTableComponent) {
 
-  public $onInit(): void {
+  }
+
+  public ngOnInit(): void {
     this.parent.addColumn(this);
   }
 

static/js/directives/ui/cor-table/cor-table.component.ts

@@ -1,26 +1,28 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component, OnChanges, SimpleChanges, Inject } from 'ng-metadata/core';
 import { CorTableColumn } from './cor-table-col.component';
 
+
 /**
  * A component that displays a table of information, with optional filtering and automatic sorting.
  */
 @Component({
-  selector: 'corTable',
+  selector: 'cor-table',
   templateUrl: '/static/js/directives/ui/cor-table/cor-table.component.html',
-  transclude: true,
+  legacy: {
+    transclude: true
+  }
 })
-export class CorTableComponent implements ng.IComponentController {
+export class CorTableComponent implements OnChanges {
   @Input('<') public tableData: any[];
   @Input('@') public tableItemTitle: string;
   @Input('<') public filterFields: string[];
   @Input('@') public compact: string;
   @Input('<') public maxDisplayCount: number;
-
   private columns: CorTableColumn[];
   private orderedData: any;
   private options: any;
 
-  constructor(private TableService: any) {
+  constructor(@Inject('TableService') private TableService: any) {
     this.columns = [];
     this.options = {
       'filter': '',
@@ -30,7 +32,7 @@ export class CorTableComponent implements ng.IComponentController {
     };
   }
 
-  public $onChanges(changes: ng.IOnChangesObject): void {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (changes['tableData'] !== undefined) {
       this.refreshOrder();
     }

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

@@ -20,17 +20,17 @@ describe("DockerfilePathSelectComponent", () => {
     component.supportsFullListing = supportsFullListing;
   });
 
-  describe("$onChanges", () => {
+  describe("ngOnChanges", () => {
 
     it("sets valid path flag to true if current path is valid", () => {
-      component.$onChanges({});
+      component.ngOnChanges({});
 
       expect(component.isValidPath).toBe(true);
     });
 
     it("sets valid path flag to false if current path is invalid", () => {
       component.currentPath = "asdfdsf";
-      component.$onChanges({});
+      component.ngOnChanges({});
 
       expect(component.isValidPath).toBe(false);
     });

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

@@ -1,14 +1,14 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component, OnChanges, SimpleChanges } from 'ng-metadata/core';
 
 
 /**
  * A component that allows the user to select the location of the Dockerfile in their source code repository.
  */
 @Component({
-  selector: 'dockerfilePathSelect',
+  selector: 'dockerfile-path-select',
   templateUrl: '/static/js/directives/ui/dockerfile-path-select/dockerfile-path-select.component.html'
 })
-export class DockerfilePathSelectComponent implements ng.IComponentController {
+export class DockerfilePathSelectComponent implements OnChanges {
 
   // FIXME: Use one-way data binding
   @Input('=') public currentPath: string;
@@ -18,7 +18,7 @@ export class DockerfilePathSelectComponent implements ng.IComponentController {
   private isUnknownPath: boolean = true;
   private selectedPath: string | null = null;
 
-  public $onChanges(changes: ng.IOnChangesObject): void {
+  public ngOnChanges(changes: SimpleChanges): void {
     this.isValidPath = this.checkPath(this.currentPath, this.paths, this.supportsFullListing);
   }
 

static/js/directives/ui/linear-workflow/linear-workflow-section.component.spec.ts

@@ -1,5 +1,6 @@
 import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
 import { LinearWorkflowComponent } from './linear-workflow.component';
+import { SimpleChanges } from 'ng-metadata/core';
 import Spy = jasmine.Spy;
 
 
@@ -8,24 +9,23 @@ describe("LinearWorkflowSectionComponent", () => {
   var parentMock: LinearWorkflowComponent;
 
   beforeEach(() => {
-    component = new LinearWorkflowSectionComponent();
     parentMock = new LinearWorkflowComponent();
-    component.parent = parentMock;
+    component = new LinearWorkflowSectionComponent(parentMock);
   });
 
-  describe("$onInit", () => {
+  describe("ngOnInit", () => {
 
     it("calls parent component to add itself as a section", () => {
       var addSectionSpy: Spy = spyOn(parentMock, "addSection").and.returnValue(null);
-      component.$onInit();
+      component.ngOnInit();
 
       expect(addSectionSpy.calls.argsFor(0)[0]).toBe(component);
     });
   });
 
-  describe("$onChanges", () => {
+  describe("ngOnChanges", () => {
     var onSectionInvalidSpy: Spy;
-    var changesObj: ng.IOnChangesObject;
+    var changesObj: SimpleChanges;
 
     beforeEach(() => {
       onSectionInvalidSpy = spyOn(parentMock, "onSectionInvalid").and.returnValue(null);
@@ -39,20 +39,20 @@ describe("LinearWorkflowSectionComponent", () => {
     });
 
     it("does nothing if 'sectionValid' input not changed", () => {
-      component.$onChanges({});
+      component.ngOnChanges({});
 
       expect(onSectionInvalidSpy).not.toHaveBeenCalled();
     });
 
     it("does nothing if 'sectionValid' input is true", () => {
-      component.$onChanges(changesObj);
+      component.ngOnChanges(changesObj);
 
       expect(onSectionInvalidSpy).not.toHaveBeenCalled();
     });
 
     it("calls parent method to inform that section is invalid if 'sectionValid' input changed to false", () => {
       changesObj['sectionValid'].currentValue = false;
-      component.$onChanges(changesObj);
+      component.ngOnChanges(changesObj);
 
       expect(onSectionInvalidSpy.calls.argsFor(0)[0]).toEqual(component.sectionId);
     });

static/js/directives/ui/linear-workflow/linear-workflow-section.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, Input } from 'angular-ts-decorators';
+import { Component, Input, Inject, Host, OnChanges, OnInit, SimpleChanges } from 'ng-metadata/core';
 import { LinearWorkflowComponent } from './linear-workflow.component';
 
 
@@ -6,27 +6,29 @@ import { LinearWorkflowComponent } from './linear-workflow.component';
  * A component which displays a single section in a linear workflow.
  */
 @Component({
-  selector: 'linearWorkflowSection',
+  selector: 'linear-workflow-section',
   templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow-section.component.html',
-  transclude: true,
+  legacy: {
-  require: {
+    transclude: true
-    parent: '^^linearWorkflow'
   }
 })
-export class LinearWorkflowSectionComponent implements ng.IComponentController {
+export class LinearWorkflowSectionComponent implements OnChanges, OnInit {
 
   @Input('@') public sectionId: string;
   @Input('@') public sectionTitle: string;
   @Input() public sectionValid: boolean = false;
   public sectionVisible: boolean = false;
   public isCurrentSection: boolean = false;
-  public parent: LinearWorkflowComponent;
 
-  public $onInit(): void {
+  constructor(@Host() @Inject(LinearWorkflowComponent) private parent: LinearWorkflowComponent) {
+
+  }
+
+  public ngOnInit(): void {
     this.parent.addSection(this);
   }
 
-  public $onChanges(changes: ng.IOnChangesObject): void {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (changes['sectionValid'] !== undefined && !changes['sectionValid'].currentValue) {
       this.parent.onSectionInvalid(this.sectionId);
     }

static/js/directives/ui/linear-workflow/linear-workflow.component.spec.ts

@@ -14,11 +14,11 @@ describe("LinearWorkflowComponent", () => {
     var newSection: LinearWorkflowSectionComponent;
 
     beforeEach(() => {
-      newSection = new LinearWorkflowSectionComponent;
+      newSection = new LinearWorkflowSectionComponent(component);
     });
 
     it("does not set 'sectionVisible' or 'isCurrentSection' of given section if not the first section added", () => {
-      component.addSection(new LinearWorkflowSectionComponent);
+      component.addSection(new LinearWorkflowSectionComponent(component));
       component.addSection(newSection);
 
       expect(newSection.sectionVisible).toBe(false);
@@ -42,8 +42,8 @@ describe("LinearWorkflowComponent", () => {
     var currentSection: LinearWorkflowSectionComponent;
 
     beforeEach(() => {
-      component.onWorkflowComplete = jasmine.createSpy("onWorkflowComplete").and.returnValue(null);
+      component.onWorkflowComplete = jasmine.createSpyObj("onWorkflowCompleteSpy", ['emit']);
-      currentSection = new LinearWorkflowSectionComponent;
+      currentSection = new LinearWorkflowSectionComponent(component);
       currentSection.sectionValid = true;
       component.addSection(currentSection);
     });
@@ -52,18 +52,18 @@ describe("LinearWorkflowComponent", () => {
       currentSection.sectionValid = false;
       component.onNextSection();
 
-      expect(component.onWorkflowComplete).not.toHaveBeenCalled();
+      expect(component.onWorkflowComplete.emit).not.toHaveBeenCalled();
       expect(currentSection.isCurrentSection).toBe(true);
     });
 
     it("calls workflow completed output callback if current section is the last section and is valid", () => {
       component.onNextSection();
 
-      expect(component.onWorkflowComplete).toHaveBeenCalled();
+      expect(component.onWorkflowComplete.emit).toHaveBeenCalled();
     });
 
     it("sets the current section to the next section if there are remaining sections and current section valid", () => {
-      var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent();
+      var nextSection: LinearWorkflowSectionComponent = new LinearWorkflowSectionComponent(component);
       component.addSection(nextSection);
       component.onNextSection();
 
@@ -78,15 +78,15 @@ describe("LinearWorkflowComponent", () => {
     var sections: LinearWorkflowSectionComponent[];
 
     beforeEach(() => {
-      invalidSection = new LinearWorkflowSectionComponent();
+      invalidSection = new LinearWorkflowSectionComponent(component);
       invalidSection.sectionId = "Git Repository";
       invalidSection.sectionValid = false;
       component.addSection(invalidSection);
 
       sections = [
-        new LinearWorkflowSectionComponent(),
+        new LinearWorkflowSectionComponent(component),
-        new LinearWorkflowSectionComponent(),
+        new LinearWorkflowSectionComponent(component),
-        new LinearWorkflowSectionComponent(),
+        new LinearWorkflowSectionComponent(component),
       ];
       sections.forEach((section) => {
         section.sectionVisible = false;

static/js/directives/ui/linear-workflow/linear-workflow.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, Input } from 'angular-ts-decorators';
+import { Component, Output, Input, EventEmitter } from 'ng-metadata/core';
 import { LinearWorkflowSectionComponent } from './linear-workflow-section.component';
 
 
@@ -7,14 +7,16 @@ import { LinearWorkflowSectionComponent } from './linear-workflow-section.compon
  * step is made visible.
  */
 @Component({
-  selector: 'linearWorkflow',
+  selector: 'linear-workflow',
   templateUrl: '/static/js/directives/ui/linear-workflow/linear-workflow.component.html',
-  transclude: true
+  legacy: {
+    transclude: true
+  }
 })
-export class LinearWorkflowComponent implements ng.IComponentController {
+export class LinearWorkflowComponent {
 
   @Input('@') public doneTitle: string;
-  @Output() public onWorkflowComplete: (event: any) => void;
+  @Output() public onWorkflowComplete: EventEmitter<any> = new EventEmitter();
   private sections: SectionInfo[] = [];
   private currentSection: SectionInfo;
 
@@ -33,7 +35,7 @@ export class LinearWorkflowComponent implements ng.IComponentController {
 
   public onNextSection(): void {
     if (this.currentSection.component.sectionValid && this.currentSection.index + 1 >= this.sections.length) {
-      this.onWorkflowComplete({});
+      this.onWorkflowComplete.emit({});
     }
     else if (this.currentSection.component.sectionValid && this.currentSection.index + 1 < this.sections.length) {
       this.currentSection.component.isCurrentSection = false;

static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html

@@ -1,7 +1,7 @@
 <div class="manage-trigger-custom-git-element manage-trigger-control">
   <linear-workflow
     done-title="Create Trigger"
-    on-workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
+    (on-workflow-complete)="$ctrl.activateTrigger.emit({config: $ctrl.config})">
     <!-- Section: Repository -->
     <linear-workflow-section class="row"
       section-id="repo"

static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.spec.ts

@@ -8,7 +8,7 @@ describe("ManageTriggerCustomGitComponent", () => {
     component = new ManageTriggerCustomGitComponent();
   });
 
-  describe("$onChanges", () => {
+  describe("ngOnChanges", () => {
 
   });
 });

static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.ts

@@ -1,22 +1,22 @@
-import { Input, Output, Component } from 'angular-ts-decorators';
+import { Input, Output, Component, EventEmitter, OnChanges, SimpleChanges } from 'ng-metadata/core';
 
 
 /**
  * A component that lets the user set up a build trigger for a custom Git repository.
  */
 @Component({
-  selector: 'manageTriggerCustomGit',
+  selector: 'manage-trigger-custom-git',
   templateUrl: '/static/js/directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component.html'
 })
-export class ManageTriggerCustomGitComponent implements ng.IComponentController {
+export class ManageTriggerCustomGitComponent implements OnChanges {
 
   // FIXME: Use one-way data binding
   @Input('=') public trigger: {config: any};
-  @Output() public activateTrigger: (trigger: {config: any}) => void;
+  @Output() public activateTrigger: EventEmitter<{config: any, pull_robot?: any}> = new EventEmitter();
   private config: any = {};
   private currentState: any | null;
 
-  public $onChanges(changes: ng.IOnChangesObject): void {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (changes['trigger'] !== undefined) {
       this.config = Object.assign({}, changes['trigger'].currentValue.config);
     }

static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html

@@ -1,7 +1,7 @@
 <div class="manage-trigger-githost-element manage-trigger-control">
   <linear-workflow
     done-title="Create Trigger"
-    on-workflow-complete="$ctrl.createTrigger()">
+    (on-workflow-complete)="$ctrl.createTrigger($event)">
 
     <!-- Section: Namespace -->
     <linear-workflow-section class="row"

static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.ts

@@ -1,4 +1,4 @@
-import { Input, Output, Component } from 'angular-ts-decorators';
+import { Input, Output, Component, Inject, EventEmitter, OnInit } from 'ng-metadata/core';
 import * as moment from 'moment';
 
 
@@ -6,15 +6,15 @@ import * as moment from 'moment';
  * A component that lets the user set up a build trigger for a public Git repository host service.
  */
 @Component({
-  selector: 'manageTriggerGithost',
+  selector: 'manage-trigger-githost',
   templateUrl: '/static/js/directives/ui/manage-trigger-githost/manage-trigger-githost.component.html'
 })
-export class ManageTriggerGithostComponent implements ng.IComponentController {
+export class ManageTriggerGithostComponent implements OnInit {
 
   // FIXME: Use one-way data binding
   @Input('=') public repository: any;
   @Input('=') public trigger: Trigger;
-  @Output() public activateTrigger: (trigger: {config: any, pull_robot: any}) => void;
+  @Output() public activateTrigger: EventEmitter<{config: any, pull_robot?: any}> = new EventEmitter();
   private config: any;
   private local: any = {
     namespaceOptions: {
@@ -44,11 +44,11 @@ export class ManageTriggerGithostComponent implements ng.IComponentController {
   private namespaceTitle: string;
   private namespace: any;
 
-  constructor(private ApiService: any,
+  constructor(@Inject('ApiService') private ApiService: any,
-              private TableService: any,
+              @Inject('TableService') private TableService: any,
-              private TriggerService: any,
+              @Inject('TriggerService') private TriggerService: any,
-              private RolesService: any,
+              @Inject('RolesService') private RolesService: any,
-              private $scope: ng.IScope) {
+              @Inject('$scope') private $scope: ng.IScope) {
     // FIXME: Here binding methods to class context in order to pass them as arguments to $scope.$watch
     this.buildOrderedNamespaces = this.buildOrderedNamespaces.bind(this);
     this.loadNamespaces = this.loadNamespaces.bind(this);
@@ -60,7 +60,7 @@ export class ManageTriggerGithostComponent implements ng.IComponentController {
     this.checkDockerfilePath = this.checkDockerfilePath.bind(this);
   }
 
-  public $onInit(): void {
+  public ngOnInit(): void {
     // TODO: Replace $scope.$watch with @Output methods for child component mutations or $onChanges for parent mutations
     this.$scope.$watch(() => this.trigger, this.initialSetup.bind(this));
     this.$scope.$watch(() => this.repository, this.initialSetup.bind(this));
@@ -134,7 +134,7 @@ export class ManageTriggerGithostComponent implements ng.IComponentController {
     }
 
     var activate = () => {
-      this.activateTrigger({'config': config, 'pull_robot': this.local.robotAccount});
+      this.activateTrigger.emit({config: config, pull_robot: this.local.robotAccount});
     };
 
     if (this.local.robotAccount && this.local.triggerAnalysis.status == 'requiresrobot') {

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

@@ -1,4 +1,4 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component } from 'ng-metadata/core';
 
 
 /**
@@ -6,19 +6,15 @@ import { Input, Component } from 'angular-ts-decorators';
  * items.
  */
 @Component({
-  selector: 'regexMatchView',
+  selector: 'regex-match-view',
   templateUrl: '/static/js/directives/ui/regex-match-view/regex-match-view.component.html'
 })
-export class RegexMatchViewComponent implements ng.IComponentController {
+export class RegexMatchViewComponent {
 
   // FIXME: Use one-way data binding
   @Input('=') private regex: string;
   @Input('=') private items: any[];
 
-  constructor() {
-
-  }
-
   public filterMatches(regexstr: string, items: ({value: string})[], shouldMatch: boolean): ({value: string})[] | null {
     regexstr = regexstr || '.+';
 

static/js/directives/ui/visibility-indicator/visibility-indicator.component.ts

@@ -1,14 +1,15 @@
-import { Input, Component } from 'angular-ts-decorators';
+import { Input, Component } from 'ng-metadata/core';
+
 
 /**
  * A component that displays a box with "Public" or "Private", depending on the visibility
  * of the repository.
  */
 @Component({
-  selector: 'visibilityIndicator',
+  selector: 'visibility-indicator',
   templateUrl: '/static/js/directives/ui/visibility-indicator/visibility-indicator.component.html'
 })
-export class VisibilityIndicatorComponent implements ng.IComponentController {
+export class VisibilityIndicatorComponent {
   @Input('<') public repository: any;
 
   constructor() {

static/js/main.ts

@@ -0,0 +1,15 @@
+import 'core-js';
+import { bundle } from 'ng-metadata/core';
+import { QuayModule } from './quay.module';
+import { provideRun } from './quay-run';
+import * as angular from 'angular';
+
+
+/**
+ * Register ng-metadata module as a traditional AngularJS module on the global namespace for non-TypeScript components.
+ * TODO: Needed for non-TypeScript components/services to register themselves. Remove once they are migrated.
+ * See https://hotell.gitbooks.io/ng-metadata/content/docs/recipes/bootstrap.html
+ */
+const ng1QuayModule: string = bundle(QuayModule, []).name;
+angular.module('quay', [ng1QuayModule])
+  .run(provideRun);

static/js/pages/trigger-setup.js

@@ -41,7 +41,7 @@
 
     $scope.state = 'managing';
 
-    $scope.activateTrigger = function(config, pull_robot) {
+    $scope.activateTrigger = function(event) {
       $scope.state = 'activating';
       var params = {
         'repository': namespace + '/' + name,
@@ -49,11 +49,11 @@
       };
 
       var data = {
-        'config': config
+        'config': event.config
       };
 
-      if (pull_robot) {
+      if (event.pull_robot) {
-        data['pull_robot'] = pull_robot['name'];
+        data['pull_robot'] = event.pull_robot['name'];
       }
 
       var errorHandler = ApiService.errorDisplay('Cannot activate build trigger', function(resp) {

static/js/quay-config.module.ts

@@ -1,11 +1,10 @@
-import { NgModule } from 'angular-ts-decorators';
+import { NgModule } from 'ng-metadata/core';
 import { INJECTED_CONFIG, INJECTED_FEATURES, INJECTED_ENDPOINTS } from "./constants/injected-values.constant";
 import { NAME_PATTERNS } from "./constants/name-patterns.constant";
 import * as Raven from "raven-js";
-import * as angular from 'angular';
 
 
-var quayDependencies: any[] = [
+var quayDependencies: string[] = [
   'chieffancypants.loadingBar',
   'cfp.hotkeys',
   'angular-tour',
@@ -49,70 +48,80 @@ if (INJECTED_CONFIG && INJECTED_CONFIG.RECAPTCHA_SITE_KEY) {
 @NgModule({
   imports: quayDependencies,
   declarations: [],
-  providers: []
+  providers: [
+    provideConfig,
+    {provide: 'INJECTED_CONFIG', useValue: INJECTED_CONFIG},
+    {provide: 'INJECTED_FEATURES', useValue: INJECTED_FEATURES},
+    {provide: 'INJECTED_ENDPOINTS', useValue: INJECTED_ENDPOINTS},
+    {provide: 'NAME_PATTERNS', useValue: NAME_PATTERNS},
+  ]
 })
-export class QuayConfig {
+export class QuayConfigModule {
 
-  public config($provide: ng.auto.IProvideService,
-                $injector: ng.auto.IInjectorService,
-                INJECTED_CONFIG: any,
-                cfpLoadingBarProvider: any,
-                $tooltipProvider: any,
-                $compileProvider: ng.ICompileProvider,
-                RestangularProvider: any): void {
-    cfpLoadingBarProvider.includeSpinner = false;
-
-    // decorate the tooltip getter
-    var tooltipFactory: any = $tooltipProvider.$get[$tooltipProvider.$get.length - 1];
-    $tooltipProvider.$get[$tooltipProvider.$get.length - 1] = function($window: ng.IWindowService) {
-      if ('ontouchstart' in $window) {
-        var existing: any = tooltipFactory.apply(this, arguments);
-        return function(element) {
-          // Note: We only disable bs-tooltip's themselves. $tooltip is used for other things
-          // (such as the datepicker), so we need to be specific when canceling it.
-          if (element !== undefined && element.attr('bs-tooltip') == null) {
-            return existing.apply(this, arguments);
-          }
-        };
-      }
-
-      return tooltipFactory.apply(this, arguments);
-    };
-
-    if (!INJECTED_CONFIG['DEBUG']) {
-      $compileProvider.debugInfoEnabled(false);
-    }
-
-    // Configure compile provider to add additional URL prefixes to the sanitization list. We use
-    // these on the Contact page.
-    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|irc):/);
-
-    // Configure the API provider.
-    RestangularProvider.setBaseUrl('/api/v1/');
-
-    // Configure analytics.
-    if (INJECTED_CONFIG && INJECTED_CONFIG.MIXPANEL_KEY) {
-      let $analyticsProvider: any = $injector.get('$analyticsProvider');
-      $analyticsProvider.virtualPageviews(true);
-    }
-
-    // Configure sentry.
-    if (INJECTED_CONFIG && INJECTED_CONFIG.SENTRY_PUBLIC_DSN) {
-      $provide.decorator("$exceptionHandler", function($delegate) {
-        return function(ex, cause) {
-          $delegate(ex, cause);
-          Raven.captureException(ex, {extra: {cause: cause}});
-        };
-      });
-    }
-  }
 }
 
 
-// TODO: Make injected values into services and move to NgModule.providers, as constants are not supported in Angular 2
+/**
-angular
+ * Provider function for the application configuration.
-  .module(QuayConfig.name)
+ * See https://hotell.gitbooks.io/ng-metadata/content/docs/recipes/startup-logic.html
-  .constant('NAME_PATTERNS', NAME_PATTERNS)
+ */
-  .constant('INJECTED_CONFIG', INJECTED_CONFIG)
+provideConfig.$inject = [
-  .constant('INJECTED_FEATURES', INJECTED_FEATURES)
+  '$provide',
-  .constant('INJECTED_ENDPOINTS', INJECTED_ENDPOINTS);
+  '$injector',
+  'cfpLoadingBarProvider',
+  '$tooltipProvider',
+  '$compileProvider',
+  'RestangularProvider',
+];
+function provideConfig($provide: ng.auto.IProvideService,
+                       $injector: ng.auto.IInjectorService,
+                       cfpLoadingBarProvider: any,
+                       $tooltipProvider: any,
+                       $compileProvider: ng.ICompileProvider,
+                       RestangularProvider: any): void {
+  cfpLoadingBarProvider.includeSpinner = false;
+
+  // decorate the tooltip getter
+  var tooltipFactory: any = $tooltipProvider.$get[$tooltipProvider.$get.length - 1];
+  $tooltipProvider.$get[$tooltipProvider.$get.length - 1] = function($window: ng.IWindowService) {
+    if ('ontouchstart' in $window) {
+      var existing: any = tooltipFactory.apply(this, arguments);
+      return function(element) {
+        // Note: We only disable bs-tooltip's themselves. $tooltip is used for other things
+        // (such as the datepicker), so we need to be specific when canceling it.
+        if (element !== undefined && element.attr('bs-tooltip') == null) {
+          return existing.apply(this, arguments);
+        }
+      };
+    }
+
+    return tooltipFactory.apply(this, arguments);
+  };
+
+  if (!INJECTED_CONFIG['DEBUG']) {
+    $compileProvider.debugInfoEnabled(false);
+  }
+
+  // Configure compile provider to add additional URL prefixes to the sanitization list. We use
+  // these on the Contact page.
+  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|irc):/);
+
+  // Configure the API provider.
+  RestangularProvider.setBaseUrl('/api/v1/');
+
+  // Configure analytics.
+  if (INJECTED_CONFIG && INJECTED_CONFIG.MIXPANEL_KEY) {
+    let $analyticsProvider: any = $injector.get('$analyticsProvider');
+    $analyticsProvider.virtualPageviews(true);
+  }
+
+  // Configure sentry.
+  if (INJECTED_CONFIG && INJECTED_CONFIG.SENTRY_PUBLIC_DSN) {
+    $provide.decorator("$exceptionHandler", function($delegate) {
+      return function(ex, cause) {
+        $delegate(ex, cause);
+        Raven.captureException(ex, {extra: {cause: cause}});
+      };
+    });
+  }
+}

static/js/quay-pages.module.ts

@@ -1,28 +1,13 @@
-import * as angular from 'angular';
-import { rpHeaderDirective, rpBodyDirective, rpSidebarDirective } from './directives/components/pages/repo-page/main';
 import { PageServiceImpl } from './services/page/page.service.impl';
-import { NgModule } from 'angular-ts-decorators';
+import { rpHeaderDirective, rpBodyDirective, rpSidebarDirective } from './directives/components/pages/repo-page/main';
+import * as angular from 'angular';
 
 
 /**
- * Module containing registered application page/view components.
+ * TODO: Needed for non-TypeScript components/services to register themselves. Remove once they are migrated.
  */
-@NgModule({
+export const QuayPagesModule: ng.IModule = angular.module('quayPages', [])
-  imports: [],
-  declarations: [],
-  providers: [
-    PageServiceImpl,
-  ]
-})
-export class quayPages {
-
-}
-
-
-// TODO: Move component registration to @NgModule and remove this.
-angular
-  .module(quayPages.name)
   .constant('pages', new PageServiceImpl())
   .directive('rpHeader', rpHeaderDirective)
   .directive('rpSidebar', rpSidebarDirective)
-  .directive('rpBody', rpBodyDirective);
+  .directive('rpBody', rpBodyDirective);

static/js/quay-routes.module.ts

@@ -2,9 +2,9 @@ import { RouteBuilderImpl } from './services/route-builder/route-builder.service
 import { RouteBuilder } from './services/route-builder/route-builder.service';
 import { PageService } from './services/page/page.service';
 import * as ng from '@types/angular';
-import { NgModule } from 'angular-ts-decorators';
+import { NgModule } from 'ng-metadata/core';
 import { INJECTED_FEATURES } from './constants/injected-values.constant';
-import { quayPages } from './quay-pages.module';
+import { QuayPagesModule } from './quay-pages.module';
 
 
 /**
@@ -12,138 +12,151 @@ import { quayPages } from './quay-pages.module';
  */
 @NgModule({
   imports: [
-    quayPages,
+    QuayPagesModule.name,
     'ngRoute',
   ],
   declarations: [],
-  providers: [],
+  providers: [
+    provideRoutes,
+  ],
 })
-export class QuayRoutes {
+export class QuayRoutesModule {
 
-  public config($routeProvider: ng.route.IRouteProvider,
+}
-                $locationProvider: ng.ILocationProvider,
+
-                pages: PageService): void {
+
-    $locationProvider.html5Mode(true);
+/**
-
+ * Provider function for setting up client-side routing.
-    // WARNING WARNING WARNING
+ * See https://hotell.gitbooks.io/ng-metadata/content/docs/recipes/startup-logic.html
-    // If you add a route here, you must add a corresponding route in thr endpoints/web.py
+ */
-    // index rule to make sure that deep links directly deep into the app continue to work.
+provideRoutes.$inject = [
-    // WARNING WARNING WARNING
+  '$routeProvider',
-
+  '$locationProvider',
-    var routeBuilder: RouteBuilder = new RouteBuilderImpl($routeProvider, pages.$get());
+  'pages',
-
+];
-    if (INJECTED_FEATURES.SUPER_USERS) {
+function provideRoutes($routeProvider: ng.route.IRouteProvider,
-      // QE Management
+                       $locationProvider: ng.ILocationProvider,
-      routeBuilder.route('/superuser/', 'superuser')
+                       pageServiceProvider: PageService): void {
-      // QE Setup
+  $locationProvider.html5Mode(true);
-        .route('/setup/', 'setup');
+
-    }
+  // WARNING WARNING WARNING
-
+  // If you add a route here, you must add a corresponding route in thr endpoints/web.py
-    routeBuilder
+  // index rule to make sure that deep links directly deep into the app continue to work.
-      // Application View
+  // WARNING WARNING WARNING
-      .route('/application/:namespace/:name', 'app-view')
+
-
+  const routeBuilder: RouteBuilder = new RouteBuilderImpl($routeProvider, pageServiceProvider.$get());
-      // Repo List
+
-      .route('/application/', 'app-list')
+  if (INJECTED_FEATURES.SUPER_USERS) {
-
+    // QE Management
-      // Repository View
+    routeBuilder.route('/superuser/', 'superuser')
-      .route('/repository/:namespace/:name', 'repo-view')
+    // QE Setup
-      .route('/repository/:namespace/:name/tag/:tag', 'repo-view')
+      .route('/setup/', 'setup');
-
+  }
-      // Image View
+
-      .route('/repository/:namespace/:name/image/:image', 'image-view')
+  routeBuilder
-
+    // Application View
-      // Repo Build View
+    .route('/application/:namespace/:name', 'app-view')
-      .route('/repository/:namespace/:name/build/:buildid', 'build-view')
+
-
+    // Repo List
-      // Repo Trigger View
+    .route('/application/', 'app-list')
-      .route('/repository/:namespace/:name/trigger/:triggerid', 'trigger-setup')
+
-
+    // Repository View
-      // Create repository notification
+    .route('/repository/:namespace/:name', 'repo-view')
-      .route('/repository/:namespace/:name/create-notification', 'create-repository-notification')
+    .route('/repository/:namespace/:name/tag/:tag', 'repo-view')
-
+
-      // Repo List
+    // Image View
-      .route('/repository/', 'repo-list')
+    .route('/repository/:namespace/:name/image/:image', 'image-view')
-
+
-      // Organizations
+    // Repo Build View
-      .route('/organizations/', 'organizations')
+    .route('/repository/:namespace/:name/build/:buildid', 'build-view')
-
+
-      // New Organization
+    // Repo Trigger View
-      .route('/organizations/new/', 'new-organization')
+    .route('/repository/:namespace/:name/trigger/:triggerid', 'trigger-setup')
-
+
-      // View Organization
+    // Create repository notification
-      .route('/organization/:orgname', 'org-view')
+    .route('/repository/:namespace/:name/create-notification', 'create-repository-notification')
-
+
-      // View Organization Team
+    // Repo List
-      .route('/organization/:orgname/teams/:teamname', 'team-view')
+    .route('/repository/', 'repo-list')
-
+
-      // Organization View Application
+    // Organizations
-      .route('/organization/:orgname/application/:clientid', 'manage-application')
+    .route('/organizations/', 'organizations')
-
+
-      // View Organization Billing
+    // New Organization
-      .route('/organization/:orgname/billing', 'billing')
+    .route('/organizations/new/', 'new-organization')
-
+
-      // View Organization Billing Invoices
+    // View Organization
-      .route('/organization/:orgname/billing/invoices', 'invoices')
+    .route('/organization/:orgname', 'org-view')
-
+
-      // View User
+    // View Organization Team
-      .route('/user/:username', 'user-view')
+    .route('/organization/:orgname/teams/:teamname', 'team-view')
-
+
-      // View User Billing
+    // Organization View Application
-      .route('/user/:username/billing', 'billing')
+    .route('/organization/:orgname/application/:clientid', 'manage-application')
-
+
-      // View User Billing Invoices
+    // View Organization Billing
-      .route('/user/:username/billing/invoices', 'invoices')
+    .route('/organization/:orgname/billing', 'billing')
-
+
-      // Sign In
+    // View Organization Billing Invoices
-      .route('/signin/', 'signin')
+    .route('/organization/:orgname/billing/invoices', 'invoices')
-
+
-      // New Repository
+    // View User
-      .route('/new/', 'new-repo')
+    .route('/user/:username', 'user-view')
-
+
-      // Plans
+    // View User Billing
-      .route('/plans/', 'plans')
+    .route('/user/:username/billing', 'billing')
-
+
-      // Tutorial
+    // View User Billing Invoices
-      .route('/tutorial/', 'tutorial')
+    .route('/user/:username/billing/invoices', 'invoices')
-
+
-      // Contact
+    // Sign In
-      .route('/contact/', 'contact')
+    .route('/signin/', 'signin')
-
+
-      // About
+    // New Repository
-      .route('/about/', 'about')
+    .route('/new/', 'new-repo')
-
+
-      // Security
+    // Plans
-      .route('/security/', 'security')
+    .route('/plans/', 'plans')
-
+
-      // TOS
+    // Tutorial
-      .route('/tos', 'tos')
+    .route('/tutorial/', 'tutorial')
-
+
-      // Privacy
+    // Contact
-      .route('/privacy', 'privacy')
+    .route('/contact/', 'contact')
-
+
-      // Change username
+    // About
-      .route('/updateuser', 'update-user')
+    .route('/about/', 'about')
-
+
-      // Landing Page
+    // Security
-      .route('/', 'landing')
+    .route('/security/', 'security')
-
+
-      // Tour
+    // TOS
-      .route('/tour/', 'tour')
+    .route('/tos', 'tos')
-      .route('/tour/features', 'tour')
+
-      .route('/tour/organizations', 'tour')
+    // Privacy
-      .route('/tour/enterprise', 'tour')
+    .route('/privacy', 'privacy')
-
+
-      // Confirm Invite
+    // Change username
-      .route('/confirminvite', 'confirm-invite')
+    .route('/updateuser', 'update-user')
-
+
-      // Public Repo Experiments
+    // Landing Page
-      .route('/__exp/publicRepo', 'public-repo-exp')
+    .route('/', 'landing')
-
+
-      // 404/403
+    // Tour
-      .route('/:catchall', 'error-view')
+    .route('/tour/', 'tour')
-      .route('/:catch/:all', 'error-view')
+    .route('/tour/features', 'tour')
-      .route('/:catch/:all/:things', 'error-view')
+    .route('/tour/organizations', 'tour')
-      .route('/:catch/:all/:things/:here', 'error-view');
+    .route('/tour/enterprise', 'tour')
-  }
+
+    // Confirm Invite
+    .route('/confirminvite', 'confirm-invite')
+
+    // Public Repo Experiments
+    .route('/__exp/publicRepo', 'public-repo-exp')
+
+    // 404/403
+    .route('/:catchall', 'error-view')
+    .route('/:catch/:all', 'error-view')
+    .route('/:catch/:all/:things', 'error-view')
+    .route('/:catch/:all/:things/:here', 'error-view');
 }

static/js/quay-run.module.ts

@@ -1,179 +0,0 @@
-import { NgModule } from 'angular-ts-decorators';
-import { INJECTED_CONFIG, INJECTED_FEATURES, INJECTED_ENDPOINTS } from "./constants/injected-values.constant";
-import { NAME_PATTERNS } from "./constants/name-patterns.constant";
-import * as angular from 'angular';
-
-
-var quayDependencies: any[] = [
-  'chieffancypants.loadingBar',
-  'cfp.hotkeys',
-  'angular-tour',
-  'restangular',
-  'angularMoment',
-  'mgcrea.ngStrap',
-  'ngCookies',
-  'ngSanitize',
-  'angular-md5',
-  'pasvaz.bindonce',
-  'ansiToHtml',
-  'core-ui',
-  'core-config-setup',
-  'infinite-scroll',
-  'react'
-];
-
-if (INJECTED_CONFIG && (INJECTED_CONFIG.MIXPANEL_KEY ||
-  INJECTED_CONFIG.MUNCHKIN_KEY ||
-  INJECTED_CONFIG.GOOGLE_ANALYTICS_KEY)) {
-  quayDependencies.push('angulartics');
-}
-if (INJECTED_CONFIG && INJECTED_CONFIG.MIXPANEL_KEY) {
-  quayDependencies.push('angulartics.mixpanel');
-}
-if (INJECTED_CONFIG && INJECTED_CONFIG.MUNCHKIN_KEY) {
-  quayDependencies.push('angulartics.marketo');
-}
-if (INJECTED_CONFIG && INJECTED_CONFIG.GOOGLE_ANALYTICS_KEY) {
-  quayDependencies.push('angulartics.google.analytics');
-}
-if (INJECTED_CONFIG && INJECTED_CONFIG.RECAPTCHA_SITE_KEY) {
-  quayDependencies.push('vcRecaptcha');
-}
-
-
-/**
- * Module for application-wide configuration.
- */
-@NgModule({
-  imports: quayDependencies,
-  declarations: [],
-  providers: []
-})
-export class QuayRun {
-
-  public run($rootScope: QuayRunScope,
-             Restangular: any,
-             PlanService: any,
-             $http: ng.IHttpService,
-             CookieService: any,
-             Features: any,
-             $anchorScroll: ng.IAnchorScrollService,
-             MetaService: any,
-             INJECTED_CONFIG: any): void {
-    var defaultTitle = INJECTED_CONFIG['REGISTRY_TITLE'] || 'Quay Container Registry';
-
-    // Handle session security.
-    Restangular.setDefaultRequestParams(['post', 'put', 'remove', 'delete'],
-      {'_csrf_token': (<any>window).__token || ''});
-
-    // Handle session expiration.
-    Restangular.setErrorInterceptor(function(response) {
-      if (response !== undefined && response.status == 503) {
-        (<any>$('#cannotContactService')).modal({});
-        return false;
-      }
-
-      if (response !== undefined && response.status == 500) {
-        window.location.href = '/500';
-        return false;
-      }
-
-      if (response !== undefined && !response.data) {
-        return true;
-      }
-
-      var invalid_token = response.data['title'] == 'invalid_token' || response.data['error_type'] == 'invalid_token';
-      if (response !== undefined && response.status == 401 &&
-        invalid_token &&
-        response.data['session_required'] !== false) {
-        (<any>$('#sessionexpiredModal')).modal({});
-        return false;
-      }
-
-      return true;
-    });
-
-    // Check if we need to redirect based on a previously chosen plan.
-    var result = PlanService.handleNotedPlan();
-
-    // Check to see if we need to show a redirection page.
-    var redirectUrl = CookieService.get('quay.redirectAfterLoad');
-    CookieService.clear('quay.redirectAfterLoad');
-
-    if (!result && redirectUrl && redirectUrl.indexOf((<any>window).location.href) == 0) {
-      (<any>window).location = redirectUrl;
-      return;
-    }
-
-    $rootScope.$watch('description', function(description: string) {
-      if (!description) {
-        description = `Hosted private docker repositories. Includes full user management and history. 
-                     Free for public repositories.`;
-      }
-
-      // Note: We set the content of the description tag manually here rather than using Angular binding
-      // because we need the <meta> tag to have a default description that is not of the form "{{ description }}",
-      // we read by tools that do not properly invoke the Angular code.
-      $('#descriptionTag').attr('content', description);
-    });
-
-    // Listen for scope changes and update the title and description accordingly.
-    $rootScope.$watch(function() {
-      var title = MetaService.getTitle($rootScope.currentPage) || defaultTitle;
-      $rootScope.title = title;
-
-      var description = MetaService.getDescription($rootScope.currentPage) || '';
-      if ($rootScope.description != description) {
-        $rootScope.description = description;
-      }
-    });
-
-    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
-      $rootScope.current = current.$$route;
-      $rootScope.currentPage = current;
-      $rootScope.pageClass = '';
-
-      if (!current.$$route) { return; }
-
-      var pageClass = current.$$route.pageClass || '';
-      if (typeof pageClass != 'string') {
-        pageClass = pageClass(Features);
-      }
-
-      $rootScope.pageClass = pageClass;
-      $rootScope.newLayout = !!current.$$route.newLayout;
-      $rootScope.fixFooter = !!current.$$route.fixFooter;
-
-      $anchorScroll();
-    });
-
-    var initallyChecked: boolean = false;
-    (<any>window).__isLoading = function() {
-      if (!initallyChecked) {
-        initallyChecked = true;
-        return true;
-      }
-      return $http.pendingRequests.length > 0;
-    };
-  }
-}
-
-
-interface QuayRunScope extends ng.IRootScopeService {
-  currentPage: any;
-  current: any;
-  title: any;
-  description: string,
-  pageClass: any;
-  newLayout: any;
-  fixFooter: any;
-}
-
-
-// TODO: Make injected values into services and move to NgModule.providers, as constants are not supported in Angular 2
-angular
-  .module(QuayRun.name)
-  .constant('NAME_PATTERNS', NAME_PATTERNS)
-  .constant('INJECTED_CONFIG', INJECTED_CONFIG)
-  .constant('INJECTED_FEATURES', INJECTED_FEATURES)
-  .constant('INJECTED_ENDPOINTS', INJECTED_ENDPOINTS);

static/js/quay-run.ts

@@ -0,0 +1,133 @@
+import { INJECTED_CONFIG } from "./constants/injected-values.constant";
+
+
+/**
+ * Provider function for the application runtime configuration.
+ * See https://hotell.gitbooks.io/ng-metadata/content/docs/recipes/startup-logic.html
+ */
+provideRun.$inject = [
+  '$rootScope',
+  'Restangular',
+  'PlanService',
+  '$http',
+  'CookieService',
+  'Features',
+  '$anchorScroll',
+  'MetaService',
+];
+export function provideRun($rootScope: QuayRunScope,
+                           Restangular: any,
+                           PlanService: any,
+                           $http: ng.IHttpService,
+                           CookieService: any,
+                           Features: any,
+                           $anchorScroll: ng.IAnchorScrollService,
+                           MetaService: any): void {
+  const defaultTitle: string = INJECTED_CONFIG['REGISTRY_TITLE'] || 'Quay Container Registry';
+
+  // Handle session security.
+  Restangular.setDefaultRequestParams(['post', 'put', 'remove', 'delete'],
+    {'_csrf_token': (<any>window).__token || ''});
+
+  // Handle session expiration.
+  Restangular.setErrorInterceptor(function(response) {
+    if (response !== undefined && response.status == 503) {
+      (<any>$('#cannotContactService')).modal({});
+      return false;
+    }
+
+    if (response !== undefined && response.status == 500) {
+      window.location.href = '/500';
+      return false;
+    }
+
+    if (response !== undefined && !response.data) {
+      return true;
+    }
+
+    const invalid_token: boolean = response.data['title'] == 'invalid_token' || response.data['error_type'] == 'invalid_token';
+    if (response !== undefined &&
+        response.status == 401 &&
+        invalid_token &&
+        response.data['session_required'] !== false) {
+      (<any>$('#sessionexpiredModal')).modal({});
+      return false;
+    }
+
+    return true;
+  });
+
+  // Check if we need to redirect based on a previously chosen plan.
+  const result: boolean = PlanService.handleNotedPlan();
+
+  // Check to see if we need to show a redirection page.
+  const redirectUrl: string = CookieService.get('quay.redirectAfterLoad');
+  CookieService.clear('quay.redirectAfterLoad');
+
+  if (!result && redirectUrl && redirectUrl.indexOf((<any>window).location.href) == 0) {
+    (<any>window).location = redirectUrl;
+    return;
+  }
+
+  $rootScope.$watch('description', function(description: string) {
+    if (!description) {
+      description = `Hosted private docker repositories. Includes full user management and history. 
+                     Free for public repositories.`;
+    }
+
+    // Note: We set the content of the description tag manually here rather than using Angular binding
+    // because we need the <meta> tag to have a default description that is not of the form "{{ description }}",
+    // we read by tools that do not properly invoke the Angular code.
+    $('#descriptionTag').attr('content', description);
+  });
+
+  // Listen for scope changes and update the title and description accordingly.
+  $rootScope.$watch(function() {
+    const title: string = MetaService.getTitle($rootScope.currentPage) || defaultTitle;
+    $rootScope.title = title;
+
+    const description: string = MetaService.getDescription($rootScope.currentPage) || '';
+    if ($rootScope.description != description) {
+      $rootScope.description = description;
+    }
+  });
+
+  $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
+    $rootScope.current = current.$$route;
+    $rootScope.currentPage = current;
+    $rootScope.pageClass = '';
+
+    if (!current.$$route) { return; }
+
+    var pageClass: string | Function = current.$$route.pageClass || '';
+    if (typeof pageClass != 'string') {
+      pageClass = pageClass(Features);
+    }
+
+    $rootScope.pageClass = pageClass;
+    $rootScope.newLayout = !!current.$$route.newLayout;
+    $rootScope.fixFooter = !!current.$$route.fixFooter;
+
+    $anchorScroll();
+  });
+
+  var initallyChecked: boolean = false;
+  (<any>window).__isLoading = function() {
+    if (!initallyChecked) {
+      initallyChecked = true;
+      return true;
+    }
+    return $http.pendingRequests.length > 0;
+  };
+}
+
+
+interface QuayRunScope extends ng.IRootScopeService {
+  currentPage: any;
+  current: any;
+  title: any;
+  description: string,
+  pageClass: any;
+  newLayout: any;
+  fixFooter: any;
+}

static/js/quay.module.ts

@@ -1,28 +1,24 @@
-import * as angular from "angular";
-import 'core-js';
 import { ViewArrayImpl } from "./services/view-array/view-array.impl";
-import { NAME_PATTERNS } from "./constants/name-patterns.constant";
-import { INJECTED_CONFIG, INJECTED_FEATURES, INJECTED_ENDPOINTS } from "./constants/injected-values.constant";
 import { RegexMatchViewComponent } from "./directives/ui/regex-match-view/regex-match-view.component";
-import { NgModule } from "angular-ts-decorators";
+import { NgModule } from 'ng-metadata/core';
-import { QuayRoutes } from "./quay-routes.module";
+import { QuayRoutesModule } from "./quay-routes.module";
 import { DockerfilePathSelectComponent } from './directives/ui/dockerfile-path-select/dockerfile-path-select.component';
 import { ContextPathSelectComponent } from './directives/ui/context-path-select/context-path-select.component';
 import { ManageTriggerCustomGitComponent } from './directives/ui/manage-trigger-custom-git/manage-trigger-custom-git.component';
 import { ManageTriggerGithostComponent } from './directives/ui/manage-trigger-githost/manage-trigger-githost.component';
 import { LinearWorkflowComponent } from './directives/ui/linear-workflow/linear-workflow.component';
 import { LinearWorkflowSectionComponent } from './directives/ui/linear-workflow/linear-workflow-section.component';
+import { QuayConfigModule } from './quay-config.module';
 import { AppPublicViewComponent } from './directives/ui/app-public-view/app-public-view.component';
 import { VisibilityIndicatorComponent } from './directives/ui/visibility-indicator/visibility-indicator.component';
 import { CorTableComponent } from './directives/ui/cor-table/cor-table.component';
 import { CorTableColumn } from './directives/ui/cor-table/cor-table-col.component';
 import { ChannelIconComponent } from './directives/ui/channel-icon/channel-icon.component';
-import { QuayConfig } from './quay-config.module';
-import { QuayRun } from './quay-run.module';
 import { BuildServiceImpl } from './services/build/build.service.impl';
 import { AvatarServiceImpl } from './services/avatar/avatar.service.impl';
 import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl';
 import { DataFileServiceImpl } from './services/datafile/datafile.service.impl';
+import { UtilServiceImpl } from './services/util/util.service.impl';
 
 
 /**
@@ -30,9 +26,8 @@ import { DataFileServiceImpl } from './services/datafile/datafile.service.impl';
  */
 @NgModule({
   imports: [
-    QuayRoutes,
+    QuayRoutesModule,
-    QuayConfig,
+    QuayConfigModule,
-    QuayRun,
   ],
   declarations: [
     RegexMatchViewComponent,
@@ -54,17 +49,10 @@ import { DataFileServiceImpl } from './services/datafile/datafile.service.impl';
     AvatarServiceImpl,
     DockerfileServiceImpl,
     DataFileServiceImpl,
+    UtilServiceImpl,
+    {provide: 'fileReaderFactory', useValue: () => () => new FileReader()},
   ],
 })
-export class quay {
+export class QuayModule {
 
 }
-
-// TODO: Make injected values into services and move to NgModule.providers, as constants are not supported in Angular 2
-angular
-  .module(quay.name)
-  .factory("fileReaderFactory", () => () => new FileReader())
-  .constant('NAME_PATTERNS', NAME_PATTERNS)
-  .constant('INJECTED_CONFIG', INJECTED_CONFIG)
-  .constant('INJECTED_FEATURES', INJECTED_FEATURES)
-  .constant('INJECTED_ENDPOINTS', INJECTED_ENDPOINTS);

static/js/services/avatar/avatar.service.impl.ts

@@ -1,5 +1,5 @@
 import { AvatarService } from './avatar.service';
-import { Injectable } from 'angular-ts-decorators';
+import { Injectable, Inject } from 'ng-metadata/core';
 
 
 @Injectable(AvatarService.name)
@@ -7,7 +7,8 @@ export class AvatarServiceImpl implements AvatarService {
 
   private cache: {[cacheKey: string]: string} = {};
 
-  constructor(private Config: any, private md5: any) {
+  constructor(@Inject('Config') private Config: any,
+              @Inject('md5') private md5: any) {
 
   }
 

static/js/services/build/build.service.impl.ts

@@ -1,5 +1,5 @@
 import { BuildService } from './build.service';
-import { Injectable } from 'angular-ts-decorators';
+import { Injectable } from 'ng-metadata/core';
 
 
 @Injectable(BuildService.name)

static/js/services/datafile/datafile.service.impl.ts

@@ -1,5 +1,5 @@
 import { DataFileService } from './datafile.service';
-import { Injectable } from 'angular-ts-decorators';
+import { Injectable, Inject } from 'ng-metadata/core';
 declare const JSZip: (buf: any) => void;
 declare const Zlib: any;
 declare const Untar: (uint8Array: Uint8Array) => void;
@@ -8,7 +8,7 @@ declare const Untar: (uint8Array: Uint8Array) => void;
 @Injectable(DataFileService.name)
 export class DataFileServiceImpl implements DataFileService {
 
-  constructor(private fileReaderFactory: () => FileReader) {
+  constructor(@Inject('fileReaderFactory') private fileReaderFactory: () => FileReader) {
 
   }
 

static/js/services/dockerfile/dockerfile.service.impl.ts

@@ -1,14 +1,14 @@
 import { DockerfileService, DockerfileInfo } from './dockerfile.service';
-import { Injectable } from 'angular-ts-decorators';
+import { Injectable, Inject } from 'ng-metadata/core';
 import { DataFileService } from '../datafile/datafile.service';
 
 
 @Injectable(DockerfileService.name)
 export class DockerfileServiceImpl implements DockerfileService {
 
-  constructor(private DataFileService: DataFileService,
+  constructor(@Inject(DataFileService.name) private DataFileService: DataFileService,
-              private Config: any,
+              @Inject('Config') private Config: any,
-              private fileReaderFactory: () => FileReader) {
+              @Inject('fileReaderFactory') private fileReaderFactory: () => FileReader) {
 
   }
 

static/js/services/page/page.service.impl.ts

@@ -1,4 +1,4 @@
-import { Injectable } from 'angular-ts-decorators';
+import { Injectable } from 'ng-metadata/core';
 import { PageService } from './page.service';
 
 

static/js/services/route-builder/route-builder.service.impl.ts

@@ -1,6 +1,9 @@
 import { RouteBuilder } from './route-builder.service';
+import { Injectable, Inject } from 'ng-metadata/core';
+import { PageService } from '../page/page.service';
 
 
+@Injectable(RouteBuilder.name)
 export class RouteBuilderImpl implements RouteBuilder {
 
   public currentProfile: string = 'layout';
@@ -12,7 +15,8 @@ export class RouteBuilderImpl implements RouteBuilder {
   ];
 
 
-  constructor(private routeProvider: ng.route.IRouteProvider, private pages: any) {
+  constructor(@Inject('routeProvider') private routeProvider: ng.route.IRouteProvider,
+              @Inject('pages') private pages: PageService) {
     for (let i = 0; i < this.profiles.length; ++i) {
       if (this.profiles[i].id == this.currentProfile) {
         this.profiles = this.profiles.slice(i);

static/js/services/route-builder/route-builder.service.spec.ts

@@ -1,4 +1,5 @@
 import { RouteBuilderImpl } from './route-builder.service.impl';
+import { PageService } from '../page/page.service';
 
 
 describe("Service: RouteBuilderImpl", () => {

static/js/services/util/util.service.impl.spec.ts

@@ -0,0 +1,40 @@
+import { UtilServiceImpl } from './util.service.impl';
+
+
+describe("UtilServiceImpl", () => {
+  var utilServiceImpl: UtilServiceImpl;
+  var $sanitizeMock: ng.sanitize.ISanitizeService;
+
+  beforeEach(() => {
+    $sanitizeMock = jasmine.createSpy('$sanitizeSpy').and.returnValue("");
+    utilServiceImpl = new UtilServiceImpl($sanitizeMock);
+  });
+
+  describe("isAdBlockEnabled", () => {
+    // TODO
+  });
+
+  describe("isEmailAddress", () => {
+    // TODO
+  });
+
+  describe("getMarkedDown", () => {
+    // TODO
+  });
+
+  describe("getFirstMarkdownLineAsText", () => {
+    // TODO
+  });
+
+  describe("escapeHtmlString", () => {
+    // TODO
+  });
+
+  describe("getRestUrl", () => {
+    // TODO
+  });
+
+  describe("textToSafeHtml", () => {
+    // TODO
+  });
+});

static/js/services/util/util.service.impl.ts

@@ -0,0 +1,39 @@
+import { Injectable, Inject } from 'ng-metadata/core';
+import { UtilService } from './util.service';
+
+
+@Injectable(UtilService.name)
+export class UtilServiceImpl implements UtilService {
+
+  constructor(@Inject('$sanitize') private $sanitize: ng.sanitize.ISanitizeService) {
+
+  }
+
+  public isAdBlockEnabled(callback: (isEnabled: boolean) => void): void {
+
+  }
+
+  public isEmailAddress(str: string): boolean {
+    return null;
+  }
+
+  public getMarkedDown(str: string): string {
+    return null;
+  }
+
+  public getFirstMarkdownLineAsText(commentString: string, placeholderNeeded: boolean): string {
+    return null;
+  }
+
+  public escapeHtmlString(text: string): string {
+    return null;
+  }
+
+  public getRestUrl(args: any[]): string {
+    return null;
+  }
+
+  public textToSafeHtml(text: string): string {
+    return null;
+  }
+}

static/js/services/util/util.service.ts

@@ -0,0 +1,19 @@
+/**
+ * Service which exposes various utility methods.
+ */
+export abstract class UtilService {
+
+  public abstract isAdBlockEnabled(callback: (isEnabled: boolean) => void): void;
+
+  public abstract isEmailAddress(str: string): boolean;
+
+  public abstract getMarkedDown(str: string): string;
+
+  public abstract getFirstMarkdownLineAsText(commentString: string, placeholderNeeded: boolean): string;
+
+  public abstract escapeHtmlString(text: string): string;
+
+  public abstract getRestUrl(args: any[]): string;
+
+  public abstract textToSafeHtml(text: string): string;
+}

static/js/services/view-array/view-array.impl.ts

@@ -1,6 +1,5 @@
 import { ViewArray } from './view-array';
-import { Inject } from '../../decorators/inject/inject.decorator';
+import { Injectable, Inject } from 'ng-metadata/core';
-import { Injectable } from 'angular-ts-decorators';
 
 
 @Injectable(ViewArray.name)
@@ -15,7 +14,7 @@ export class ViewArrayImpl implements ViewArray {
   private currentIndex: number;
   private additionalCount: number = 20;
 
-  constructor(@Inject('$interval') private interval: any) {
+  constructor(@Inject('$interval') private $interval: ng.IIntervalService) {
     this.isVisible = false;
     this.visibleEntries = null;
     this.hasEntries = false;
@@ -62,7 +61,7 @@ export class ViewArrayImpl implements ViewArray {
   }
 
   public create(): ViewArrayImpl {
-    return new ViewArrayImpl(this.interval);
+    return new ViewArrayImpl(this.$interval);
   }
 
   private showAdditionalEntries(): void {
@@ -83,14 +82,14 @@ export class ViewArrayImpl implements ViewArray {
       return;
     }
 
-    this.timerRef = this.interval(() => {
+    this.timerRef = this.$interval(() => {
       this.showAdditionalEntries();
     }, 10);
   }
 
   private stopTimer(): void {
     if (this.timerRef) {
-      this.interval.cancel(this.timerRef);
+      this.$interval.cancel(this.timerRef);
       this.timerRef = null;
     }
   }

static/partials/trigger-setup.html

@@ -46,7 +46,7 @@
           <div ng-switch-when="custom-git">
             <manage-trigger-custom-git
               trigger="trigger"
-              activate-trigger="activateTrigger(config, pull_robot)"></manage-trigger-custom-git>
+              (activate-trigger)="activateTrigger($event)"></manage-trigger-custom-git>
           </div> <!-- /custom-git -->
 
           <!-- Hosted Git (GitHub, Gitlab, BitBucket) -->
@@ -54,7 +54,7 @@
             <manage-trigger-githost
                  trigger="trigger"
                  repository="repository"
-                 activate-trigger="activateTrigger(config, pull_robot)"></manage-trigger-githost>
+                 (activate-trigger)="activateTrigger($event)"></manage-trigger-githost>
           </div> <!-- /hosted -->
         </div>  <!-- /ngSwitch -->
 

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "commonjs",
     "outDir": "./build/",
     "target": "es5",
+    "lib": ["es2017", "dom"],
     "experimentalDecorators": true,
     "sourceMap": true,
     "paths": {

webpack.config.js

@@ -2,7 +2,7 @@ var webpack = require('webpack');
 var path = require("path");
 
 var config = {
-  entry: "./static/js/quay.module.ts",
+  entry: "./static/js/main.ts",
   output: {
     path: path.resolve(__dirname, "static/build"),
     filename: "bundle.js"

yarn.lock

@@ -26,6 +26,10 @@
   dependencies:
     "@types/jquery" "*"
 
+"@types/core-js@^0.9.39":
+  version "0.9.39"
+  resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.39.tgz#9b3d9869c2b7de02d372d32d6c6d9f5db3178c65"
+
 "@types/es6-shim@^0.31.32":
   version "0.31.32"
   resolved "https://registry.yarnpkg.com/@types/es6-shim/-/es6-shim-0.31.32.tgz#8196c09e1e40ac977c713bf258090989f501d8ff"
@@ -2473,6 +2477,10 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+ng-metadata@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/ng-metadata/-/ng-metadata-4.0.1.tgz#c367018ac9e5c214c57b987e82940a30fd4b9c67"
+
 node-fetch@^1.0.1:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
@@ -3488,6 +3496,12 @@ ripemd160@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
 
+rxjs@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.2.0.tgz#db537de8767c05fa73721587a29e0085307d318b"
+  dependencies:
+    symbol-observable "^1.0.1"
+
 sass-graph@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.1.2.tgz#965104be23e8103cb7e5f710df65935b317da57b"
@@ -3780,6 +3794,10 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
+symbol-observable@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
 tapable@^0.1.8:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"