feat(ui): Replace 5W with SMAC

TracecatHQ · Mar 8, 2024 · 7b36211 · 7b36211
1 parent 98377b1
commit 7b36211
Show file tree

Hide file tree

Showing 13 changed files with 413 additions and 762 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -59,6 +59,7 @@
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/app/workflows/[id]/cases/page.tsx b/frontend/src/app/workflows/[id]/cases/page.tsx
@@ -5,9 +5,10 @@ import { DefaultQueryClientProvider } from "@/providers/query"
 import { WorkflowProvider } from "@/providers/workflow"
 import { z } from "zod"
 
+import { Separator } from "@/components/ui/separator"
 import { columns } from "@/components/cases/columns"
 import { DataTable } from "@/components/cases/data-table"
-import { taskSchema } from "@/components/cases/data/schema"
+import { caseSchema } from "@/components/cases/data/schema"
 import { Navbar } from "@/components/navbar"
 
 export const metadata: Metadata = {
@@ -19,7 +20,7 @@ async function getTasks() {
     path.join(process.cwd(), "src/components/cases/data/tasks.json")
   )
   const tasks = JSON.parse(data.toString())
-  return z.array(taskSchema).parse(tasks)
+  return z.array(caseSchema).parse(tasks)
 }
 
 export default async function CasesPage() {
@@ -31,7 +32,7 @@ export default async function CasesPage() {
         <WorkflowProvider>
           <div className="flex h-screen flex-col">
             <Navbar />
-            <div className="w-full flex-1 space-y-8 p-8">
+            <div className="flex-1 px-16 py-24">
               <DataTable data={tasks} columns={columns} />
             </div>
           </div>

diff --git a/frontend/src/components/cases/columns.tsx b/frontend/src/components/cases/columns.tsx
@@ -2,12 +2,10 @@
 
 import { ColumnDef } from "@tanstack/react-table"
 
-import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
 
 import { DataTableColumnHeader } from "./data-table-column-header"
-import { DataTableRowActions } from "./data-table-row-actions"
-import { labels, priorities, statuses } from "./data/data"
+import { priorities, statuses } from "./data/data"
 import { Task } from "./data/schema"
 
 export const columns: ColumnDef<Task>[] = [
@@ -38,29 +36,13 @@ export const columns: ColumnDef<Task>[] = [
   {
     accessorKey: "id",
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Task" />
+      <DataTableColumnHeader className="text-xs" column={column} title="ID" />
     ),
-    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "title",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Title" />
+    cell: ({ row }) => (
+      <div className="w-[60px] text-xs">&#x23; {row.getValue("id")}</div>
     ),
-    cell: ({ row }) => {
-      const label = labels.find((label) => label.value === row.original.label)
-
-      return (
-        <div className="flex space-x-2">
-          {label && <Badge variant="outline">{label.label}</Badge>}
-          <span className="max-w-[500px] truncate font-medium">
-            {row.getValue("title")}
-          </span>
-        </div>
-      )
-    },
+    enableSorting: true,
+    enableHiding: false,
   },
   {
     accessorKey: "status",
@@ -79,9 +61,9 @@ export const columns: ColumnDef<Task>[] = [
       return (
         <div className="flex w-[100px] items-center">
           {status.icon && (
-            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+            <status.icon className="mr-2 h-3 w-3 text-muted-foreground" />
           )}
-          <span>{status.label}</span>
+          <span className="text-xs">{status.label}</span>
         </div>
       )
     },
@@ -106,9 +88,9 @@ export const columns: ColumnDef<Task>[] = [
       return (
         <div className="flex items-center">
           {priority.icon && (
-            <priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+            <priority.icon className="mr-2 h-3 w-3 text-muted-foreground" />
           )}
-          <span>{priority.label}</span>
+          <span className="text-xs">{priority.label}</span>
         </div>
       )
     },
@@ -117,7 +99,93 @@ export const columns: ColumnDef<Task>[] = [
     },
   },
   {
-    id: "actions",
-    cell: ({ row }) => <DataTableRowActions row={row} />,
+    accessorKey: "title",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Case Title" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs">
+            {row.getValue("title")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "payload",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Payload" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("payload")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "malice",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Malice" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("malice")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "action",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Action" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("action")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "context",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Context" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("context")}
+          </span>
+        </div>
+      )
+    },
+  },
+  {
+    accessorKey: "suppression",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Suppression" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="flex space-x-2">
+          <span className="max-w-[300px] truncate text-xs text-muted-foreground">
+            {row.getValue("suppression")}
+          </span>
+        </div>
+      )
+    },
   },
 ]
