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

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,
-  require: {
-    parent: '^^linearWorkflow'
+  legacy: {
+    transclude: true
   }
 })
-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);
-      currentSection = new LinearWorkflowSectionComponent;
+      component.onWorkflowComplete = jasmine.createSpyObj("onWorkflowCompleteSpy", ['emit']);
+      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(),
-        new LinearWorkflowSectionComponent(),
+        new LinearWorkflowSectionComponent(component),
+        new LinearWorkflowSectionComponent(component),
+        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;