chore(core/help): make help field work in ng2

* add code to make the help field component work in ng2 components.
* create framework for wiring in upgraded ng1 components.

app/scripts/app.module.ts

@@ -3,7 +3,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {UpgradeModule, downgradeInjectable, downgradeComponent} from '@angular/upgrade/static';
 declare let angular: any;
 
-import {SPINNAKER_DOWNGRADES, SPINNAKER_COMPONENT_DOWNGRADES} from './modules';
+import {SPINNAKER_DOWNGRADES, SPINNAKER_COMPONENT_DOWNGRADES, SPINNAKER_DIRECTIVE_UPGRADES} from './modules';
 
 const providers: Type<any>[] = [];
 export const DOWNGRADED_MODULE_NAMES: string[] = [];
@@ -39,7 +39,8 @@ SPINNAKER_COMPONENT_DOWNGRADES.forEach((item) => {
     UpgradeModule
   ],
   declarations: [
-    ...declarations
+    ...declarations,
+    ...SPINNAKER_DIRECTIVE_UPGRADES
   ],
   entryComponents: [
     ...declarations

app/scripts/modules/core/help/helpField.component.ts

@@ -1,3 +1,5 @@
+import {Directive, ElementRef, Injector, Input} from '@angular/core';
+import {UpgradeComponent} from '@angular/upgrade/static';
 import {module} from 'angular';
 
 import {HELP_CONTENTS_REGISTRY, HelpContentsRegistry} from './helpContents.registry';
@@ -22,7 +24,9 @@ class HelpFieldCtrl implements ng.IComponentController {
   private popoverShownStart: number;
   private popoverClose: ng.IPromise<void>;
 
-  static get $inject() { return ['$timeout', '$analytics', 'helpContents', 'helpContentsRegistry']; }
+  static get $inject() {
+    return ['$timeout', '$analytics', 'helpContents', 'helpContentsRegistry'];
+  }
 
   constructor(private $timeout: ng.ITimeoutService,
               private $analytics: any,
@@ -120,9 +124,38 @@ class HelpFieldComponent implements ng.IComponentOptions {
   `;
 }
 
+const selector = 'helpField';
 export const HELP_FIELD_COMPONENT = 'spinnaker.core.help.helpField.component';
 module(HELP_FIELD_COMPONENT, [
   HELP_CONTENTS_REGISTRY,
   require('./helpContents'),
   require('angulartics'),
-]).component('helpField', new HelpFieldComponent());
+]).component(selector, new HelpFieldComponent());
+
+@Directive({
+  selector: 'help-field'
+})
+export class HelpFieldComponentDirective extends UpgradeComponent {
+
+  @Input()
+  public key: string;
+
+  @Input()
+  public fallback: string;
+
+  @Input()
+  public content: string;
+
+  @Input()
+  public placement: string;
+
+  @Input()
+  public expand: boolean;
+
+  @Input()
+  public label: string;
+
+  constructor(elementRef: ElementRef, injector: Injector) {
+    super(selector, elementRef, injector);
+  }
+}

app/scripts/modules/core/help/index.ts

@@ -0,0 +1,7 @@
+import {Type} from '@angular/core';
+
+import {HelpFieldComponentDirective} from './helpField.component';
+
+export const HELP_DIRECTIVE_UPGRADES: Type<any>[] = [
+  HelpFieldComponentDirective
+];

app/scripts/modules/core/index.ts

@@ -1,7 +1,10 @@
+import {Type} from '@angular/core';
+
 import {IDowngradeItem} from 'core/domain/IDowngradeItem';
 import {AUTHENTICATION_MODULE_DOWNGRADES} from './authentication';
-import {UPGRADE_MODULE_DOWNGRADES} from './upgrade';
+import {HELP_DIRECTIVE_UPGRADES} from './help';
 import {MODAL_COMPONENT_MODULE_DOWNGRADES} from './modal';
+import {UPGRADE_MODULE_DOWNGRADES} from './upgrade';
 
 export const CORE_MODULE_DOWNGRADES: IDowngradeItem[] = [
   ...AUTHENTICATION_MODULE_DOWNGRADES,
@@ -11,3 +14,7 @@ export const CORE_MODULE_DOWNGRADES: IDowngradeItem[] = [
 export const CORE_COMPONENT_MODULE_DOWNGRADES: IDowngradeItem[] = [
   ...MODAL_COMPONENT_MODULE_DOWNGRADES
 ];
+
+export const CORE_DIRECTIVE_UPGRADES: Type<any>[] = [
+  ...HELP_DIRECTIVE_UPGRADES
+];

app/scripts/modules/index.ts

@@ -1,10 +1,16 @@
+import {Type} from '@angular/core';
+
 import {IDowngradeItem} from 'core/domain/IDowngradeItem';
-import {CORE_MODULE_DOWNGRADES, CORE_COMPONENT_MODULE_DOWNGRADES} from './core';
+import {CORE_MODULE_DOWNGRADES, CORE_COMPONENT_MODULE_DOWNGRADES, CORE_DIRECTIVE_UPGRADES} from './core';
 
 export const SPINNAKER_DOWNGRADES: IDowngradeItem[] = [
   ...CORE_MODULE_DOWNGRADES
 ];
 
 export const SPINNAKER_COMPONENT_DOWNGRADES: IDowngradeItem[] = [
-  ...CORE_COMPONENT_MODULE_DOWNGRADES
+  ...CORE_COMPONENT_MODULE_DOWNGRADES,
+];
+
+export const SPINNAKER_DIRECTIVE_UPGRADES: Type<any>[] = [
+  ...CORE_DIRECTIVE_UPGRADES
 ];

tslint.json

@@ -97,7 +97,7 @@
       "check-type"
     ],
     "directive-selector": [
-      true,
+      false,
       "attribute",
       "deck",
       "camelCase"