[Security Solution] Enable schema-driven sorting descriptions in colu…

…mn headers (elastic#111232)

## Summary

This PR resolves issue <elastic#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 [elastic#110041](elastic#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_

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) => (
+      <FormattedMessage
+        id="core.euiColumnActions.sort"
+        defaultMessage="Sort {schemaLabel}"
+        values={{ schemaLabel }}
+      />
+    ),
     'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', {
       defaultMessage: 'Move left',
     }),

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;

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<Partial<BrowserField>> =>