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}