From 6ad891af1b27da38af8667c2180cc48f57f49754 Mon Sep 17 00:00:00 2001
From: KamilKranczuk <kamil.kranczuk@fortedigital.no>
Date: Thu, 31 Aug 2023 10:19:52 +0200
Subject: [PATCH] Emphasize current active sorted column

---
 .../ContentTypeUsageTable.tsx                       |  8 +++++++-
 .../Frontend/Lib/hooks/useFilteredTableData.ts      |  2 ++
 .../Frontend/Styles/_variables.scss                 |  3 ++-
 .../Styles/forte-optimizely-content-usage.scss      | 13 +++++++++++++
 .../Frontend/Views/ContentTypeUsageView.tsx         |  2 ++
 .../Frontend/Views/ContentTypesView.tsx             |  7 ++++++-
 6 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/ContentTypeUsagesTable/ContentTypeUsageTable.tsx b/src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/ContentTypeUsagesTable/ContentTypeUsageTable.tsx
index a4121fa..3e4f04a 100644
--- a/src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/ContentTypeUsagesTable/ContentTypeUsageTable.tsx
+++ b/src/Forte.Optimizely.ContentUsage/Frontend/Components/Tables/ContentTypeUsagesTable/ContentTypeUsageTable.tsx
@@ -18,6 +18,7 @@ interface ContentTypeUsagesTableProps {
   tableColumns: TableColumn<ContentUsageDto>[];
   rows: ContentUsageDto[];
   onSortChange: (column: TableColumn<ContentUsageDto>) => void;
+  sortBy: keyof ContentUsageDto;
   sortDirection: string;
 }
 
