From 6f279b25446b0a2b085d7554f559e0cd93715bf2 Mon Sep 17 00:00:00 2001 From: Andrew Goldstein Date: Wed, 8 Sep 2021 11:54:39 -0600 Subject: [PATCH] [Security Solution] Enable schema-driven sorting descriptions in column headers (#111232) ## Summary This PR resolves issue 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) => ( ), ``` , 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_ --- src/core/public/i18n/i18n_eui_mapping.tsx | 12 +++++++----- .../t_grid/body/column_headers/helpers.test.tsx | 8 ++------ .../t_grid/body/column_headers/helpers.tsx | 5 ++--- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/core/public/i18n/i18n_eui_mapping.tsx b/src/core/public/i18n/i18n_eui_mapping.tsx index d02526557ba46c..5ca9ebf04831a9 100644 --- a/src/core/public/i18n/i18n_eui_mapping.tsx +++ b/src/core/public/i18n/i18n_eui_mapping.tsx @@ -218,11 +218,13 @@ export const getEuiContextMapping = (): EuiTokensObject => { 'euiColumnActions.hideColumn': i18n.translate('core.euiColumnActions.hideColumn', { defaultMessage: 'Hide column', }), - 'euiColumnActions.sort': ({ schemaLabel }: EuiValues) => - i18n.translate('core.euiColumnActions.sort', { - defaultMessage: 'Sort {schemaLabel}', - values: { schemaLabel }, - }), + 'euiColumnActions.sort': ({ schemaLabel }: EuiValues) => ( + + ), 'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', { defaultMessage: 'Move left', }), diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx index 42057062d8b547..2e684b9eda9892 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx @@ -98,12 +98,8 @@ describe('helpers', () => { describe('getColumnHeaders', () => { // additional properties used by `EuiDataGrid`: const actions = { - showSortAsc: { - label: 'Sort A-Z', - }, - showSortDesc: { - label: 'Sort Z-A', - }, + showSortAsc: true, + showSortDesc: true, }; const defaultSortDirection = 'desc'; const isSortable = true; diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx index cd08e880bcb251..c658000e6d3311 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx @@ -23,11 +23,10 @@ import { MINIMUM_ACTIONS_COLUMN_WIDTH, } from '../constants'; import { allowSorting } from '../helpers'; -import * as i18n from './translations'; const defaultActions: EuiDataGridColumnActions = { - showSortAsc: { label: i18n.SORT_AZ }, - showSortDesc: { label: i18n.SORT_ZA }, + showSortAsc: true, + showSortDesc: true, }; const getAllBrowserFields = (browserFields: BrowserFields): Array> =>