maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Move trs to be under tbody in ResultSettings (#96132)

Browse source 
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.
This commit is contained in:
Jason Stoltzfus 2021-04-02 13:24:04 -04:00 committed by GitHub
parent 1d58266559
commit 82f7b2127e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 94 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.test.tsx Normal file
View file

@ -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);
});
});

52
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/column_headers.tsx Normal file
View file

@ -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>
);
};

6
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_body.tsx
View file

@ -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>
</>
);
};

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/disabled_fields_header.tsx
View file

@ -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',

12
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx
View file

@ -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>
</>
);
};

2
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_header.tsx
View file

@ -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',

16
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/result_settings_table.tsx
View file

@ -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>
);

12
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx
View file

@ -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>
</>
);
};

38
x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_header.tsx
View file

@ -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(