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/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) {
-      this.updateDescription = this.updateDescription.bind(this);
+  constructor(@Inject('Config') private Config: any) {
+    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;
-      if (tab == 'settings') {
-          this.settingsShown++;
-      }
+    this.currentTab = tab;
+    if (tab == 'settings') {
+      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,
-  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;

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,
-              private TableService: any,
-              private TriggerService: any,
-              private RolesService: any,
-              private $scope: ng.IScope) {
+  constructor(@Inject('ApiService') private ApiService: any,
+              @Inject('TableService') private TableService: any,
+              @Inject('TriggerService') private TriggerService: any,
+              @Inject('RolesService') private RolesService: any,
+              @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() {