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

Part of elastic#51322

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,68 @@
+/*
+ * 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 PropTypes from 'prop-types';
+
+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>
+  );
+};
+
+AddFilter.propTypes = {
+  onAddFilter: PropTypes.func.isRequired,
+};

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

@@ -23,7 +23,7 @@ import { shallow } from 'enzyme';
 import { Header } from '../header';
 
 describe('Header', () => {
-  it('should render normally', async () => {
+  test('should render normally', () => {
     const component = shallow(<Header />);
 
     expect(component).toMatchSnapshot();

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

@@ -20,11 +20,10 @@
 import React from 'react';
 
 import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
-
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const Header = () => (
-  <div>
+  <>
     <EuiTitle size="s">
       <h3>
         <FormattedMessage
@@ -52,5 +51,5 @@ export const Header = () => (
       </p>
     </EuiText>
     <EuiSpacer size="s" />
-  </div>
+  </>
 );

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

@@ -79,7 +79,7 @@ describe('Table', () => {
       );
     });
 
-    it('should show an input field', () => {
+    test('should show an input field', () => {
       // Start the editing process
       const editingComponent = shallow(
         // Wrap in a div because: https://github.com/airbnb/enzyme/issues/1213
@@ -99,7 +99,7 @@ describe('Table', () => {
       expect(filterNameTableCell).toMatchSnapshot();
     });
 
-    it('should show a save button', () => {
+    test('should show a save button', () => {
       // Start the editing process
       const editingComponent = shallow(
         // Fixes: Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `symbol`.
@@ -121,7 +121,7 @@ describe('Table', () => {
       expect(saveTableCell).toMatchSnapshot();
     });
 
-    it('should update the matches dynamically as input value is changed', () => {
+    test('should update the matches dynamically as input value is changed', () => {
       const localComponent = shallowWithI18nProvider(
         <Table
           indexPattern={{
@@ -161,7 +161,7 @@ describe('Table', () => {
       expect(matchesTableCell).toMatchSnapshot();
     });
 
-    it('should exit on save', () => {
+    test('should exit on save', () => {
       // Change the value to something else
       component.setState({
         editingFilterId: clientId,
@@ -189,7 +189,7 @@ describe('Table', () => {
     });
   });
 
-  it('should allow deletes', () => {
+  test('should allow deletes', () => {
     const deleteFilter = jest.fn();
 
     const component = shallowWithI18nProvider(
@@ -215,7 +215,7 @@ describe('Table', () => {
     expect(deleteFilter).toBeCalled();
   });
 
-  it('should save when in edit mode and the enter key is pressed', () => {
+  test('should save when in edit mode and the enter key is pressed', () => {
     const saveFilter = jest.fn();
     const clientId = 1;
 
@@ -256,7 +256,7 @@ describe('Table', () => {
     expect(component.state('editingFilterId')).toBe(null);
   });
 
-  it('should cancel when in edit mode and the esc key is pressed', () => {
+  test('should cancel when in edit mode and the esc key is pressed', () => {
     const saveFilter = jest.fn();
     const clientId = 1;