From 82f7b2127e233b6a6438c7021250f6a1a66943c5 Mon Sep 17 00:00:00 2001
From: Jason Stoltzfus <jastoltz24@gmail.com>
Date: Fri, 2 Apr 2021 13:24:04 -0400
Subject: [PATCH] Move `tr`s to be under `tbody` in ResultSettings (#96132)

This was causing console errors.

I factored out the column headers to their own component, and moved
all table rows to be under a tbody. This alleviates the console
warnings.
---
 .../column_headers.test.tsx                   | 21 ++++++++
 .../result_settings_table/column_headers.tsx  | 52 +++++++++++++++++++
 .../disabled_fields_body.tsx                  |  6 +--
 .../disabled_fields_header.tsx                |  2 +-
 .../non_text_fields_body.tsx                  | 12 ++---
 .../non_text_fields_header.tsx                |  2 +-
 .../result_settings_table.tsx                 | 16 +++---
 .../text_fields_body.tsx                      | 12 ++---
 .../text_fields_header.tsx                    | 38 +-------------
 9 files changed, 94 insertions(+), 67 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.test.tsx
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.tsx

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.test.tsx
new file mode 100644
index 000000000000..a2ef43908776
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.test.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiTableHeaderCell } from '@elastic/eui';
+
+import { ColumnHeaders } from './column_headers';
+
+describe('ColumnHeaders', () => {
+  it('renders', () => {
+    const wrapper = shallow(<ColumnHeaders />);
+    expect(wrapper.find(EuiTableHeaderCell).length).toBe(3);
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.tsx
new file mode 100644
index 000000000000..b36d71a49de1
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiIconTip, EuiTableHeader, EuiTableHeaderCell } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const ColumnHeaders: React.FC = () => {
+  return (
+    <EuiTableHeader className="resultSettingsTable__columnLabels">
+      <EuiTableHeaderCell align="left" />
+      <EuiTableHeaderCell align="center" colSpan={2}>
+        {i18n.translate('xpack.enterpriseSearch.appSearch.engine.resultSettings.table.rawTitle', {
+          defaultMessage: 'Raw',
+        })}
+        <EuiIconTip
+          position="top"
+          content={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.rawTooltip',
+            {
+              defaultMessage:
+                'A raw field is an exact representation of a field value. Must be at least 20 characters. Defaults to the entire field.',
+            }
+          )}
+        />
+      </EuiTableHeaderCell>
+      <EuiTableHeaderCell align="center" colSpan={3}>
+        {i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.highlightingTitle',
+          {
+            defaultMessage: 'Highlighting',
+          }
+        )}
+        <EuiIconTip
+          position="top"
+          content={i18n.translate(
+            'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.highlightingTooltip',
+            {
+              defaultMessage:
+                'A snippet is an escaped representaiton of a field value. Query matches are encapsulated in <em> tags for highlighting. Fallback will look for a snippet match, but fallback to an escaped raw value if none is found. Range is between 20-1000. Defaults to 100.',
+            }
+          )}
+        />
+      </EuiTableHeaderCell>
+    </EuiTableHeader>
+  );
+};
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx
index fd4646bf9a9f..2f4ba0892784 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiTableBody, EuiTableRow, EuiTableRowCell, EuiText, EuiHealth } from '@elastic/eui';
+import { EuiTableRow, EuiTableRowCell, EuiText, EuiHealth } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { ResultSettingsLogic } from '..';
@@ -17,7 +17,7 @@ import { ResultSettingsLogic } from '..';
 export const DisabledFieldsBody: React.FC = () => {
   const { schemaConflicts } = useValues(ResultSettingsLogic);
   return (
-    <EuiTableBody>
+    <>
       {Object.keys(schemaConflicts).map((fieldName) => (
         <EuiTableRow key={fieldName}>
           <EuiTableRowCell colSpan={6}>
@@ -35,6 +35,6 @@ export const DisabledFieldsBody: React.FC = () => {
           </EuiTableRowCell>
         </EuiTableRow>
       ))}
-    </EuiTableBody>
+    </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_header.tsx
index 0c82477814da..1c0c1da3e4ef 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_header.tsx
@@ -12,7 +12,7 @@ import { i18n } from '@kbn/i18n';
 
 export const DisabledFieldsHeader: React.FC = () => {
   return (
-    <EuiTableRow className="resultSettingsTable__subHeader">
+    <EuiTableRow>
       <EuiTableHeaderCell align="left" colSpan={5}>
         {i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.disabledFieldsTitle',
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx
index 57dd2d5fdb97..145654be2046 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx
@@ -9,13 +9,7 @@ import React, { useMemo } from 'react';
 
 import { useValues, useActions } from 'kea';
 
-import {
-  EuiTableBody,
-  EuiTableRow,
-  EuiTableRowCell,
-  EuiCheckbox,
-  EuiTableRowCellCheckbox,
-} from '@elastic/eui';
+import { EuiTableRow, EuiTableRowCell, EuiCheckbox, EuiTableRowCellCheckbox } from '@elastic/eui';
 
 import { ResultSettingsLogic } from '..';
 import { FieldResultSetting } from '../types';
@@ -31,7 +25,7 @@ export const NonTextFieldsBody: React.FC = () => {
   }, [nonTextResultFields]);
 
   return (
-    <EuiTableBody>
+    <>
       {resultSettingsArray.map(([fieldName, fieldSettings]) => (
         <EuiTableRow key={fieldName}>
           <EuiTableRowCell data-test-subj="ResultSettingFieldName">
@@ -50,6 +44,6 @@ export const NonTextFieldsBody: React.FC = () => {
           <EuiTableRowCell colSpan={4} aria-hidden />
         </EuiTableRow>
       ))}
-    </EuiTableBody>
+    </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_header.tsx
index 6024f736899d..b929187780e1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_header.tsx
@@ -12,7 +12,7 @@ import { i18n } from '@kbn/i18n';
 
 export const NonTextFieldsHeader: React.FC = () => {
   return (
-    <EuiTableRow className="resultSettingsTable__subHeader">
+    <EuiTableRow>
       <EuiTableHeaderCell align="left">
         {i18n.translate(
           'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.column.nonTextFieldsTitle',
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/result_settings_table.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/result_settings_table.tsx
index 2da334e1f2ae..092a4beee0c8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/result_settings_table.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/result_settings_table.tsx
@@ -8,10 +8,11 @@ import React from 'react';
 
 import { useValues } from 'kea';
 
-import { EuiTable } from '@elastic/eui';
+import { EuiTable, EuiTableBody } from '@elastic/eui';
 
 import { ResultSettingsLogic } from '..';
 
+import { ColumnHeaders } from './column_headers';
 import { DisabledFieldsBody } from './disabled_fields_body';
 import { DisabledFieldsHeader } from './disabled_fields_header';
 import { NonTextFieldsBody } from './non_text_fields_body';
@@ -28,23 +29,24 @@ export const ResultSettingsTable: React.FC = () => {
   // to alleviate the issue.
   return (
     <EuiTable className="resultSettingsTable" responsive={false}>
+      <ColumnHeaders />
       {!!Object.keys(textResultFields).length && (
-        <>
+        <EuiTableBody>
           <TextFieldsHeader />
           <TextFieldsBody />
-        </>
+        </EuiTableBody>
       )}
       {!!Object.keys(nonTextResultFields).length && (
-        <>
+        <EuiTableBody className="resultSettingsTable__subHeader">
           <NonTextFieldsHeader />
           <NonTextFieldsBody />
-        </>
+        </EuiTableBody>
       )}
       {!!Object.keys(schemaConflicts).length && (
-        <>
+        <EuiTableBody className="resultSettingsTable__subHeader">
           <DisabledFieldsHeader />
           <DisabledFieldsBody />
-        </>
+        </EuiTableBody>
       )}
     </EuiTable>
   );
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx
index af01ced81f7d..0f7e6f5e0eb1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx
@@ -9,13 +9,7 @@ import React, { useMemo } from 'react';
 
 import { useValues, useActions } from 'kea';
 
-import {
-  EuiTableBody,
-  EuiTableRow,
-  EuiTableRowCell,
-  EuiTableRowCellCheckbox,
-  EuiCheckbox,
-} from '@elastic/eui';
+import { EuiTableRow, EuiTableRowCell, EuiTableRowCellCheckbox, EuiCheckbox } from '@elastic/eui';
 
 import { ResultSettingsLogic } from '../result_settings_logic';
 import { FieldResultSetting } from '../types';
@@ -41,7 +35,7 @@ export const TextFieldsBody: React.FC = () => {
   }, [textResultFields]);
 
   return (
-    <EuiTableBody>
+    <>
       {resultSettingsArray.map(([fieldName, fieldSettings]) => (
         <EuiTableRow key={fieldName}>
           <EuiTableRowCell data-test-subj="ResultSettingFieldName">
@@ -100,6 +94,6 @@ export const TextFieldsBody: React.FC = () => {
           </EuiTableRowCell>
         </EuiTableRow>
       ))}
-    </EuiTableBody>
+    </>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx
index 3810570b3e3a..cf4dfa946278 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx
@@ -7,49 +7,13 @@
 
 import React from 'react';
 
-import { EuiTableRow, EuiTableHeader, EuiTableHeaderCell, EuiIconTip } from '@elastic/eui';
+import { EuiTableRow, EuiTableHeaderCell } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
 export const TextFieldsHeader: React.FC = () => {
   return (
     <>
-      <EuiTableHeader className="resultSettingsTable__columnLabels">
-        <EuiTableHeaderCell align="left" />
-        <EuiTableHeaderCell align="center" colSpan={2}>
-          {i18n.translate('xpack.enterpriseSearch.appSearch.engine.resultSettings.table.rawTitle', {
-            defaultMessage: 'Raw',
-          })}
-          <EuiIconTip
-            position="top"
-            content={i18n.translate(
-              'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.rawTooltip',
-              {
-                defaultMessage:
-                  'A raw field is an exact representation of a field value. Must be at least 20 characters. Defaults to the entire field.',
-              }
-            )}
-          />
-        </EuiTableHeaderCell>
-        <EuiTableHeaderCell align="center" colSpan={3}>
-          {i18n.translate(
-            'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.highlightingTitle',
-            {
-              defaultMessage: 'Highlighting',
-            }
-          )}
-          <EuiIconTip
-            position="top"
-            content={i18n.translate(
-              'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.highlightingTooltip',
-              {
-                defaultMessage:
-                  'A snippet is an escaped representaiton of a field value. Query matches are encapsulated in <em> tags for highlighting. Fallback will look for a snippet match, but fallback to an escaped raw value if none is found. Range is between 20-1000. Defaults to 100.',
-              }
-            )}
-          />
-        </EuiTableHeaderCell>
-      </EuiTableHeader>
       <EuiTableRow className="resultSettingsTable__subHeader">
         <EuiTableHeaderCell align="left">
           {i18n.translate(