[Discover] EUI-fication of the filters (elastic#48452)

* New filter UI

* Prototype of functionality

* EUIFication of filters in Discover

* Adding tests for field_selector component

* Replacing FieldSelector with EuiForm components

* Adding more discover field search tests

* Removing console statement

* Fixing failing functional test

* Removing obsolete snapshot

* design tweaks for filter popover

* use compressed style inputs

* Changing selectors to be EuiButtonGroup

* Removing unnecessary if statement

* Getting rid of ts-ignore warning

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/_field_chooser.scss

@@ -27,3 +27,11 @@
   padding-left: $euiSizeXS;
   margin-left: $euiSizeXS;
 }
+
+.dscFieldSearch__filterWrapper {
+  flex-grow: 0;
+}
+
+.dscFieldSearch__formWrapper {
+  padding: $euiSizeM;
+}

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx

@@ -17,54 +17,123 @@
  * under the License.
  */
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { DiscoverFieldSearch } from './discover_field_search';
+import { DiscoverFieldSearch, Props } from './discover_field_search';
+import { EuiButtonGroupProps } from '@elastic/eui';
+import { ReactWrapper } from 'enzyme';
 
 describe('DiscoverFieldSearch', () => {
-  function mountComponent() {
-    const props = {
-      onChange: jest.fn(),
-      onShowFilter: jest.fn(),
-      showFilter: false,
-      filtersActive: 0,
-      value: 'test',
-    };
-    const comp = mountWithIntl(<DiscoverFieldSearch {...props} />);
-    const input = findTestSubject(comp, 'fieldFilterSearchInput');
-    const btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    return { comp, input, btn, props };
+  const defaultProps = {
+    onChange: jest.fn(),
+    value: 'test',
+    types: ['any', 'string', '_source'],
+  };
+
+  function mountComponent(props?: Props) {
+    const compProps = props || defaultProps;
+    const comp = mountWithIntl(<DiscoverFieldSearch {...compProps} />);
+    return comp;
+  }
+
+  function findButtonGroup(component: ReactWrapper, id: string) {
+    return component.find(`[data-test-subj="${id}ButtonGroup"]`).first();
   }
 
   test('enter value', () => {
-    const { input, props } = mountComponent();
+    const component = mountComponent();
+    const input = findTestSubject(component, 'fieldFilterSearchInput');
     input.simulate('change', { target: { value: 'new filter' } });
-    expect(props.onChange).toBeCalledTimes(1);
+    expect(defaultProps.onChange).toBeCalledTimes(1);
   });
 
-  // this should work, but doesn't, have to do some research
-  test('click toggle filter button', () => {
-    const { btn, props } = mountComponent();
+  test('change in active filters should change facet selection and call onChange', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    let btn = findTestSubject(component, 'toggleFieldFilterButton');
+    expect(btn.hasClass('euiFacetButton--isSelected')).toBeFalsy();
     btn.simulate('click');
-    expect(props.onShowFilter).toBeCalledTimes(1);
+    const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
+    act(() => {
+      // @ts-ignore
+      (aggregatableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    component.update();
+    btn = findTestSubject(component, 'toggleFieldFilterButton');
+    expect(btn.hasClass('euiFacetButton--isSelected')).toBe(true);
+    expect(onChange).toBeCalledWith('aggregatable', true);
   });
 
-  test('change showFilter value should change aria label', () => {
-    const { comp } = mountComponent();
-    let btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.prop('aria-label')).toEqual('Show field filter settings');
-    comp.setProps({ showFilter: true });
-    btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.prop('aria-label')).toEqual('Hide field filter settings');
+  test('change in active filters should change filters count', () => {
+    const component = mountComponent();
+    let btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    btn = findTestSubject(component, 'toggleFieldFilterButton');
+    const badge = btn.find('.euiNotificationBadge');
+    // no active filters
+    expect(badge.text()).toEqual('0');
+    // change value of aggregatable select
+    const aggregatableButtonGroup = findButtonGroup(component, 'aggregatable');
+    act(() => {
+      // @ts-ignore
+      (aggregatableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('1');
+    // change value of searchable select
+    const searchableButtonGroup = findButtonGroup(component, 'searchable');
+    act(() => {
+      // @ts-ignore
+      (searchableButtonGroup.props() as EuiButtonGroupProps).onChange('searchable-true', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('2');
+    // change value of searchable select
+    act(() => {
+      // @ts-ignore
+      (searchableButtonGroup.props() as EuiButtonGroupProps).onChange('searchable-any', null);
+    });
+    component.update();
+    expect(badge.text()).toEqual('1');
   });
 
-  test('change filtersActive should change facet selection', () => {
-    const { comp } = mountComponent();
-    let btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.hasClass('euiFacetButton--isSelected')).toBeFalsy();
-    comp.setProps({ filtersActive: 3 });
-    btn = findTestSubject(comp, 'toggleFieldFilterButton');
-    expect(btn.hasClass('euiFacetButton--isSelected')).toBe(true);
+  test('change in missing fields switch should not change filter count', () => {
+    const component = mountComponent();
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const badge = btn.find('.euiNotificationBadge');
+    expect(badge.text()).toEqual('0');
+    const missingSwitch = findTestSubject(component, 'missingSwitch');
+    missingSwitch.simulate('change', { target: { value: false } });
+    expect(badge.text()).toEqual('0');
+  });
+
+  test('change in filters triggers onChange', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const aggregtableButtonGroup = findButtonGroup(component, 'aggregatable');
+    const missingSwitch = findTestSubject(component, 'missingSwitch');
+    act(() => {
+      // @ts-ignore
+      (aggregtableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
+    });
+    missingSwitch.simulate('change', { target: { value: false } });
+    expect(onChange).toBeCalledTimes(2);
+  });
+
+  test('change in type filters triggers onChange with appropriate value', () => {
+    const onChange = jest.fn();
+    const component = mountComponent({ ...defaultProps, ...{ onChange } });
+    const btn = findTestSubject(component, 'toggleFieldFilterButton');
+    btn.simulate('click');
+    const typeSelector = findTestSubject(component, 'typeSelect');
+    typeSelector.simulate('change', { target: { value: 'string' } });
+    expect(onChange).toBeCalledWith('type', 'string');
+    typeSelector.simulate('change', { target: { value: 'any' } });
+    expect(onChange).toBeCalledWith('type', 'any');
   });
 });