[Security Solution] Enable schema-driven sorting descriptions in column headers (#111232)
## Summary This PR resolves issue <https://github.com/elastic/kibana/issues/110041> reported by @snide to enable schema-driven sorting descriptions in column headers. @chandlerprall recommends obtaining a **+1** from the Machine Learning and Observability solutions, because the fix updates an `i18n` constant in Kibana common to all consumers of `EuiDataGrid`. ## Details Thanks @chandlerprall for paring on this! The Alerts table, `Host > Events`, and other `EuiDataGrid`-based views in the Security Solution make use of the default [`EuiDataGrid` schemas](https://elastic.github.io/eui/#/tabular-content/data-grid-schemas-and-popovers). The default schemas enable `EuiDataGrid` to automatically display, for example, `Old-New` and `New-Old` sorting descriptions for datetime fields, as opposed to generic `A-Z` and `Z-A` descriptions. The following (shared) Kibana `i18n` constant in `src/core/public/i18n/i18n_eui_mapping.tsx` is expected to be rendered a `string` at runtime: ```ts 'euiColumnActions.sort': ({ schemaLabel }: EuiValues) => i18n.translate('core.euiColumnActions.sort', { defaultMessage: 'Sort {schemaLabel}', values: { schemaLabel }, }), ``` But the constant was rendered in `EuiDataGrid` column headers as `[object Object]` when schemas were enabled, as shown in the screenshot below: ![column-header-object-object](https://user-images.githubusercontent.com/4459398/132079843-a8b0f5e5-9d47-4816-8baa-e29577511bf1.png) _Above: The `sortTextAsc/Desc` text was rendered as `[object Object]`_ The temporary workaround described by [#110041](https://github.com/elastic/kibana/issues/110041) ensured that `Sort A-Z` and `Sort Z-A` labels were always displayed (in lieu of `[object Object]`), as shown in the screenshot below: ![image](https://user-images.githubusercontent.com/324519/130789326-bfe67cae-e4f7-469a-9b57-320cbf733cc8.png) _Above: `Sort A-Z` and `Sort Z-A` labels were always displayed as a workaround_ The fix in this PR updates the following (shared) Kibana `i18n` constant in `src/core/public/i18n/i18n_eui_mapping.tsx` to use a `FormattedMessage`: ```ts 'euiColumnActions.sort': ({ schemaLabel }: EuiValues) => ( <FormattedMessage id="core.euiColumnActions.sort" defaultMessage="Sort {schemaLabel}" values={{ schemaLabel }} /> ), ``` , which ensures a schema-specific sorting label is displayed as-expected. It also removes the workaround, as shown in the animated gif below: ![after](https://user-images.githubusercontent.com/4459398/132080352-1ee41a7e-8884-45ad-ae3c-daa9a0127aac.gif) _Above: Schema-specific sorting descriptions are displayed for `datetime`, `text`, and `numeric` column headers_
This commit is contained in:
parent
65bdbe71d0
commit
99ee803459
3 changed files with 11 additions and 14 deletions
|
@ -218,11 +218,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
|
||||||
'euiColumnActions.hideColumn': i18n.translate('core.euiColumnActions.hideColumn', {
|
'euiColumnActions.hideColumn': i18n.translate('core.euiColumnActions.hideColumn', {
|
||||||
defaultMessage: 'Hide column',
|
defaultMessage: 'Hide column',
|
||||||
}),
|
}),
|
||||||
'euiColumnActions.sort': ({ schemaLabel }: EuiValues) =>
|
'euiColumnActions.sort': ({ schemaLabel }: EuiValues) => (
|
||||||
i18n.translate('core.euiColumnActions.sort', {
|
<FormattedMessage
|
||||||
defaultMessage: 'Sort {schemaLabel}',
|
id="core.euiColumnActions.sort"
|
||||||
values: { schemaLabel },
|
defaultMessage="Sort {schemaLabel}"
|
||||||
}),
|
values={{ schemaLabel }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', {
|
'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', {
|
||||||
defaultMessage: 'Move left',
|
defaultMessage: 'Move left',
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -98,12 +98,8 @@ describe('helpers', () => {
|
||||||
describe('getColumnHeaders', () => {
|
describe('getColumnHeaders', () => {
|
||||||
// additional properties used by `EuiDataGrid`:
|
// additional properties used by `EuiDataGrid`:
|
||||||
const actions = {
|
const actions = {
|
||||||
showSortAsc: {
|
showSortAsc: true,
|
||||||
label: 'Sort A-Z',
|
showSortDesc: true,
|
||||||
},
|
|
||||||
showSortDesc: {
|
|
||||||
label: 'Sort Z-A',
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
const defaultSortDirection = 'desc';
|
const defaultSortDirection = 'desc';
|
||||||
const isSortable = true;
|
const isSortable = true;
|
||||||
|
|
|
@ -23,11 +23,10 @@ import {
|
||||||
MINIMUM_ACTIONS_COLUMN_WIDTH,
|
MINIMUM_ACTIONS_COLUMN_WIDTH,
|
||||||
} from '../constants';
|
} from '../constants';
|
||||||
import { allowSorting } from '../helpers';
|
import { allowSorting } from '../helpers';
|
||||||
import * as i18n from './translations';
|
|
||||||
|
|
||||||
const defaultActions: EuiDataGridColumnActions = {
|
const defaultActions: EuiDataGridColumnActions = {
|
||||||
showSortAsc: { label: i18n.SORT_AZ },
|
showSortAsc: true,
|
||||||
showSortDesc: { label: i18n.SORT_ZA },
|
showSortDesc: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
const getAllBrowserFields = (browserFields: BrowserFields): Array<Partial<BrowserField>> =>
|
const getAllBrowserFields = (browserFields: BrowserFields): Array<Partial<BrowserField>> =>
|
||||||
|
|
Loading…
Reference in a new issue