Merge pull request #801 from l3montree-dev/feat/code-risk-bulk

feat: added selection for bulk updates

Author: timbastin

src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/code-risks/page.tsx

@@ -4,12 +4,15 @@ import SortingCaret from "@/components/common/SortingCaret";
 import { useAssetMenu } from "@/hooks/useAssetMenu";
 import AuthGuard from "@/components/AuthGuard";
 
+import AcceptRiskDialog from "@/components/AcceptRiskDialog";
+import FalsePositiveDialog from "@/components/FalsePositiveDialog";
 import Page from "@/components/Page";
+import { browserApiClient } from "@/services/devGuardApi";
 import type { FirstPartyVuln, Paged } from "@/types/api/api";
 import { createColumnHelper, flexRender } from "@tanstack/react-table";
 import type { ColumnDef } from "@tanstack/react-table";
 import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { FunctionComponent } from "react";
 
 import { classNames } from "@/utils/common";
@@ -19,10 +22,12 @@ import AssetTitle from "@/components/common/AssetTitle";
 import CustomPagination from "@/components/common/CustomPagination";
 import EmptyParty from "@/components/common/EmptyParty";
 import Section from "@/components/common/Section";
-import { Button } from "@/components/ui/button";
+import { AsyncButton, Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useAssetBranchesAndTags } from "@/hooks/useActiveAssetVersion";
 import useTable from "@/hooks/useTable";
+import { toast } from "@/lib/toast";
 import { buildFilterSearchParams } from "@/utils/url";
 import { Loader2 } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -86,6 +91,34 @@ const Index: FunctionComponent = () => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
 
+  const [selectedVulnIds, setSelectedVulnIds] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const [acceptDialogOpen, setAcceptDialogOpen] = useState(false);
+  const [falsePositiveDialogOpen, setFalsePositiveDialogOpen] = useState(false);
+
+  const handleToggleVuln = useCallback((id: string) => {
+    setSelectedVulnIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleToggleAll = useCallback((ids: string[]) => {
+    setSelectedVulnIds((prev) => {
+      const allSelected = ids.length > 0 && ids.every((id) => prev.has(id));
+      const next = new Set(prev);
+      ids.forEach((id) => (allSelected ? next.delete(id) : next.add(id)));
+      return next;
+    });
+  }, []);
+
   let { organizationSlug, projectSlug, assetSlug, assetVersionSlug } =
     useDecodedParams() as {
       organizationSlug: string;
@@ -121,6 +154,7 @@ const Index: FunctionComponent = () => {
     data: vulns,
     isLoading,
     error,
+    mutate: mutateVulns,
   } = useSWR<Paged<FirstPartyVuln>>(
     uri +
       "refs/" +
@@ -133,6 +167,96 @@ const Index: FunctionComponent = () => {
       keepPreviousData: true,
     },
   );
+
+  const handleBulkAction = useCallback(
+    async (bulkParams: {
+      vulnIds: string[];
+      status: string;
+      justification: string;
+      mechanicalJustification?: string;
+    }) => {
+      const optimisticState =
+        bulkParams.status === "falsePositive"
+          ? "falsePositive"
+          : bulkParams.status === "accepted"
+            ? "accepted"
+            : bulkParams.status === "reopened"
+              ? "open"
+              : undefined;
+
+      const optimisticData =
+        optimisticState && vulns
+          ? {
+              ...vulns,
+              data: vulns.data.map((v) =>
+                bulkParams.vulnIds.includes(v.id)
+                  ? {
+                      ...v,
+                      state: optimisticState as FirstPartyVuln["state"],
+                    }
+                  : v,
+              ),
+            }
+          : undefined;
+
+      await mutateVulns(
+        async () => {
+          const resp = await browserApiClient(
+            uri + "refs/" + assetVersionSlug + "/first-party-vulns/batch/",
+            {
+              method: "POST",
+              body: JSON.stringify({
+                vulnIds: bulkParams.vulnIds,
+                status: bulkParams.status,
+                justification: bulkParams.justification,
+                mechanicalJustification:
+                  bulkParams.mechanicalJustification ?? "",
+              }),
+            },
+          );
+
+          if (!resp.ok) {
+            throw new Error("Bulk action failed");
+          }
+
+          setSelectedVulnIds((prev) => {
+            const next = new Set(prev);
+            bulkParams.vulnIds.forEach((id) => next.delete(id));
+            return next;
+          });
+
+          return undefined;
+        },
+        {
+          optimisticData,
+          rollbackOnError: true,
+          revalidate: true,
+        },
+      );
+    },
+    [uri, assetVersionSlug, mutateVulns, vulns],
+  );
+
+  const { selectedOpenIds, selectedClosedIds } = useMemo(() => {
+    if (!vulns?.data) return { selectedOpenIds: [], selectedClosedIds: [] };
+
+    const stateById = new Map<string, string>();
+    vulns.data.forEach((v) => stateById.set(v.id, v.state));
+
+    const openIds: string[] = [];
+    const closedIds: string[] = [];
+
+    selectedVulnIds.forEach((id) => {
+      const state = stateById.get(id);
+      if (state === "open") {
+        openIds.push(id);
+      } else if (state === "accepted" || state === "falsePositive") {
+        closedIds.push(id);
+      }
+    });
+
+    return { selectedOpenIds: openIds, selectedClosedIds: closedIds };
+  }, [vulns, selectedVulnIds]);
   const isClosed = searchParams?.get("state") === "closed";
   const filterOptions = useMemo(() => {
     const options = [
@@ -194,6 +318,17 @@ const Index: FunctionComponent = () => {
   const pathname = usePathname();
   const push = useRouterQuery();
 
+  const pageSelectableIds = table
+    .getRowModel()
+    .rows.filter((r) => r.original.state !== "fixed")
+    .map((r) => r.original.id);
+  const allPageSelected =
+    pageSelectableIds.length > 0 &&
+    pageSelectableIds.every((id) => selectedVulnIds.has(id));
+  const somePageSelected = pageSelectableIds.some((id) =>
+    selectedVulnIds.has(id),
+  );
+
   return (
     <Page Menu={assetMenu} title={"Risk Handling"} Title={<AssetTitle />}>
       <div className="flex flex-row items-center justify-between">
@@ -273,8 +408,81 @@ const Index: FunctionComponent = () => {
               <div className="overflow-auto">
                 <table className="w-full overflow-x-auto text-sm">
                   <thead className="border-b bg-card text-foreground">
+                    <AuthGuard require="member">
+                      {selectedVulnIds.size > 0 && (
+                        <tr className="bg-muted/50">
+                          <td colSpan={4} className="px-4 py-2">
+                            <div className="flex flex-row items-center justify-end">
+                              <div className="flex flex-row items-center gap-2">
+                                {selectedClosedIds.length > 0 && (
+                                  <AsyncButton
+                                    variant="secondary"
+                                    onClick={async () => {
+                                      const count = selectedClosedIds.length;
+                                      await handleBulkAction({
+                                        vulnIds: selectedClosedIds,
+                                        status: "reopened",
+                                        justification: "",
+                                      });
+                                      toast("Reopened", {
+                                        description: `${count} code risk${count !== 1 ? "s" : ""} reopened.`,
+                                      });
+                                    }}
+                                  >
+                                    Reopen ({selectedClosedIds.length})
+                                  </AsyncButton>
+                                )}
+                                {selectedOpenIds.length > 0 && (
+                                  <>
+                                    <Button
+                                      variant="secondary"
+                                      onClick={() =>
+                                        setFalsePositiveDialogOpen(true)
+                                      }
+                                    >
+                                      False Positive ({selectedOpenIds.length})
+                                    </Button>
+                                    <Button
+                                      variant="secondary"
+                                      onClick={() => setAcceptDialogOpen(true)}
+                                    >
+                                      Accept Risk ({selectedOpenIds.length})
+                                    </Button>
+                                  </>
+                                )}
+                                <Button
+                                  variant="ghost"
+                                  onClick={() => setSelectedVulnIds(new Set())}
+                                >
+                                  Clear
+                                </Button>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </AuthGuard>
                     {table.getHeaderGroups().map((headerGroup) => (
                       <tr key={headerGroup.id}>
+                        <AuthGuard require="member">
+                          <th className="w-10 p-4 text-left">
+                            <div onClick={(e) => e.stopPropagation()}>
+                              <Checkbox
+                                checked={
+                                  allPageSelected
+                                    ? true
+                                    : somePageSelected
+                                      ? "indeterminate"
+                                      : false
+                                }
+                                onCheckedChange={() =>
+                                  handleToggleAll(pageSelectableIds)
+                                }
+                                disabled={pageSelectableIds.length === 0}
+                              />
+                            </div>
+                          </th>
+                        </AuthGuard>
                         {headerGroup.headers.map((header) => (
                           <th
                             className="cursor-pointer whitespace-nowrap break-normal p-4 text-left"
@@ -313,6 +521,9 @@ const Index: FunctionComponent = () => {
                           )}
                           key={el}
                         >
+                          <AuthGuard require="member">
+                            <td className="p-4" />
+                          </AuthGuard>
                           <td className="p-4">
                             <Skeleton className="w-1/2 h-[20px]" />
                           </td>
@@ -326,9 +537,15 @@ const Index: FunctionComponent = () => {
                       ))}
                     {table.getRowModel().rows.map((row, i, arr) => (
                       <tr
-                        onClick={() =>
-                          router?.push(pathname + "/" + row.original.id)
-                        }
+                        onClick={(e) => {
+                          if (
+                            (e.target as HTMLElement).closest(
+                              'button, input, [role="checkbox"]',
+                            )
+                          )
+                            return;
+                          router?.push(pathname + "/" + row.original.id);
+                        }}
                         className={classNames(
                           "relative cursor-pointer align-top transition-all",
                           i === arr.length - 1 ? "" : "border-b",
@@ -337,6 +554,20 @@ const Index: FunctionComponent = () => {
                         )}
                         key={row.original.id}
                       >
+                        <AuthGuard require="member">
+                          <td className="p-4">
+                            {row.original.state !== "fixed" && (
+                              <div onClick={(e) => e.stopPropagation()}>
+                                <Checkbox
+                                  checked={selectedVulnIds.has(row.original.id)}
+                                  onCheckedChange={() =>
+                                    handleToggleVuln(row.original.id)
+                                  }
+                                />
+                              </div>
+                            )}
+                          </td>
+                        </AuthGuard>
                         {row.getVisibleCells().map((cell) => (
                           <td className="p-4" key={cell.id}>
                             {flexRender(
@@ -365,6 +596,57 @@ const Index: FunctionComponent = () => {
         open={isOpen}
         onOpenChange={setIsOpen}
       />
+
+      <AcceptRiskDialog
+        open={acceptDialogOpen}
+        onOpenChange={setAcceptDialogOpen}
+        onSubmit={async (justification) => {
+          if (selectedOpenIds.length === 0) return false;
+          const count = selectedOpenIds.length;
+          await handleBulkAction({
+            vulnIds: selectedOpenIds,
+            status: "accepted",
+            justification,
+          });
+          toast("Risk Accepted", {
+            description: `${count} code risk${count !== 1 ? "s" : ""} accepted.`,
+          });
+          return true;
+        }}
+        description={
+          <>
+            You are about to accept the risk for {selectedOpenIds.length}{" "}
+            selected code risk{selectedOpenIds.length !== 1 ? "s" : ""}. This
+            acknowledges you are aware of the vulnerability and its potential
+            impact.
+          </>
+        }
+      />
+
+      <FalsePositiveDialog
+        open={falsePositiveDialogOpen}
+        onOpenChange={setFalsePositiveDialogOpen}
+        onSubmit={async (data) => {
+          if (selectedOpenIds.length === 0) return false;
+          const count = selectedOpenIds.length;
+          await handleBulkAction({
+            vulnIds: selectedOpenIds,
+            status: "falsePositive",
+            justification: data.justification,
+            mechanicalJustification: data.mechanicalJustification,
+          });
+          toast("Marked as False Positive", {
+            description: `${count} code risk${count !== 1 ? "s" : ""} marked as false positive.`,
+          });
+          return true;
+        }}
+        description={
+          <>
+            You are about to mark {selectedOpenIds.length} selected code risk
+            {selectedOpenIds.length !== 1 ? "s" : ""} as false positive.
+          </>
+        }
+      />
     </Page>
   );
 };