diff --git a/CHANGELOG.md b/CHANGELOG.md index fd8691dfe70..20f5404bf32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Fixed `z-index` styles that were causing `EuiModal` and `EuiFlyout` components to appear behind `EuiDataGrid` when in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054)) - Fixed untranslated i18n strings for `EuiFilterButton` - adds 2 new tokens and removes old `euiFilterButton.filterBadge` token ([#4750](https://github.com/elastic/eui/pull/5061)) - Fixed missing i18n token `EuiFilePicker`'s default prompt, and improved i18n string for `euiFilePicker.filesSelected` ([#5063](https://github.com/elastic/eui/pull/5063)) +- Fixed `EuiDataGrid` sort button text pluralization ([#5043](https://github.com/elastic/eui/pull/5043)) **Theme: Amsterdam** diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx index 39cc67db165..c1c82e8a634 100644 --- a/src/components/datagrid/column_sorting.tsx +++ b/src/components/datagrid/column_sorting.tsx @@ -7,13 +7,7 @@ */ import classNames from 'classnames'; -import React, { - Fragment, - ReactChild, - ReactNode, - useEffect, - useState, -} from 'react'; +import React, { Fragment, ReactNode, useEffect, useState } from 'react'; import { DropResult } from 'react-beautiful-dnd'; import { EuiButtonEmpty } from '../button'; import { @@ -22,7 +16,7 @@ import { EuiDroppable, } from '../drag_and_drop'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { EuiI18n } from '../i18n'; +import { EuiI18n, useEuiI18n } from '../i18n'; import { EuiPopover, EuiPopoverFooter } from '../popover'; import { EuiText } from '../text'; import { EuiToken } from '../token'; @@ -64,6 +58,22 @@ export const useDataGridColumnSorting = ( } }, [columns, sorting]); + const sortingButtonText = useEuiI18n( + 'euiColumnSorting.button', + 'Sort fields' + ); + + const sortingButtonTextActive = useEuiI18n( + 'euiColumnSorting.buttonActive', + ({ numberOfSortedFields }) => + `${numberOfSortedFields} field${ + numberOfSortedFields === 1 ? '' : 's' + } sorted`, + { + numberOfSortedFields: sorting !== undefined ? sorting.columns.length : 0, + } + ); + if (sorting == null) return [null]; const activeColumnIds = new Set(sorting.columns.map(({ id }) => id)); @@ -103,8 +113,6 @@ export const useDataGridColumnSorting = ( 'euiDataGrid__controlBtn--active': sorting.columns.length > 0, }); - const numberOfSortedFields = sorting.columns.length; - const schemaDetails = (id: string | number) => schema.hasOwnProperty(id) && schema[id].columnType != null ? getDetailsForSchema(schemaDetectors, schema[id].columnType) @@ -134,25 +142,18 @@ export const useDataGridColumnSorting = ( panelPaddingSize="s" panelClassName="euiDataGridColumnSortingPopover" button={ - setIsOpen(!isOpen)} > - {([button, buttonActive]: ReactChild[]) => ( - setIsOpen(!isOpen)} - > - {numberOfSortedFields > 0 - ? `${numberOfSortedFields} ${buttonActive}` - : button} - - )} - + {sorting.columns.length > 0 + ? sortingButtonTextActive + : sortingButtonText} + } > {sorting.columns.length > 0 ? ( diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index 5ed8ef779d0..e5e4391ef0f 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -1847,6 +1847,56 @@ describe('EuiDataGrid', () => { closeColumnSorterSelection(component); closeColumnSorter(component); }); + + it('"Sort fields" button text updates', () => { + const component = mount( + {}, + }} + sorting={{ + onSort: () => {}, + columns: [], + }} + rowCount={2} + renderCellValue={({ rowIndex, columnId }) => + `${rowIndex}-${columnId}` + } + /> + ); + + // Get column sorting button + const sortColumn = component.find( + 'EuiButtonEmpty[data-test-subj="dataGridColumnSortingButton"]' + ); + const getButtonText = (): string => + sortColumn.find('span[className="euiButtonEmpty__text"]').text(); + expect(getButtonText()).toEqual('Sort fields'); + + // Update sorted columns + component.setProps({ + sorting: { + columns: [{ id: 'A', direction: 'asc' }], + onSort: () => {}, + }, + }); + expect(getButtonText()).toEqual('1 field sorted'); + + // Update sorted columns again + component.setProps({ + sorting: { + columns: [ + { id: 'A', direction: 'asc' }, + { id: 'B', direction: 'asc' }, + ], + onSort: () => {}, + }, + }); + expect(getButtonText()).toEqual('2 fields sorted'); + }); }); describe('render column actions', () => {