fix(alerts): table sorting (#82)

* fix(alerts): sort by date desc

* test: add alerts date sort

Author: peppescg

src/components/__tests__/Dashboard.test.tsx

@@ -164,7 +164,7 @@ describe("Dashboard", () => {
     expect(within(firstRow).getByText(/ghp_token/i)).toBeVisible();
     expect(within(firstRow).getByText(/codegate-secrets/i)).toBeVisible();
     expect(within(firstRow).getAllByText(/n\/a/i).length).toEqual(2);
-    expect(within(firstRow).getByText(/2025\/01\/07/i)).toBeVisible();
+    expect(within(firstRow).getByText(/2025\/01\/14/i)).toBeVisible();
     expect(within(firstRow).getByTestId(/time/i)).toBeVisible();
 
     // check trigger_string null
@@ -279,4 +279,21 @@ describe("Dashboard", () => {
     expect(within(row).getByText(/ghp_token/i)).toBeVisible();
     expect(within(row).getByText(/codegate-secrets/i)).toBeVisible();
   });
+
+  it("should sort alerts by date desc", async () => {
+    render(<Dashboard />);
+    expect(
+      (await screen.findAllByTestId(/mock-responsive-container/i)).length,
+    ).toEqual(1);
+
+    const firstRow = within(screen.getByTestId("alerts-table")).getAllByRole(
+      "row",
+    )[1] as HTMLElement;
+    const secondRow = within(screen.getByTestId("alerts-table")).getAllByRole(
+      "row",
+    )[2] as HTMLElement;
+
+    expect(within(firstRow).getByText(/2025\/01\/14/i)).toBeVisible();
+    expect(within(secondRow).getByText(/2025\/01\/07/i)).toBeVisible();
+  });
 });

src/hooks/useAlertsStore.ts

@@ -22,10 +22,14 @@ export const useAlertsStore = create<AlertState>((set, get) => ({
           alert?.conversation.question_answers.every(
             (item) => item.answer && item.question,
           ),
+        )
+        .sort(
+          (a, b) =>
+            new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
         );
 
       set({
-        alerts,
+        alerts: [...alerts],
         loading: false,
       });
     } else {
@@ -54,47 +58,36 @@ export const useAlertsStore = create<AlertState>((set, get) => ({
           )
       : alerts;
 
-    set({ filteredAlerts });
+    set({
+      filteredAlerts: [...filteredAlerts],
+    });
   },
   updateFilteredAlerts: () => {
     const { alerts, search } = get();
     const filteredAlerts = search
-      ? alerts
-          .filter((alert) => {
-            const maliciousPkg = getMaliciousPackage(alert.trigger_string);
-            const maliciousPkgName =
-              typeof maliciousPkg === "object"
-                ? maliciousPkg?.type
-                : maliciousPkg;
-
-            // typeof alert.trigger_string === "object"
-            //   ? alert.trigger_string?.type
-            //   : alert.trigger_string;
-            const maliciousPkgType =
-              typeof maliciousPkg === "object"
-                ? maliciousPkg?.name
-                : maliciousPkg;
+      ? alerts.filter((alert) => {
+          const maliciousPkg = getMaliciousPackage(alert.trigger_string);
+          const maliciousPkgName =
+            typeof maliciousPkg === "object"
+              ? maliciousPkg?.type
+              : maliciousPkg;
 
-            // typeof alert.trigger_string === "object"
-            //   ? alert.trigger_string?.name
-            //   : alert.trigger_string;
+          const maliciousPkgType =
+            typeof maliciousPkg === "object"
+              ? maliciousPkg?.name
+              : maliciousPkg;
 
-            return (
-              maliciousPkgName?.toLowerCase().includes(search) ||
-              maliciousPkgType?.toLowerCase().includes(search) ||
-              alert.trigger_type?.toLowerCase().includes(search)
-            );
-          })
-          .sort(
-            (a, b) =>
-              new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
-          )
-      : alerts.sort(
-          (a, b) =>
-            new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
-        );
+          return (
+            maliciousPkgName?.toLowerCase().includes(search) ||
+            maliciousPkgType?.toLowerCase().includes(search) ||
+            alert.trigger_type?.toLowerCase().includes(search)
+          );
+        })
+      : alerts;
 
-    set({ filteredAlerts });
+    set({
+      filteredAlerts: [...filteredAlerts],
+    });
   },
   getMaliciousPackagesChart: () => {
     const { alerts } = get();

src/mocks/msw/fixtures/GET_ALERTS.json

@@ -707,7 +707,7 @@
         "trigger_string": "GitHub - Access Token:\n\n```tsx src/App.tsx (26-26)\n  const test = \"ghp_token\";\n```\nwhat about this?",
         "trigger_type": "codegate-secrets",
         "trigger_category": "critical",
-        "timestamp": "2025-01-07T17:02:59.915982Z"
+        "timestamp": "2025-01-14T17:02:59.915982Z"
     },
     {
         "conversation": {