From 4b52f70ee45d2921972cada4573f4bd8ec7897dc Mon Sep 17 00:00:00 2001
From: Adam Gordon <adam@gordonizer.com>
Date: Fri, 17 Mar 2017 10:24:16 -0700
Subject: [PATCH] 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                     |  5 ++-
 .../modules/core/help/helpField.component.ts  | 37 ++++++++++++++++++-
 app/scripts/modules/core/help/index.ts        |  7 ++++
 app/scripts/modules/core/index.ts             |  9 ++++-
 app/scripts/modules/index.ts                  | 10 ++++-
 tslint.json                                   |  2 +-
 6 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 app/scripts/modules/core/help/index.ts

diff --git a/app/scripts/app.module.ts b/app/scripts/app.module.ts
index bd6e57e52a1..33c19b6cbff 100644
--- a/app/scripts/app.module.ts
+++ b/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
diff --git a/app/scripts/modules/core/help/helpField.component.ts b/app/scripts/modules/core/help/helpField.component.ts
index c68d9636b74..f98c6a16373 100644
--- a/app/scripts/modules/core/help/helpField.component.ts
+++ b/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);
+  }
+}
diff --git a/app/scripts/modules/core/help/index.ts b/app/scripts/modules/core/help/index.ts
new file mode 100644
index 00000000000..1e2c3b7c673
--- /dev/null
+++ b/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
+];
diff --git a/app/scripts/modules/core/index.ts b/app/scripts/modules/core/index.ts
index ea9b414bd7b..6a5dda47709 100644
--- a/app/scripts/modules/core/index.ts
+++ b/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
+];
diff --git a/app/scripts/modules/index.ts b/app/scripts/modules/index.ts
index 01a6083a0c9..cd276316f67 100644
--- a/app/scripts/modules/index.ts
+++ b/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
 ];
diff --git a/tslint.json b/tslint.json
index 2536f5c80d0..a0fc2683573 100644
--- a/tslint.json
+++ b/tslint.json
@@ -97,7 +97,7 @@
       "check-type"
     ],
     "directive-selector": [
-      true,
+      false,
       "attribute",
       "deck",
       "camelCase"