Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Security Solution] Schema sortTextAsc/Dsc needs to be used for schemas in Tgrid #110041

Closed
snide opened this issue Aug 25, 2021 · 2 comments
Closed
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team Theme: rac label obsolete v7.16.0

Comments

@snide
Copy link
Contributor

snide commented Aug 25, 2021

Noticed on #109983 with @andrew-goldstein

image

I'd suggest using the schema's ability to change the text of the sort buttons. A-Z isn't going to be very readable for the date so I'd suggest Newest-Oldest(which is what you have in your notes). As a reminder, here's some EUI code from the example utilizing sortTextAsc / sortTextDsc.

      schemaDetectors={[
        {
          type: 'favoriteFranchise',
          textTransform: 'capitalize',
          detector(value) {
            return value.toLowerCase() === 'star wars' ||
              value.toLowerCase() === 'star trek'
              ? 1
              : 0;
          },
          comparator(a, b, direction) {
            const aValue = a.toLowerCase() === 'star wars';
            const bValue = b.toLowerCase() === 'star wars';
            if (aValue < bValue) return direction === 'asc' ? 1 : -1;
            if (aValue > bValue) return direction === 'asc' ? -1 : 1;
            return 0;
          },
          sortTextAsc: 'Star wars-Star trek',
          sortTextDesc: 'Star trek-Star wars',
          icon: 'starFilled',
          color: '#800080',
        },

image

@snide snide added bug Fixes for quality problems that affect the customer experience Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. labels Aug 25, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Sep 4, 2021
…mn headers

## Summary

This PR resolves issue <elastic#110041> reported by @snide to enable schema-driven sorting descriptions in column headers.

@chandlerprall recomends 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 the the default `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: The `Sort A-Z` and `Sort Z-A` labels were always displayed as a workaround_

The fix in this PR updates the (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 for `datetime`, `text`, and `numeric` column headers_
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Sep 4, 2021
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 the the default `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: The `Sort A-Z` and `Sort Z-A` labels were always displayed as a workaround_

The fix in this PR updates the (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 for `datetime`, `text`, and `numeric` column headers_
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Sep 4, 2021
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: The `Sort A-Z` and `Sort Z-A` labels were always displayed as a workaround_

The fix in this PR updates the (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 for `datetime`, `text`, and `numeric` column headers_
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Sep 7, 2021
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: The `Sort A-Z` and `Sort Z-A` labels were always displayed as a workaround_

The fix in this PR updates the (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 for `datetime`, `text`, and `numeric` column headers_
andrew-goldstein added a commit that referenced this issue Sep 8, 2021
…mn headers (#111232)

## Summary

This PR resolves issue <#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](#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_
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Sep 8, 2021
…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_
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Sep 8, 2021
…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_
chrisronline pushed a commit to chrisronline/kibana that referenced this issue Sep 8, 2021
…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_
kibanamachine added a commit that referenced this issue Sep 8, 2021
…mn headers (#111232) (#111607)

## Summary

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

Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
@snide snide closed this as completed Sep 9, 2021
andrew-goldstein added a commit that referenced this issue Sep 9, 2021
…in column headers (#111232) (#111606)

* [Security Solution] Enable schema-driven sorting descriptions in column headers (#111232)

## Summary

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

* - increases the `core` bundle size `+15kb` per the instructions [here](https://www.elastic.co/guide/en/kibana/master/ci-metrics.html), because this backport failed CI with the following error:

```
Metrics — "page load bundle size" for "core" is 20.0B over the configured limit of 426.1KB
```

Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
Co-authored-by: Andrew Goldstein <andrew.goldstein@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team Theme: rac label obsolete v7.16.0
Projects
None yet
Development

No branches or pull requests

4 participants