React search box tool bar (#10821)

* Add a react tool bar search box

Create basic react toolbar elements and update uiframework docs

* Package.json: put back ngreact (edits got overwritten)

* Add jest tests

* Combine basic tests into one, eliminate helper functions

* Address code review comments

- move tool_bar_footer into it’s own file.
- some stylistic html changes
- comments

* Remove toolbar_with_search_only

It isn’t being used in kibana currently, so we probably don’t need to
support it in our ui_Framework, and the need for the custom
“className="kuiToolBar--searchOnly”” indicates we should resdesign it
if we do need it some day.

* Fix issue with default to named conversion merge

* rename commonHtmlProps = requiredProps

package.json

@@ -154,6 +154,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",

src/core_plugins/kibana/public/kibana.js

@@ -18,6 +18,7 @@ import 'ui/vislib';
 import 'ui/agg_response';
 import 'ui/agg_types';
 import 'ui/timepicker';
+import 'ui/react_components';
 import { Notifier } from 'ui/notify/notifier';
 import 'leaflet';
 

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

@@ -17,18 +17,11 @@
   <div class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm">
     <!-- ToolBar -->
     <div class="kuiToolBar">
-      <div class="kuiToolBarSearch">
-        <div class="kuiToolBarSearchBox">
-          <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
-          <input
-            class="kuiToolBarSearchBox__input"
-            type="text"
-            placeholder="Search..."
-            aria-label="Filter"
-            ng-model="listingController.filter"
-          >
-        </div>
-      </div>
+      <tool-bar-search-box
+        class="kuiToolBarSection"
+        filter="listingController.filter"
+        on-filter="listingController.onFilter"
+      ></tool-bar-search-box>
 
       <div class="kuiToolBarSection">
         <!-- Bulk delete button -->

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

@@ -4,7 +4,7 @@ import 'ui/pager';
 
 import { SortableProperties } from 'ui_framework/services';
 
-export function VisualizeListingController($injector, $scope) {
+export function VisualizeListingController($injector) {
   const $filter = $injector.get('$filter');
   const confirmModal = $injector.get('confirmModal');
   const Notifier = $injector.get('Notifier');
@@ -76,10 +76,12 @@ export function VisualizeListingController($injector, $scope) {
 
   this.pager = pagerFactory.create(this.items.length, 20, 1);
 
-  $scope.$watch(() => this.filter, () => {
+  this.onFilter = (newFilter) => {
+    this.filter = newFilter;
     deselectAll();
     fetchItems();
-  });
+  };
+  fetchItems();
 
   this.toggleAll = function toggleAll() {
     if (this.areAllItemsChecked()) {

src/ui/public/react_components.js

@@ -0,0 +1,11 @@
+import 'ngreact';
+
+import {
+  KuiToolBarSearchBox,
+} from 'ui_framework/components';
+
+import { uiModules } from 'ui/modules';
+const app = uiModules.get('app/kibana', ['react']);
+app.directive('toolBarSearchBox', function (reactDirective) {
+  return reactDirective(KuiToolBarSearchBox);
+});

ui_framework/components/index.js

@@ -5,3 +5,8 @@ export {
   KuiLinkButton,
   KuiSubmitButton,
 } from './button';
+export {
+  KuiToolBarSearchBox,
+  KuiToolBar,
+  KuiToolBarFooter,
+} from './tool_bar';

ui_framework/components/tool_bar/__snapshots__/tool_bar.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiToolBar 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiToolBar testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/tool_bar/__snapshots__/tool_bar_footer.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiToolBarFooter 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiToolBarFooter testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter initializes search box value 1`] = `
+<div
+  class="kuiToolBarSearch"
+>
+  <div
+    class="kuiToolBarSearchBox"
+  >
+    <div
+      class="kuiToolBarSearchBox__icon kuiIcon fa-search"
+    />
+    <input
+      aria-label="Filter"
+      class="kuiToolBarSearchBox__input"
+      placeholder="Search..."
+      type="text"
+      value="My Query"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders KuiToolBarSearchBox 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiToolBarSearch testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="kuiToolBarSearchBox"
+  >
+    <div
+      class="kuiToolBarSearchBox__icon kuiIcon fa-search"
+    />
+    <input
+      aria-label="Filter"
+      class="kuiToolBarSearchBox__input"
+      placeholder="Search..."
+      type="text"
+    />
+  </div>
+</div>
+`;

ui_framework/components/tool_bar/index.js

@@ -0,0 +1,3 @@
+export { KuiToolBarSearchBox } from './tool_bar_search_box';
+export { KuiToolBar } from './tool_bar';
+export { KuiToolBarFooter } from './tool_bar_footer';

ui_framework/components/tool_bar/tool_bar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const KuiToolBar = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiToolBar', className);
+  return <div className={classes} {...rest} >{children}</div>;
+};
+KuiToolBar.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+};

ui_framework/components/tool_bar/tool_bar.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiToolBar,
+} from './tool_bar';
+
+test('renders KuiToolBar', () => {
+  const component = <KuiToolBar { ...requiredProps }>children</KuiToolBar>;
+  expect(render(component)).toMatchSnapshot();
+});
+

ui_framework/components/tool_bar/tool_bar_footer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const KuiToolBarFooter = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiToolBarFooter', className);
+  return <div className={classes} {...rest}>{children}</div>;
+};
+KuiToolBarFooter.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+};

ui_framework/components/tool_bar/tool_bar_footer.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiToolBarFooter,
+} from './tool_bar_footer';
+
+test('renders KuiToolBarFooter', () => {
+  const component = <KuiToolBarFooter { ...requiredProps }>children</KuiToolBarFooter>;
+  expect(render(component)).toMatchSnapshot();
+});

ui_framework/components/tool_bar/tool_bar_search_box.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export function KuiToolBarSearchBox({ filter, onFilter, className, ...rest }) {
+  function onChange(event) {
+    onFilter(event.target.value);
+  }
+  const classes = classNames('kuiToolBarSearch', className);
+  return <div className={ classes } { ...rest } >
+    <div className="kuiToolBarSearchBox">
+      <div className="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+      <input
+        className="kuiToolBarSearchBox__input"
+        type="text"
+        placeholder="Search..."
+        aria-label="Filter"
+        defaultValue={ filter }
+        onChange={ onChange }
+      />
+    </div>
+  </div>;
+}
+
+KuiToolBarSearchBox.propTypes = {
+  filter: React.PropTypes.string,
+  onFilter: React.PropTypes.func.isRequired
+};

ui_framework/components/tool_bar/tool_bar_search_box.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import sinon from 'sinon';
+import { requiredProps } from '../../test/required_props';
+
+import {
+  KuiToolBarSearchBox,
+} from './tool_bar_search_box';
+
+const onFilter = sinon.spy();
+
+test('renders KuiToolBarSearchBox', () => {
+  const component = <KuiToolBarSearchBox onFilter={onFilter} { ...requiredProps } />;
+  expect(render(component)).toMatchSnapshot();
+});
+
+describe('onFilter', () => {
+  test('is called on change event, with the value entered', () => {
+    const searchBox = mount(<KuiToolBarSearchBox onFilter={onFilter} { ...requiredProps } />);
+    onFilter.reset();
+    const event = { target: { value: 'a' } };
+    searchBox.find('input').simulate('change', event);
+    sinon.assert.calledWith(onFilter, 'a');
+  });
+});
+
+describe('filter', () => {
+  test('initializes search box value', () => {
+    const component = <KuiToolBarSearchBox onFilter={onFilter} filter="My Query" />;
+    expect(render(component)).toMatchSnapshot();
+  });
+});
+

ui_framework/doc_site/src/views/tool_bar/tool_bar.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+  KuiToolBar,
+  KuiToolBarSearchBox,
+  KuiButton,
+  KuiButtonIcon,
+  KuiButtonGroup,
+} from '../../../../components';
+
+export const ToolBar = () => (
+  <KuiToolBar>
+    <KuiToolBarSearchBox onFilter={() => {}} />
+
+    <div>
+      <select className="kuiSelect">
+        <option>Past hour</option>
+        <option>Past day</option>
+        <option>Past week</option>
+      </select>
+    </div>
+
+    <div className="kuiToolBarSection">
+      <KuiButton
+        type="primary"
+        icon={<KuiButtonIcon type="create" />}
+      >
+        Create
+      </KuiButton>
+
+      <KuiButton
+        type="danger"
+        icon={<KuiButtonIcon type="delete" />}
+      >
+        Delete
+      </KuiButton>
+    </div>
+
+    <div className="kuiToolBarSection">
+
+      <div className="kuiToolBarText">
+        1 &ndash; 20 of 33
+      </div>
+
+      <KuiButtonGroup isUnited>
+        <KuiButton
+          type="basic"
+          icon={<KuiButtonIcon type="previous" />}
+        >
+        </KuiButton>
+        <KuiButton
+          type="basic"
+          icon={<KuiButtonIcon type="next" />}
+        >
+        </KuiButton>
+      </KuiButtonGroup>
+    </div>
+  </KuiToolBar>
+  );