Enhanced sort feature to enable user to click on the column header th…

ui/src/Components/Dashboard/Dashboard.js

@@ -1,10 +1,5 @@
-import Table from "./Table/Table"
+import Table from "./Table/Table";
 
 export default function Dashboard({ featureFlags, headers }) {
-  return (
-          <Table
-            featureFlags={featureFlags}
-            headers={headers}
-          /> 
-        )}
-
+  return <Table featureFlags={featureFlags} headers={headers} />;
+}

ui/src/Components/Dashboard/Table/Table.js

@@ -1,39 +1,30 @@
-import {useState} from "react"
-import TableHeader from "./TableHeader/TableHeader"
-import TableRow from "./TableRow/TableRow"
-import { compareValues } from "../../../Utils/helpers"
+import { useState } from "react";
+import TableHeader from "./TableHeader/TableHeader";
+import TableRow from "./TableRow/TableRow";
+import { compareValues } from "../../../Utils/helpers";
 
 export default function Table({ featureFlags, headers }) {
+  const [rowData, setRowData] = useState(featureFlags);
 
-const [rowData,setRowData] = useState(featureFlags)
-
-const handleSorting = (type,onColumn) => {
-
-  let rows = rowData;
-  rows.sort(compareValues(onColumn,type))
-  setRowData([...rows])
-
-}
+  const handleSorting = (type, onColumn) => {
+    let rows = rowData;
+    rows.sort(compareValues(onColumn, type));
+    setRowData([...rows]);
+  };
 
   return (
-
-    <table
-      className='shadow text-sm text-left table-fixed w-3/4 max-w-screen-md'
-    >
-      <TableHeader
-        headers={headers}
-        handleSorting={handleSorting}
-      />
+    <table className="shadow text-sm text-left table-fixed w-3/4 max-w-screen-md">
+      <TableHeader headers={headers} handleSorting={handleSorting} />
 
       <tbody>
-        {rowData.map(featureFlag => 
+        {rowData.map((featureFlag) => (
           <TableRow
             featureFlag={featureFlag}
             headers={headers}
             key={featureFlag.id}
-          /> 
-        )}
+          />
+        ))}
       </tbody>
     </table>
-  )
-}
+  );
+}

ui/src/Components/Dashboard/Table/TableHeader/SortCursor.js

@@ -1,33 +1,21 @@
-import { useState } from "react";
 import { TABLE } from "../../../../Constant/constant";
 
