Revert "Clean up EuiSearchBar docs and reorganize code. (#454)" (#470)

* Revert "Clean up EuiSearchBar docs and reorganize code. (#454)" This partially reverts commit 3a910d3. * Change random.oneOf() to accept an array. * Export Query and Ast services. Import components into examples via the root components module. * Fix typos in docs. * Refactor search bar docs for clearer data flow and render methods. * Import Enzyme utilities from enzyme root module in tests. * Use Component instead of React.Component. * Rename astToES to astToEs. * Fix line-break in CHANGELOG.
elastic · Mar 8, 2018 · 4377f22 · 4377f22
1 parent b1949e6
commit 4377f22
Show file tree

Hide file tree

Showing 47 changed files with 345 additions and 336 deletions.
diff --git a/src-docs/src/views/file_picker/file_picker.js b/src-docs/src/views/file_picker/file_picker.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import {
   EuiFilePicker,
@@ -7,7 +7,7 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-export class FilePicker extends React.Component {
+export class FilePicker extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src-docs/src/views/search_bar/search_bar.js b/src-docs/src/views/search_bar/search_bar.js
@@ -1,4 +1,5 @@
 import React, { Component, Fragment } from 'react';
+import { times } from 'lodash';
 
 import {
   EuiHealth,
@@ -19,8 +20,6 @@ import {
   Random,
 } from '../../../../src/services';
 
-import { times } from 'lodash';
-
 const random = new Random();
 
 const tags = [{
@@ -215,10 +214,34 @@ export class SearchBar extends Component {
 
     const esQuery = Query.toESQuery(query);
 
+    const content = this.renderError() || (
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3>Elasticsearch query</h3>
+          </EuiTitle>
+
+          <EuiSpacer size="s" />
+
+          <EuiCodeBlock language="js">
+            {esQuery ? JSON.stringify(esQuery, null, 2) : ''}
+          </EuiCodeBlock>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h3>JS execution</h3>
+          </EuiTitle>
+
+          <EuiSpacer size="s" />
+
+          {this.renderTable()}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+
     return (
       <Fragment>
-        {this.renderError()}
-
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem>
             {this.renderSearch()}
@@ -235,29 +258,7 @@ export class SearchBar extends Component {
 
         <EuiSpacer size="l" />
 
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiTitle size="s">
-              <h3>Elasticsearch query</h3>
-            </EuiTitle>
-
-            <EuiSpacer size="s" />
-
-            <EuiCodeBlock language="js">
-              {esQuery ? JSON.stringify(esQuery, null, 2) : ''}
-            </EuiCodeBlock>
-          </EuiFlexItem>
-
-          <EuiFlexItem>
-            <EuiTitle size="s">
-              <h3>JS execution</h3>
-            </EuiTitle>
-
-            <EuiSpacer size="s" />
-
-            {this.renderTable()}
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        {content}
       </Fragment>
     );
   }

diff --git a/src-docs/src/views/table_of_records/implicit_record_action.js b/src-docs/src/views/table_of_records/implicit_record_action.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { times } from 'lodash';
 
 import {
@@ -43,7 +43,7 @@ function loadPage(pageIndex, pageSize, sort) {
   };
 }
 
-export default class PeopleTable extends React.Component {
+export default class PeopleTable extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.js b/src-docs/src/views/tables/in_memory/in_memory_search.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { formatDate } from '../../../../../src/services/format';
 import { createDataStore } from '../data_store';
 import {
@@ -35,7 +35,7 @@ Example country object:
 
 const store = createDataStore();
 
-export class Table extends React.Component {
+export class Table extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import {
   EuiTabs,
   EuiTab,
   EuiSpacer,
 } from '../../../../src/components';
 
-class EuiTabsExample extends React.Component {
+class EuiTabsExample extends Component {
   constructor(props) {
     super(props);
 

diff --git a/src/components/basic_table/collapsed_item_actions.js b/src/components/basic_table/collapsed_item_actions.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
 
-export class CollapsedItemActions extends React.Component {
+export class CollapsedItemActions extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src/components/basic_table/custom_item_action.js b/src/components/basic_table/custom_item_action.js
@@ -1,6 +1,6 @@
-import React, { cloneElement } from 'react';
+import React, { Component, cloneElement } from 'react';
 
-export class CustomItemAction extends React.Component {
+export class CustomItemAction extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src/components/basic_table/default_item_action.js b/src/components/basic_table/default_item_action.js
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { isString } from '../../services/predicate';
 import { EuiButton, EuiButtonIcon } from '../button';
 
 const defaults = {
   color: 'primary'
 };
 
-export class DefaultItemAction extends React.Component {
+export class DefaultItemAction extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
   EuiBasicTable,
@@ -8,14 +8,13 @@ import {
 import {
   defaults as paginationBarDefaults
 } from './pagination_bar';
-import { Query } from '../../services/query';
 import { isBoolean, isString } from '../../services/predicate';
 import { Comparators } from '../../services/sort';
 import {
+  Query,
   QueryType,
   SearchFiltersFiltersType,
-  SearchBoxConfigPropTypes,
-  EuiSearchBar,
+  SearchBoxConfigPropTypes, EuiSearchBar
 } from '../search_bar';
 import { EuiSpacer } from '../spacer/spacer';
 
@@ -60,7 +59,7 @@ const initialCriteria = (props) => {
   };
 };
 
-export class EuiInMemoryTable extends React.Component {
+export class EuiInMemoryTable extends Component {
 
   static propTypes = InMemoryTablePropTypes;
   static defaultProps = {

diff --git a/src/components/basic_table/loading_table_body.js b/src/components/basic_table/loading_table_body.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
 import {
   EuiTableBody
 } from '../table/table_body';
 
-export class LoadingTableBody extends React.Component {
+export class LoadingTableBody extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src/components/filter_group/filter_select_item.js b/src/components/filter_group/filter_select_item.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -23,7 +23,7 @@ const resolveIconAndColor = (checked) => {
     { icon: 'cross', color: 'text' };
 };
 
-export class EuiFilterSelectItem extends React.Component {
+export class EuiFilterSelectItem extends Component {
 
   constructor(props) {
     super(props);

diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Browser } from '../../../services/browser';
@@ -36,7 +36,7 @@ const defaultProps = {
   incremental: false
 };
 
-export class EuiFieldSearch extends React.Component {
+export class EuiFieldSearch extends Component {
 
   static propTypes = propTypes;
   static defaultProps = defaultProps;

diff --git a/src/components/index.js b/src/components/index.js
@@ -209,7 +209,7 @@ export {
 } from './progress';
 
 export {
-  EuiSearchBar,
+  EuiSearchBar
 } from './search_bar';
 
 export {

diff --git a/src/components/search_bar/__snapshots__/search_bar.test.js.snap b/src/components/search_bar/__snapshots__/search_bar.test.js.snap
@@ -92,7 +92,7 @@ exports[`SearchBar render - provided query, filters 1`] = `
       onChange={[Function]}
       query={
         Query {
-          "ast": _Ast {
+          "ast": _AST {
             "_clauses": Array [
               Object {
                 "match": "must",

diff --git a/src/components/search_bar/__snapshots__/search_filters.test.js.snap b/src/components/search_bar/__snapshots__/search_filters.test.js.snap
@@ -24,7 +24,7 @@ exports[`EuiSearchFilters render - with filters 1`] = `
       onChange={[Function]}
       query={
         Query {
-          "ast": _Ast {
+          "ast": _AST {
             "_clauses": Array [],
             "_indexedClauses": Object {
               "field": Object {},
@@ -62,7 +62,7 @@ exports[`EuiSearchFilters render - with filters 1`] = `
       onChange={[Function]}
       query={
         Query {
-          "ast": _Ast {
+          "ast": _AST {
             "_clauses": Array [],
             "_indexedClauses": Object {
               "field": Object {},

diff --git a/src/components/search_bar/filters/field_value_selection_filter.js b/src/components/search_bar/filters/field_value_selection_filter.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isArray, isNil } from '../../../services/predicate';
 import { keyCodes } from '../../../services';
@@ -10,7 +10,7 @@ import { EuiFilterSelectItem, EuiFilterButton } from '../../filter_group';
 import { EuiLoadingChart } from '../../loading/loading_chart';
 import { EuiSpacer } from '../../spacer/spacer';
 import { EuiIcon } from '../../icon/icon';
-import { Query } from '../../../services/query';
+import { Query } from '../query';
 
 const FieldValueOptionType = PropTypes.shape({
   value: PropTypes.any.isRequired,
@@ -52,7 +52,7 @@ const defaults = {
   }
 };
 
-export class FieldValueSelectionFilter extends React.Component {
+export class FieldValueSelectionFilter extends Component {
 
   static propTypes = FieldValueSelectionFilterPropTypes;
 

diff --git a/src/components/search_bar/filters/field_value_selection_filter.test.js b/src/components/search_bar/filters/field_value_selection_filter.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { shallow } from 'enzyme';
 import { FieldValueSelectionFilter } from './field_value_selection_filter';
-import { Query } from '../../../services/query';
+import { Query } from '../query';
 
 describe('FieldValueSelectionFilter', () => {
 

diff --git a/src/components/search_bar/filters/field_value_toggle_filter.js b/src/components/search_bar/filters/field_value_toggle_filter.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFilterButton } from '../../filter_group';
 import { isNil } from '../../../services/predicate';
 import { EuiPropTypes } from '../../../utils/prop_types';
-import { Query } from '../../../services/query';
+import { Query } from '../query';
 
 export const FieldValueToggleFilterConfigType = PropTypes.shape({
   type: EuiPropTypes.is('field_value_toggle').isRequired,
@@ -21,7 +21,7 @@ const FieldValueToggleFilterPropTypes = {
   onChange: PropTypes.func.isRequired, // (value: boolean) => void
 };
 
-export class FieldValueToggleFilter extends React.Component {
+export class FieldValueToggleFilter extends Component {
 
   static propTypes = FieldValueToggleFilterPropTypes;
 

diff --git a/src/components/search_bar/filters/field_value_toggle_filter.test.js b/src/components/search_bar/filters/field_value_toggle_filter.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { requiredProps } from '../../../test';
-import { Query } from '../../../services/query';
+import { shallow } from 'enzyme';
+import { Query } from '../query';
 import { FieldValueToggleFilter } from './field_value_toggle_filter';
 
 describe('FieldValueToggleFilter', () => {

diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.js b/src/components/search_bar/filters/field_value_toggle_group_filter.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFilterButton } from '../../filter_group';
 import { EuiPropTypes } from '../../../utils/prop_types';
-import { Query } from '../../../services/query';
+import { Query } from '../query';
 
 export const FieldValueToggleGroupFilterItemType = PropTypes.shape({
   value: PropTypes.string.isRequired,
@@ -24,7 +24,7 @@ const FieldValueToggleGroupFilterPropTypes = {
   onChange: PropTypes.func.isRequired, // (value: boolean) => void
 };
 
-export class FieldValueToggleGroupFilter extends React.Component {
+export class FieldValueToggleGroupFilter extends Component {
 
   static propTypes = FieldValueToggleGroupFilterPropTypes;
 

diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.test.js b/src/components/search_bar/filters/field_value_toggle_group_filter.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { requiredProps } from '../../../test';
-import { Query } from '../../../services/query';
+import { shallow } from 'enzyme';
+import { Query } from '../query';
 import { FieldValueToggleGroupFilter } from './field_value_toggle_group_filter';
 
 describe('TermToggleGroupFilter', () => {