[Discover] De-angularize side bar search field (#46679)

* Add DiscoverFieldSearch react component

* Adapt field_chooser.js

* Add jest test

* Adapt scss

src/legacy/core_plugins/kibana/public/discover/_discover.scss

@@ -19,9 +19,15 @@ discover-app {
   margin-top: 5px;
 }
 
-// SASSTODO: replace the padding-top value with a variable
 .dscFieldList--popular {
-  padding-top: 10px;
+  padding-top: $euiSizeS;
+}
+
+.dscFieldList--selected,
+.dscFieldList--unpopular,
+.dscFieldList--popular {
+  padding-left: $euiSizeS;
+  padding-right: $euiSizeS;
 }
 
 // SASSTODO: replace the z-index value with a variable
@@ -151,9 +157,16 @@ discover-app {
   }
 }
 
-// SASSTODO: replace the padding value with a variable
+.dscFieldSearch {
+  padding: $euiSizeS;
+}
+
+.dscFieldFilter {
+  margin-top: $euiSizeS;
+}
+
 .dscFieldDetails {
-  padding: 10px;
+  padding: $euiSizeS;
   background-color: $euiColorLightestShade;
   color: $euiTextColor;
 }

src/legacy/core_plugins/kibana/public/discover/_hacks.scss

@@ -3,18 +3,4 @@
   overflow: hidden;
 }
 
-// SASSTODO: these are Angular Bootstrap classes. Will be replaced by EUI
-.dscFieldDetails {
-  .progress {
-    background-color: shade($euiColorLightestShade, 5%);
-    margin-bottom: 0;
-    border-radius: 0;
-  }
 
-  .progress-bar {
-    padding-left: 10px;
-    text-align: right;
-    line-height: 20px;
-    max-width: 100%;
-  }
-}

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

@@ -1,3 +1,8 @@
+.dscFieldChooser {
+  padding-left: $euiSizeS !important;
+  padding-right: $euiSizeS !important;
+}
+
 .dscFieldChooser__toggle {
   color: $euiColorMediumShade;
   margin-left: $euiSizeS !important;
@@ -15,3 +20,7 @@
 .dscProgressBarTooltip__anchor {
   display: block;
 }
+
+.dscToggleFieldFilterButton {
+  min-height: $euiSizeXL;
+}

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

@@ -0,0 +1,58 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+import { DiscoverFieldSearch } from './discover_field_search';
+
+describe('DiscoverFieldSearch', () => {
+  function mountComponent() {
+    const props = {
+      onChange: jest.fn(),
+      onShowFilter: jest.fn(),
+      showFilter: false,
+      value: 'test',
+    };
+    const comp = mountWithIntl(<DiscoverFieldSearch {...props} />);
+    const input = findTestSubject(comp, 'fieldFilterSearchInput');
+    const btn = findTestSubject(comp, 'toggleFieldFilterButton');
+    return { comp, input, btn, props };
+  }
+
+  test('enter value', () => {
+    const { input, props } = mountComponent();
+    input.simulate('change', { target: { value: 'new filter' } });
+    expect(props.onChange).toBeCalledTimes(1);
+  });
+
+  // this should work, but doesn't, have to do some research
+  test('click toggle filter button', () => {
+    const { btn, props } = mountComponent();
+    btn.simulate('click');
+    expect(props.onShowFilter).toBeCalledTimes(1);
+  });
+
+  test('change showFilter value should change button label', () => {
+    const { btn, comp } = mountComponent();
+    const prevFilterBtnHTML = btn.html();
+    comp.setProps({ showFilter: true });
+    expect(btn.html()).not.toBe(prevFilterBtnHTML);
+  });
+});

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

@@ -0,0 +1,91 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButtonIcon, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+
+export interface Props {
+  /**
+   * triggered on input of user into search field
+   */
+  onChange: (field: string, value: string) => void;
+  /**
+   * triggered when the "additional filter btn" is clicked
+   */
+  onShowFilter: () => void;
+  /**
+   * determines whether additional filter fields are displayed
+   */
+  showFilter: boolean;
+  /**
+   * the input value of the user
+   */
+  value?: string;
+}
+
+/**
+ * Component is Discover's side bar to  search of available fields
+ * Additionally there's a button displayed that allows the user to show/hide more filter fields
+ */
+export function DiscoverFieldSearch({ showFilter, onChange, onShowFilter, value }: Props) {
+  if (typeof value !== 'string') {
+    // at initial rendering value is undefined (angular related), this catches the warning
+    // should be removed once all is react
+    return null;
+  }
+  const filterBtnAriaLabel = showFilter
+    ? i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
+        defaultMessage: 'Hide field filter settings',
+      })
+    : i18n.translate('kbn.discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel', {
+        defaultMessage: 'Show field filter settings',
+      });
+  const searchPlaceholder = i18n.translate('kbn.discover.fieldChooser.searchPlaceHolder', {
+    defaultMessage: 'Search fields',
+  });
+
+  return (
+    <EuiFlexGroup responsive={false} gutterSize={'s'}>
+      <EuiFlexItem>
+        <EuiFieldSearch
+          aria-label={searchPlaceholder}
+          data-test-subj="fieldFilterSearchInput"
+          compressed
+          fullWidth
+          onChange={event => onChange('name', event.currentTarget.value)}
+          placeholder={searchPlaceholder}
+          value={value}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiToolTip content={filterBtnAriaLabel} position="right">
+          <EuiButtonIcon
+            aria-expanded={showFilter}
+            aria-label={filterBtnAriaLabel}
+            className="dscToggleFieldFilterButton"
+            data-test-subj="toggleFieldFilterButton"
+            iconType="filter"
+            onClick={() => onShowFilter()}
+            size="m"
+          />
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search_directive.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// @ts-ignore
+import { uiModules } from 'ui/modules';
+import { wrapInI18nContext } from 'ui/i18n';
+import { DiscoverFieldSearch } from './discover_field_search';
+
+const app = uiModules.get('apps/discover');
+
+app.directive('discoverFieldSearch', function(reactDirective: any) {
+  return reactDirective(wrapInI18nContext(DiscoverFieldSearch), [
+    ['onChange', { watchDepth: 'reference' }],
+    ['onShowFilter', { watchDepth: 'reference' }],
+    ['showFilter', { watchDepth: 'value' }],
+    ['value', { watchDepth: 'value' }],
+  ]);
+});