diff --git a/frontend/src/components/cases/data-table-pagination.tsx b/frontend/src/components/cases/data-table-pagination.tsx
@@ -26,18 +26,18 @@ export function DataTablePagination<TData>({
     <div className="flex items-center justify-between px-2">
       <div className="flex-1 text-sm text-muted-foreground">
         {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {table.getFilteredRowModel().rows.length} case(s) selected.
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
+          <p className="text-xs font-medium">Cases per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
               table.setPageSize(Number(value))
             }}
           >
-            <SelectTrigger className="h-8 w-[70px]">
+            <SelectTrigger className="h-8 w-[70px] text-xs">
               <SelectValue placeholder={table.getState().pagination.pageSize} />
             </SelectTrigger>
             <SelectContent side="top">
@@ -49,7 +49,7 @@ export function DataTablePagination<TData>({
             </SelectContent>
           </Select>
         </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+        <div className="flex w-[100px] items-center justify-center text-xs font-medium">
           Page {table.getState().pagination.pageIndex + 1} of{" "}
           {table.getPageCount()}
         </div>
@@ -61,7 +61,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <DoubleArrowLeftIcon className="h-3 w-3" />
           </Button>
           <Button
             variant="outline"
@@ -70,7 +70,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeftIcon className="h-3 w-3" />
           </Button>
           <Button
             variant="outline"
@@ -79,7 +79,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRightIcon className="h-3 w-3" />
           </Button>
           <Button
             variant="outline"
@@ -88,7 +88,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <DoubleArrowRightIcon className="h-3 w-3" />
           </Button>
         </div>
       </div>

diff --git a/frontend/src/components/cases/data-table-row-actions.tsx b/frontend/src/components/cases/data-table-row-actions.tsx
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 
 import { labels } from "./data/data"
-import { taskSchema } from "./data/schema"
+import { caseSchema } from "./data/schema"
 
 interface DataTableRowActionsProps<TData> {
   row: Row<TData>
@@ -28,7 +28,7 @@ interface DataTableRowActionsProps<TData> {
 export function DataTableRowActions<TData>({
   row,
 }: DataTableRowActionsProps<TData>) {
-  const task = taskSchema.parse(row.original)
+  const task = caseSchema.parse(row.original)
 
   return (
     <DropdownMenu>

diff --git a/frontend/src/components/cases/data-table-toolbar.tsx b/frontend/src/components/cases/data-table-toolbar.tsx
@@ -5,6 +5,13 @@ import { Table } from "@tanstack/react-table"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { DataTableViewOptions } from "@/components/cases/data-table-view-options"
 
 import { DataTableFacetedFilter } from "./data-table-faceted-filter"
@@ -23,7 +30,7 @@ export function DataTableToolbar<TData>({
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-2">
         <Input
-          placeholder="Filter tasks..."
+          placeholder="Filter cases..."
           value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
           onChange={(event) =>
             table.getColumn("title")?.setFilterValue(event.target.value)

diff --git a/frontend/src/components/cases/data-table-view-options.tsx b/frontend/src/components/cases/data-table-view-options.tsx
@@ -29,7 +29,7 @@ export function DataTableViewOptions<TData>({
           className="ml-auto hidden h-8 lg:flex"
         >
           <MixerHorizontalIcon className="mr-2 h-4 w-4" />
-          View
+          Toggle columns
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[150px]">