[EuiDataGrid] Add sorting icon if the column is sorted (#4343)

* [EuiDataGrid] Add sorting direction icon indicator if the column is sorted

* Show the sorting direction arrows even if the column actions are disabled

* minor styling updates

* Update changelog with the change

Co-authored-by: Dave Snider <[email protected]>

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
+- Added a sorting indicator on the `EuiDataGridColumn` which indicates the sorting direction and is being displayed only when the column is sorted ([#4343](https://github.com/elastic/eui/pull/4343))
 - Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 **Bug fixes**

src/components/datagrid/_data_grid_header_row.scss

@@ -53,6 +53,10 @@
       outline: none;
     }
 
+    .euiDataGridHeaderCell__sortingArrow {
+      margin-right: $euiSizeXS;
+    }
+
     .euiDataGridHeaderCell__content {
       @include euiTextTruncate;
       overflow: hidden;

src/components/datagrid/data_grid.test.tsx

@@ -1888,6 +1888,111 @@ Array [
     });
   });
 
+  describe('render sorting arrows', () => {
+    it('renders sorting arrows when direction is given', () => {
+      const component = mount(
+        <EuiDataGrid
+          aria-labelledby="#test"
+          sorting={{
+            columns: [
+              { id: 'A', direction: 'asc' },
+              { id: 'B', direction: 'desc' },
+            ],
+            onSort: () => {},
+          }}
+          columns={[
+            { id: 'A', isSortable: true },
+            { id: 'B', isSortable: true },
+          ]}
+          columnVisibility={{
+            visibleColumns: ['A', 'B'],
+            setVisibleColumns: () => {},
+          }}
+          rowCount={2}
+          renderCellValue={({ rowIndex, columnId }) =>
+            `${rowIndex}-${columnId}`
+          }
+        />
+      );
+      const arrowA = findTestSubject(
+        component,
+        'dataGridHeaderCellSortingIcon-A'
+      );
+      expect(arrowA.length).toBe(1);
+
+      const arrowB = findTestSubject(
+        component,
+        'dataGridHeaderCellSortingIcon-B'
+      );
+      expect(arrowB.length).toBe(1);
+    });
+
+    it('does not render the arrows if the column is not sorted', () => {
+      const component = mount(
+        <EuiDataGrid
+          aria-labelledby="#test"
+          sorting={{
+            columns: [],
+            onSort: () => {},
+          }}
+          columns={[
+            {
+              id: 'C',
+              isSortable: true,
+              actions: {
+                showHide: false,
+                showMoveRight: false,
+                showMoveLeft: false,
+                showSortAsc: false,
+                showSortDesc: false,
+                additional: [{ label: 'test' }],
+              },
+            },
+          ]}
+          columnVisibility={{
+            visibleColumns: ['C'],
+            setVisibleColumns: () => {},
+          }}
+          rowCount={2}
+          renderCellValue={({ rowIndex, columnId }) =>
+            `${rowIndex}-${columnId}`
+          }
+        />
+      );
+      const arrowC = findTestSubject(
+        component,
+        'dataGridHeaderCellSortingIcon-C'
+      );
+      expect(arrowC.length).toBe(0);
+    });
+
+    it('renders the icons if they are sorted but user is not allowed to perform any action', () => {
+      const component = mount(
+        <EuiDataGrid
+          aria-labelledby="#test"
+          sorting={{
+            columns: [{ id: 'D', direction: 'asc' }],
+            onSort: () => {},
+          }}
+          columns={[{ id: 'D', actions: false }]}
+          columnVisibility={{
+            visibleColumns: ['D'],
+            setVisibleColumns: () => {},
+          }}
+          rowCount={2}
+          renderCellValue={({ rowIndex, columnId }) =>
+            `${rowIndex}-${columnId}`
+          }
+        />
+      );
+      const arrowD = findTestSubject(
+        component,
+        'dataGridHeaderCellSortingIcon-D'
+      );
+      expect(arrowD.length).toBe(1);
+    });
+  });
+
   describe('render column cell actions', () => {
     it('renders various column cell actions configurations', () => {
       const alertFn = jest.fn();

src/components/datagrid/data_grid_header_cell.tsx

@@ -284,6 +284,15 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
   );
 
   const showColumnActions = columnActions && columnActions.length > 0;
+  const sortedColumn = sorting?.columns.find((col) => col.id === id);
+  const sortingArrow = sortedColumn ? (
+    <EuiIcon
+      type={sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown'}
+      color="text"
+      className="euiDataGridHeaderCell__sortingArrow"
+      data-test-subj={`dataGridHeaderCellSortingIcon-${id}`}
+    />
+  ) : null;
 
   return (
     <div
@@ -308,13 +317,17 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
         </EuiScreenReaderOnly>
       )}
       {!showColumnActions ? (
-        <div className="euiDataGridHeaderCell__content">
-          {display || displayAsText || id}
-        </div>
+        <>
+          {sortingArrow}
+          <div className="euiDataGridHeaderCell__content">
+            {display || displayAsText || id}
+          </div>
+        </>
       ) : (
         <button
           className="euiDataGridHeaderCell__button"
           onClick={() => setIsPopoverOpen(true)}>
+          {sortingArrow}
           <div className="euiDataGridHeaderCell__content">
             {display || displayAsText || id}
           </div>