[Data Grid] Pluralization of sort button

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**
 

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={
-        <EuiI18n
-          tokens={['euiColumnSorting.button', 'euiColumnSorting.buttonActive']}
-          defaults={['Sort fields', 'fields sorted']}
+        <EuiButtonEmpty
+          size="xs"
+          iconType="sortable"
+          color="text"
+          className={controlBtnClasses}
+          data-test-subj="dataGridColumnSortingButton"
+          onClick={() => setIsOpen(!isOpen)}
         >
-          {([button, buttonActive]: ReactChild[]) => (
-            <EuiButtonEmpty
-              size="xs"
-              iconType="sortable"
-              color="text"
-              className={controlBtnClasses}
-              data-test-subj="dataGridColumnSortingButton"
-              onClick={() => setIsOpen(!isOpen)}
-            >
-              {numberOfSortedFields > 0
-                ? `${numberOfSortedFields} ${buttonActive}`
-                : button}
-            </EuiButtonEmpty>
-          )}
-        </EuiI18n>
+          {sorting.columns.length > 0
+            ? sortingButtonTextActive
+            : sortingButtonText}
+        </EuiButtonEmpty>
       }
     >
       {sorting.columns.length > 0 ? (

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(
+        <EuiDataGrid
+          aria-labelledby="#test"
+          columns={[{ id: 'A' }, { id: 'B' }]}
+          columnVisibility={{
+            visibleColumns: ['A', 'B'],
+            setVisibleColumns: () => {},
+          }}
+          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', () => {