From b21a18dd50ad3cfdf1f35ea53388b99ab32e8da7 Mon Sep 17 00:00:00 2001
From: Radek Podrazky <rpodrazky@securityscorecard.io>
Date: Mon, 14 Oct 2024 16:12:59 +0200
Subject: [PATCH] fix(DatatableV2): fix missing sorting indicator

If consumer disables the column actions menu the sortion indicator was lost as we have it in the column actions button. This PR adds the separate sorting indicator for cases when the columns actions menu is disabled.

Closes UXD-1644
---
 src/components/DatatableV2/header/HeaderCell.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/DatatableV2/header/HeaderCell.tsx b/src/components/DatatableV2/header/HeaderCell.tsx
index 7e3d2e819..c2aec681d 100644
--- a/src/components/DatatableV2/header/HeaderCell.tsx
+++ b/src/components/DatatableV2/header/HeaderCell.tsx
@@ -9,6 +9,7 @@ import { Inline } from '../../layout';
 import { Tooltip } from '../../Tooltip';
 import { displayColumnIds } from '../hooks/useDisplayColumns';
 import { parseFromValuesOrFunc } from '../utils';
+import { Icon } from '../../Icon';
 
 const getTextHeaderStyle = (
   labelLength: number | undefined,
@@ -43,6 +44,7 @@ const HeaderCell = <D,>({
     headerComponent,
     renderHeaderTooltip,
   } = columnDef;
+  const direction = getIsSorted();
 
   const showColumnActions =
     (enableColumnActions || cdEnableColumnActions) &&
@@ -96,9 +98,17 @@ const HeaderCell = <D,>({
               </button>
             </Tooltip>
           </Inline>
-          {showColumnActions && (
+          {showColumnActions ? (
             <HeaderCellColumnActionsButton header={header} table={table} />
-          )}
+          ) : direction !== false ? (
+            <div className="ds-table-header-cell-column-actions-button-wrapper">
+              <Icon
+                name={direction === 'asc' ? 'sort-up' : 'sort-down'}
+                size="sm"
+                hasFixedSize
+              />
+            </div>
+          ) : null}
           {getCanResize() && (
             <HeaderCellResizeHandler header={header} table={table} />
           )}