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] 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"/>;
+