From e96db46fbc654f7e505096e300ae51846cd59a88 Mon Sep 17 00:00:00 2001
From: Chris Thielen <christopherthielen@users.noreply.github.com>
Date: Fri, 19 May 2017 16:11:19 -0700
Subject: [PATCH] refactor(core/entityTag): Refactor Entity Tags to React
 (#3717)

- Introduce imperative React Modal API
- Introduce Formsy validation for React
- chore(travis): run yarn
---
 .../confirmationModal.service.ts              |   2 +
 .../core/src/entityTag/EntityTagEditor.tsx    | 342 ++++++++++++++++++
 .../entityTag/addEntityTagLinks.component.ts  |  56 ++-
 .../entityTag/clusterTargetBuilder.service.ts |   7 +-
 .../entityTag/entityTagDetails.component.less |   2 +-
 .../entityTag/entityTagEditor.controller.ts   |  69 ----
 .../src/entityTag/entityTagEditor.modal.html  |  61 ----
 .../src/entityTag/entityTagEditor.modal.less  |   4 +-
 .../src/entityTag/entityUiTags.component.ts   |  61 ++--
 .../modules/core/src/entityTag/index.ts       |   1 +
 .../modules/core/src/help/HelpField.tsx       |  92 ++++-
 .../modules/core/src/help/help.contents.ts    |   4 +
 app/scripts/modules/core/src/help/index.ts    |   3 +
 .../modules/core/src/modal/modals.less        |   2 +-
 .../src/presentation/HoverablePopover.tsx     |   6 +-
 .../core/src/presentation/ModalService.tsx    |  41 +++
 .../presentation/formsy/BasicFieldLayout.tsx  |  50 +++
 .../src/presentation/formsy/FormComponent.ts  | 130 +++++++
 .../presentation/formsy/components/Input.tsx  |  35 ++
 .../formsy/components/TextArea.tsx            |  75 ++++
 .../presentation/formsy/components/index.ts   |   2 +
 .../presentation/formsy/formFieldLayout.ts    |  11 +
 .../src/presentation/formsy/formsy-react.d.ts |  91 +++++
 .../core/src/presentation/formsy/index.ts     |   6 +
 .../modules/core/src/presentation/index.ts    |   2 +
 .../modules/core/src/reactShims/ngReact.ts    |  30 +-
 .../core/src/reactShims/react.injector.ts     |  38 +-
 .../core/src/task/monitor/TaskMonitor.tsx     |   6 +
 .../src/task/monitor/taskMonitor.directive.js |  26 --
 .../src/task/monitor/taskMonitor.directive.ts |  36 ++
 .../src/task/monitor/taskMonitor.module.js    |   2 +-
 .../src/task/monitor/taskMonitorService.js    |   7 +-
 app/scripts/modules/core/src/utils/index.ts   |   9 +-
 app/scripts/modules/core/src/utils/noop.ts    |   3 +
 gradle/installViaTravis.sh                    |   1 +
 package.json                                  |   7 +-
 tslint.json                                   |   2 +-
 yarn.lock                                     |  47 ++-
 38 files changed, 1089 insertions(+), 280 deletions(-)
 create mode 100644 app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
 delete mode 100644 app/scripts/modules/core/src/entityTag/entityTagEditor.controller.ts
 delete mode 100644 app/scripts/modules/core/src/entityTag/entityTagEditor.modal.html
 create mode 100644 app/scripts/modules/core/src/presentation/ModalService.tsx
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/BasicFieldLayout.tsx
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/FormComponent.ts
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/components/Input.tsx
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/components/TextArea.tsx
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/components/index.ts
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/formFieldLayout.ts
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/formsy-react.d.ts
 create mode 100644 app/scripts/modules/core/src/presentation/formsy/index.ts
 create mode 100644 app/scripts/modules/core/src/task/monitor/TaskMonitor.tsx
 delete mode 100644 app/scripts/modules/core/src/task/monitor/taskMonitor.directive.js
 create mode 100644 app/scripts/modules/core/src/task/monitor/taskMonitor.directive.ts
 create mode 100644 app/scripts/modules/core/src/utils/noop.ts

diff --git a/app/scripts/modules/core/src/confirmationModal/confirmationModal.service.ts b/app/scripts/modules/core/src/confirmationModal/confirmationModal.service.ts
index 898141cbf82..65397c4fc78 100644
--- a/app/scripts/modules/core/src/confirmationModal/confirmationModal.service.ts
+++ b/app/scripts/modules/core/src/confirmationModal/confirmationModal.service.ts
@@ -3,6 +3,7 @@ import {IModalService, IModalSettings} from 'angular-ui-bootstrap';
 
 export interface IConfirmationModalParams {
   account?: string;
+  applicationName?: string;
   askForReason?: boolean;
   body?: string;
   buttonText?: string;
@@ -12,6 +13,7 @@ export interface IConfirmationModalParams {
   multiTaskTitle?: string;
   platformHealthOnlyShowOverride?: boolean;
   platformHealthType?: string;
+  provider?: string;
   reason?: string;
   size?: string;
   submitJustWithReason?: boolean;
diff --git a/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx b/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
new file mode 100644
index 00000000000..f9fca094868
--- /dev/null
+++ b/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
@@ -0,0 +1,342 @@
+import { IDeferred } from 'angular';
+import { $q } from 'ngimport';
+import * as Formsy from 'formsy-react';
+import * as marked from 'marked';
+import * as React from 'react';
+import { Modal } from 'react-bootstrap';
+import { IModalServiceInstance } from 'angular-ui-bootstrap';
+import autoBindMethods from 'class-autobind-decorator';
+import * as DOMPurify from 'dompurify';
+
+import {
+  UUIDGenerator, Application, EntityTagWriter, HelpField, IEntityRef, IEntityTag,
+  ReactInjector, TaskMonitor, TaskMonitorBuilder, SubmitButton
+} from 'core';
+
+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';
+
+export interface IOwnerOption {
+  label: string;
+  type: string;
+  owner: any;
+  isDefault: boolean;
+}
+
+export interface IEntityTagEditorProps {
+  owner: any;
+  application: Application;
+  entityType: string;
+  tag: IEntityTag;
+  ownerOptions: IOwnerOption[];
+  entityRef: IEntityRef;
+  isNew: boolean;
+  show?: boolean;
+  onHide?(event: any): void;
+  onUpdate?(): any;
+}
+
+export interface IEntityTagEditorState {
+  taskMonitor: TaskMonitor;
+  message: string;
+  show: boolean;
+  isValid: boolean;
+  isSubmitting: boolean;
+  owner: any;
+  entityType: string;
+}
+
+@autoBindMethods
+export class EntityTagEditor extends React.Component<IEntityTagEditorProps, IEntityTagEditorState> {
+  public static defaultProps: Partial<IEntityTagEditorProps> = {
+    onHide: noop,
+    onUpdate: noop,
+  };
+
+  private taskMonitorBuilder: TaskMonitorBuilder = ReactInjector.taskMonitorBuilder;
+  private entityTagWriter: EntityTagWriter = ReactInjector.entityTagWriter;
+  private $uibModalInstanceEmulation: IModalServiceInstance & { deferred?: IDeferred<any> };
+  private form: Form;
+
+  /** Shows the Entity Tag Editor modal */
+  public static show(props: IEntityTagEditorProps): Promise<void> {
+    return ReactModal.show(React.createElement(EntityTagEditor, props));
+  }
+
+  constructor(props: IEntityTagEditorProps) {
+    super(props);
+
+    const { ownerOptions, tag, entityType } = this.props;
+    const owner = this.props.owner || (ownerOptions && ownerOptions.length && ownerOptions[0]);
+    tag.name = tag.name || `spinnaker_ui_${tag.value.type}:${UUIDGenerator.generateUuid()}`;
+
+    this.state = {
+      taskMonitor: null,
+      message: tag.value && tag.value.message,
+      show: true,
+      isValid: false,
+      isSubmitting: false,
+      owner: owner,
+      entityType: entityType,
+    };
+
+    const deferred = $q.defer();
+    const promise = deferred.promise;
+    this.$uibModalInstanceEmulation = {
+      result: promise,
+      close: () => this.setState({ show: false }),
+      dismiss: () => this.setState({ show: false }),
+    } as IModalServiceInstance;
+    Object.assign(this.$uibModalInstanceEmulation, { deferred });
+  }
+
+  private handleMessageChanged(message: string): void {
+    this.setState({ message });
+  }
+
+  private handleOwnerOptionChanged(option: IOwnerOption): void {
+    this.setState({ owner: option.owner, entityType: option.type });
+  }
+
+  private onValid(): void {
+    this.setState({ isValid: true });
+  }
+
+  private onInvalid(): void {
+    this.setState({ isValid: false });
+  }
+
+  private onHide(): void {
+    this.setState({ show: false });
+    this.props.onHide.apply(null, arguments);
+    this.$uibModalInstanceEmulation.deferred.resolve();
+  }
+
+  private upsertTag(data: { message: string; }): void {
+    const { application, isNew, tag, onUpdate } = this.props;
+    const { owner, entityType } = this.state;
+    const entityRef: IEntityRef = this.props.entityRef || EntityRefBuilder.getBuilder(entityType)(owner);
+
+    tag.value.message = data.message;
+
+    const taskMonitor = this.taskMonitorBuilder.buildTaskMonitor({
+      application: application,
+      title: `${isNew ? 'Create' : 'Update'} ${this.props.tag.value.type} for ${entityRef.entityId}`,
+      modalInstance: this.$uibModalInstanceEmulation,
+      onTaskComplete: () => onUpdate(),
+    });
+
+    const submitMethod = () => {
+      const promise = this.entityTagWriter.upsertEntityTag(application, tag, entityRef, isNew);
+      const done = () => this.setState({ isSubmitting: false });
+      promise.then(done, done);
+      return promise;
+    };
+
+    taskMonitor.submit(submitMethod);
+
+    this.setState({ taskMonitor, isSubmitting: true });
+  }
+
+  private refCallback(form: Form): void {
+    this.form = form;
+  }
+
+  private submit(): void {
+    this.form.submit();
+  }
+
+  public render() {
+    const { isNew, tag, ownerOptions } = this.props;
+    const { isValid, isSubmitting } = this.state;
+    const message = this.state.message || '';
+
+    const closeButton = (
+      <div className="modal-close close-button pull-right">
+        <a className="btn btn-link" onClick={this.onHide}>
+          <span className="glyphicon glyphicon-remove" />
+        </a>
+      </div>
+    );
+
+    const submitLabel = `${isNew ? ' Create' : ' Update'} ${tag.value.type}`;
+    const cancelButton = <button type="button" className="btn btn-default" onClick={this.onHide}>Cancel</button>;
+
+    const { TaskMonitorWrapper } = NgReact;
+
+    return (
+      <Modal show={this.state.show} onHide={this.onHide} dialogClassName="entity-tag-editor-modal">
+
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+
+        <Formsy.Form
+          ref={this.refCallback}
+          role="form"
+          name="form"
+          className="form-horizontal"
+          onSubmit={this.upsertTag}
+          onValid={this.onValid}
+          onInvalid={this.onInvalid}
+        >
+          <Modal.Header>
+            <h3>{isNew ? 'Create' : 'Update'} {tag.value.type}</h3>
+            {closeButton}
+          </Modal.Header>
+
+          <Modal.Body>
+            <EntityTagMessage
+              message={message}
+              onMessageChanged={this.handleMessageChanged}
+            />
+
+            { ownerOptions && ownerOptions.length && (
+              <OwnerOptions
+                selectedOwner={this.state.owner}
+                ownerOptions={ownerOptions}
+                onOwnerOptionChanged={this.handleOwnerOptionChanged}
+              />
+            ) }
+          </Modal.Body>
+
+          <Modal.Footer>
+            {cancelButton}
+
+            <SubmitButton
+              onClick={this.submit}
+              label={submitLabel}
+              isDisabled={!isValid || isSubmitting}
+              submitting={this.state.isSubmitting}
+            />
+
+          </Modal.Footer>
+        </Formsy.Form>
+
+      </Modal>
+    );
+  }
+}
+
+
+
+interface IEntityTagMessageProps {
+  message: string;
+  onMessageChanged(message: string): void;
+}
+
+@autoBindMethods
+class EntityTagMessage extends React.Component<IEntityTagMessageProps, {}> {
+  private handleTextareaChanged(event: React.FormEvent<HTMLTextAreaElement>): void {
+    this.props.onMessageChanged(event.currentTarget.value);
+  }
+
+  public render() {
+    const { message } = this.props;
+
+    return (
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1">
+
+          <TextArea
+            label="Message"
+            Help={<div>Markdown is okay <HelpField id="markdown.examples"/></div>}
+            Layout={BasicFieldLayout}
+            name="message"
+            required={true}
+            validationErrors={{ isDefaultRequiredValue: 'Please enter a message' }}
+            onChange={this.handleTextareaChanged}
+            value={message}
+            rows={5}
+            className="form-control input-sm"
+          />
+
+          { message && (
+            <div className="form-group preview">
+              <div className="col-md-3 sm-label-right">
+                <strong>Preview</strong>
+              </div>
+              <div className="col-md-9">
+                <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked(message)) }}/>
+              </div>
+            </div>
+          ) }
+        </div>
+      </div>
+    )
+  }
+}
+
+
+
+interface IOwnerOptionsProps {
+  selectedOwner: any;
+  ownerOptions: IOwnerOption[];
+  onOwnerOptionChanged(owner: IOwnerOption): void;
+}
+
+@autoBindMethods
+class OwnerOptions extends React.Component<IOwnerOptionsProps, void> {
+  public handleOwnerOptionChanged(option: IOwnerOption): void {
+    this.props.onOwnerOptionChanged(option);
+  }
+
+  public render() {
+    const { ownerOptions, selectedOwner } = this.props;
+
+    return (
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1">
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              <b>Applies to</b>
+            </div>
+            <div className="col-md-9">
+              { ownerOptions.map((option: IOwnerOption) => (
+                <div key={option.label} className="radio">
+                  <label>
+                    <OwnerOption
+                      option={option}
+                      selectedOwner={selectedOwner}
+                      onOwnerOptionChanged={this.handleOwnerOptionChanged}
+                    />
+                    <span className="marked" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked(option.label)) }}/>
+                  </label>
+                </div>
+              )) }
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+interface IOwnerOptionProps {
+  option?: IOwnerOption;
+  selectedOwner?: any;
+  onOwnerOptionChanged?(option: IOwnerOption): void;
+}
+
+@autoBindMethods
+class OwnerOption extends React.Component<IOwnerOptionProps, any> {
+  public handleOwnerChanged(): void {
+    this.props.onOwnerOptionChanged(this.props.option);
+  }
+
+  public render() {
+    const { option, selectedOwner } = this.props;
+    return (
+      <input
+        name="owner"
+        type="radio"
+        value={option.label}
+        onChange={this.handleOwnerChanged}
+        checked={option.owner === selectedOwner}
+      />
+    );
+  }
+}
diff --git a/app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts b/app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts
index f8b001209b7..63a0d3164db 100644
--- a/app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts
+++ b/app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts
@@ -1,10 +1,8 @@
-import {module} from 'angular';
-import {IModalService} from 'angular-ui-bootstrap';
+import { module } from 'angular';
 
