refactor(alerts): consolidate queries (#233)

* fix(alerts): memoize selecting alerts

* refactor(alerts): consolidate queries

Author: alex-mcgovern

package-lock.json

@@ -44,6 +44,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwind-variants": "^0.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.1",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,31 @@
+import {
+  FieldGroup,
+  Input,
+  SearchField,
+  SearchFieldClearButton,
+} from "@stacklok/ui-kit";
+import { useAlertsFilterSearchParams } from "../hooks/use-alerts-filter-search-params";
+import { SearchMd } from "@untitled-ui/icons-react";
+
+export function SearchFieldAlerts() {
+  const { setSearch, state } = useAlertsFilterSearchParams();
+
+  return (
+    <SearchField
+      type="text"
+      aria-label="Search alerts"
+      value={state.search ?? ""}
+      onChange={(value) => setSearch(value.toLowerCase().trim())}
+    >
+      <FieldGroup>
+        <Input
+          type="search"
+          placeholder="Search..."
+          isBorderless
+          icon={<SearchMd />}
+        />
+        <SearchFieldClearButton />
+      </FieldGroup>
+    </SearchField>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { TooltipTrigger, Switch, Tooltip } from "@stacklok/ui-kit";
+import {
+  AlertsFilterView,
+  useAlertsFilterSearchParams,
+} from "../hooks/use-alerts-filter-search-params";
+
+export function SwitchMaliciousAlertsFilter() {
+  const { setView, state } = useAlertsFilterSearchParams();
+
+  return (
+    <TooltipTrigger>
+      <Switch
+        id="malicious-packages"
+        isSelected={state.view === AlertsFilterView.MALICIOUS}
+        onChange={(isSelected) => {
+          switch (isSelected) {
+            case true:
+              return setView(AlertsFilterView.MALICIOUS);
+            case false:
+              return setView(AlertsFilterView.ALL);
+            default:
+              return isSelected satisfies never;
+          }
+        }}
+      >
+        Malicious Packages
+      </Switch>
+
+      <Tooltip>
+        <p>Filter by malicious packages</p>
+      </Tooltip>
+    </TooltipTrigger>
+  );
+}

src/features/alerts/components/switch-malicious-alerts-filter.tsx

@@ -2,33 +2,28 @@ import { formatDistanceToNow } from "date-fns";
 import {
   Cell,
   Column,
-  Input,
   Row,
-  SearchField,
   Table,
   TableBody,
-  FieldGroup,
   TableHeader,
-  SearchFieldClearButton,
   Badge,
   Button,
   ResizableTableContainer,
 } from "@stacklok/ui-kit";
-import { Switch } from "@stacklok/ui-kit";
 import { AlertConversation, QuestionType } from "@/api/generated";
-import { Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
 import {
   sanitizeQuestionPrompt,
   parsingPromptText,
   getIssueDetectedType,
 } from "@/lib/utils";
 import { useAlertSearch } from "@/hooks/useAlertSearch";
-import { useCallback } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useFilteredAlerts } from "@/hooks/useAlertsData";
+import { useNavigate } from "react-router-dom";
 import { useClientSidePagination } from "@/hooks/useClientSidePagination";
 import { TableAlertTokenUsage } from "./table-alert-token-usage";
-import { Key01, PackageX, SearchMd } from "@untitled-ui/icons-react";
+import { Key01, PackageX } from "@untitled-ui/icons-react";
+import { SearchFieldAlerts } from "./search-field-alerts";
+import { useQueryGetWorkspaceAlertTable } from "../hooks/use-query-get-workspace-alerts-table";
+import { SwitchMaliciousAlertsFilter } from "./switch-malicious-alerts-filter";
 
 const getTitle = (alert: AlertConversation) => {
   const prompt = alert.conversation;
@@ -80,56 +75,16 @@ function IssueDetectedCellContent({ alert }: { alert: AlertConversation }) {
 }
 
 export function TableAlerts() {
-  const {
-    isMaliciousFilterActive,
-    setIsMaliciousFilterActive,
-    setSearch,
-    search,
-    page,
-    nextPage,
-    prevPage,
-  } = useAlertSearch();
+  const { page, nextPage, prevPage } = useAlertSearch();
   const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { data: filteredAlerts = [] } = useFilteredAlerts();
+  const { data: filteredAlerts = [] } = useQueryGetWorkspaceAlertTable();
 
   const { dataView, hasNextPage, hasPreviousPage } = useClientSidePagination(
     filteredAlerts,
     page,
     15,
   );
 
-  const handleToggleFilter = useCallback(
-    (isChecked: boolean) => {
-      if (isChecked) {
-        searchParams.set("maliciousPkg", "true");
-        searchParams.delete("search");
-        setSearch("");
-      } else {
-        searchParams.delete("maliciousPkg");
-      }
-      setSearchParams(searchParams);
-      setIsMaliciousFilterActive(isChecked);
-    },
-    [setSearchParams, setSearch, searchParams, setIsMaliciousFilterActive],
-  );
-
-  const handleSearch = useCallback(
-    (value: string) => {
-      if (value) {
-        searchParams.set("search", value);
-        searchParams.delete("maliciousPkg");
-        setSearch(value);
-        setIsMaliciousFilterActive(false);
-      } else {
-        searchParams.delete("search");
-        setSearch("");
-      }
-      setSearchParams(searchParams);
-    },
-    [searchParams, setIsMaliciousFilterActive, setSearch, setSearchParams],
-  );
-
   return (
     <>
       <div className="flex mb-2 mx-2 justify-between w-[calc(100vw-20rem)]">
@@ -141,37 +96,8 @@ export function TableAlerts() {
         </div>
 
         <div className="flex items-center gap-8">
-          <div className="flex items-center space-x-2">
-            <TooltipTrigger>
-              <Switch
-                id="malicious-packages"
-                isSelected={isMaliciousFilterActive}
-                onChange={handleToggleFilter}
-              >
-                Malicious Packages
-              </Switch>
-
-              <Tooltip>
-                <p>Filter by malicious packages</p>
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <SearchField
-            type="text"
-            aria-label="Search alerts"
-            value={search}
-            onChange={(value) => handleSearch(value.toLowerCase().trim())}
-          >
-            <FieldGroup>
-              <Input
-                type="search"
-                placeholder="Search..."
-                isBorderless
-                icon={<SearchMd />}
-              />
-              <SearchFieldClearButton />
-            </FieldGroup>
-          </SearchField>
+          <SwitchMaliciousAlertsFilter />
+          <SearchFieldAlerts />
         </div>
       </div>
       <div className="overflow-x-auto">

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

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+import { z } from "zod";
+
+export enum AlertsFilterView {
+  ALL = "all",
+  MALICIOUS = "malicious",
+  SECRETS = "secrets",
+}
+
+const alertsFilterSchema = z.object({
+  search: z.string().optional(),
+  view: z.nativeEnum(AlertsFilterView),
+});
+
+type AlertsFilterSchema = z.output<typeof alertsFilterSchema>;
+
+const DEFAULT_FILTER: AlertsFilterSchema = {
+  view: AlertsFilterView.ALL,
+};
+
+export const useAlertsFilterSearchParams = () => {
+  const [searchParams, setSearchParams] = useSearchParams(
+    new URLSearchParams(DEFAULT_FILTER),
+  );
+
+  const setView = useCallback(
+    (view: AlertsFilterView) => {
+      setSearchParams((prev) => {
+        if (view) prev.set("view", view);
+        if (!view) prev.delete("view");
+        return prev;
+      });
+    },
+    [setSearchParams],
+  );
+
+  const setSearch = useCallback(
+    (query: string | null) => {
+      setSearchParams((prev) => {
+        if (query !== null) prev.set("search", query);
+        if (query == null || query === "") prev.delete("search");
+        return prev;
+      });
+    },
+    [setSearchParams],
+  );
+
+  const state = alertsFilterSchema.parse(Object.fromEntries(searchParams));
+
+  return { state, setView, setSearch };
+};

src/features/alerts/hooks/use-alerts-filter-search-params.ts

@@ -1,15 +1,13 @@
-import {
-  AlertConversation,
-  V1GetWorkspaceAlertsResponse,
-} from "@/api/generated";
-import { filterAlertsCritical } from "../lib/filter-alerts-critical";
+import { V1GetWorkspaceAlertsResponse } from "@/api/generated";
 import { isAlertMalicious } from "../lib/is-alert-malicious";
 import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
+import { multiFilter } from "@/lib/multi-filter";
+import { isAlertCritical } from "../lib/is-alert-critical";
 
 // NOTE: This needs to be a stable function reference to enable memo-isation of
 // the select operation on each React re-render.
-function select(data: V1GetWorkspaceAlertsResponse): AlertConversation[] {
-  return filterAlertsCritical(data).filter(isAlertMalicious);
+function select(data: V1GetWorkspaceAlertsResponse) {
+  return multiFilter(data, [isAlertCritical, isAlertMalicious]);
 }
 
 export function useQueryGetWorkspaceAlertsMaliciousPkg() {

src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts

@@ -1,15 +1,13 @@
-import {
-  V1GetWorkspaceAlertsResponse,
-  AlertConversation,
-} from "@/api/generated";
-import { filterAlertsCritical } from "../lib/filter-alerts-critical";
+import { V1GetWorkspaceAlertsResponse } from "@/api/generated";
 import { isAlertSecret } from "../lib/is-alert-secret";
 import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
+import { multiFilter } from "@/lib/multi-filter";
+import { isAlertCritical } from "../lib/is-alert-critical";
 
 // NOTE: This needs to be a stable function reference to enable memo-isation of
-// the select operation on each React re-render.
-function select(data: V1GetWorkspaceAlertsResponse): AlertConversation[] {
-  return filterAlertsCritical(data).filter(isAlertSecret);
+// the select operation on each React re-render
+function select(data: V1GetWorkspaceAlertsResponse) {
+  return multiFilter(data, [isAlertCritical, isAlertSecret]);
 }
 
 export function useQueryGetWorkspaceAlertSecrets() {

src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts

@@ -0,0 +1,43 @@
+import { V1GetWorkspaceAlertsResponse } from "@/api/generated";
+import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
+import { useCallback } from "react";
+import {
+  AlertsFilterView,
+  useAlertsFilterSearchParams,
+} from "./use-alerts-filter-search-params";
+import { multiFilter } from "@/lib/multi-filter";
+import { isAlertCritical } from "../lib/is-alert-critical";
+import { isAlertMalicious } from "../lib/is-alert-malicious";
+import { isAlertSecret } from "../lib/is-alert-secret";
+import { doesAlertIncludeSearch } from "../lib/does-alert-include-search";
+import { isAlertConversation } from "../lib/is-alert-conversation";
+
+const FILTER: Record<
+  AlertsFilterView,
+  (alert: V1GetWorkspaceAlertsResponse[number]) => boolean
+> = {
+  all: () => true,
+  malicious: isAlertMalicious,
+  secrets: isAlertSecret,
+};
+
+export function useQueryGetWorkspaceAlertTable() {
+  const { state } = useAlertsFilterSearchParams();
+
+  // NOTE: This needs to be a stable function reference to enable memo-isation
+  // of the select operation on each React re-render.
+  const select = useCallback(
+    (data: V1GetWorkspaceAlertsResponse) => {
+      return multiFilter(data, [
+        isAlertCritical,
+        isAlertConversation,
+        FILTER[state.view],
+      ]).filter((alert) => doesAlertIncludeSearch(alert, state.search ?? null));
+    },
+    [state.search, state.view],
+  );
+
+  return useQueryGetWorkspaceAlerts({
+    select,
+  });
+}