feat(alerts): tabs for filtering table

src/App.tsx

@@ -17,7 +17,10 @@ function App() {
       <div className="flex-1 flex flex-col overflow-hidden">
         <Header />
 
-        <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-3">
+        <div
+          className="flex-1 overflow-y-auto p-6 flex flex-col gap-3"
+          style={{ scrollbarGutter: "stable" }}
+        >
           <Page />
         </div>
       </div>

src/features/alerts/components/__tests__/tabs-alerts.test.tsx

@@ -0,0 +1,72 @@
+import { server } from "@/mocks/msw/node";
+import { http, HttpResponse } from "msw";
+import { makeMockAlert } from "../../mocks/alert.mock";
+import { render, waitFor } from "@/lib/test-utils";
+import { TabsAlerts } from "../tabs-alerts";
+
+test("shows correct count of all packages", async () => {
+  server.use(
+    http.get("*/workspaces/:name/alerts", () => {
+      return HttpResponse.json([
+        ...Array.from({ length: 13 }).map(() =>
+          makeMockAlert({ type: "secret" }),
+        ),
+        ...Array.from({ length: 13 }).map(() =>
+          makeMockAlert({ type: "malicious" }),
+        ),
+      ]);
+    }),
+  );
+
+  const { getByRole } = render(
+    <TabsAlerts>
+      <div>foo</div>
+    </TabsAlerts>,
+  );
+
+  await waitFor(() => {
+    expect(getByRole("tab", { name: /all/i })).toHaveTextContent("26");
+  });
+});
+
+test("shows correct count of malicious packages", async () => {
+  server.use(
+    http.get("*/workspaces/:name/alerts", () => {
+      return HttpResponse.json(
+        Array.from({ length: 13 }).map(() =>
+          makeMockAlert({ type: "malicious" }),
+        ),
+      );
+    }),
+  );
+
+  const { getByRole } = render(
+    <TabsAlerts>
+      <div>foo</div>
+    </TabsAlerts>,
+  );
+
+  await waitFor(() => {
+    expect(getByRole("tab", { name: /malicious/i })).toHaveTextContent("13");
+  });
+});
+
+test("shows correct count of secret packages", async () => {
+  server.use(
+    http.get("*/workspaces/:name/alerts", () => {
+      return HttpResponse.json(
+        Array.from({ length: 13 }).map(() => makeMockAlert({ type: "secret" })),
+      );
+    }),
+  );
+
+  const { getByRole } = render(
+    <TabsAlerts>
+      <div>foo</div>
+    </TabsAlerts>,
+  );
+
+  await waitFor(() => {
+    expect(getByRole("tab", { name: /secrets/i })).toHaveTextContent("13");
+  });
+});

src/features/alerts/components/search-field-alerts.tsx

@@ -7,7 +7,7 @@ import {
 import { useAlertsFilterSearchParams } from "../hooks/use-alerts-filter-search-params";
 import { SearchMd } from "@untitled-ui/icons-react";
 
-export function SearchFieldAlerts() {
+export function SearchFieldAlerts({ className }: { className?: string }) {
   const { setSearch, state } = useAlertsFilterSearchParams();
 
   return (
@@ -16,6 +16,7 @@ export function SearchFieldAlerts() {
       aria-label="Search alerts"
       value={state.search ?? ""}
       onChange={(value) => setSearch(value.toLowerCase().trim())}
+      className={className}
     >
       <FieldGroup>
         <Input

src/features/alerts/components/table-alerts.tsx

@@ -6,7 +6,6 @@ import {
   Table,
   TableBody,
   TableHeader,
-  Badge,
   Button,
   ResizableTableContainer,
   Link,
@@ -20,15 +19,14 @@ import {
   parsingPromptText,
   getIssueDetectedType,
 } from "@/lib/utils";
-import { useAlertSearch } from "@/hooks/useAlertSearch";
 import { useNavigate } from "react-router-dom";
 import { useClientSidePagination } from "@/hooks/useClientSidePagination";
 import { TableAlertTokenUsage } from "./table-alert-token-usage";
-import { Key01, LinkExternal02, PackageX } from "@untitled-ui/icons-react";
-import { useListWorkspaces } from "@/features/workspace/hooks/use-list-workspaces";
-import { SearchFieldAlerts } from "./search-field-alerts";
-import { SwitchMaliciousAlertsFilter } from "./switch-malicious-alerts-filter";
+
 import { useQueryGetWorkspaceAlertTable } from "../hooks/use-query-get-workspace-alerts-table";
+import { useAlertsFilterSearchParams } from "../hooks/use-alerts-filter-search-params";
+import { useListWorkspaces } from "@/features/workspace/hooks/use-list-workspaces";
+import { Key01, LinkExternal02, PackageX } from "@untitled-ui/icons-react";
 
 const getTitle = (alert: AlertConversation) => {
   const prompt = alert.conversation;
@@ -150,10 +148,12 @@ function EmptyState({
 }
 
 export function TableAlerts() {
-  const { page, nextPage, prevPage } = useAlertSearch();
   const navigate = useNavigate();
+  const { state, prevPage, nextPage } = useAlertsFilterSearchParams();
+
   const { data: filteredAlerts = [], isLoading: isLoadingAlerts } =
     useQueryGetWorkspaceAlertTable();
+
   const {
     data: { workspaces } = { workspaces: [] },
     isLoading: isLoadingWorkspaces,
@@ -163,86 +163,71 @@ export function TableAlerts() {
 
   const { dataView, hasNextPage, hasPreviousPage } = useClientSidePagination(
     filteredAlerts,
-    page,
+    state.page,
     15,
   );
 
   return (
     <>
-      <div className="flex mb-2 mx-2 justify-between w-[calc(100vw-20rem)]">
-        <div className="flex gap-2 items-center">
-          <h2 className="font-bold text-lg">All Alerts</h2>
-          <Badge size="sm" variant="inverted" data-testid="alerts-count">
-            {filteredAlerts.length}
-          </Badge>
-        </div>
-
-        <div className="flex items-center gap-8">
-          <SwitchMaliciousAlertsFilter />
-          <SearchFieldAlerts />
-        </div>
-      </div>
-      <div className="overflow-x-auto">
-        <ResizableTableContainer>
-          <Table data-testid="alerts-table" aria-label="Alerts table">
-            <TableHeader>
-              <Row>
-                <Column isRowHeader width={150}>
-                  Time
-                </Column>
-                <Column width={150}>Type</Column>
-                <Column>Event</Column>
-                <Column width={325}>Issue Detected</Column>
-                <Column width={200}>Token usage</Column>
-              </Row>
-            </TableHeader>
-            <TableBody
-              renderEmptyState={() =>
-                isLoading ? (
-                  <div>Loading alerts</div>
-                ) : (
-                  <EmptyState hasMultipleWorkspaces={workspaces.length > 1} />
-                )
-              }
-            >
-              {dataView.map((alert) => {
-                return (
-                  <Row
-                    key={alert.alert_id}
-                    className="h-20"
-                    onAction={() =>
-                      navigate(`/prompt/${alert.conversation.chat_id}`)
-                    }
-                  >
-                    <Cell className="truncate">
-                      {formatDistanceToNow(new Date(alert.timestamp), {
-                        addSuffix: true,
-                      })}
-                    </Cell>
-                    <Cell className="truncate">
-                      <TypeCellContent alert={alert} />
-                    </Cell>
-                    <Cell className="truncate">{getTitle(alert)}</Cell>
-                    <Cell>
-                      <div className="truncate flex gap-2  items-center">
-                        <IssueDetectedCellContent alert={alert} />
-                      </div>
-                    </Cell>
-                    <Cell>
-                      <TableAlertTokenUsage
-                        usage={alert.conversation.token_usage_agg}
-                      />
-                    </Cell>
-                  </Row>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </ResizableTableContainer>
-      </div>
+      <ResizableTableContainer>
+        <Table data-testid="alerts-table" aria-label="Alerts table">
+          <TableHeader>
+            <Row>
+              <Column isRowHeader width={150}>
+                Time
+              </Column>
+              <Column width={150}>Type</Column>
+              <Column>Event</Column>
+              <Column width={325}>Issue Detected</Column>
+              <Column width={200}>Token usage</Column>
+            </Row>
+          </TableHeader>
+          <TableBody
+            renderEmptyState={() =>
+              isLoading ? (
+                <div>Loading alerts</div>
+              ) : (
+                <EmptyState hasMultipleWorkspaces={workspaces.length > 1} />
+              )
+            }
+          >
+            {dataView.map((alert) => {
+              return (
+                <Row
+                  key={alert.alert_id}
+                  className="h-20"
+                  onAction={() =>
+                    navigate(`/prompt/${alert.conversation.chat_id}`)
+                  }
+                >
+                  <Cell className="truncate">
+                    {formatDistanceToNow(new Date(alert.timestamp), {
+                      addSuffix: true,
+                    })}
+                  </Cell>
+                  <Cell className="truncate">
+                    <TypeCellContent alert={alert} />
+                  </Cell>
+                  <Cell className="truncate">{getTitle(alert)}</Cell>
+                  <Cell>
+                    <div className="truncate flex gap-2  items-center">
+                      <IssueDetectedCellContent alert={alert} />
+                    </div>
+                  </Cell>
+                  <Cell>
+                    <TableAlertTokenUsage
+                      usage={alert.conversation.token_usage_agg}
+                    />
+                  </Cell>
+                </Row>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </ResizableTableContainer>
 
       <div className="flex justify-center w-full p-4">
-        <div className="flex gap-2">
+        <div className="grid grid-cols-2 gap-2">
           <Button isDisabled={!hasPreviousPage} onPress={prevPage}>
             Previous
           </Button>