React: Visualize CreateOrDelete button in table header

.eslintrc

@@ -1,4 +1,8 @@
 ---
-extends: '@elastic/kibana'
 rules:
   no-unused-vars: off
+plugins:
+  ['react']
+extends:
+  ['@elastic/kibana',
+   'plugin:react/recommended']

package.json

@@ -150,13 +150,16 @@
     "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",
     "pegjs": "0.9.0",
     "postcss-loader": "1.2.1",
     "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",
@@ -190,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",
@@ -232,7 +236,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",

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';

src/core_plugins/kibana/public/visualize/listing/create_or_delete_button.js

@@ -0,0 +1,23 @@
+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
+};

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -32,26 +32,10 @@
 
       <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"
-        >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
-        </button>
-
-        <!-- 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"
-        >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
-        </a>
+        <create-or-delete-button
+          show-create="createOrDeleteProps.showCreate"
+          do-delete="createOrDeleteProps.doDelete"
+        ></create-or-delete-button>
       </div>
 
       <div class="kuiToolBarSection">

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');
@@ -175,4 +183,12 @@ export function VisualizeListingController($injector, $scope) {
   this.getUrlForItem = function getUrlForItem(item) {
     return `#/visualize/edit/${item.id}`;
   };
+
+  const updateProps = () => {
+    $scope.createOrDeleteProps = {
+      showCreate: this.getSelectedItemsCount() === 0,
+      doDelete: () => this.deleteSelectedItems()
+    };
+  };
+  $scope.$watch(() => this.getSelectedItemsCount(), () => updateProps());
 }

src/ui/public/react_components.js

@@ -0,0 +1,23 @@
+import 'ngreact';
+
+import {
+  CreateButtonLink,
+  DeleteButton,
+  CreateIcon,
+  DeleteIcon
+} from 'ui_framework/components';
+
+import uiModules from 'ui/modules';
+const app = uiModules.get('app/kibana', ['react']);
+app.directive('createButtonLink', function (reactDirective) {
+  return reactDirective(CreateButtonLink);
+});
+app.directive('deleteButton', function (reactDirective) {
+  return reactDirective(DeleteButton);
+});
+app.directive('createIcon', function (reactDirective) {
+  return reactDirective(CreateIcon);
+});
+app.directive('deleteIcon', function (reactDirective) {
+  return reactDirective(DeleteIcon);
+});

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: {

ui_framework/components/button/create_button_link.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import classnames from 'classnames';
+import { KuiButtonLink } from './kui_button_link';
+import { CreateIcon } from '../icon';
+
+export function CreateButtonLink(props) {
+  const { className, ...rest } = props;
+  const classes = classnames('kuiButton--primary', className);
+  return <KuiButtonLink className={classes} {...rest}>
+    <CreateIcon />
+  </KuiButtonLink>;
+}
+
+CreateButtonLink.propTypes = {
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  href: React.PropTypes.string
+};

ui_framework/components/button/delete_button.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { KuiButton } from './kui_button';
+import { DeleteIcon } from '../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
+};

ui_framework/components/button/kui_button.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import { KuiTooltip } from '../tooltip/kui_tooltip';
+
+export function KuiButton({ className, onClick, tooltip, children }) {
+  const classes = classnames('kuiButton', className);
+  const button = <button
+    className={ classes }
+    aria-label={ tooltip }
+    onClick={ onClick }
+  >
+    { children }
+  </button>;
+
+  return tooltip ? <KuiTooltip text={ tooltip }>{ button } </KuiTooltip> : button;
+}
+
+KuiButton.propTypes = {
+  tooltip: React.PropTypes.string,
+  className: React.PropTypes.string,
+  onClick: React.PropTypes.func,
+  children: React.PropTypes.array
+};

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 tooltip ? <KuiTooltip text={ tooltip }> { buttonLink } </KuiTooltip> : buttonLink;
+}
+
+KuiButtonLink.propTypes = {
+  tooltip: React.PropTypes.string,
+  href: React.PropTypes.string,
+  className: React.PropTypes.string
+};

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

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(' ') }/>;
+}

ui_framework/components/index.js

@@ -0,0 +1,6 @@
+export * from './icon';
+
+export { CreateButtonLink } from './button/create_button_link';
+export { DeleteButton } from './button/delete_button';
+
+export { KuiTooltip } from './tooltip/kui_tooltip';

ui_framework/components/tooltip/kui_tooltip.js

@@ -0,0 +1,24 @@
+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 }) {
+  return <div>
+      <div data-tip={ text } data-for={ text }>
+        { children }
+      </div>
+      <ReactTooltip place="bottom" id={ text }>{ text }</ReactTooltip>
+    </div>;
+}