@@ -25,6 +26,7 @@ const ContentTypeUsagesTable = ({
   tableColumns,
   rows,
   onSortChange,
+  sortBy,
   sortDirection,
 }: ContentTypeUsagesTableProps) => {
   const onTableRowClick = useCallback(
@@ -41,6 +43,9 @@ const ContentTypeUsagesTable = ({
     [navigateTo]
   );
 
+  const columnHeaderClassName = "forte-optimizely-content-usage-column";
+  const activeColumnHeaderClassName = `${columnHeaderClassName} forte-optimizely-content-usage-column--active`;
+
   return (
     <Table
       tableLayoutAlgorithm="fixed"
@@ -53,10 +58,11 @@ const ContentTypeUsagesTable = ({
             .map((column) => (
                 <Table.TH
                   colSpan={column.columnSpanWidth}
+                  className={column.id === sortBy ? activeColumnHeaderClassName : columnHeaderClassName}
                   sorting={{
                     canSort: column.sorting,
                     handleSort: () => onSortChange(column),
-                    order: sortDirection,
+                    order: column.id === sortBy ? sortDirection : undefined,
                   }}
                   key={column.id}
                 >
diff --git a/src/Forte.Optimizely.ContentUsage/Frontend/Lib/hooks/useFilteredTableData.ts b/src/Forte.Optimizely.ContentUsage/Frontend/Lib/hooks/useFilteredTableData.ts
index 2591286..8cd59ef 100644
--- a/src/Forte.Optimizely.ContentUsage/Frontend/Lib/hooks/useFilteredTableData.ts
+++ b/src/Forte.Optimizely.ContentUsage/Frontend/Lib/hooks/useFilteredTableData.ts
@@ -56,6 +56,7 @@ export function useFilteredTableData<TableDataType>({
   onTableColumnChange: (column: string, visible: boolean) => void;
   selectedRowsPerPage: number;
   onRowsPerPageChange: (option: number) => void;
+  sortBy: keyof TableDataType | null;
   sortDirection: SortDirection;
   onSortChange: (column: TableColumn<TableDataType>) => void;
   totalPages: number;
@@ -634,6 +635,7 @@ export function useFilteredTableData<TableDataType>({
     onTableColumnChange: onColumnVisiblityChange,
     selectedRowsPerPage: rowsPerPage,
     onRowsPerPageChange: onRowsPerPageChange,
+    sortBy,
     sortDirection,
     onSortChange: handleTableSort,
     totalPages,
diff --git a/src/Forte.Optimizely.ContentUsage/Frontend/Styles/_variables.scss b/src/Forte.Optimizely.ContentUsage/Frontend/Styles/_variables.scss
index 2f65887..e6ba111 100644
--- a/src/Forte.Optimizely.ContentUsage/Frontend/Styles/_variables.scss
+++ b/src/Forte.Optimizely.ContentUsage/Frontend/Styles/_variables.scss
@@ -1,5 +1,6 @@
 @import 'variables/breakpoints';
 
 :root {
-    --muted-color: #707070
+    --muted-color: #707070;
+    --brand-blue-dark: #0037ff;
 }
\ No newline at end of file
diff --git a/src/Forte.Optimizely.ContentUsage/Frontend/Styles/forte-optimizely-content-usage.scss b/src/Forte.Optimizely.ContentUsage/Frontend/Styles/forte-optimizely-content-usage.scss
index 152fd34..34039d1 100644
--- a/src/Forte.Optimizely.ContentUsage/Frontend/Styles/forte-optimizely-content-usage.scss
+++ b/src/Forte.Optimizely.ContentUsage/Frontend/Styles/forte-optimizely-content-usage.scss
@@ -31,6 +31,19 @@
         }
       }
 
+      .forte-optimizely-content-usage-column {
+        .oui-arrow-inline--up, .oui-arrow-inline--down {
+          visibility: hidden;
+        }
+
+        &.forte-optimizely-content-usage-column--active {
+          color: var(--brand-blue-dark) !important;
+          .oui-arrow-inline--up, .oui-arrow-inline--down{
+            visibility: visible;
+          }
+        }
+      }
+
       .oui-spinner {
         margin: 30px;
       }
diff --git a/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypeUsageView.tsx b/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypeUsageView.tsx
index 7aed8e8..91bd573 100644
--- a/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypeUsageView.tsx
+++ b/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypeUsageView.tsx
@@ -109,6 +109,7 @@ const ContentTypeUsageView = () => {
     onClearButtonClick,
     tableColumns,
     onTableColumnChange,
+    sortBy,
     sortDirection,
     onSortChange,
     currentPage,
@@ -223,6 +224,7 @@ const ContentTypeUsageView = () => {
               <div className="forte-optimizely-content-usage-table-container">
                 <ContentTypeUsagesTable rows={rows}
                                         tableColumns={tableColumns}
+                                        sortBy={sortBy}
                                         sortDirection={sortDirection.toLowerCase()}
                                         onSortChange={handleSortChange}/>
               </div>
diff --git a/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypesView.tsx b/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypesView.tsx
index 193f374..59e2a95 100644
--- a/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypesView.tsx
+++ b/src/Forte.Optimizely.ContentUsage/Frontend/Views/ContentTypesView.tsx
@@ -112,6 +112,7 @@ const ContentTypesView = () => {
     onTableColumnChange,
     selectedRowsPerPage,
     onRowsPerPageChange,
+    sortBy,
     sortDirection,
     onSortChange,
     totalPages,
@@ -161,6 +162,9 @@ const ContentTypesView = () => {
     }
   }, [response, dataLoaded]);
 
+  const columnHeaderClassName = "forte-optimizely-content-usage-column";
+  const activeColumnHeaderClassName = `${columnHeaderClassName} forte-optimizely-content-usage-column--active`;
+
   return (
     <Layout>
       <GridContainer ref={gridContainerRef} className="forte-optimizely-content-usage-grid">
@@ -195,10 +199,11 @@ const ContentTypesView = () => {
                       .filter((column) => column.visible)
                       .map((column) => (
                         <Table.TH
+                          className={column.id === sortBy ? activeColumnHeaderClassName : columnHeaderClassName}
                           sorting={{
                             canSort: true,
                             handleSort: () => onSortChange(column),
-                            order: sortDirection,
+                            order: column.id === sortBy ? sortDirection : undefined,
                           }}
                           key={column.id}
                         >