Addressing more PR comments

app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx

@@ -16,6 +16,7 @@ import {
 import { BasicFieldLayout, TextArea, ReactModal } from 'core/presentation';
 import { NgReact } from 'core/reactShims/ngReact';
 import { EntityRefBuilder } from './entityRef.builder';
+import { noop } from 'core/utils';
 
 import './entityTagEditor.modal.less';
 import { Form } from 'formsy-react';
@@ -52,9 +53,9 @@ export interface IEntityTagEditorState {
 
 @autoBindMethods
 export class EntityTagEditor extends React.Component<IEntityTagEditorProps, IEntityTagEditorState> {
-  public static defaultProps = {
-    onHide: () => null as any,
-    onUpdate: () => null as any,
+  public static defaultProps: Partial<IEntityTagEditorProps> = {
+    onHide: noop,
+    onUpdate: noop,
   };
 
   private taskMonitorBuilder: TaskMonitorBuilder = ReactInjector.taskMonitorBuilder;
@@ -242,8 +243,8 @@ class EntityTagMessage extends React.Component<IEntityTagMessageProps, {}> {
 
           <TextArea
             label="Message"
-            _help={<div>Markdown is okay <HelpField id="markdown.examples"/></div>}
-            layout={BasicFieldLayout}
+            Help={<div>Markdown is okay <HelpField id="markdown.examples"/></div>}
+            Layout={BasicFieldLayout}
             name="message"
             required={true}
             validationErrors={{ isDefaultRequiredValue: 'Please enter a message' }}
@@ -256,7 +257,7 @@ class EntityTagMessage extends React.Component<IEntityTagMessageProps, {}> {
           { message && (
             <div className="form-group preview">
               <div className="col-md-3 sm-label-right">
-                <b>Preview</b>
+                <strong>Preview</strong>
               </div>
               <div className="col-md-9">
                 <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked(message)) }}/>
@@ -278,7 +279,7 @@ interface IOwnerOptionsProps {
 }
 
 @autoBindMethods
-class OwnerOptions extends React.Component<IOwnerOptionsProps, any> {
+class OwnerOptions extends React.Component<IOwnerOptionsProps, void> {
   public handleOwnerOptionChanged(option: IOwnerOption): void {
     this.props.onOwnerOptionChanged(option);
   }

app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts

@@ -16,7 +16,7 @@ class AddEntityTagLinksCtrl implements ng.IComponentController {
   private ownerOptions: IOwnerOption[];
 
   public addTag(tagType: string): void {
-    const _tag: IEntityTag = {
+    const tag: IEntityTag = {
       name: null,
       value: {
         message: null,
@@ -25,7 +25,7 @@ class AddEntityTagLinksCtrl implements ng.IComponentController {
     };
 
     const props: IEntityTagEditorProps = {
-      tag: _tag,
+      tag: tag,
       isNew: true,
       owner: this.component,
       entityType: this.entityType,

app/scripts/modules/core/src/presentation/formsy/BasicFieldLayout.tsx

@@ -25,25 +25,25 @@ export class BasicFieldLayout extends React.Component<IFormFieldLayoutProps, {}>
   }
 
   public render() {
-    const { _label, _input, _help, _error, showRequired, showError } = this.props;
+    const { Label, Input, Help, Error, showRequired, showError } = this.props;
 
-    const renderedLabel = _label && <div className="col-md-3 sm-label-right"> {_label} </div>;
-    const renderedHelp = _help && <div className="small text-right"> {_help} </div>;
-    const renderedError = _error && <div className="ng-invalid"> {_error} </div>;
+    const LabelDiv = Label && <div className="col-md-3 sm-label-right"> {Label} </div>;
+    const HelpDiv = Help && <div className="small text-right"> {Help} </div>;
+    const ErrorDiv = Error && <div className="ng-invalid"> {Error} </div>;
 
-    const renderedInputGroup = _input && (
+    const InputGroup = Input && (
       <div className="col-md-9">
-        {_input}
-        {renderedHelp}
-        {renderedError}
+        {Input}
+        {HelpDiv}
+        {ErrorDiv}
       </div>
     );
 
     const className = `form-group ${showRequired || showError ? 'ng-invalid' : ''}`;
     return (
       <div className={className}>
-        {renderedLabel}
-        {renderedInputGroup}
+        {LabelDiv}
+        {InputGroup}
       </div>
     );
   }

app/scripts/modules/core/src/presentation/formsy/components/Input.tsx

@@ -8,10 +8,8 @@ export interface IProps extends IFormComponentProps {
   type: string;
 }
 
-export interface IState extends IFormComponentState { }
-
 /** A simple Formsy form component for validated <input> tags (text or checkbox) */
-export class Input extends FormComponent<string, IProps, IState> {
+export class Input extends FormComponent<string, IProps, IFormComponentState> {
   public handleValueChanged(value: any) {
     this.setValue(value);
   }

app/scripts/modules/core/src/presentation/formsy/components/TextArea.tsx

@@ -1,17 +1,19 @@
 import * as React from 'react';
-import { ChangeEvent, PropTypes } from 'react';
+import { ChangeEvent, PropTypes, ValidationMap } from 'react';
 import autoBindMethods from 'class-autobind-decorator';
+import { IFormsyContext } from 'formsy-react';
 
 import { FormComponent, IFormComponentProps, IFormComponentState } from '../FormComponent';
 import { IFormFieldLayoutProps } from 'core/presentation';
+import { noop } from 'core/utils';
 
 export interface IProps extends IFormComponentProps, React.HTMLAttributes<HTMLTextAreaElement> {
   /** A react class that will layout the label, input, help, and validation error components */
-  layout: React.ComponentClass<IFormFieldLayoutProps>;
+  Layout: React.ComponentClass<IFormFieldLayoutProps>;
   /** The label text for the textarea */
   label?: string;
   /** (optional) The help or usage rollover markup */
-  _help?: React.ReactElement<any>;
+  Help?: React.ReactElement<any>;
   /** The class string to place on the textarea */
   className?: string;
   /** A callback for when the textarea value changes */
@@ -20,18 +22,22 @@ export interface IProps extends IFormComponentProps, React.HTMLAttributes<HTMLTe
 
 export interface IState extends IFormComponentState { }
 
+export interface ITextAreaContext {
+  formsy: IFormsyContext;
+}
+
 /**
  * A Formsy form component that accepts a LayoutComponent
  */
 @autoBindMethods()
 export class TextArea extends FormComponent<string, IProps, IState> {
-  public static contextTypes = {
-    formsy: PropTypes.any
+  public static contextTypes: ValidationMap<ITextAreaContext> = {
+    formsy: PropTypes.object,
   };
 
-  public static defaultProps = {
+  public static defaultProps: Partial<IProps> = {
     name: null as any,
-    onChange: () => null as any,
+    onChange: noop,
     className: '',
   };
 
@@ -41,27 +47,27 @@ export class TextArea extends FormComponent<string, IProps, IState> {
   }
 
   public render() {
-    const { label, _help, layout, name, className, rows } = this.props;
+    const { label, Help, Layout, name, className, rows } = this.props;
 
-    const _label = label && <label htmlFor={name}>{label}</label>;
+    const Label = label && <label htmlFor={name}>{label}</label>;
 
     const isInvalid = this.showError() || this.showRequired();
     const isDirty = !this.isPristine();
     const inputClass = `form-control ${className} ${isInvalid ? 'ng-invalid' : ''} ${isDirty ? 'ng-dirty' : ''}`;
-    const _input = <textarea className={inputClass} rows={rows} name={name} onChange={this.changeValue} value={this.getValue()} />;
+    const Input = <textarea className={inputClass} rows={rows} name={name} onChange={this.changeValue} value={this.getValue()} />;
 
     const errorMessage = this.getErrorMessage();
-    const _error = errorMessage && isDirty && <span className="error-message">{errorMessage}</span>;
+    const Error = errorMessage && isDirty && <span className="error-message">{errorMessage}</span>;
 
-    const FormFieldLayout = layout;
+    const FormFieldLayout = Layout;
     return (
       <FormFieldLayout
         showRequired={this.showRequired()}
         showError={this.showError()}
-        _label={_label}
-        _input={_input}
-        _help={_help}
-        _error={_error}
+        Label={Label}
+        Input={Input}
+        Help={Help}
+        Error={Error}
       />
     );
   }

app/scripts/modules/core/src/presentation/formsy/formFieldLayout.ts

@@ -2,10 +2,10 @@ import { HTMLAttributes } from 'react';
 
 /** An interface which Formsy form field layouts should accept as props */
 export interface IFormFieldLayoutProps extends HTMLAttributes<any> {
-  _label?: React.ReactElement<any>;
-  _input?: React.ReactElement<any>;
-  _help?: React.ReactElement<any>;
-  _error?: React.ReactElement<any>;
+  Label?: React.ReactElement<any> | string;
+  Input?: React.ReactElement<any>;
+  Help?: React.ReactElement<any>;
+  Error?: React.ReactElement<any>;
   showRequired?: boolean;
   showError?: boolean;
 }

app/scripts/modules/core/src/presentation/formsy/formsy-react.d.ts

@@ -77,8 +77,15 @@ declare module 'formsy-react' {
     attachToForm(component: any): void;
     /** Method put on each input component to unregister itself from the form */
     detachFromForm(component: any): void;
+  }
 
-
+  interface IFormsyContext {
+    attachToForm: typeof Form.attachToForm;
+    detachFromForm: typeof Form.detachFromForm;
+    validate: typeof Form.validate;
+    isFormDisabled: typeof Form.isFormDisabled;
+    isValidValue(component: any, value?: any): boolean;
   }
+
   const Decorator: () => (target) => any;
 }

app/scripts/modules/core/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './stickyHeader/StickyContainer';
 export * from './timeFormatters';
 export * from './tsDecorators/directiveFactoryDecorator';
 export * from './uuid.service';
+export * from './noop';

app/scripts/modules/core/src/utils/noop.ts

@@ -0,0 +1,3 @@
+function noopFn() {}
+const noop = noopFn as any;
+export { noop }