From 5ed8d06e8ba2366a231d295f402ef2044f021293 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 19 Sep 2024 18:56:28 +0200
Subject: [PATCH] Fix report table sorting

---
 .../Dashboard/NewReport/MetricsTable/index.tsx      | 13 ++++++++-----
 .../Dashboard/NewReport/MetricsTable/styles.ts      |  4 ++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Dashboard/NewReport/MetricsTable/index.tsx b/src/components/Dashboard/NewReport/MetricsTable/index.tsx
index b3a2ff745..b1e974837 100644
--- a/src/components/Dashboard/NewReport/MetricsTable/index.tsx
+++ b/src/components/Dashboard/NewReport/MetricsTable/index.tsx
@@ -4,7 +4,6 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   SortingFn,
-  sortingFns,
   useReactTable
 } from "@tanstack/react-table";
 
@@ -84,7 +83,6 @@ export const MetricsTable = ({
   const columns = [
     columnHelper.accessor((row) => row.key.service, {
       header: "Service",
-      enableSorting: false,
       cell: (info) => info.getValue()
     }),
     columnHelper.accessor((row) => row, {
@@ -135,7 +133,7 @@ export const MetricsTable = ({
         cell: (info) => {
           return info.getValue();
         },
-        sortingFn: sortingFns.alphanumeric,
+        sortingFn: sortImpactFn,
         meta: {
           contentAlign: "center"
         }
@@ -147,7 +145,8 @@ export const MetricsTable = ({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel()
+    getSortedRowModel: getSortedRowModel(),
+    enableSortingRemoval: false
   });
 
   return (
@@ -163,8 +162,12 @@ export const MetricsTable = ({
               return (
                 <s.TableHeaderCell key={header.id}>
                   <s.TableHeaderCellContent
-                    onClick={header.column.getToggleSortingHandler()}
                     $align={meta?.contentAlign}
+                    onClick={
+                      header.column.columnDef.enableSorting
+                        ? header.column.getToggleSortingHandler()
+                        : undefined
+                    }
                   >
                     {header.isPlaceholder
                       ? null
diff --git a/src/components/Dashboard/NewReport/MetricsTable/styles.ts b/src/components/Dashboard/NewReport/MetricsTable/styles.ts
index 3a6d4f7dd..404c95d93 100644
--- a/src/components/Dashboard/NewReport/MetricsTable/styles.ts
+++ b/src/components/Dashboard/NewReport/MetricsTable/styles.ts
@@ -20,7 +20,7 @@ export const TableHead = styled.thead`
 `;
 
 export const TableHeaderCell = styled.th`
-  height: 70;
+  height: 70px;
 `;
 
 export const TableCellContent = styled.div<TableCellContentProps>`
@@ -49,7 +49,7 @@ export const TableHeaderCellContent = styled(TableCellContent)`
   font-weight: 400;
   gap: 4px;
   color: ${({ theme }) => theme.colors.v3.text.tertiary};
-  cursor: pointer;
+  ${({ onClick }) => (onClick ? "cursor: pointer;" : "")}
 `;
 
 export const TableBodyRow = styled.tr`