-import {IEntityTag, IEntityRef} from 'core/domain';
-import {ENTITY_TAG_EDITOR_CTRL, EntityTagEditorCtrl, IOwnerOption} from './entityTagEditor.controller';
-import {ENTITY_TAGS_HELP} from './entityTags.help';
-import {Application} from 'core/application/application.model';
+import { Application, IEntityTag } from 'core';
+import { EntityTagEditor, IEntityTagEditorProps, IOwnerOption } from './EntityTagEditor';
+import { ENTITY_TAGS_HELP } from './entityTags.help';
 
 import './entityTagDetails.component.less';
 
@@ -17,32 +15,27 @@ class AddEntityTagLinksCtrl implements ng.IComponentController {
   private onUpdate: () => any;
   private ownerOptions: IOwnerOption[];
 
-  public constructor(private $uibModal: IModalService) { 'ngInject'; }
-
   public addTag(tagType: string): void {
-    this.$uibModal.open({
-      templateUrl: require('./entityTagEditor.modal.html'),
-      controller: EntityTagEditorCtrl,
-      controllerAs: '$ctrl',
-      resolve: {
-        tag: (): IEntityTag => {
-          return {
-            name: null,
-            value: {
-              message: null,
-              type: tagType,
-            },
-          };
-        },
-        isNew: (): boolean => true,
-        owner: (): any => this.component,
-        entityType: (): string => this.entityType,
-        application: (): Application => this.application,
-        entityRef: (): IEntityRef => null,
-        onUpdate: (): any => this.onUpdate,
-        ownerOptions: (): IOwnerOption[] => this.ownerOptions,
-      }
-    });
+    const tag: IEntityTag = {
+      name: null,
+      value: {
+        message: null,
+        type: tagType,
+      },
+    };
+
+    const props: IEntityTagEditorProps = {
+      tag: tag,
+      isNew: true,
+      owner: this.component,
+      entityType: this.entityType,
+      application: this.application,
+      entityRef: null,
+      onUpdate: this.onUpdate,
+      ownerOptions: this.ownerOptions,
+    };
+
+    EntityTagEditor.show(props);
   }
 }
 
