From fc95a3c48db9a3d537a2067e010e417634fb0137 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Wed, 8 Feb 2017 12:34:27 -0500
Subject: [PATCH 1/5] Introducing react icons!

---
 package.json                                             | 3 ++-
 src/core_plugins/kibana/public/kibana.js                 | 1 +
 .../public/visualize/listing/visualize_listing.html      | 4 ++--
 src/ui/public/react_components.js                        | 9 +++++++++
 tasks/config/licenses.js                                 | 1 +
 ui_framework/components/icon/kui_icon.js                 | 6 ++++++
 ui_framework/components/icon/plus_icon.js                | 6 ++++++
 ui_framework/components/icon/trash_icon.js               | 6 ++++++
 8 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/ui/public/react_components.js
 create mode 100644 ui_framework/components/icon/kui_icon.js
 create mode 100644 ui_framework/components/icon/plus_icon.js
 create mode 100644 ui_framework/components/icon/trash_icon.js

diff --git a/package.json b/package.json
index 2f31667cf0b3f..2f242096f5420 100644
--- a/package.json
+++ b/package.json
@@ -150,6 +150,7 @@
     "mkdirp": "0.5.1",
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",
+    "ngreact": "0.3.0",
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
     "node-uuid": "1.4.7",
@@ -157,6 +158,7 @@
     "postcss-loader": "1.2.1",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
+    "react": "15.2.0",
     "request": "2.61.0",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
@@ -232,7 +234,6 @@
     "npm": "3.10.10",
     "portscanner": "1.0.0",
     "proxyquire": "1.7.10",
-    "react": "15.2.0",
     "react-addons-test-utils": "15.2.0",
     "react-dom": "15.2.0",
     "react-redux": "4.4.5",
diff --git a/src/core_plugins/kibana/public/kibana.js b/src/core_plugins/kibana/public/kibana.js
index 5815cc33c2d15..735347013b0f4 100644
--- a/src/core_plugins/kibana/public/kibana.js
+++ b/src/core_plugins/kibana/public/kibana.js
@@ -7,6 +7,7 @@ import routes from 'ui/routes';
 import modules from 'ui/modules';
 
 import kibanaLogoUrl from 'ui/images/kibana.svg';
+import 'ui/react_components';
 import 'ui/autoload/all';
 import 'plugins/kibana/discover/index';
 import 'plugins/kibana/visualize/index';
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index a9885114f9b27..e64ed7a14b44f 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -39,7 +39,7 @@
           ng-click="listingController.deleteSelectedItems()"
           tooltip="Delete selected visualizations"
         >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
+          <react-component name="TrashIconComponent"></react-component>
         </button>
 
         <!-- Create visualization button -->
@@ -50,7 +50,7 @@
           ng-if="listingController.getSelectedItemsCount() === 0"
           tooltip="Create new visualization"
         >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
+          <react-component name="PlusIconComponent"></react-component>
         </a>
       </div>
 
diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
new file mode 100644
index 0000000000000..798fd6bbfe766
--- /dev/null
+++ b/src/ui/public/react_components.js
@@ -0,0 +1,9 @@
+import 'ngreact';
+
+import { PlusIcon } from 'ui_framework/components/icon/plus_icon';
+import { TrashIcon } from 'ui_framework/components/icon/trash_icon';
+
+import uiModules from 'ui/modules';
+const app = uiModules.get('app/kibana', ['react']);
+app.value('PlusIconComponent', PlusIcon);
+app.value('TrashIconComponent', TrashIcon);
diff --git a/tasks/config/licenses.js b/tasks/config/licenses.js
index c43499364018f..0fb4dd012b0fb 100644
--- a/tasks/config/licenses.js
+++ b/tasks/config/licenses.js
@@ -31,6 +31,7 @@ module.exports = function (grunt) {
         'Public domain',
         'Unlicense',
         'WTFPL',
+        '(GPL-2.0 OR MIT)',
         'new BSD, and MIT'
       ],
       overrides: {
diff --git a/ui_framework/components/icon/kui_icon.js b/ui_framework/components/icon/kui_icon.js
new file mode 100644
index 0000000000000..d88d3efdc50a2
--- /dev/null
+++ b/ui_framework/components/icon/kui_icon.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export function KuiIcon({ className }) {
+  const classNames = ['kuiButton__icon', 'kuiIcon', className];
+  return <span aria-hidden="true" className={ classNames.join(' ') }/>;
+}
diff --git a/ui_framework/components/icon/plus_icon.js b/ui_framework/components/icon/plus_icon.js
new file mode 100644
index 0000000000000..c661673596a12
--- /dev/null
+++ b/ui_framework/components/icon/plus_icon.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import { KuiIcon } from './kui_icon';
+
+export function PlusIcon() {
+  return <KuiIcon className="fa-plus"/>;
+}
diff --git a/ui_framework/components/icon/trash_icon.js b/ui_framework/components/icon/trash_icon.js
new file mode 100644
index 0000000000000..7ab2d41f42886
--- /dev/null
+++ b/ui_framework/components/icon/trash_icon.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import { KuiIcon } from './kui_icon';
+
+export function TrashIcon() {
+  return <KuiIcon className="fa-trash"/>;
+}

From 700057d41f4dd7f0d4e7f477e539150ac35ae33f Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Wed, 8 Feb 2017 15:50:46 -0500
Subject: [PATCH 2/5] Incorporate buttons

TODO: need to implement the tooltips
---
 package.json                                  |  1 +
 .../visualize/listing/visualize_listing.html  | 21 ++--------
 .../visualize/listing/visualize_listing.js    | 15 ++++++++
 src/ui/public/react_components.js             | 10 +++--
 ui_framework/components/button/kui_button.js  | 38 +++++++++++++++++++
 .../components/button/kui_button_link.js      | 24 ++++++++++++
 ui_framework/components/button/plus_button.js | 19 ++++++++++
 .../components/button/trash_button.js         | 19 ++++++++++
 ui_framework/components/index.js              |  7 ++++
 .../components/tooltip/kui_tooltip.js         | 27 +++++++++++++
 10 files changed, 159 insertions(+), 22 deletions(-)
 create mode 100644 ui_framework/components/button/kui_button.js
 create mode 100644 ui_framework/components/button/kui_button_link.js
 create mode 100644 ui_framework/components/button/plus_button.js
 create mode 100644 ui_framework/components/button/trash_button.js
 create mode 100644 ui_framework/components/index.js
 create mode 100644 ui_framework/components/tooltip/kui_tooltip.js

diff --git a/package.json b/package.json
index 2f242096f5420..be37ce52cde73 100644
--- a/package.json
+++ b/package.json
@@ -159,6 +159,7 @@
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
     "react": "15.2.0",
+    "react-tooltip": "3.2.6",
     "request": "2.61.0",
     "rimraf": "2.4.3",
     "rison-node": "1.0.0",
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index e64ed7a14b44f..66f2293a12696 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -32,26 +32,11 @@
 
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
-        <button
-          class="kuiButton kuiButton--danger"
-          aria-label="Delete selected objects"
-          ng-if="listingController.getSelectedItemsCount() > 0"
-          ng-click="listingController.deleteSelectedItems()"
-          tooltip="Delete selected visualizations"
-        >
-          <react-component name="TrashIconComponent"></react-component>
-        </button>
+        <react-component name="TrashButtonComponent" props="trashButtonProps"></react-component>
 
         <!-- Create visualization button -->
-        <a
-          class="kuiButton kuiButton--primary"
-          href="#/visualize/new"
-          aria-label="Create new visualization"
-          ng-if="listingController.getSelectedItemsCount() === 0"
-          tooltip="Create new visualization"
-        >
-          <react-component name="PlusIconComponent"></react-component>
-        </a>
+        <react-component name="PlusButtonComponent" props="plusButtonProps"></react-component>
+
       </div>
 
       <div class="kuiToolBarSection">
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index 0cd96bee764d9..90c6150c70e5c 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -175,4 +175,19 @@ export function VisualizeListingController($injector, $scope) {
   this.getUrlForItem = function getUrlForItem(item) {
     return `#/visualize/edit/${item.id}`;
   };
+
+  const updateProps = () => {
+    $scope.plusButtonProps = {
+      href: '#/visualize/new',
+      tooltip: 'Create new visualization',
+      hide: this.getSelectedItemsCount() > 0
+    };
+
+    $scope.trashButtonProps = {
+      tooltip: 'Delete selected visualizations',
+      hide: this.getSelectedItemsCount() === 0,
+      onClick: () => this.deleteSelectedItems()
+    };
+  };
+  $scope.$watch(() => this.getSelectedItemsCount(), () => updateProps());
 }
diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
index 798fd6bbfe766..134edb4dac3df 100644
--- a/src/ui/public/react_components.js
+++ b/src/ui/public/react_components.js
@@ -1,9 +1,11 @@
 import 'ngreact';
 
-import { PlusIcon } from 'ui_framework/components/icon/plus_icon';
-import { TrashIcon } from 'ui_framework/components/icon/trash_icon';
+import {
+  PlusButton,
+  TrashButton
+} from 'ui_framework/components';
 
 import uiModules from 'ui/modules';
 const app = uiModules.get('app/kibana', ['react']);
-app.value('PlusIconComponent', PlusIcon);
-app.value('TrashIconComponent', TrashIcon);
+app.value('PlusButtonComponent', PlusButton);
+app.value('TrashButtonComponent', TrashButton);
diff --git a/ui_framework/components/button/kui_button.js b/ui_framework/components/button/kui_button.js
new file mode 100644
index 0000000000000..6c8b9f9bf4bb5
--- /dev/null
+++ b/ui_framework/components/button/kui_button.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { KuiButtonLink } from './kui_button_link';
+import { KuiTooltip } from '../tooltip/kui_tooltip';
+
+export function KuiButton(props) {
+  if (props.href && props.onClick) {
+    throw new Error('Only href or onClick can be defined, not both');
+  }
+
+  if (props.hide) return null;
+
+  const classes = classnames('kuiButton', props.className);
+
+  if (props.href) {
+    return <KuiButtonLink {...props} />;
+  } else {
+    return <KuiTooltip text={ props.tooltip }>
+      <button
+        className={ classes }
+        aria-label={ props.tooltip }
+        onClick={ props.onClick }
+      >
+        { props.children }
+      </button>
+    </KuiTooltip>;
+  }
+}
+
+KuiButton.PropTypes = {
+  hide: React.PropTypes.bool,
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  // Only one of the following must be given, not both.
+  onClick: React.PropTypes.func,
+  href: React.PropTypes.string
+};
diff --git a/ui_framework/components/button/kui_button_link.js b/ui_framework/components/button/kui_button_link.js
new file mode 100644
index 0000000000000..c8d5623cb1fb2
--- /dev/null
+++ b/ui_framework/components/button/kui_button_link.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { KuiTooltip } from '../tooltip/kui_tooltip';
+
+export function KuiButtonLink({ className, href, tooltip, children }) {
+  const classes = classnames('kuiButton', className);
+  const buttonLink = <a
+    className={ classes }
+    href={ href }
+    aria-label={ tooltip }
+    data-tip={ tooltip }
+  >
+    { children }
+  </a>;
+
+  return <KuiTooltip text={ tooltip }> { buttonLink } </KuiTooltip>;
+}
+
+KuiButtonLink.PropTypes = {
+  tooltip: React.PropTypes.string,
+  href: React.PropTypes.string,
+  className: React.PropTypes.string
+};
diff --git a/ui_framework/components/button/plus_button.js b/ui_framework/components/button/plus_button.js
new file mode 100644
index 0000000000000..4cad0c48d6a7a
--- /dev/null
+++ b/ui_framework/components/button/plus_button.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { KuiButton } from './kui_button';
+import { PlusIcon } from '../icon/plus_icon';
+
+export function PlusButton(props) {
+  return <KuiButton className="kuiButton--primary" {...props}>
+    <PlusIcon />
+  </KuiButton>;
+}
+
+PlusButton.PropTypes = {
+  hide: React.PropTypes.bool,
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  // Only one of the following must be given, not both.
+  onClick: React.PropTypes.func,
+  href: React.PropTypes.string
+};
diff --git a/ui_framework/components/button/trash_button.js b/ui_framework/components/button/trash_button.js
new file mode 100644
index 0000000000000..27aee637098db
--- /dev/null
+++ b/ui_framework/components/button/trash_button.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { KuiButton } from './kui_button';
+import { TrashIcon } from '../icon/trash_icon';
+
+export function TrashButton(props) {
+  return <KuiButton className="kuiButton--danger" {...props}>
+    <TrashIcon />
+  </KuiButton>;
+}
+
+TrashButton.PropTypes = {
+  hide: React.PropTypes.bool,
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  // Only one of the following must be given, not both.
+  onClick: React.PropTypes.func,
+  href: React.PropTypes.string
+};
diff --git a/ui_framework/components/index.js b/ui_framework/components/index.js
new file mode 100644
index 0000000000000..257010f30f162
--- /dev/null
+++ b/ui_framework/components/index.js
@@ -0,0 +1,7 @@
+export { PlusIcon } from './icon/plus_icon';
+export { TrashIcon } from './icon/trash_icon';
+
+export { PlusButton } from './button/plus_button';
+export { TrashButton } from './button/trash_button';
+
+export { KuiTooltip } from './tooltip/kui_tooltip';
diff --git a/ui_framework/components/tooltip/kui_tooltip.js b/ui_framework/components/tooltip/kui_tooltip.js
new file mode 100644
index 0000000000000..de787e4bff6dd
--- /dev/null
+++ b/ui_framework/components/tooltip/kui_tooltip.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import ReactTooltip from 'react-tooltip';
+
+/**
+ * Wrap elements inside KuiTooltip to provide a popup tooltip on hover.
+ *
+ * TODO: This has the unfortunate side affect of attaching a ReactTooltip to every element, when
+ * it's not neccessary to do so. Unfortunately, because of our angular -> react migration, it's
+ * not easy to have a single reference to ReactTooltip that every element can reference.
+ *
+ * @param text
+ * @param children
+ * @returns {XML}
+ * @constructor
+ */
+export function KuiTooltip({ text, children }) {
+  const tooltip = text
+    ? <ReactTooltip place="bottom" id={ text }>{ text }</ReactTooltip>
+    : null;
+  return <div>
+      <div data-tip={ text } data-for={ text }>
+        { children }
+      </div>
+      { tooltip }
+    </div>;
+}

From f0187afa23f3234ad45ac9d663162e6c08b74f62 Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Fri, 10 Feb 2017 13:36:46 -0500
Subject: [PATCH 3/5] address code review comments

- Combine the two buttons into a single react component inside
visualize.  Otherwise the tooltip property became an issue because
there is also an angular tooltip prop.
---
 .../kibana/public/visualize/index.js          |  8 ++++
 .../listing/create_or_delete_button.js        | 19 +++++++++
 .../visualize/listing/visualize_listing.html  |  9 ++---
 .../visualize/listing/visualize_listing.js    | 13 ++-----
 src/ui/public/react_components.js             | 12 ++++--
 .../components/button/create_button_link.js   | 16 ++++++++
 .../components/button/delete_button.js        | 16 ++++++++
 ui_framework/components/button/kui_button.js  | 39 ++++++-------------
 .../components/button/kui_button_link.js      |  4 +-
 ui_framework/components/button/plus_button.js | 19 ---------
 .../components/button/trash_button.js         | 19 ---------
 ui_framework/components/icon/plus_icon.js     |  6 ---
 ui_framework/components/icon/trash_icon.js    |  6 ---
 ui_framework/components/index.js              |  8 ++--
 .../components/tooltip/kui_tooltip.js         |  5 +--
 15 files changed, 93 insertions(+), 106 deletions(-)
 create mode 100644 src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js
 create mode 100644 ui_framework/components/button/create_button_link.js
 create mode 100644 ui_framework/components/button/delete_button.js
 delete mode 100644 ui_framework/components/button/plus_button.js
 delete mode 100644 ui_framework/components/button/trash_button.js
 delete mode 100644 ui_framework/components/icon/plus_icon.js
 delete mode 100644 ui_framework/components/icon/trash_icon.js

diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
index a58afa9be2678..c7a69cc0fa8b3 100644
--- a/src/core_plugins/kibana/public/visualize/index.js
+++ b/src/core_plugins/kibana/public/visualize/index.js
@@ -23,6 +23,14 @@ import { VisualizeConstants } from './visualize_constants';
 import savedObjectRegistry from 'ui/saved_objects/saved_object_registry';
 import savedVisusalizationProvider from 'plugins/kibana/visualize/saved_visualizations/saved_visualization_register';
 
+import { CreateOrDeleteButton } from './listing/create_or_delete_button';
+
+import uiModules from 'ui/modules';
+const app = uiModules.get('app/visualize', ['react']);
+app.directive('createOrDeleteButton', function (reactDirective) {
+  return reactDirective(CreateOrDeleteButton);
+});
+
 uiRoutes
 .defaults(/visualize/, {
   requireDefaultIndex: true
diff --git a/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js b/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js
new file mode 100644
index 0000000000000..bdda44b05b0b7
--- /dev/null
+++ b/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { CreateButtonLink } from 'ui_framework/components/button/create_button_link';
+import { DeleteButton } from 'ui_framework/components/button/delete_button';
+
+export function CreateOrDeleteButton({ showCreate, doDelete }) {
+  if (showCreate) {
+    return <CreateButtonLink href = "#/visualize/new"
+                             tooltip = "Create new visualization" />;
+  } else {
+    return <DeleteButton onClick={() => doDelete() }
+                         tooltip="Delete selected visualizations" />;
+  }
+}
+
+CreateOrDeleteButton.propTypes = {
+  showCreate: React.PropTypes.bool,
+  doDelete: React.PropTypes.func
+};
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
index 66f2293a12696..cc86396d1aa95 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -32,11 +32,10 @@
 
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->
-        <react-component name="TrashButtonComponent" props="trashButtonProps"></react-component>
-
-        <!-- Create visualization button -->
-        <react-component name="PlusButtonComponent" props="plusButtonProps"></react-component>
-
+        <create-or-delete-button
+          show-create="createOrDeleteProps.showCreate"
+          do-delete="createOrDeleteProps.doDelete"
+        ></create-or-delete-button>
       </div>
 
       <div class="kuiToolBarSection">
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index 90c6150c70e5c..5c82b8df366b6 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -177,16 +177,9 @@ export function VisualizeListingController($injector, $scope) {
   };
 
   const updateProps = () => {
-    $scope.plusButtonProps = {
-      href: '#/visualize/new',
-      tooltip: 'Create new visualization',
-      hide: this.getSelectedItemsCount() > 0
-    };
-
-    $scope.trashButtonProps = {
-      tooltip: 'Delete selected visualizations',
-      hide: this.getSelectedItemsCount() === 0,
-      onClick: () => this.deleteSelectedItems()
+    $scope.createOrDeleteProps = {
+      showCreate: this.getSelectedItemsCount() === 0,
+      doDelete: () => this.deleteSelectedItems()
     };
   };
   $scope.$watch(() => this.getSelectedItemsCount(), () => updateProps());
diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
index 134edb4dac3df..c65ccadeb1543 100644
--- a/src/ui/public/react_components.js
+++ b/src/ui/public/react_components.js
@@ -1,11 +1,15 @@
 import 'ngreact';
 
 import {
-  PlusButton,
-  TrashButton
+  CreateButtonLink,
+  DeleteButton
 } from 'ui_framework/components';
 
 import uiModules from 'ui/modules';
 const app = uiModules.get('app/kibana', ['react']);
-app.value('PlusButtonComponent', PlusButton);
-app.value('TrashButtonComponent', TrashButton);
+app.directive('createButtonLink', function (reactDirective) {
+  return reactDirective(CreateButtonLink);
+});
+app.directive('deleteButton', function (reactDirective) {
+  return reactDirective(DeleteButton);
+});
diff --git a/ui_framework/components/button/create_button_link.js b/ui_framework/components/button/create_button_link.js
new file mode 100644
index 0000000000000..922078a7e5487
--- /dev/null
+++ b/ui_framework/components/button/create_button_link.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { KuiButtonLink } from './kui_button_link';
+import { CreateIcon } from '../icon/create_icon';
+
+export function CreateButtonLink(props) {
+  return <KuiButtonLink className="kuiButton--primary" {...props}>
+    <CreateIcon />
+  </KuiButtonLink>;
+}
+
+CreateButtonLink.propTypes = {
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  href: React.PropTypes.string
+};
diff --git a/ui_framework/components/button/delete_button.js b/ui_framework/components/button/delete_button.js
new file mode 100644
index 0000000000000..76ffc3ab5547e
--- /dev/null
+++ b/ui_framework/components/button/delete_button.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { KuiButton } from './kui_button';
+import { DeleteIcon } from '../icon/delete_icon';
+
+export function DeleteButton(props) {
+  return <KuiButton className="kuiButton--danger" {...props}>
+    <DeleteIcon />
+  </KuiButton>;
+}
+
+DeleteButton.propTypes = {
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  onClick: React.PropTypes.func
+};
diff --git a/ui_framework/components/button/kui_button.js b/ui_framework/components/button/kui_button.js
index 6c8b9f9bf4bb5..0c00a459433de 100644
--- a/ui_framework/components/button/kui_button.js
+++ b/ui_framework/components/button/kui_button.js
@@ -1,38 +1,23 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import { KuiButtonLink } from './kui_button_link';
 import { KuiTooltip } from '../tooltip/kui_tooltip';
 
-export function KuiButton(props) {
-  if (props.href && props.onClick) {
-    throw new Error('Only href or onClick can be defined, not both');
-  }
+export function KuiButton({ className, onClick, tooltip, children}) {
+  const classes = classnames('kuiButton', className);
+  const button = <button
+      className={ classes }
+      aria-label={ tooltip }
+      onClick={ onClick }
+    >
+      { children }
+    </button>;
 
-  if (props.hide) return null;
-
-  const classes = classnames('kuiButton', props.className);
-
-  if (props.href) {
-    return <KuiButtonLink {...props} />;
-  } else {
-    return <KuiTooltip text={ props.tooltip }>
-      <button
-        className={ classes }
-        aria-label={ props.tooltip }
-        onClick={ props.onClick }
-      >
-        { props.children }
-      </button>
-    </KuiTooltip>;
-  }
+  return tooltip ? <KuiTooltip text={ tooltip }>{ button } </KuiTooltip> : button;
 }
 
-KuiButton.PropTypes = {
-  hide: React.PropTypes.bool,
+KuiButton.propTypes = {
   tooltip: React.PropTypes.string,
   className: React.PropTypes.string,
-  // Only one of the following must be given, not both.
-  onClick: React.PropTypes.func,
-  href: React.PropTypes.string
+  onClick: React.PropTypes.func
 };
diff --git a/ui_framework/components/button/kui_button_link.js b/ui_framework/components/button/kui_button_link.js
index c8d5623cb1fb2..4ab9cc8573fd9 100644
--- a/ui_framework/components/button/kui_button_link.js
+++ b/ui_framework/components/button/kui_button_link.js
@@ -14,10 +14,10 @@ export function KuiButtonLink({ className, href, tooltip, children }) {
     { children }
   </a>;
 
-  return <KuiTooltip text={ tooltip }> { buttonLink } </KuiTooltip>;
+  return tooltip ? <KuiTooltip text={ tooltip }> { buttonLink } </KuiTooltip> : buttonLink;
 }
 
-KuiButtonLink.PropTypes = {
+KuiButtonLink.propTypes = {
   tooltip: React.PropTypes.string,
   href: React.PropTypes.string,
   className: React.PropTypes.string
diff --git a/ui_framework/components/button/plus_button.js b/ui_framework/components/button/plus_button.js
deleted file mode 100644
index 4cad0c48d6a7a..0000000000000
--- a/ui_framework/components/button/plus_button.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { KuiButton } from './kui_button';
-import { PlusIcon } from '../icon/plus_icon';
-
-export function PlusButton(props) {
-  return <KuiButton className="kuiButton--primary" {...props}>
-    <PlusIcon />
-  </KuiButton>;
-}
-
-PlusButton.PropTypes = {
-  hide: React.PropTypes.bool,
-  tooltip: React.PropTypes.string,
-  className: React.PropTypes.string,
-  // Only one of the following must be given, not both.
-  onClick: React.PropTypes.func,
-  href: React.PropTypes.string
-};
diff --git a/ui_framework/components/button/trash_button.js b/ui_framework/components/button/trash_button.js
deleted file mode 100644
index 27aee637098db..0000000000000
--- a/ui_framework/components/button/trash_button.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { KuiButton } from './kui_button';
-import { TrashIcon } from '../icon/trash_icon';
-
-export function TrashButton(props) {
-  return <KuiButton className="kuiButton--danger" {...props}>
-    <TrashIcon />
-  </KuiButton>;
-}
-
-TrashButton.PropTypes = {
-  hide: React.PropTypes.bool,
-  tooltip: React.PropTypes.string,
-  className: React.PropTypes.string,
-  // Only one of the following must be given, not both.
-  onClick: React.PropTypes.func,
-  href: React.PropTypes.string
-};
diff --git a/ui_framework/components/icon/plus_icon.js b/ui_framework/components/icon/plus_icon.js
deleted file mode 100644
index c661673596a12..0000000000000
--- a/ui_framework/components/icon/plus_icon.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { KuiIcon } from './kui_icon';
-
-export function PlusIcon() {
-  return <KuiIcon className="fa-plus"/>;
-}
diff --git a/ui_framework/components/icon/trash_icon.js b/ui_framework/components/icon/trash_icon.js
deleted file mode 100644
index 7ab2d41f42886..0000000000000
--- a/ui_framework/components/icon/trash_icon.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { KuiIcon } from './kui_icon';
-
-export function TrashIcon() {
-  return <KuiIcon className="fa-trash"/>;
-}
diff --git a/ui_framework/components/index.js b/ui_framework/components/index.js
index 257010f30f162..90844c1767cbb 100644
--- a/ui_framework/components/index.js
+++ b/ui_framework/components/index.js
@@ -1,7 +1,7 @@
-export { PlusIcon } from './icon/plus_icon';
-export { TrashIcon } from './icon/trash_icon';
+export { CreateIcon } from './icon/create_icon';
+export { DeleteIcon } from './icon/delete_icon';
 
-export { PlusButton } from './button/plus_button';
-export { TrashButton } from './button/trash_button';
+export { CreateButtonLink } from './button/create_button_link';
+export { DeleteButton } from './button/delete_button';
 
 export { KuiTooltip } from './tooltip/kui_tooltip';
diff --git a/ui_framework/components/tooltip/kui_tooltip.js b/ui_framework/components/tooltip/kui_tooltip.js
index de787e4bff6dd..1becdc194273e 100644
--- a/ui_framework/components/tooltip/kui_tooltip.js
+++ b/ui_framework/components/tooltip/kui_tooltip.js
@@ -15,13 +15,10 @@ import ReactTooltip from 'react-tooltip';
  * @constructor
  */
 export function KuiTooltip({ text, children }) {
-  const tooltip = text
-    ? <ReactTooltip place="bottom" id={ text }>{ text }</ReactTooltip>
-    : null;
   return <div>
       <div data-tip={ text } data-for={ text }>
         { children }
       </div>
-      { tooltip }
+      <ReactTooltip place="bottom" id={ text }>{ text }</ReactTooltip>
     </div>;
 }

From 8c2d47f9cddd040969730fbb1d57f5bad8c12f5f Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Mon, 13 Feb 2017 14:40:12 -0500
Subject: [PATCH 4/5] Address code review comments

---
 .eslintrc                                       |  6 +++++-
 package.json                                    |  1 +
 .../listing/create_or_delete_button.js          | 12 ++++++++----
 .../components/button/create_button_link.js     |  7 +++++--
 ui_framework/components/button/kui_button.js    | 17 +++++++++--------
 ui_framework/components/icon/index.js           |  6 ++++++
 6 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 ui_framework/components/icon/index.js

diff --git a/.eslintrc b/.eslintrc
index d54bd19499d7d..e51b965d7151b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,4 +1,8 @@
 ---
-extends: '@elastic/kibana'
 rules:
   no-unused-vars: off
+plugins:
+  ['react']
+extends:
+  ['@elastic/kibana',
+   'plugin:react/recommended']
diff --git a/package.json b/package.json
index be37ce52cde73..8a0f4cce076c4 100644
--- a/package.json
+++ b/package.json
@@ -193,6 +193,7 @@
     "eslint": "3.11.1",
     "eslint-plugin-babel": "4.0.0",
     "eslint-plugin-mocha": "4.7.0",
+    "eslint-plugin-react": "6.9.0",
     "event-stream": "3.3.2",
     "expect.js": "0.3.1",
     "faker": "1.1.0",
diff --git a/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js b/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js
index bdda44b05b0b7..05b3390083199 100644
--- a/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js
+++ b/src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js
@@ -5,11 +5,15 @@ import { DeleteButton } from 'ui_framework/components/button/delete_button';
 
 export function CreateOrDeleteButton({ showCreate, doDelete }) {
   if (showCreate) {
-    return <CreateButtonLink href = "#/visualize/new"
-                             tooltip = "Create new visualization" />;
+    return <CreateButtonLink
+      href = "#/visualize/new"
+      tooltip = "Create new visualization"
+    />;
   } else {
-    return <DeleteButton onClick={() => doDelete() }
-                         tooltip="Delete selected visualizations" />;
+    return <DeleteButton
+      onClick={() => doDelete() }
+      tooltip="Delete selected visualizations"
+    />;
   }
 }
 
diff --git a/ui_framework/components/button/create_button_link.js b/ui_framework/components/button/create_button_link.js
index 922078a7e5487..16c45db029022 100644
--- a/ui_framework/components/button/create_button_link.js
+++ b/ui_framework/components/button/create_button_link.js
@@ -1,10 +1,13 @@
 import React from 'react';
 
+import classnames from 'classnames';
 import { KuiButtonLink } from './kui_button_link';
-import { CreateIcon } from '../icon/create_icon';
+import { CreateIcon } from '../icon';
 
 export function CreateButtonLink(props) {
-  return <KuiButtonLink className="kuiButton--primary" {...props}>
+  const { className, ...rest } = props;
+  const classes = classnames('kuiButton--primary', className);
+  return <KuiButtonLink className={classes} {...rest}>
     <CreateIcon />
   </KuiButtonLink>;
 }
diff --git a/ui_framework/components/button/kui_button.js b/ui_framework/components/button/kui_button.js
index 0c00a459433de..d298b1953b63e 100644
--- a/ui_framework/components/button/kui_button.js
+++ b/ui_framework/components/button/kui_button.js
@@ -3,15 +3,15 @@ import classnames from 'classnames';
 
 import { KuiTooltip } from '../tooltip/kui_tooltip';
 
-export function KuiButton({ className, onClick, tooltip, children}) {
+export function KuiButton({ className, onClick, tooltip, children }) {
   const classes = classnames('kuiButton', className);
   const button = <button
-      className={ classes }
-      aria-label={ tooltip }
-      onClick={ onClick }
-    >
-      { children }
-    </button>;
+    className={ classes }
+    aria-label={ tooltip }
+    onClick={ onClick }
+  >
+    { children }
+  </button>;
 
   return tooltip ? <KuiTooltip text={ tooltip }>{ button } </KuiTooltip> : button;
 }
@@ -19,5 +19,6 @@ export function KuiButton({ className, onClick, tooltip, children}) {
 KuiButton.propTypes = {
   tooltip: React.PropTypes.string,
   className: React.PropTypes.string,
-  onClick: React.PropTypes.func
+  onClick: React.PropTypes.func,
+  children: React.PropTypes.array
 };
diff --git a/ui_framework/components/icon/index.js b/ui_framework/components/icon/index.js
new file mode 100644
index 0000000000000..bcca6002e978e
--- /dev/null
+++ b/ui_framework/components/icon/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import { KuiIcon } from './kui_icon';
+
+export const DeleteIcon = () => <KuiIcon className="fa-trash"/>;
+export const CreateIcon = () => <KuiIcon className="fa-plus"/>;
+

From 045a6744f8ebca7595ca62873c898c57021f2f1f Mon Sep 17 00:00:00 2001
From: Stacey Gammon <gammon@elastic.co>
Date: Tue, 14 Feb 2017 14:27:50 -0500
Subject: [PATCH 5/5] address code review comments

---
 src/core_plugins/kibana/public/visualize/index.js      |  8 --------
 .../public/visualize/listing/visualize_listing.js      |  8 ++++++++
 src/ui/public/react_components.js                      | 10 +++++++++-
 ui_framework/components/button/delete_button.js        |  2 +-
 ui_framework/components/index.js                       |  3 +--
 5 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
index c7a69cc0fa8b3..a58afa9be2678 100644
--- a/src/core_plugins/kibana/public/visualize/index.js
+++ b/src/core_plugins/kibana/public/visualize/index.js
@@ -23,14 +23,6 @@ import { VisualizeConstants } from './visualize_constants';
 import savedObjectRegistry from 'ui/saved_objects/saved_object_registry';
 import savedVisusalizationProvider from 'plugins/kibana/visualize/saved_visualizations/saved_visualization_register';
 
-import { CreateOrDeleteButton } from './listing/create_or_delete_button';
-
-import uiModules from 'ui/modules';
-const app = uiModules.get('app/visualize', ['react']);
-app.directive('createOrDeleteButton', function (reactDirective) {
-  return reactDirective(CreateOrDeleteButton);
-});
-
 uiRoutes
 .defaults(/visualize/, {
   requireDefaultIndex: true
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
index 5c82b8df366b6..b83182013bdf1 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -3,6 +3,14 @@ import 'ui/pager_control';
 import 'ui/pager';
 import _ from 'lodash';
 
+import { CreateOrDeleteButton } from './create_or_delete_button';
+
+import uiModules from 'ui/modules';
+const app = uiModules.get('app/visualize', ['react']);
+app.directive('createOrDeleteButton', function (reactDirective) {
+  return reactDirective(CreateOrDeleteButton);
+});
+
 export function VisualizeListingController($injector, $scope) {
   const $filter = $injector.get('$filter');
   const confirmModal = $injector.get('confirmModal');
diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
index c65ccadeb1543..178d92cb6b0ab 100644
--- a/src/ui/public/react_components.js
+++ b/src/ui/public/react_components.js
@@ -2,7 +2,9 @@ import 'ngreact';
 
 import {
   CreateButtonLink,
-  DeleteButton
+  DeleteButton,
+  CreateIcon,
+  DeleteIcon
 } from 'ui_framework/components';
 
 import uiModules from 'ui/modules';
@@ -13,3 +15,9 @@ app.directive('createButtonLink', function (reactDirective) {
 app.directive('deleteButton', function (reactDirective) {
   return reactDirective(DeleteButton);
 });
+app.directive('createIcon', function (reactDirective) {
+  return reactDirective(CreateIcon);
+});
+app.directive('deleteIcon', function (reactDirective) {
+  return reactDirective(DeleteIcon);
+});
diff --git a/ui_framework/components/button/delete_button.js b/ui_framework/components/button/delete_button.js
index 76ffc3ab5547e..ff550053800cd 100644
--- a/ui_framework/components/button/delete_button.js
+++ b/ui_framework/components/button/delete_button.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { KuiButton } from './kui_button';
-import { DeleteIcon } from '../icon/delete_icon';
+import { DeleteIcon } from '../icon';
 
 export function DeleteButton(props) {
   return <KuiButton className="kuiButton--danger" {...props}>
diff --git a/ui_framework/components/index.js b/ui_framework/components/index.js
index 90844c1767cbb..e6f4374fe1af4 100644
--- a/ui_framework/components/index.js
+++ b/ui_framework/components/index.js
@@ -1,5 +1,4 @@
-export { CreateIcon } from './icon/create_icon';
-export { DeleteIcon } from './icon/delete_icon';
+export * from './icon';
 
 export { CreateButtonLink } from './button/create_button_link';
 export { DeleteButton } from './button/delete_button';