create test case list table

frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx

@@ -71,7 +71,7 @@ export default function Page({
           </ListboxItem>
         ))}
       </Listbox> */}
-      <TestCaseTable cases={cases}/>
+      <TestCaseTable projectId={params.folderId} cases={cases}/>
     </>
   );
 }

frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect, useCallback } from "react";
+import { useState, useMemo, useCallback } from "react";
 import {
   Table,
   TableHeader,
@@ -7,27 +7,30 @@ import {
   TableRow,
   TableCell,
   Button,
+  Chip,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
   DropdownItem,
   Selection,
   SortDescriptor,
+  Link,
 } from "@nextui-org/react";
-import { Plus, MoreVertical, ChevronDown } from "lucide-react";
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
+import { MoreVertical } from "lucide-react";
 
 const columns = [
   { name: "ID", uid: "id", sortable: true },
-  { name: "TITLE", uid: "title", sortable: true },
-  { name: "PRIORITY", uid: "priority", sortable: true },
-  { name: "ACTIONS", uid: "actions" },
+  { name: "Title", uid: "title", sortable: true },
+  { name: "Priority", uid: "priority", sortable: true },
+  { name: "Actions", uid: "actions" },
 ];
 
-const INITIAL_VISIBLE_COLUMNS = ["id", "title", "priority", "actions"];
+const priorities = [
+  { name: "Critical", uid: "critical", color: "danger" },
+  { name: "High", uid: "high", color: "warning" },
+  { name: "Medium", uid: "medium", color: "primary" },
+  { name: "Low", uid: "low", color: "success" },
+];
 
 type Case = {
   id: number;
@@ -45,57 +48,23 @@ type Case = {
   updatedAt: string;
 };
 
-export default function TestCaseTable({ cases }) {
-  const [filterValue, setFilterValue] = useState("");
+export default function TestCaseTable({ projectId, cases }) {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
-  const [visibleColumns, setVisibleColumns] = useState<Selection>(
-    new Set(INITIAL_VISIBLE_COLUMNS)
-  );
-  const [statusFilter, setStatusFilter] = useState<Selection>("all");
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: "id",
     direction: "ascending",
   });
-
-  const hasSearchFilter = Boolean(filterValue);
-
-  const headerColumns = useMemo(() => {
-    if (visibleColumns === "all") {
-      return columns;
-    }
-
-    return columns.filter((column) =>
-      Array.from(visibleColumns).includes(column.uid)
-    );
-  }, [visibleColumns]);
-
-  const filteredItems = useMemo(() => {
-    let filteredCases = [...cases];
-
-    if (hasSearchFilter) {
-      filteredCases = filteredCases.filter((itr) =>
-        itr.title.toLowerCase().includes(filterValue.toLowerCase())
-      );
-    }
-    if (statusFilter !== "all") {
-      filteredCases = filteredCases.filter((itr) =>
-        Array.from(statusFilter).includes(itr.state)
-      );
-    }
-
-    return filteredCases;
-  }, [cases, filterValue, statusFilter]);
+  const headerColumns = columns;
 
   const sortedItems = useMemo(() => {
-    return [...filteredItems].sort((a: Case, b: Case) => {
+    return [...cases].sort((a: Case, b: Case) => {
       const first = a[sortDescriptor.column as keyof Case] as number;
       const second = b[sortDescriptor.column as keyof Case] as number;
       const cmp = first < second ? -1 : first > second ? 1 : 0;
 
       return sortDescriptor.direction === "descending" ? -cmp : cmp;
     });
-  }, [sortDescriptor, filteredItems]);
-
+  }, [sortDescriptor, cases]);
   const renderCell = useCallback((testCase: Case, columnKey: Key) => {
     const cellValue = testCase[columnKey as keyof Case];
 
@@ -103,82 +72,49 @@ export default function TestCaseTable({ cases }) {
       case "id":
         return <span>{cellValue}</span>;
       case "title":
-        return <span>{cellValue}</span>;
+        return (
+          <Link
+            underline="hover"
+            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+          >
+            {cellValue}
+          </Link>
+        );
+      case "priority":
+        return (
+          <Chip
+            className="border-none gap-1 text-default-600"
+            color={priorities[cellValue].color}
+            size="sm"
+            variant="dot"
+          >
+            {priorities[cellValue].name}
+          </Chip>
+        );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <MoreVertical className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <MoreVertical size={16} />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="test case actions">
+              <DropdownItem>Edit test case</DropdownItem>
+              <DropdownItem className="text-danger">
+                Delete test case
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;
     }
   }, []);
 
-  const topContent = useMemo(() => {
-    return (
-      <div className="flex flex-col gap-4 p-5">
-        <div className="flex justify-between gap-3 items-end">
-          <div className="flex gap-3">
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button
-                  endContent={<ChevronDown className="text-small" />}
-                  size="sm"
-                  variant="flat"
-                >
-                  Columns
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={visibleColumns}
-                selectionMode="multiple"
-                onSelectionChange={setVisibleColumns}
-              >
-                {columns.map((column) => (
-                  <DropdownItem key={column.uid} className="capitalize">
-                    {capitalize(column.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Button
-              className="bg-foreground text-background"
-              endContent={<Plus />}
-              size="sm"
-            >
-              Add New
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }, [
-    filterValue,
-    statusFilter,
-    visibleColumns,
-    cases.length,
-    hasSearchFilter,
-  ]);
-
   const classNames = useMemo(
     () => ({
       wrapper: ["max-w-3xl"],
-      table: ["border-t-1"],
       th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
       td: [
         // changing the rows border radius
@@ -200,17 +136,10 @@ export default function TestCaseTable({ cases }) {
       isCompact
       removeWrapper
       aria-label="Tese cases table"
-      checkboxesProps={{
-        classNames: {
-          wrapper: "after:bg-foreground after:text-background text-background",
-        },
-      }}
       classNames={classNames}
       selectedKeys={selectedKeys}
       selectionMode="multiple"
       sortDescriptor={sortDescriptor}
-      topContent={topContent}
-      topContentPlacement="outside"
       onSelectionChange={setSelectedKeys}
       onSortChange={setSortDescriptor}
     >

frontend/app/projects/[projectId]/folders/layout.tsx

@@ -231,7 +231,7 @@ export default function FoldersLayout({
 
   return (
     <div className="flex w-full">
-      <div className="w-64 min-h-screen border-r-1">
+      <div className="w-64 min-h-screen border-r-1 dark:border-neutral-700">
         <Button
           startContent={<Plus size={16} />}
           size="sm"
@@ -253,7 +253,7 @@ export default function FoldersLayout({
               startContent={<Folder size={20} color="#99ccff" fill="#99ccff" />}
               className={
                 selectedFolder && folder.id === selectedFolder.id
-                  ? "bg-gray-300"
+                  ? "bg-gray-300 dark:bg-gray-700"
                   : ""
               }
               endContent={
@@ -270,9 +270,20 @@ export default function FoldersLayout({
         </Listbox>
       </div>
       <div className="flex-grow w-full">
-        <h3 className="border-b-1 w-full font-bold p-3">
-          {selectedFolder ? selectedFolder.name : "Select Folder"}
-        </h3>
+        <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
+          <h3 className="font-bold">
+            {selectedFolder ? selectedFolder.name : "Select Folder"}
+          </h3>
+          <Button
+            startContent={<Plus size={16} />}
+            size="sm"
+            color="primary"
+            isDisabled={!selectedFolder}
+            onClick={() => console.log("create")}
+          >
+            New Test Case
+          </Button>
+        </div>
         {children}
       </div>