Index pattern management UI -> TypeScript (source_filters_table) (#62925

) (#63370)

* [WIP] Index pattern management UI -> TypeScript (source_filters_table)

Co-authored-by: Alexey Antonov <[email protected]>

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/__jest__/add_filter.test.js → src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/add_filter.test.tsx

@@ -18,33 +18,30 @@
  */
 
 import React from 'react';
-import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
+import { shallow } from 'enzyme';
 
-import { AddFilter } from '../add_filter';
+import { AddFilter } from './add_filter';
 
 describe('AddFilter', () => {
-  it('should render normally', async () => {
-    const component = shallowWithI18nProvider(<AddFilter onAddFilter={() => {}} />);
+  test('should render normally', () => {
+    const component = shallow(<AddFilter onAddFilter={() => {}} />);
 
     expect(component).toMatchSnapshot();
   });
 
-  it('should allow adding a filter', async () => {
+  test('should allow adding a filter', async () => {
     const onAddFilter = jest.fn();
-    const component = shallowWithI18nProvider(<AddFilter onAddFilter={onAddFilter} />);
+    const component = shallow(<AddFilter onAddFilter={onAddFilter} />);
 
-    // Set a value in the input field
-    component.setState({ filter: 'tim*' });
-
-    // Click the button
+    component.find('EuiFieldText').simulate('change', { target: { value: 'tim*' } });
     component.find('EuiButton').simulate('click');
     component.update();
 
     expect(onAddFilter).toBeCalledWith('tim*');
   });
 
-  it('should ignore strings with just spaces', async () => {
-    const component = shallowWithI18nProvider(<AddFilter onAddFilter={() => {}} />);
+  test('should ignore strings with just spaces', () => {
+    const component = shallow(<AddFilter onAddFilter={() => {}} />);
 
     // Set a value in the input field
     component.find('EuiFieldText').simulate('keypress', ' ');

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/components/add_filter/add_filter.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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, { useState, useCallback } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButton } from '@elastic/eui';
+
+interface AddFilterProps {
+  onAddFilter: (filter: string) => void;
+}
+
+const sourcePlaceholder = i18n.translate('kbn.management.editIndexPattern.sourcePlaceholder', {
+  defaultMessage:
+    "source filter, accepts wildcards (e.g., `user*` to filter fields starting with 'user')",
+});
+
+export const AddFilter = ({ onAddFilter }: AddFilterProps) => {
+  const [filter, setFilter] = useState<string>('');
+
+  const onAddButtonClick = useCallback(() => {
+    onAddFilter(filter);
+    setFilter('');
+  }, [filter, onAddFilter]);
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem grow={10}>
+        <EuiFieldText
+          fullWidth
+          value={filter}
+          onChange={e => setFilter(e.target.value.trim())}
+          placeholder={sourcePlaceholder}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiButton isDisabled={filter.length === 0} onClick={onAddButtonClick}>
+          <FormattedMessage
+            id="kbn.management.editIndexPattern.source.addButtonLabel"
+            defaultMessage="Add"
+          />
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};