Move trs 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.
elastic · Apr 2, 2021 · 82f7b21 · 82f7b21
1 parent 1d58266
commit 82f7b21
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 67 deletions.
diff --git a/...tions/app_search/components/result_settings/result_settings_table/column_headers.test.tsx b/...tions/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/...plications/app_search/components/result_settings/result_settings_table/column_headers.tsx b/...plications/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/...ions/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx b/...ions/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx
@@ -9,15 +9,15 @@ 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 '..';
 
 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/...ns/app_search/components/result_settings/result_settings_table/disabled_fields_header.tsx b/...ns/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/...ions/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx b/...ions/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/...ns/app_search/components/result_settings/result_settings_table/non_text_fields_header.tsx b/...ns/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/...ons/app_search/components/result_settings/result_settings_table/result_settings_table.tsx b/...ons/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/...ications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx b/...ications/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/...ations/app_search/components/result_settings/result_settings_table/text_fields_header.tsx b/...ations/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(