diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16cb98182c2..0585b9df83b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
**Bug fixes**
- Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
+- Fixed copy in `EuiDataGrid`'s header menu's sort actions ([#4199](https://github.com/elastic/eui/pull/4199))
## [`30.1.1`](https://github.com/elastic/eui/tree/v30.1.1)
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 828d5503ecc..086f0aad05d 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -224,8 +224,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
key="title-1"
label={
,
+ }
+ }
/>
}
onClick={[Function]}
@@ -253,13 +261,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
,
+ }
+ }
>
- Sort schema asc
+
+ }
+ >
+ Sort
+
+ A-Z
+
+
@@ -273,8 +305,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
key="title-2"
label={
,
+ }
+ }
/>
}
onClick={[Function]}
@@ -302,13 +342,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
,
+ }
+ }
>
- Sort schema desc
+
+ }
+ >
+ Sort
+
+ Z-A
+
+
@@ -459,8 +523,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
key="title-0"
label={
,
+ }
+ }
/>
}
onClick={[Function]}
@@ -488,13 +560,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
,
+ }
+ }
>
- Sort schema asc
+
+ }
+ >
+ Sort
+
+ A-Z
+
+
@@ -508,8 +604,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
key="title-1"
label={
,
+ }
+ }
/>
}
onClick={[Function]}
@@ -537,13 +641,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
,
+ }
+ }
>
- Sort schema desc
+
+ }
+ >
+ Sort
+
+ Z-A
+
+
diff --git a/src/components/datagrid/column_actions.tsx b/src/components/datagrid/column_actions.tsx
index 996ebc7cfbc..0458b6f13fa 100644
--- a/src/components/datagrid/column_actions.tsx
+++ b/src/components/datagrid/column_actions.tsx
@@ -20,10 +20,21 @@ import React from 'react';
import { EuiDataGridColumn, EuiDataGridSorting } from './data_grid_types';
import { EuiI18n } from '../i18n';
import { EuiListGroupItemProps } from '../list_group';
+import {
+ EuiDataGridSchema,
+ EuiDataGridSchemaDetector,
+ getDetailsForSchema,
+} from './data_grid_schema';
+import {
+ defaultSortAscLabel,
+ defaultSortDescLabel,
+} from './column_sorting_draggable';
export function getColumnActions(
column: EuiDataGridColumn,
columns: EuiDataGridColumn[],
+ schema: EuiDataGridSchema,
+ schemaDetectors: EuiDataGridSchemaDetector[],
setVisibleColumns: (columnId: string[]) => void,
setIsPopoverOpen: (value: boolean) => void,
sorting: EuiDataGridSorting | undefined,
@@ -118,10 +129,21 @@ export function getColumnActions(
}
}
+ const schemaDetails =
+ schema.hasOwnProperty(column.id) && schema[column.id].columnType != null
+ ? getDetailsForSchema(schemaDetectors, schema[column.id].columnType)
+ : null;
if (column.actions?.showSortAsc !== false && sorting) {
+ const label = schemaDetails
+ ? schemaDetails.sortTextAsc
+ : defaultSortAscLabel;
const option = {
label: (
-
+
),
onClick: onClickSortAsc,
isDisabled: column.isSortable === false,
@@ -141,9 +163,16 @@ export function getColumnActions(
}
if (column.actions?.showSortDesc !== false && sorting) {
+ const label = schemaDetails
+ ? schemaDetails.sortTextDesc
+ : defaultSortDescLabel;
const option = {
label: (
-
+
),
onClick: onClickSortDesc,
isDisabled: column.isSortable === false,
diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx
index 4978fd9ca74..173008a4e97 100644
--- a/src/components/datagrid/column_sorting_draggable.tsx
+++ b/src/components/datagrid/column_sorting_draggable.tsx
@@ -46,6 +46,13 @@ export interface EuiDataGridColumnSortingDraggableProps {
display: string;
}
+export const defaultSortAscLabel = (
+
+);
+export const defaultSortDescLabel = (
+
+);
+
export const EuiDataGridColumnSortingDraggable: FunctionComponent = ({
id,
display,
@@ -62,21 +69,10 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent
- );
+ schemaDetails != null ? schemaDetails.sortTextAsc : defaultSortAscLabel;
const textSortDesc =
- schemaDetails != null ? (
- schemaDetails.sortTextDesc
- ) : (
-
- );
+ schemaDetails != null ? schemaDetails.sortTextDesc : defaultSortDescLabel;
const toggleOptions = [
{
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index 505bd4070df..c69e64cba18 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -1066,6 +1066,7 @@ export const EuiDataGrid: FunctionComponent = (props) => {
setVisibleColumns={setVisibleColumns}
switchColumnPos={switchColumnPos}
schema={mergedSchema}
+ schemaDetectors={allSchemaDetectors}
sorting={sorting}
headerIsInteractive={
headerIsInteractive
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
index 4eb6a2fe561..2ed6fe317fd 100644
--- a/src/components/datagrid/data_grid_header_cell.tsx
+++ b/src/components/datagrid/data_grid_header_cell.tsx
@@ -59,6 +59,7 @@ export const EuiDataGridHeaderCell: FunctionComponent void;
setVisibleColumns: (columnId: string[]) => void;
@@ -61,6 +65,7 @@ const EuiDataGridHeaderRow = forwardRef<
trailingControlColumns = [],
columns,
schema,
+ schemaDetectors,
columnWidths,
defaultColumnWidth,
className,
@@ -106,6 +111,7 @@ const EuiDataGridHeaderRow = forwardRef<
focusedCell={focusedCell}
onCellFocus={setFocusedCell}
schema={schema}
+ schemaDetectors={schemaDetectors}
setColumnWidth={setColumnWidth}
setVisibleColumns={setVisibleColumns}
switchColumnPos={switchColumnPos}