Index pattern management UI -> TypeScript (scripted_fields_table)

Part of elastic#51322

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

@@ -23,7 +23,7 @@ import { shallow } from 'enzyme';
 import { CallOuts } from '../call_outs';
 
 describe('CallOuts', () => {
-  it('should render normally', async () => {
+  test('should render normally', () => {
     const component = shallow(
       <CallOuts
         deprecatedLangsInUse={['php']}
@@ -34,7 +34,7 @@ describe('CallOuts', () => {
     expect(component).toMatchSnapshot();
   });
 
-  it('should render without any call outs', async () => {
+  test('should render without any call outs', () => {
     const component = shallow(
       <CallOuts deprecatedLangsInUse={[]} painlessDocLink="http://www.elastic.co/painlessDocs" />
     );

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/call_outs/call_outs.js → src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/call_outs/call_outs.tsx

@@ -22,14 +22,20 @@ import React from 'react';
 import { EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
+import PropTypes from 'prop-types';
 
-export const CallOuts = ({ deprecatedLangsInUse, painlessDocLink }) => {
+interface CallOutsProps {
+  deprecatedLangsInUse: string[];
+  painlessDocLink: string;
+}
+
+export const CallOuts = ({ deprecatedLangsInUse, painlessDocLink }: CallOutsProps) => {
   if (!deprecatedLangsInUse.length) {
     return null;
   }
 
   return (
-    <div>
+    <>
       <EuiCallOut
         title={
           <FormattedMessage
@@ -60,6 +66,11 @@ export const CallOuts = ({ deprecatedLangsInUse, painlessDocLink }) => {
         </p>
       </EuiCallOut>
       <EuiSpacer size="m" />
-    </div>
+    </>
   );
 };
+
+CallOuts.propTypes = {
+  deprecatedLangsInUse: PropTypes.array.isRequired,
+  painlessDocLink: PropTypes.string.isRequired,
+};

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import { DeleteScritpedFieldConfirmationModal } from './confirmation_modal';
+
+describe('DeleteScritpedFieldConfirmationModal', () => {
+  test('should render normally', () => {
+    const component = shallow(
+      <DeleteScritpedFieldConfirmationModal
+        field={{ name: '', script: '', lang: '' }}
+        deleteField={() => {}}
+        hideDeleteConfirmationModal={() => {}}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/components/confirmation_modal/confirmation_modal.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 PropTypes from 'prop-types';
+
+import { i18n } from '@kbn/i18n';
+import { EUI_MODAL_CONFIRM_BUTTON, EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
+
+import { ScriptedFieldItem } from '../../types';
+
+interface DeleteScritpedFieldConfirmationModalProps {
+  field: ScriptedFieldItem;
+  hideDeleteConfirmationModal: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>
+  ) => void;
+  deleteField: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export const DeleteScritpedFieldConfirmationModal = ({
+  field,
+  hideDeleteConfirmationModal,
+  deleteField,
+}: DeleteScritpedFieldConfirmationModalProps) => {
+  const title = i18n.translate('kbn.management.editIndexPattern.scripted.deleteFieldLabel', {
+    defaultMessage: "Delete scripted field '{fieldName}'?",
+    values: { fieldName: field.name },
+  });
+  const cancelButtonText = i18n.translate(
+    'kbn.management.editIndexPattern.scripted.deleteField.cancelButton',
+    { defaultMessage: 'Cancel' }
+  );
+  const confirmButtonText = i18n.translate(
+    'kbn.management.editIndexPattern.scripted.deleteField.deleteButton',
+    { defaultMessage: 'Delete' }
+  );
+
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={title}
+        onCancel={hideDeleteConfirmationModal}
+        onConfirm={deleteField}
+        cancelButtonText={cancelButtonText}
+        confirmButtonText={confirmButtonText}
+        defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+      />
+    </EuiOverlayMask>
+  );
+};
+
+DeleteScritpedFieldConfirmationModal.propTypes = {
+  field: PropTypes.object.isRequired,
+  hideDeleteConfirmationModal: PropTypes.func.isRequired,
+  deleteField: PropTypes.func.isRequired,
+};