-export default function SortCursor({ header, handleSorting }) {
-  const [currentClickedCursor, setCurrentClickedCursor] = useState(null);
-
-  const onCursorClick = (clickedCursorType, headerName) => {
-    setCurrentClickedCursor(clickedCursorType);
-    handleSorting(clickedCursorType, headerName);
-  };
-
+export default function SortCursor({ currentClickedCursor }) {
   return (
     <div>
       <div
+        data-testid = "sortCursorAscending"
         className={`up-arrow ${
           currentClickedCursor === TABLE.ASCENDING ? "clicked-u" : null
         }`}
         title={TABLE.ASCENDING}
-        onClick={() => {
-          onCursorClick(TABLE.ASCENDING, header);
-        }}
       ></div>
       <div
+        data-testid = "sortCursorDescending"
         className={`down-arrow ${
           currentClickedCursor === TABLE.DESCENDING ? "clicked-d" : null
         }`}
         title={TABLE.DESCENDING}
-        onClick={(e) => {
-          onCursorClick(TABLE.DESCENDING, header);
-        }}
       ></div>
     </div>
   );

ui/src/Components/Dashboard/Table/TableHeader/TableHeader.js

@@ -1,27 +1,48 @@
-import PreviousMap from "postcss/lib/previous-map";
+import { useState } from "react";
+
 import { camelCaseToNormal } from "../../../../Utils/helpers";
 import SortCursor from "./SortCursor";
 import { TABLE } from "../../../../Constant/constant";
 
 export default function TableHeader({ headers, handleSorting }) {
+  const [currentClickedCursor, setCurrentClickedCursor] = useState(null);
+  const [currentSortedColumn, setCurrentSortedColumn] = useState(null);
+
+  const onCursorClick = (headerName, isSortConfigured) => {
+    if (!isSortConfigured) return;
+    let clickedCursorType =
+      currentClickedCursor == TABLE.ASCENDING
+        ? TABLE.DESCENDING
+        : TABLE.ASCENDING;
+    setCurrentClickedCursor(clickedCursorType);
+    setCurrentSortedColumn(headerName);
+    handleSorting(clickedCursorType, headerName);
+  };
   return (
     <thead>
       <tr className="text-teal-700 text-xs">
         {headers.map((heading, index) => (
-          <th>
-            <tr>
-              <th className="p-4" key={index}>
-                {camelCaseToNormal(heading.headerName)}
-              </th>
-              <th>
-                {heading.sortable ? (
-                  <SortCursor
-                    handleSorting={handleSorting}
-                    header={heading.headerName}
-                  />
-                ) : null}
-              </th>
-            </tr>
+          <th
+            data-testid="columnheader"
+            className="p-4 cursor-pointer"
+            key={index}
+            onClick={() => {
+              onCursorClick(heading.headerName, heading.sortable);
+            }}
+          >
+            <div className="flex justify-between">
+              {camelCaseToNormal(heading.headerName)}
+
+              {heading.sortable ? (
+                <SortCursor
+                  currentClickedCursor={
+                    heading.headerName == currentSortedColumn
+                      ? currentClickedCursor
+                      : null
+                  }
+                />
+              ) : null}
+            </div>
           </th>
         ))}
 

ui/src/Utils/helpers.js

@@ -1,15 +1,17 @@
-import {TABLE} from "../Constant/constant"
+import { TABLE } from "../Constant/constant";
 
 export function camelCaseToNormal(string) {
-  return string
-    // insert a space before all caps
-    .replace(/([A-Z])/g, ' $1')
-    // uppercase the first character
-    .replace(/^./, (str) => str.toUpperCase())
+  return (
+    string
+      // insert a space before all caps
+      .replace(/([A-Z])/g, " $1")
+      // uppercase the first character
+      .replace(/^./, (str) => str.toUpperCase())
+  );
 }
 
 /****
- * 
+ *
  * Currying
  * https://javascript.info/currying-partials
  */
@@ -19,19 +21,15 @@ export function compareValues(key, order = TABLE.ASCENDING) {
       return 0;
     }
 
-    const varA = (typeof a[key] === 'string')
-      ? a[key].toUpperCase() : a[key];
-    const varB = (typeof b[key] === 'string')
-      ? b[key].toUpperCase() : b[key];
+    const varA = typeof a[key] === "string" ? a[key].toUpperCase() : a[key];
+    const varB = typeof b[key] === "string" ? b[key].toUpperCase() : b[key];
 
     let comparison = 0;
     if (varA > varB) {
       comparison = 1;
     } else if (varA < varB) {
       comparison = -1;
     }
-    return (
-      (order === TABLE.DESCENDING) ? (comparison * -1) : comparison
-    );
+    return order === TABLE.DESCENDING ? comparison * -1 : comparison;
   };
-}
+}

ui/src/index.css

@@ -4,15 +4,15 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
@@ -21,26 +21,20 @@ code {
   background: transparent;
   border-bottom: solid 7px black;
   border-top-width: 0;
-  cursor: pointer;
 }
 
-.clicked-u{
+.clicked-u {
   border-bottom: solid 7px #ad9f9f;
 }
 
-.down-arrow{
+.down-arrow {
   border: solid 6px transparent;
   background: transparent;
   border-top: solid 7px black;
   border-bottom-width: 0;
-  margin-top:1px;
-  cursor: pointer;
+  margin-top: 1px;
 }
 
-.clicked-d{
+.clicked-d {
   border-top: solid 7px #ad9f9f;
 }
-
-
-
-

ui/src/test/SortCursor.test.js

@@ -1,45 +1,19 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import {render, screen } from "@testing-library/react";
 import SortCursor from "../Components/Dashboard/Table/TableHeader/SortCursor";
 import { TABLE } from "../Constant/constant";
 
 describe("SortCursor Component", () => {
+  it("Should render the SortCursor Component, which includes Ascending cursor", () => {
+    render(<SortCursor />);
 
-    it("Should render the SortCursor Component with Ascending cursor", () => {
-      render(<SortCursor />)
+    const cursor = screen.getByTitle(TABLE.ASCENDING);
+    expect(cursor).toBeInTheDocument();
+  });
 
-      const cursor = screen.getByTitle(TABLE.ASCENDING)
-      expect(cursor).toBeInTheDocument(); 
-    })
-
-    it("Should render the SortCursor Component with Descending cursor", () => {
-      render(<SortCursor />)
-
-      const cursor = screen.getByTitle(TABLE.DESCENDING)
-      expect(cursor).toBeInTheDocument();
-
-    })
-
-    it("Should fire event on click ascending", async () => {
-      //const mockFn = sinon.spy();
-
-      const mockFn = jest.fn();
-      render(<SortCursor handleSorting={mockFn}/>)
-
-      const cursor = screen.getByTitle(TABLE.ASCENDING)
-      await fireEvent.click(cursor);
-
-
-    })
-
-    it("Should fire event on click descending", async () => {
-      const mockFn = jest.fn();
-      render(<SortCursor handleSorting={mockFn}/>)
-
-      const cursor = screen.getByTitle(TABLE.DESCENDING)
-      await fireEvent.click(cursor);
-      expect(mockFn.mock.calls.length).toEqual(1);
-
-    })
-
-  }) 
+  it("Should render the SortCursor Component, which includes Descending cursor", () => {
+    render(<SortCursor />);
 
+    const cursor = screen.getByTitle(TABLE.DESCENDING);
+    expect(cursor).toBeInTheDocument();
+  });
+});