@@ -73,7 +66,6 @@ class AddEntityTagLinksComponent implements ng.IComponentOptions {
 
 export const ADD_ENTITY_TAG_LINKS_COMPONENT = 'spinnaker.core.entityTag.details.component';
 module(ADD_ENTITY_TAG_LINKS_COMPONENT, [
-  ENTITY_TAG_EDITOR_CTRL,
   ENTITY_TAGS_HELP
 ])
   .component('addEntityTagLinks', new AddEntityTagLinksComponent());
diff --git a/app/scripts/modules/core/src/entityTag/clusterTargetBuilder.service.ts b/app/scripts/modules/core/src/entityTag/clusterTargetBuilder.service.ts
index b7f78d6c2cf..18948b9cfb4 100644
--- a/app/scripts/modules/core/src/entityTag/clusterTargetBuilder.service.ts
+++ b/app/scripts/modules/core/src/entityTag/clusterTargetBuilder.service.ts
@@ -1,8 +1,9 @@
-import {module} from 'angular';
+import { module } from 'angular';
 
-import {NAMING_SERVICE, NamingService} from 'core/naming/naming.service';
 import { IServerGroup } from 'core/domain';
-import {IOwnerOption} from './entityTagEditor.controller';
+import { NAMING_SERVICE, NamingService } from 'core/naming';
+
+import { IOwnerOption } from './EntityTagEditor';
 
 export class ClusterTargetBuilder {
 
diff --git a/app/scripts/modules/core/src/entityTag/entityTagDetails.component.less b/app/scripts/modules/core/src/entityTag/entityTagDetails.component.less
index d2d5bad1a82..317f29f80be 100644
--- a/app/scripts/modules/core/src/entityTag/entityTagDetails.component.less
+++ b/app/scripts/modules/core/src/entityTag/entityTagDetails.component.less
@@ -20,7 +20,7 @@ entity-tag-details {
     .fa {
       flex: 0 0 auto;
     }
-    [marked] {
+    .marked, [marked] {
       flex: 1 1 auto;
     }
   }
diff --git a/app/scripts/modules/core/src/entityTag/entityTagEditor.controller.ts b/app/scripts/modules/core/src/entityTag/entityTagEditor.controller.ts
deleted file mode 100644
index 186307c16ce..00000000000
--- a/app/scripts/modules/core/src/entityTag/entityTagEditor.controller.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {module} from 'angular';
-import {ENTITY_TAG_WRITER, EntityTagWriter} from './entityTags.write.service';
-import {IModalServiceInstance} from 'angular-ui-bootstrap';
-import {Application} from 'core/application/application.model';
-import {UUIDGenerator} from 'core/utils/uuid.service';
-import {IEntityTag, IEntityRef} from 'core/domain';
-import {EntityRefBuilder} from './entityRef.builder';
-import {TaskMonitorBuilder} from 'core/task/monitor/taskMonitor.builder';
-
-import './entityTagEditor.modal.less';
-
-export interface IOwnerOption {
-  label: string;
-  type: string;
-  owner: any;
-  isDefault: boolean;
-}
-
-export class EntityTagEditorCtrl implements ng.IComponentController {
-
-  public taskMonitor: any;
-
-  public constructor(private $uibModalInstance: IModalServiceInstance,
-                     private entityTagWriter: EntityTagWriter,
-                     private taskMonitorBuilder: TaskMonitorBuilder,
-                     private owner: any,
-                     private application: Application,
-                     private entityType: string,
-                     private tag: IEntityTag,
-                     private onUpdate: () => any,
-                     public ownerOptions: IOwnerOption[],
-                     private entityRef: IEntityRef,
-                     public isNew: boolean) {
-    'ngInject';
-  }
-
-  public $onInit(): void {
-    if (this.ownerOptions && this.ownerOptions.length) {
-      this.owner = this.ownerOptions[0].owner;
-      this.ownerChanged(this.ownerOptions[0]);
-    }
-    this.tag.name = this.tag.name || `spinnaker_ui_${this.tag.value.type}:${UUIDGenerator.generateUuid()}`;
-  }
-
-  public ownerChanged(option: IOwnerOption): void {
-    this.entityType = option.type;
-  }
-
-  public cancel(): void {
-    this.$uibModalInstance.dismiss();
-  }
-
-  public upsertTag(): void {
-    const entityRef: IEntityRef = this.entityRef || EntityRefBuilder.getBuilder(this.entityType)(this.owner);
-
-    this.taskMonitor = this.taskMonitorBuilder.buildTaskMonitor({
-      application: this.application,
-      title: `${this.isNew ? 'Create' : 'Update'} ${this.tag.value.type} for ${entityRef.entityId}`,
-      modalInstance: this.$uibModalInstance,
-      onTaskComplete: () => this.onUpdate(),
-    });
-
-    this.taskMonitor.submit(() => this.entityTagWriter.upsertEntityTag(this.application, this.tag, entityRef, this.isNew));
-  }
-}
-
-export const ENTITY_TAG_EDITOR_CTRL = 'spinnaker.core.entityTag.editor.controller';
-module(ENTITY_TAG_EDITOR_CTRL, [ENTITY_TAG_WRITER])
-  .controller('EntityTagEditorCtrl', EntityTagEditorCtrl);
diff --git a/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.html b/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.html
deleted file mode 100644
index 1ae4f7438c5..00000000000
--- a/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<div modal-page class="entity-tag-editor-modal">
-  <task-monitor monitor="$ctrl.taskMonitor"></task-monitor>
-  <modal-close dismiss="$ctrl.cancel()"></modal-close>
-  <div class="modal-header">
-    <h3>{{$ctrl.isNew ? 'Create' : 'Update'}} {{$ctrl.tag.value.type}}</h3>
-  </div>
-  <div class="modal-body">
-    <form role="form" name="form" class="form-horizontal" ng-submit="$ctrl.upsertTag()">
-      <div class="row">
-        <div class="col-md-10 col-md-offset-1">
-          <div class="form-group">
-            <div class="col-md-3 sm-label-right">
-              <b>Message</b>
-            </div>
-            <div class="col-md-9">
-              <textarea ng-model="$ctrl.tag.value.message" class="form-control input-sm" rows="5" required></textarea>
-              <div class="small text-right">Markdown is okay <help-field key="markdown.examples"></help-field></div>
-            </div>
-          </div>
-          <div class="form-group preview" ng-if="$ctrl.tag.value.message">
-            <div class="col-md-3 sm-label-right">
-              <b>Preview</b>
-            </div>
-            <div class="col-md-9">
-              <div marked="$ctrl.tag.value.message"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div ng-if="$ctrl.ownerOptions.length">
-        <div class="row">
-          <div class="col-md-10 col-md-offset-1">
-            <div class="form-group">
-              <div class="col-md-3 sm-label-right">
-                <b>Applies to</b>
-              </div>
-              <div class="col-md-9">
-                <div ng-repeat="option in $ctrl.ownerOptions">
-                  <div class="radio">
-                    <label>
-                      <input type="radio" ng-model="$ctrl.owner" ng-value="option.owner" ng-change="$ctrl.ownerChanged(option)"/>
-                      <span marked="option.label"></span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button class="btn btn-default" ng-click="$ctrl.cancel()">Cancel</button>
-    <button class="btn btn-primary"
-            ng-disabled="form.$invalid || $ctrl.viewState.submitting"
-            ng-click="$ctrl.upsertTag()">
-      <span class="glyphicon glyphicon-ok-circle"></span> {{$ctrl.isNew ? 'Create' : 'Update'}} {{$ctrl.tag.value.type}}
-    </button>
-  </div>
-</div>
diff --git a/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.less b/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.less
index eb56a2d643b..e72a777b918 100644
--- a/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.less
+++ b/app/scripts/modules/core/src/entityTag/entityTagEditor.modal.less
@@ -3,12 +3,12 @@
 .entity-tag-editor-modal {
   .preview {
     background-color: lighten(@light_blue_background, 10%);
-    [marked] {
+    .marked, [marked] {
       padding-top: 5px;
     }
   }
   label {
-    [marked] {
+    .marked, [marked] {
       p {
         margin-bottom: 0;
       }
diff --git a/app/scripts/modules/core/src/entityTag/entityUiTags.component.ts b/app/scripts/modules/core/src/entityTag/entityUiTags.component.ts
index 14104c31044..46ac383bb78 100644
--- a/app/scripts/modules/core/src/entityTag/entityUiTags.component.ts
+++ b/app/scripts/modules/core/src/entityTag/entityUiTags.component.ts
@@ -1,12 +1,11 @@
-import { IComponentController, IComponentOptions, module } from 'angular';
-import { IModalService } from 'angular-ui-bootstrap';
+import { ITimeoutService, IComponentController, IComponentOptions, module } from 'angular';
 
-import { Application } from 'core/application/application.model';
-import { IEntityRef, IEntityTag } from 'core/domain';
-import { EntityTagEditorCtrl } from './entityTagEditor.controller';
-import { EntityTagWriter, ENTITY_TAG_WRITER } from './entityTags.write.service';
-import './entityUiTags.component.less';
+import { Application, EntityTagWriter, IEntityTag, IEntityTagEditorProps } from 'core';
+
+import { EntityTagEditor, ENTITY_TAG_WRITER } from 'core/entityTag';
+import { ConfirmationModalService } from 'core/confirmationModal';
 
+import './entityUiTags.component.less';
 import './entityUiTags.popover.less';
 
 class EntityUiTagsCtrl implements IComponentController {
@@ -25,8 +24,9 @@ class EntityUiTagsCtrl implements IComponentController {
 
   private component: any;
 
-  public constructor(private $timeout: ng.ITimeoutService, private $uibModal: IModalService,
-                     private confirmationModalService: any, private entityTagWriter: EntityTagWriter) {
+  public constructor(private $timeout: ITimeoutService,
+                     private confirmationModalService: ConfirmationModalService,
+                     private entityTagWriter: EntityTagWriter) {
     'ngInject';
   }
 
@@ -80,29 +80,26 @@ class EntityUiTagsCtrl implements IComponentController {
   }
 
   public editTag(tag: IEntityTag) {
-    this.$uibModal.open({
-      templateUrl: require('./entityTagEditor.modal.html'),
-      controller: EntityTagEditorCtrl,
-      controllerAs: '$ctrl',
-      resolve: {
-        tag: (): IEntityTag => {
-          return {
-            name: tag.name,
-            value: {
-              message: tag.value['message'],
-              type: tag.value['type']
-            }
-          };
-        },
-        isNew: (): boolean => false,
-        owner: (): any => this.component,
-        entityType: (): string => this.entityType,
-        application: (): Application => this.application,
-        onUpdate: (): any => this.onUpdate,
-        ownerOptions: (): any => null,
-        entityRef: (): IEntityRef => this.component.entityTags.entityRef,
+    const _tag = {
+      name: tag.name,
+      value: {
+        message: tag.value['message'],
+        type: tag.value['type'],
       }
-    });
+    };
+
+    const props: IEntityTagEditorProps = {
+      tag: _tag,
+      isNew: false,
+      owner: this.component,
+      entityType: this.entityType,
+      application: this.application,
+      onUpdate: this.onUpdate,
+      ownerOptions: null,
+      entityRef: this.component.entityTags.entityRef,
+    };
+
+    EntityTagEditor.show(props);
   }
 
 
@@ -199,6 +196,6 @@ export class EntityUiTagsWrapperComponent implements IComponentOptions {
 }
 
 export const ENTITY_UI_TAGS_COMPONENT = 'spinnaker.core.entityTags.uiTags.component';
-module(ENTITY_UI_TAGS_COMPONENT, [ENTITY_TAG_WRITER])
+module(ENTITY_UI_TAGS_COMPONENT, [ ENTITY_TAG_WRITER ])
   .component('entityUiTags', new EntityUiTagsComponent())
   .component('entityUiTagsWrapper', new EntityUiTagsWrapperComponent());
diff --git a/app/scripts/modules/core/src/entityTag/index.ts b/app/scripts/modules/core/src/entityTag/index.ts
index 23a91a986b2..986af95a7c6 100644
--- a/app/scripts/modules/core/src/entityTag/index.ts
+++ b/app/scripts/modules/core/src/entityTag/index.ts
@@ -1,3 +1,4 @@
 export * from './entityTags.read.service';
 export * from './entityTags.write.service';
 export * from './clusterTargetBuilder.service';
+export * from './EntityTagEditor';
diff --git a/app/scripts/modules/core/src/help/HelpField.tsx b/app/scripts/modules/core/src/help/HelpField.tsx
index 6d4fd672407..52f7f703115 100644
--- a/app/scripts/modules/core/src/help/HelpField.tsx
+++ b/app/scripts/modules/core/src/help/HelpField.tsx
@@ -1,8 +1,98 @@
+import * as React from 'react';
+import * as ReactGA from 'react-ga';
+import * as DOMPurify from 'dompurify';
+import autoBindMethods from 'class-autobind-decorator';
+import { $injector } from 'ngimport';
+
+import { HelpContentsRegistry, IHelpContents } from 'core/help';
+import { HoverablePopover } from 'core/presentation';
+import { Placement } from 'core/presentation/Placement';
+
 export interface IHelpFieldProps {
   id?: string;
   fallback?: string;
   content?: string;
-  placement?: string;
+  placement?: Placement;
   expand?: boolean;
   label?: string;
 }
+
+export interface IState {
+  contents: React.ReactElement<any>;
+}
+
+@autoBindMethods
+export class HelpField extends React.Component<IHelpFieldProps, IState> {
+  public static defaultProps: IHelpFieldProps = {
+    placement: 'top',
+  };
+
+  private helpContentsRegistry: HelpContentsRegistry;
+  private helpContents: IHelpContents;
+  private popoverShownStart: number;
+
+  constructor(props: IHelpFieldProps) {
+    super(props);
+    this.helpContentsRegistry = $injector.get('helpContentsRegistry') as any;
+    this.helpContents = $injector.get('helpContents') as any;
+
+    this.state = this.getState();
+  }
+
+  private getState(): IState {
+    const { id, fallback, content } = this.props;
+    let contentString = content;
+    if (id && !contentString) {
+      contentString = this.helpContentsRegistry.getHelpField(id) || this.helpContents[id] || fallback;
+    }
+
+    return {
+      contents: <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(contentString) }}/>,
+    }
+  }
+
+  public componentWillReceiveProps(): void {
+    this.setState(this.getState());
+  }
+
+  private onShow(): void {
+    this.popoverShownStart = Date.now();
+  }
+
+  private onHide(): void {
+    if (Date.now() - this.popoverShownStart > 500) {
+      ReactGA.event({ action: 'Help contents viewed', category: 'Help', label: this.props.id || this.props.content });
+    }
+  }
+
+  public render() {
+    const { placement, label, expand } = this.props;
+    const { contents } = this.state;
+
+    const icon = <span className="small glyphicon glyphicon-question-sign"/>;
+
+    const popover = (
+      <HoverablePopover placement={placement} template={contents} onShow={this.onShow} onHide={this.onHide}>
+        <a className="clickable help-field"> {label || icon} </a>
+      </HoverablePopover>
+    );
+
+
+    if (label) {
+      return (
+        <div className="text-only">
+          {!expand && contents && popover}
+        </div>
+      );
+    } else {
+      const expanded = <div className="help-contents small"> {contents} </div>;
+
+      return (
+        <div style={{ display: 'inline-block' }}>
+          {!expand && contents && popover}
+          {expand && contents && expanded}
+        </div>
+      );
+    }
+  }
+}
diff --git a/app/scripts/modules/core/src/help/help.contents.ts b/app/scripts/modules/core/src/help/help.contents.ts
index 0347e0b26f3..f5ad8f1c753 100644
--- a/app/scripts/modules/core/src/help/help.contents.ts
+++ b/app/scripts/modules/core/src/help/help.contents.ts
@@ -1,5 +1,9 @@
 import { module } from 'angular';
 
+export interface IHelpContents {
+  [key: string]: string;
+}
+
 export const HELP_CONTENTS = 'spinnaker.core.help.contents';
 module(HELP_CONTENTS, [])
   .constant('helpContents', {
diff --git a/app/scripts/modules/core/src/help/index.ts b/app/scripts/modules/core/src/help/index.ts
index 769b7af69a3..961237aabe6 100644
--- a/app/scripts/modules/core/src/help/index.ts
+++ b/app/scripts/modules/core/src/help/index.ts
@@ -1 +1,4 @@
 export * from './helpContents.registry';
+export * from './help.contents';
+export { HelpField } from './HelpField';
+
diff --git a/app/scripts/modules/core/src/modal/modals.less b/app/scripts/modules/core/src/modal/modals.less
index 98e002d7418..bdc9bbea7f7 100644
--- a/app/scripts/modules/core/src/modal/modals.less
+++ b/app/scripts/modules/core/src/modal/modals.less
@@ -15,7 +15,7 @@
   h2, h3, h4, h5 {
     font-weight: 600;
   }
-  modal-close {
+  .modal-close, modal-close {
     display: block;
     position: absolute;
     right: 0;
diff --git a/app/scripts/modules/core/src/presentation/HoverablePopover.tsx b/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
index 64989f0cd92..999757f7326 100644
--- a/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
+++ b/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
@@ -3,13 +3,15 @@ import {Overlay, Popover} from 'react-bootstrap';
 import autoBindMethods from 'class-autobind-decorator';
 
 import {Placement} from 'core/presentation/Placement';
-import {UUIDGenerator} from '../utils/uuid.service';
+import {UUIDGenerator} from 'core/utils';
 
 export interface IProps {
   value?: string;
   template?: JSX.Element;
   placement?: Placement;
   id?: string;
+  onShow?: () => void;
+  onHide?: () => void;
 }
 
 export interface IState {
@@ -40,6 +42,7 @@ export class HoverablePopover extends React.Component<IProps, IState> {
   private showPopover(e: React.MouseEvent<HTMLElement>): void {
     this.clearPopoverCancel();
     this.setState({popoverIsOpen: true, target: e.target});
+    this.props.onShow && this.props.onShow();
   }
 
   private deferHidePopover(): void {
@@ -49,6 +52,7 @@ export class HoverablePopover extends React.Component<IProps, IState> {
   private hidePopover(): void {
     this.clearPopoverCancel();
     this.setState({popoverIsOpen: false});
+    this.props.onHide && this.props.onHide();
   }
 
   private clearPopoverCancel(): void {
diff --git a/app/scripts/modules/core/src/presentation/ModalService.tsx b/app/scripts/modules/core/src/presentation/ModalService.tsx
new file mode 100644
index 00000000000..fbcb49586f5
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/ModalService.tsx
@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+/** An imperative service for showing a react component as a modal */
+export class ReactModal {
+  public static show(modal: ReactElement<any>): Promise<any> {
+    return new Promise((resolve) => {
+      let mountNode = document.createElement('div');
+      let show = true;
+
+      render();
+
+      function onExited() {
+        if (!mountNode) {
+          return;
+        }
+
+        ReactDOM.unmountComponentAtNode(mountNode);
+        mountNode = null;
+      }
+
+      function onHide(action: any) {
+        show = false;
+        resolve(action);
+        render();
+      }
+
+      function render() {
+        ReactDOM.render(
+          React.cloneElement(modal, {
+            show,
+            onExited,
+            onHide,
+          }),
+          mountNode
+        );
+      }
+    });
+  }
+}
diff --git a/app/scripts/modules/core/src/presentation/formsy/BasicFieldLayout.tsx b/app/scripts/modules/core/src/presentation/formsy/BasicFieldLayout.tsx
new file mode 100644
index 00000000000..53bc235ceb2
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/BasicFieldLayout.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { IFormFieldLayoutProps } from './formFieldLayout';
+
+/**
+ * A Form Field Layout component for Formsy Form Field components
+ *
+ * Accepts four react elements as props (_label, _input, _help, _error) and lays them out using bootstrap grid.
+ *
+ * +----------------div.form-group----------------------------+
+ * |                 +-------------div.col-md-9--------------+|
+ * |<label.col-md-3> |+-------------------------------------+||
+ * |                 ||input element                        |||
+ * |                 |+-------------------------------------+||
+ * |                 |                                       ||
+ * |                 |<help element>                         ||
+ * |                 |                                       ||
+ * |                 |<validation element>                   ||
+ * |                 |                                       ||
+ * |                 +---------------------------------------+|
+ * +----------------------------------------------------------+
+ */
+export class BasicFieldLayout extends React.Component<IFormFieldLayoutProps, {}> {
+  constructor(props: IFormFieldLayoutProps) {
+    super(props);
+  }
+
+  public render() {
+    const { Label, Input, Help, Error, showRequired, showError } = this.props;
+
+    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 InputGroup = Input && (
+      <div className="col-md-9">
+        {Input}
+        {HelpDiv}
+        {ErrorDiv}
+      </div>
+    );
+
+    const className = `form-group ${showRequired || showError ? 'ng-invalid' : ''}`;
+    return (
+      <div className={className}>
+        {LabelDiv}
+        {InputGroup}
+      </div>
+    );
+  }
+}
diff --git a/app/scripts/modules/core/src/presentation/formsy/FormComponent.ts b/app/scripts/modules/core/src/presentation/formsy/FormComponent.ts
new file mode 100644
index 00000000000..af03558e242
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/FormComponent.ts
@@ -0,0 +1,130 @@
+// https://github.com/christianalfoni/formsy-react/issues/191#issuecomment-144872142
+
+import { Mixin, ValidationErrors } from 'formsy-react';
+import { omit } from 'lodash';
+import * as React from 'react';
+
+/*
+ * Here the Formsy.Mixin is wrapped as an abstract class, so that it can
+ * be used effectively with TypeScript.
+ */
+export interface IFormComponentProps {
+  name?: string;
+  value?: string | string[] | number;
+  validations?: string;
+  validationError?: string;
+  validationErrors?: ValidationErrors;
+  required?: boolean;
+  _validate?: Function;
+}
+
+export interface IFormComponentState {
+  _value: any;
+  _isRequired: boolean;
+  _isValid: boolean;
+  _isPristine: boolean;
+  _pristineValue: any,
+  _validationError: string;
+  _externalError: string;
+  _formSubmitted: boolean;
+}
+
+/** A base class for Formsy form components */
+export abstract class FormComponent<VALUE, PROPS extends IFormComponentProps, STATE extends IFormComponentState> extends React.Component<PROPS, STATE> {
+  public static propnames: (keyof IFormComponentProps)[] = ['name', 'value', 'validations', 'validationError', 'validationErrors', 'required', '_validate'];
+
+  public static defaultProps: IFormComponentProps = {
+    name: null,  // this can be set to whatever, since it will be overwritten when child components are created
+    validationError: '',
+    validationErrors: {}
+  };
+
+  public static otherProps(props: any): any {
+    return omit(props, FormComponent.propnames);
+  }
+
+  constructor(props: PROPS, context: any) {
+    super(props, context);
+
+    // Default values for state
+    this.state = Mixin.getInitialState.call(this) as STATE;
+  }
+
+  // Lifecycle methods
+  public componentWillMount(): void {
+    Mixin.componentWillMount.call(this);
+  }
+
+  public componentWillReceiveProps(nextProps: PROPS): void {
+    Mixin.componentWillReceiveProps.call(this, nextProps);
+  }
+
+  public componentDidUpdate(prevProps: PROPS): void {
+    Mixin.componentDidUpdate.call(this, prevProps);
+  }
+
+  public componentWillUnmount(): void {
+    Mixin.componentWillUnmount.call(this);
+  }
+
+  // Formsy methods
+  public setValue(value: VALUE): void {
+    Mixin.setValue.call(this, value);
+  }
+
+  public resetvalue(): void {
+    Mixin.resetValue.call(this);
+  }
+
+  public getValue(): VALUE {
+    return Mixin.getValue.call(this);
+  }
+
+  public hasValue(): boolean {
+    return Mixin.hasValue.call(this);
+  }
+
+  public getErrorMessage(): string {
+    return Mixin.getErrorMessage.call(this);
+  }
+
+  public getErrorMessages(): string {
+    return Mixin.getErrorMessages.call(this);
+  }
+
+  public isFormDisabled(): boolean {
+    return Mixin.isFormDisabled.call(this);
+  }
+
+  public isValid(): boolean {
+    return Mixin.isValid.call(this);
+  }
+
+  public isPristine(): boolean {
+    return Mixin.isPristine.call(this);
+  }
+
+  public isFormSubmitted(): boolean {
+    return Mixin.isFormSubmitted.call(this);
+  }
+
+  public isRequired(): boolean {
+    return Mixin.isRequired.call(this);
+  }
+
+  public showRequired(): boolean {
+    return Mixin.showRequired.call(this);
+  }
+
+  public showError(): boolean {
+    return Mixin.showError.call(this);
+  }
+
+  public isValidValue(value: any): boolean {
+    return Mixin.isValidValue.call(this, value);
+  }
+
+  public setValidations(validations: string, required: boolean) {
+    Mixin.setValidations.call(this, validations, required);
+  }
+}
diff --git a/app/scripts/modules/core/src/presentation/formsy/components/Input.tsx b/app/scripts/modules/core/src/presentation/formsy/components/Input.tsx
new file mode 100644
index 00000000000..4c975395baa
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/components/Input.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { FormComponent, IFormComponentState, IFormComponentProps } from '../FormComponent';
+
+export interface IProps extends IFormComponentProps {
+  className: string;
+  label: string;
+  type: string;
+}
+
+/** A simple Formsy form component for validated <input> tags (text or checkbox) */
+export class Input extends FormComponent<string, IProps, IFormComponentState> {
+  public handleValueChanged(value: any) {
+    this.setValue(value);
+  }
+
+  public render() {
+    const { name, label, type } = this.props;
+    const className = 'form-group' + (this.props.className || ' ') + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
+    const errorMessage = this.getErrorMessage();
+    return (
+      <div className={className}>
+        <label htmlFor={name}>{label}</label>
+        <input
+          type={type || 'text'}
+          name={name}
+          onChange={this.handleValueChanged}
+          value={this.getValue()}
+          checked={!!(type === 'checkbox' && this.getValue())}
+        />
+        <span className="validation-error">{errorMessage}</span>
+      </div>
+    );
+  }
+}
diff --git a/app/scripts/modules/core/src/presentation/formsy/components/TextArea.tsx b/app/scripts/modules/core/src/presentation/formsy/components/TextArea.tsx
new file mode 100644
index 00000000000..e203c2edc5a
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/components/TextArea.tsx
@@ -0,0 +1,75 @@
+import * as React 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>;
+  /** The label text for the textarea */
+  label?: string;
+  /** (optional) The help or usage rollover markup */
+  Help?: React.ReactElement<any>;
+  /** The class string to place on the textarea */
+  className?: string;
+  /** A callback for when the textarea value changes */
+  onChange?(event: ChangeEvent<HTMLTextAreaElement>): void;
+}
+
+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: ValidationMap<ITextAreaContext> = {
+    formsy: PropTypes.object,
+  };
+
+  public static defaultProps: Partial<IProps> = {
+    name: null as any,
+    onChange: noop,
+    className: '',
+  };
+
+  public changeValue(event: ChangeEvent<HTMLTextAreaElement>): void {
+    this.setValue(event.target.value);
+    this.props.onChange(event);
+  }
+
+  public render() {
+    const { label, Help, Layout, name, className, rows } = this.props;
+
+    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 errorMessage = this.getErrorMessage();
+    const Error = errorMessage && isDirty && <span className="error-message">{errorMessage}</span>;
+
+    const FormFieldLayout = Layout;
+    return (
+      <FormFieldLayout
+        showRequired={this.showRequired()}
+        showError={this.showError()}
+        Label={Label}
+        Input={Input}
+        Help={Help}
+        Error={Error}
+      />
+    );
+  }
+}
+
diff --git a/app/scripts/modules/core/src/presentation/formsy/components/index.ts b/app/scripts/modules/core/src/presentation/formsy/components/index.ts
new file mode 100644
index 00000000000..1c2ac91c30c
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/components/index.ts
@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export { TextArea } from './TextArea';
diff --git a/app/scripts/modules/core/src/presentation/formsy/formFieldLayout.ts b/app/scripts/modules/core/src/presentation/formsy/formFieldLayout.ts
new file mode 100644
index 00000000000..1166d242724
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/formFieldLayout.ts
@@ -0,0 +1,11 @@
+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> | string;
+  Input?: React.ReactElement<any>;
+  Help?: React.ReactElement<any>;
+  Error?: React.ReactElement<any>;
+  showRequired?: boolean;
+  showError?: boolean;
+}
diff --git a/app/scripts/modules/core/src/presentation/formsy/formsy-react.d.ts b/app/scripts/modules/core/src/presentation/formsy/formsy-react.d.ts
new file mode 100644
index 00000000000..6d54518bdce
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/formsy-react.d.ts
@@ -0,0 +1,91 @@
+// https://github.com/christianalfoni/formsy-react/issues/191#issuecomment-144872142
+
+// FormComponent.ts
+// Type wrapper for Formsy-React
+// Project: https://github.com/christianalfoni/formsy-react
+
+declare module 'formsy-react' {
+
+  interface ValidationErrors {
+    [key: string]: string;
+  }
+
+  // This is declared for a reference to Formsy.Mixin in FormComponent.ts
+  const Mixin: any;
+
+  interface IFormProps {
+    [key: string]: string | Function | boolean | ValidationErrors | React.ReactElement<any>[];
+    className?: string;
+    mapping?: Function;
+    onSuccess?: Function;
+    onError?: Function;
+    onSubmit?: Function;
+    onValidSubmit?: Function;
+    onInvalidSubmit?: Function;
+    onSubmitted?: Function;
+    onValid?: Function;
+    onInvalid?: Function;
+    onChange?: Function;
+    validationErrors?: ValidationErrors;
+    preventExternalValidation?: boolean;
+  }
+
+  interface obj {
+    [key: string]: any;
+  }
+
+  class Form extends React.Component<IFormProps, any> {
+    public displayName: 'Formsy';
+    /** Allow resetting to specified data */
+    public reset(data: any): void;
+    /** Update model, submit to url prop and send the model */
+    public submit(event?: any): void;
+    public mapModel(model: any): any;
+    public getModel(): any;
+    /** Reset each key in the model to the original / initial / specified value */
+    public resetModel(data): void;
+    public setInputValidationErrors(errors: obj): void;
+    /** Checks if the values have changed from their initial value */
+    public isChanged(): boolean;
+    public getPristineValues(): obj;
+    /**
+     * Go through errors from server and grab the components
+     * stored in the inputs map. Change their state to invalid
+     * and set the serverError message
+     */
+    public updateInputsWithError(errors: obj): void;
+    public isFormDisabled(): boolean;
+    public getCurrentValues(): { [key: string]: any };
+    public setFormPristine(isPristine: boolean): void;
+    /**
+     * Use the binded values and the actual input value to
+     * validate the input and set its state. Then check the
+     * state of the form itself
+     */
+    public validate(isPristine: boolean): void;
+
+    /** Checks validation on current value or a passed value **/
+    public runValidation(component: any, value?: any): {
+      isRequired: boolean;
+      isValid: boolean;
+      error: any[];
+    };
+    public runRules(value: any, currentValues: any, validations: obj): void;
+    public validateForm(): void;
+
+    /** Method put on each input component to register itself to the form */
+    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;
+}
diff --git a/app/scripts/modules/core/src/presentation/formsy/index.ts b/app/scripts/modules/core/src/presentation/formsy/index.ts
new file mode 100644
index 00000000000..c29a2cbfadd
--- /dev/null
+++ b/app/scripts/modules/core/src/presentation/formsy/index.ts
@@ -0,0 +1,6 @@
+///<reference path="./formsy-react.d.ts" />
+
+export * from './formFieldLayout';
+export * from './BasicFieldLayout';
+export * from './FormComponent';
+export * from './components';
diff --git a/app/scripts/modules/core/src/presentation/index.ts b/app/scripts/modules/core/src/presentation/index.ts
index 8c38fdf70f6..644a116ab2a 100644
--- a/app/scripts/modules/core/src/presentation/index.ts
+++ b/app/scripts/modules/core/src/presentation/index.ts
@@ -1,3 +1,5 @@
 export * from './HoverablePopover';
 export * from './Tooltip';
 export * from './LabelComponent';
+export * from './ModalService';
+export * from './formsy';
diff --git a/app/scripts/modules/core/src/reactShims/ngReact.ts b/app/scripts/modules/core/src/reactShims/ngReact.ts
index 178517fb1d7..b8ab6c10c63 100644
--- a/app/scripts/modules/core/src/reactShims/ngReact.ts
+++ b/app/scripts/modules/core/src/reactShims/ngReact.ts
@@ -1,28 +1,30 @@
 import * as React from 'react';
 import { angular2react } from 'angular2react';
 import IInjectorService = angular.auto.IInjectorService;
-import { ReactInject } from './react.injector';
-import { ISpinnerProps, SpinnerWrapperComponent } from '../widgets/Spinner';
-import { IPipelineGraphProps } from '../pipeline/config/graph/PipelineGraph';
-import { InstancesProps } from '../instance/Instances';
-import { IHelpFieldProps } from '../help/HelpField';
-import { IExecutionStatusProps } from '../delivery/status/ExecutionStatus';
-import { IExecutionDetailsProps } from '../delivery/details/ExecutionDetails';
-import { IEntityUiTagsProps } from '../entityTag/EntityUiTags';
-import { DiffViewProps } from '../pipeline/config/actions/history/DiffView';
-import { ICopyToClipboardProps } from '../utils/clipboard/CopyToClipboard';
-import { IAccountTagProps } from '../account/AccountTag';
-import { IButtonBusyIndicatorProps } from '../forms/buttonBusyIndicator/ButtonBusyIndicator';
 import { AccountTagComponent } from '../account/accountTag.component';
 import { ButtonBusyIndicatorComponent } from '../forms/buttonBusyIndicator/buttonBusyIndicator.component';
 import { CopyToClipboardComponent } from '../utils/clipboard/copyToClipboard.component';
-import { diffViewComponent } from '../pipeline/config/actions/history/diffView.component';
+import { DiffViewProps } from '../pipeline/config/actions/history/DiffView';
 import { EntityUiTagsWrapperComponent } from '../entityTag/entityUiTags.component';
 import { ExecutionDetailsComponent } from '../delivery/details/executionDetails.component';
 import { ExecutionStatusComponent } from '../delivery/status/executionStatus.component';
 import { HelpFieldWrapperComponent } from '../help/helpField.component';
+import { IAccountTagProps } from '../account/AccountTag';
+import { IButtonBusyIndicatorProps } from '../forms/buttonBusyIndicator/ButtonBusyIndicator';
+import { ICopyToClipboardProps } from '../utils/clipboard/CopyToClipboard';
+import { IEntityUiTagsProps } from '../entityTag/EntityUiTags';
+import { IExecutionDetailsProps } from '../delivery/details/ExecutionDetails';
+import { IExecutionStatusProps } from '../delivery/status/ExecutionStatus';
+import { IHelpFieldProps } from '../help/HelpField';
+import { IPipelineGraphProps } from '../pipeline/config/graph/PipelineGraph';
+import { ISpinnerProps, SpinnerWrapperComponent } from '../widgets/Spinner';
+import { ITaskMonitorProps } from 'core/task/monitor/TaskMonitor';
+import { InstancesProps } from '../instance/Instances';
 import { InstancesWrapperComponent } from '../instance/instances.component';
 import { PipelineGraphComponent } from '../pipeline/config/graph/pipeline.graph.component';
+import { ReactInject } from './react.injector';
+import { TaskMonitorWrapperComponent } from 'core/task/monitor/taskMonitor.directive';
+import { diffViewComponent } from '../pipeline/config/actions/history/diffView.component';
 
 export class NgReactInjector extends ReactInject {
 
@@ -38,6 +40,7 @@ export class NgReactInjector extends ReactInject {
   public Instances: React.ComponentClass<InstancesProps>;
   public PipelineGraph: React.ComponentClass<IPipelineGraphProps>;
   public Spinner: React.ComponentClass<ISpinnerProps>;
+  public TaskMonitorWrapper: React.ComponentClass<ITaskMonitorProps>;
 
   public initialize($injector: IInjectorService) {
     this.$injector = $injector;
@@ -52,6 +55,7 @@ export class NgReactInjector extends ReactInject {
     this.Instances = angular2react('instancesWrapper', new InstancesWrapperComponent(), $injector) as any;
     this.PipelineGraph = angular2react('pipelineGraph', new PipelineGraphComponent(), $injector) as any;
     this.Spinner = angular2react('spinnerWrapper', new SpinnerWrapperComponent(), $injector) as any;
+    this.TaskMonitorWrapper = angular2react('taskMonitorWrapper', new TaskMonitorWrapperComponent(), $injector) as any;
   }
 }
 
diff --git a/app/scripts/modules/core/src/reactShims/react.injector.ts b/app/scripts/modules/core/src/reactShims/react.injector.ts
index 6e1510047bb..2d2606e6e73 100644
--- a/app/scripts/modules/core/src/reactShims/react.injector.ts
+++ b/app/scripts/modules/core/src/reactShims/react.injector.ts
@@ -3,30 +3,34 @@ import { IModalService } from 'angular-ui-bootstrap';
 import { StateService, StateParams } from 'angular-ui-router';
 import { IQService, IRootScopeService } from 'angular';
 
-import { StateEvents } from './state.events';
 import { Api } from '../api/api.service';
 import { ApplicationModelBuilder } from '../application/applicationModel.builder';
 import { ApplicationReader } from '../application/service/application.read.service';
 import { AuthenticationService } from '../authentication/authentication.service';
-import { CollapsibleSectionStateCache } from '../cache/collapsibleSectionStateCache';
 import { CancelModalService } from '../cancelModal/cancelModal.service';
 import { CloudProviderRegistry } from '../cloudProvider/cloudProvider.registry';
-import { ProviderSelectionService } from '../cloudProvider/providerSelection/providerSelection.service';
 import { ClusterFilterService } from '../cluster/filter/clusterFilter.service';
+import { CollapsibleSectionStateCache } from '../cache/collapsibleSectionStateCache';
 import { ConfirmationModalService } from '../confirmationModal/confirmationModal.service';
+import { EntityTagWriter} from '../entityTag';
 import { ExecutionFilterModel } from '../delivery/filter/executionFilter.model';
 import { ExecutionFilterService } from '../delivery/filter/executionFilter.service';
 import { ExecutionService } from '../delivery/service/execution.service';
-import { LoadBalancerFilterService } from '../loadBalancer/filter/loadBalancer.filter.service';
+import { HelpContentsRegistry } from 'core/help';
+import { IHelpContents } from 'core/help';
+import { InfrastructureSearchService } from '../search/infrastructure/infrastructureSearch.service';
 import { LoadBalancerFilterModel } from '../loadBalancer/filter/loadBalancerFilter.model';
-import { PipelineConfigService } from '../pipeline/config/services/pipelineConfig.service';
-import { PipelineConfigProvider } from '../pipeline/config/pipelineConfigProvider';
+import { LoadBalancerFilterService } from '../loadBalancer/filter/loadBalancer.filter.service';
 import { ManualJudgmentService } from '../pipeline/config/stages/manualJudgment/manualJudgment.service';
+import { PipelineConfigProvider } from '../pipeline/config/pipelineConfigProvider';
+import { PipelineConfigService } from '../pipeline/config/services/pipelineConfig.service';
 import { PipelineTemplateService } from '../pipeline/config/templates/pipelineTemplate.service';
+import { ProviderSelectionService } from '../cloudProvider/providerSelection/providerSelection.service';
+import { SchedulerFactory } from '../scheduler/scheduler.factory';
+import { StateEvents } from './state.events';
+import { TaskMonitorBuilder } from '../task/monitor/taskMonitor.builder';
 import { VariableInputService } from '../pipeline/config/templates/inputs/variableInput.service';
 import { VariableValidatorService } from '../pipeline/config/templates/validators/variableValidator.service';
-import { SchedulerFactory } from '../scheduler/scheduler.factory';
-import { InfrastructureSearchService } from '../search/infrastructure/infrastructureSearch.service';
 import { WaypointService } from '../utils/waypoints/waypoint.service';
 
 export abstract class ReactInject {
@@ -49,31 +53,35 @@ export class CoreReactInject extends ReactInject {
 
   // Services
   public get $stateParams() { return this.$injector.get('$stateParams') as StateParams; }
-  public get stateEvents() { return this.$injector.get('stateEvents') as StateEvents; }
   public get API() { return this.$injector.get('API') as Api; }
   public get applicationModelBuilder() { return this.$injector.get('applicationModelBuilder') as ApplicationModelBuilder; }
   public get applicationReader() { return this.$injector.get('applicationReader') as ApplicationReader; }
   public get authenticationService() { return this.$injector.get('authenticationService') as AuthenticationService; }
-  public get collapsibleSectionStateCache() { return this.$injector.get('collapsibleSectionStateCache') as CollapsibleSectionStateCache; }
   public get cancelModalService() { return this.$injector.get('cancelModalService') as CancelModalService; }
   public get cloudProviderRegistry() { return this.$injector.get('cloudProviderRegistry') as CloudProviderRegistry; }
-  public get providerSelectionService() { return this.$injector.get('providerSelectionService') as ProviderSelectionService; }
   public get clusterFilterService() { return this.$injector.get('clusterFilterService') as ClusterFilterService; }
+  public get collapsibleSectionStateCache() { return this.$injector.get('collapsibleSectionStateCache') as CollapsibleSectionStateCache; }
   public get confirmationModalService() { return this.$injector.get('confirmationModalService') as ConfirmationModalService; }
+  public get entityTagWriter() { return this.$injector.get('entityTagWriter') as EntityTagWriter; }
   public get executionFilterModel() { return this.$injector.get('executionFilterModel') as ExecutionFilterModel; }
   public get executionFilterService() { return this.$injector.get('executionFilterService') as ExecutionFilterService; }
   public get executionService() { return this.$injector.get('executionService') as ExecutionService; }
-  public get loadBalancerFilterService() { return this.$injector.get('loadBalancerFilterService') as LoadBalancerFilterService; }
+  public get helpContents() { return this.$injector.get('helpContents') as IHelpContents }
+  public get helpContentsRegistry() { return this.$injector.get('helpContentsRegistry') as HelpContentsRegistry; }
+  public get infrastructureSearchService() { return this.$injector.get('infrastructureSearchService') as InfrastructureSearchService; }
   public get loadBalancerFilterModel() { return this.$injector.get('loadBalancerFilterModel') as LoadBalancerFilterModel; }
+  public get loadBalancerFilterService() { return this.$injector.get('loadBalancerFilterService') as LoadBalancerFilterService; }
+  public get manualJudgmentService() { return this.$injector.get('manualJudgmentService') as ManualJudgmentService; }
   public get modalService() { return this.$injector.get('$uibModal') as IModalService; }
   public get pipelineConfig() { return this.$injector.get('pipelineConfig') as PipelineConfigProvider; }
   public get pipelineConfigService() { return this.$injector.get('pipelineConfigService') as PipelineConfigService; }
-  public get manualJudgmentService() { return this.$injector.get('manualJudgmentService') as ManualJudgmentService; }
   public get pipelineTemplateService() { return this.$injector.get('pipelineTemplateService') as PipelineTemplateService; }
+  public get providerSelectionService() { return this.$injector.get('providerSelectionService') as ProviderSelectionService; }
+  public get schedulerFactory() { return this.$injector.get('schedulerFactory') as SchedulerFactory; }
+  public get stateEvents() { return this.$injector.get('stateEvents') as StateEvents; }
+  public get taskMonitorBuilder() { return this.$injector.get('taskMonitorBuilder') as TaskMonitorBuilder; }
   public get variableInputService() { return this.$injector.get('variableInputService') as VariableInputService; }
   public get variableValidatorService() { return this.$injector.get('variableValidatorService') as VariableValidatorService; }
-  public get schedulerFactory() { return this.$injector.get('schedulerFactory') as SchedulerFactory; }
-  public get infrastructureSearchService() { return this.$injector.get('infrastructureSearchService') as InfrastructureSearchService; }
   public get waypointService() { return this.$injector.get('waypointService') as WaypointService; }
 
   private createStateService(): StateService {
diff --git a/app/scripts/modules/core/src/task/monitor/TaskMonitor.tsx b/app/scripts/modules/core/src/task/monitor/TaskMonitor.tsx
new file mode 100644
index 00000000000..bf2b82ab7df
--- /dev/null
+++ b/app/scripts/modules/core/src/task/monitor/TaskMonitor.tsx
@@ -0,0 +1,6 @@
+import { TaskMonitor } from 'core';
+
+export interface ITaskMonitorProps {
+  monitor: TaskMonitor;
+}
+
diff --git a/app/scripts/modules/core/src/task/monitor/taskMonitor.directive.js b/app/scripts/modules/core/src/task/monitor/taskMonitor.directive.js
deleted file mode 100644
index ce5a195b148..00000000000
--- a/app/scripts/modules/core/src/task/monitor/taskMonitor.directive.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-const angular = require('angular');
-
-import { MODAL_CLOSE_COMPONENT } from 'core/modal/buttons/modalClose.component';
-import { AUTO_SCROLL_DIRECTIVE } from 'core/presentation/autoScroll/autoScroll.directive';
-
-import './taskMonitor.directive.less';
-
-module.exports = angular.module('spinnaker.tasks.monitor.directive', [
-  AUTO_SCROLL_DIRECTIVE,
-  require('../../modal/modalOverlay.directive.js'),
-  MODAL_CLOSE_COMPONENT,
-  require('./taskMonitorError.component'),
-  require('./taskMonitorStatus.component'),
-])
-  .directive('taskMonitor', function () {
-    return {
-      restrict: 'E',
-      templateUrl: require('./taskMonitor.html'),
-      scope: {
-        taskMonitor: '=monitor'
-      }
-    };
-  }
-);
diff --git a/app/scripts/modules/core/src/task/monitor/taskMonitor.directive.ts b/app/scripts/modules/core/src/task/monitor/taskMonitor.directive.ts
new file mode 100644
index 00000000000..033698ee602
--- /dev/null
+++ b/app/scripts/modules/core/src/task/monitor/taskMonitor.directive.ts
@@ -0,0 +1,36 @@
+import { IComponentOptions, module } from 'angular';
+
+import { AUTO_SCROLL_DIRECTIVE } from 'core/presentation/autoScroll/autoScroll.directive';
+import { MODAL_CLOSE_COMPONENT } from 'core/modal/buttons/modalClose.component';
+
+import './taskMonitor.directive.less';
+
+export const TASKS_MONITOR_DIRECTIVE = 'spinnaker.tasks.monitor.directive';
+
+const ngmodule = module(TASKS_MONITOR_DIRECTIVE, [
+  AUTO_SCROLL_DIRECTIVE,
+  require('../../modal/modalOverlay.directive.js'),
+  MODAL_CLOSE_COMPONENT,
+  require('./taskMonitorError.component'),
+  require('./taskMonitorStatus.component'),
+]);
+
+ngmodule.directive('taskMonitor', function () {
+  return {
+    restrict: 'E',
+    templateUrl: require('./taskMonitor.html'),
+    scope: {
+      taskMonitor: '=monitor'
+    }
+  };
+});
+
+
+export class TaskMonitorWrapperComponent implements IComponentOptions {
+  public template = `<task-monitor monitor="$ctrl.monitor"></task-monitor>`;
+  public bindings = {
+    monitor: '<'
+  }
+}
+
+ngmodule.component('taskMonitorWrapper', new TaskMonitorWrapperComponent());
diff --git a/app/scripts/modules/core/src/task/monitor/taskMonitor.module.js b/app/scripts/modules/core/src/task/monitor/taskMonitor.module.js
index 55de2def107..cff6ed8b6df 100644
--- a/app/scripts/modules/core/src/task/monitor/taskMonitor.module.js
+++ b/app/scripts/modules/core/src/task/monitor/taskMonitor.module.js
@@ -4,6 +4,6 @@ const angular = require('angular');
 
 module.exports = angular
   .module('spinnaker.tasks.monitor', [
-    require('./taskMonitor.directive'),
+    require('./taskMonitor.directive').TASKS_MONITOR_DIRECTIVE,
     require('./multiTaskMonitor.component'),
   ]);
diff --git a/app/scripts/modules/core/src/task/monitor/taskMonitorService.js b/app/scripts/modules/core/src/task/monitor/taskMonitorService.js
index 9c95d538f6c..45c43c55dce 100644
--- a/app/scripts/modules/core/src/task/monitor/taskMonitorService.js
+++ b/app/scripts/modules/core/src/task/monitor/taskMonitorService.js
@@ -1,12 +1,13 @@
 'use strict';
+const angular = require('angular');
 
 import _ from 'lodash';
-import {TASK_READ_SERVICE} from 'core/task/task.read.service';
 
-const angular = require('angular');
+import { TASK_READ_SERVICE } from 'core';
+import { TASKS_MONITOR_DIRECTIVE } from './taskMonitor.directive';
 
 module.exports = angular.module('spinnaker.tasks.monitor.service', [
-  require('./taskMonitor.directive.js'),
+  TASKS_MONITOR_DIRECTIVE,
   TASK_READ_SERVICE,
 ])
   .factory('taskMonitorService', function($log, taskReader, $timeout) {
diff --git a/app/scripts/modules/core/src/utils/index.ts b/app/scripts/modules/core/src/utils/index.ts
index c348201103c..339f6e6e86c 100644
--- a/app/scripts/modules/core/src/utils/index.ts
+++ b/app/scripts/modules/core/src/utils/index.ts
@@ -1,7 +1,8 @@
-export * from './uuid.service';
-export * from './scrollTo/scrollTo.service';
-export * from './timeFormatters';
 export * from './json/json.utility.service';
-export * from './stickyHeader/StickyContainer';
+export * from './scrollTo/scrollTo.service';
 export * from './stickyHeader/Sticky';
+export * from './stickyHeader/StickyContainer';
+export * from './timeFormatters';
 export * from './tsDecorators/directiveFactoryDecorator';
+export * from './uuid.service';
+export * from './noop';
diff --git a/app/scripts/modules/core/src/utils/noop.ts b/app/scripts/modules/core/src/utils/noop.ts
new file mode 100644
index 00000000000..51ae1f042a7
--- /dev/null
+++ b/app/scripts/modules/core/src/utils/noop.ts
@@ -0,0 +1,3 @@
+function noopFn() {}
+const noop = noopFn as any;
+export { noop }
diff --git a/gradle/installViaTravis.sh b/gradle/installViaTravis.sh
index 2262dfd341d..439180a152c 100755
--- a/gradle/installViaTravis.sh
+++ b/gradle/installViaTravis.sh
@@ -15,6 +15,7 @@ if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
 
   source ~/.nvm/nvm.sh
   nvm install $NODE_JS_VERSION
+  yarn
 
 elif [ "$TRAVIS_PULL_REQUEST" == "false" ] && [ "$TRAVIS_TAG" == "" ]; then
   echo -e 'Assemble Branch with Snapshot => Branch ['$TRAVIS_BRANCH']'
diff --git a/package.json b/package.json
index ec5e7742460..51c6ee6eeec 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "diff-match-patch": "^1.0.0",
     "dompurify": "^0.8.5",
     "font-awesome": "^4.7.0",
+    "formsy-react": "^0.19.2",
     "jasmine": "^2.6.0",
     "jquery": "2.1.4",
     "jquery-textcomplete": "1.6.1",
@@ -53,13 +54,14 @@
     "js-yaml": "^3.8.3",
     "lodash": "^4.16.1",
     "lodash-decorators": "^4.3.1",
+    "marked": "^0.3.6",
     "moment-timezone": "^0.4.0",
     "n3-charts": "^2.0.18",
     "ngimport": "^0.6.0",
     "prop-types": "^15.5.10",
-    "react": "^15.5.4",
+    "react": "~15.4.2",
     "react-bootstrap": "^0.31.0",
-    "react-dom": "^15.5.4",
+    "react-dom": "~15.4.2",
     "react-ga": "^2.1.2",
     "react-select": "^1.0.0-rc.4",
     "react2angular": "^1.1.2",
@@ -84,6 +86,7 @@
     "@types/jquery": "^2.0.34",
     "@types/js-yaml": "3.5.30",
     "@types/lodash": "^4.14.64",
+    "@types/marked": "^0.0.28",
     "@types/moment-timezone": "^0.2.34",
     "@types/node": "7.0.5",
     "@types/prop-types": "^15.5.1",
diff --git a/tslint.json b/tslint.json
index 018a24462ad..344b3a300d8 100644
--- a/tslint.json
+++ b/tslint.json
@@ -43,7 +43,7 @@
     "no-string-literal": false,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
-    "no-unused-expression": true,
+    "no-unused-expression": [true, "allow-fast-null-checks"],
     "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
diff --git a/yarn.lock b/yarn.lock
index 847f2f7ac8e..3617b472112 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -259,6 +259,10 @@
   version "4.14.64"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.64.tgz#979cf3a3d4a368670840bf9b3e448dc33ffe84ee"
 
+"@types/marked@^0.0.28":
+  version "0.0.28"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-0.0.28.tgz#44ba754e9fa51432583e8eb30a7c4dd249b52faa"
+
 "@types/moment-timezone@^0.2.34":
   version "0.2.34"
   resolved "https://registry.yarnpkg.com/@types/moment-timezone/-/moment-timezone-0.2.34.tgz#948e0aff82742a31dd63714d1aac9616bc375053"
@@ -2583,7 +2587,7 @@ fbjs@^0.6.1:
     ua-parser-js "^0.7.9"
     whatwg-fetch "^0.9.0"
 
-fbjs@^0.8.4, fbjs@^0.8.9:
+fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
   dependencies:
@@ -2697,6 +2701,10 @@ forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
+form-data-to-object@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/form-data-to-object/-/form-data-to-object-0.2.0.tgz#f7a8e68ddd910a1100a65e25ac6a484143ff8168"
+
 form-data@~2.1.1:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
@@ -2705,6 +2713,12 @@ form-data@~2.1.1:
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
+formsy-react@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/formsy-react/-/formsy-react-0.19.2.tgz#7fa818ff93c8c07195486c4d2e42b6da0c0ee4a3"
+  dependencies:
+    form-data-to-object "^0.2.0"
+
 forwarded@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
@@ -3796,7 +3810,7 @@ macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
-marked@^0.3.3:
+marked@^0.3.3, marked@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
 
@@ -4698,20 +4712,13 @@ promise@^7.0.3, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
-  version "15.5.9"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.9.tgz#d478eef0e761396942f70c78e772f76e8be747c9"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-
 proxy-addr@~1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
@@ -4834,7 +4841,15 @@ react-dom@^0.14.8:
   version "0.14.9"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.14.9.tgz#05064a3dcf0fb1880a3b2bfc9d58c55d8d9f6293"
 
-react-dom@^15.4.2, react-dom@^15.5.4:
+react-dom@^15.4.2, react-dom@~15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"
+  dependencies:
+    fbjs "^0.8.1"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+react-dom@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
   dependencies:
@@ -4911,7 +4926,15 @@ react@^0.14.8:
     envify "^3.0.0"
     fbjs "^0.6.1"
 
-react@^15.4.2, react@^15.5.4:
+react@^15.4.2, react@~15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
+  dependencies:
+    fbjs "^0.8.4"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.0"
+
+react@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
   dependencies: