From bd5de8e894c22e6812dda3d8104cf5efd036d626 Mon Sep 17 00:00:00 2001
From: Christopher Lo <46541035+topher-lo@users.noreply.github.com>
Date: Fri, 8 Mar 2024 05:52:32 +0000
Subject: [PATCH] feat(ui): Implement malice / context badges and filter

---
 frontend/src/components/cases/columns.tsx     | 41 ++++++++---
 .../cases/data-table-row-actions.tsx          | 69 -------------------
 .../components/cases/data-table-toolbar.tsx   | 16 ++++-
 .../cases/data/{data.tsx => categories.tsx}   | 15 ++++
 frontend/src/components/cases/data/schema.ts  |  2 +-
 5 files changed, 61 insertions(+), 82 deletions(-)
 delete mode 100644 frontend/src/components/cases/data-table-row-actions.tsx
 rename frontend/src/components/cases/data/{data.tsx => categories.tsx} (81%)

diff --git a/frontend/src/components/cases/columns.tsx b/frontend/src/components/cases/columns.tsx
index 5ba9da3b..55ea5a63 100644
--- a/frontend/src/components/cases/columns.tsx
+++ b/frontend/src/components/cases/columns.tsx
@@ -2,13 +2,18 @@
 
 import { ColumnDef } from "@tanstack/react-table"
 
+import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeader } from "@/components/cases/data-table-column-header"
+import {
+  indicators,
+  priorities,
+  statuses,
+} from "@/components/cases/data/categories"
 
-import { DataTableColumnHeader } from "./data-table-column-header"
-import { priorities, statuses } from "./data/data"
-import { Task } from "./data/schema"
+import { Case } from "./data/schema"
 
-export const columns: ColumnDef<Task>[] = [
+export const columns: ColumnDef<Case>[] = [
   {
     id: "select",
     header: ({ table }) => (
@@ -134,14 +139,29 @@ export const columns: ColumnDef<Task>[] = [
       <DataTableColumnHeader column={column} title="Malice" />
     ),
     cell: ({ row }) => {
+      const label = row.getValue("malice") as string
+      const bg_color = label === "malicious" ? "bg-red-100" : "bg-gray-100"
+      const border_color =
+        label === "malicious" ? "border-red-400" : "border-gray-400"
+      const text_color =
+        label === "malicious" ? "text-red-700" : "text-gray-700"
+
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
-            {row.getValue("malice")}
+          <span className="max-w-[100px] truncate text-xs text-muted-foreground">
+            <Badge
+              variant="outline"
+              className={`${bg_color} ${border_color} ${text_color}`}
+            >
+              {label}
+            </Badge>
           </span>
         </div>
       )
     },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
   },
   {
     accessorKey: "action",
@@ -151,7 +171,7 @@ export const columns: ColumnDef<Task>[] = [
     cell: ({ row }) => {
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+          <span className="max-w-[300px] truncate text-xs">
             {row.getValue("action")}
           </span>
         </div>
@@ -164,10 +184,13 @@ export const columns: ColumnDef<Task>[] = [
       <DataTableColumnHeader column={column} title="Context" />
     ),
     cell: ({ row }) => {
+      const context = row.getValue("context") as string[]
       return (
         <div className="flex space-x-2">
-          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
-            {row.getValue("context")}
+          <span className="max-w-[300px] space-x-1 truncate text-xs text-muted-foreground">
+            {context.map((label) => (
+              <Badge variant="outline">{label}</Badge>
+            ))}
           </span>
         </div>
       )
diff --git a/frontend/src/components/cases/data-table-row-actions.tsx b/frontend/src/components/cases/data-table-row-actions.tsx
deleted file mode 100644
index 16eac5e7..00000000
--- a/frontend/src/components/cases/data-table-row-actions.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client"
-
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
-import { Row } from "@tanstack/react-table"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-import { labels } from "./data/data"
-import { caseSchema } from "./data/schema"
-
-interface DataTableRowActionsProps<TData> {
-  row: Row<TData>
-}
-
-export function DataTableRowActions<TData>({
-  row,
-}: DataTableRowActionsProps<TData>) {
-  const task = caseSchema.parse(row.original)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-        >
-          <DotsHorizontalIcon className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[160px]">
-        <DropdownMenuItem>Edit</DropdownMenuItem>
-        <DropdownMenuItem>Make a copy</DropdownMenuItem>
-        <DropdownMenuItem>Favorite</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
-            <DropdownMenuRadioGroup value={task.label}>
-              {labels.map((label) => (
-                <DropdownMenuRadioItem key={label.value} value={label.value}>
-                  {label.label}
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
-          </DropdownMenuSubContent>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Delete
-          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
diff --git a/frontend/src/components/cases/data-table-toolbar.tsx b/frontend/src/components/cases/data-table-toolbar.tsx
index 2da7a3da..2f290b91 100644
--- a/frontend/src/components/cases/data-table-toolbar.tsx
+++ b/frontend/src/components/cases/data-table-toolbar.tsx
@@ -12,10 +12,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { DataTableFacetedFilter } from "@/components/cases/data-table-faceted-filter"
 import { DataTableViewOptions } from "@/components/cases/data-table-view-options"
-
-import { DataTableFacetedFilter } from "./data-table-faceted-filter"
-import { priorities, statuses } from "./data/data"
+import {
+  indicators,
+  priorities,
+  statuses,
+} from "@/components/cases/data/categories"
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>
@@ -51,6 +54,13 @@ export function DataTableToolbar<TData>({
             options={priorities}
           />
         )}
+        {table.getColumn("malice") && (
+          <DataTableFacetedFilter
+            column={table.getColumn("malice")}
+            title="Malice"
+            options={indicators}
+          />
+        )}
         {isFiltered && (
           <Button
             variant="ghost"
diff --git a/frontend/src/components/cases/data/data.tsx b/frontend/src/components/cases/data/categories.tsx
similarity index 81%
rename from frontend/src/components/cases/data/data.tsx
rename to frontend/src/components/cases/data/categories.tsx
index 7a130470..f00bad37 100644
--- a/frontend/src/components/cases/data/data.tsx
+++ b/frontend/src/components/cases/data/categories.tsx
@@ -6,7 +6,9 @@ import {
   CheckCircleIcon,
   CircleIcon,
   FlagTriangleRightIcon,
+  InfoIcon,
   ShieldAlertIcon,
+  ShieldOffIcon,
   TrafficConeIcon,
 } from "lucide-react"
 
@@ -60,3 +62,16 @@ export const priorities = [
     icon: AlertTriangleIcon,
   },
 ]
+
+export const indicators = [
+  {
+    label: "Malicious",
+    value: "malicious",
+    icon: ShieldOffIcon,
+  },
+  {
+    label: "Benign",
+    value: "benign",
+    icon: InfoIcon,
+  },
+]
diff --git a/frontend/src/components/cases/data/schema.ts b/frontend/src/components/cases/data/schema.ts
index fdf0794e..08168d88 100644
--- a/frontend/src/components/cases/data/schema.ts
+++ b/frontend/src/components/cases/data/schema.ts
@@ -13,4 +13,4 @@ export const caseSchema = z.object({
   priority: z.enum(["low", "medium", "high", "critical"]),
 })
 
-export type Task = z.infer<typeof caseSchema>
+export type Case = z.infer<typeof caseSchema>