Implemented test run editor's test case selection

frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import {
   Button,
   Input,
@@ -11,9 +12,21 @@ import {
   Listbox,
   ListboxItem,
   Divider,
+  Selection,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
 } from "@nextui-org/react";
-import { useRouter } from "next/navigation";
+import {
-import { Save, ArrowLeft, Folder } from "lucide-react";
+  Save,
+  ArrowLeft,
+  Folder,
+  ChevronDown,
+  CopyPlus,
+  CopyMinus,
+} from "lucide-react";
+import TestCaseSelector from "./TestCaseSelector";
 import { testRunStatus } from "@/config/selection";
 import { RunType } from "@/types/run";
 import { FolderType } from "@/types/folder";
@@ -38,8 +51,9 @@ type Props = {
 export default function RunEditor({ projectId, runId }: Props) {
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState([]);
-  const [testcases, setTestCases] = useState([]);
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
   const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
+  const [testcases, setTestCases] = useState([]);
   const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const router = useRouter();
@@ -74,6 +88,18 @@ export default function RunEditor({ projectId, runId }: Props) {
     fetchCasesData();
   }, [selectedFolder]);
 
+  const onIncludeExcludeClick = async (mode: string) => {
+    console.log(mode)
+    if (selectedKeys === "all") {
+      const allKeys = testcases.map((item) => item.id);
+      console.log(allKeys);
+    } else {
+      console.log([...selectedKeys]);
+    }
+
+    setSelectedKeys(new Set([]));
+  };
+
   const baseClass = "";
   const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
 
@@ -160,7 +186,41 @@ export default function RunEditor({ projectId, runId }: Props) {
         </div>
 
         <Divider className="my-6" />
-        <h6>Select test cases</h6>
+        <div className="flex items-center justify-between">
+          <h6 className="h-8">Select test cases</h6>
+          <div>
+            {selectedKeys.size > 0 || selectedKeys === "all" ? (
+              <Dropdown>
+                <DropdownTrigger>
+                  <Button
+                    size="sm"
+                    color="primary"
+                    endContent={<ChevronDown size={16} />}
+                  >
+                    Test case selection
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu aria-label="test case select actions">
+                  <DropdownItem
+                    startContent={<CopyPlus size={16} />}
+                    onClick={() => onIncludeExcludeClick("include")}
+                  >
+                    Include in run
+                  </DropdownItem>
+                  <DropdownItem
+                    startContent={<CopyMinus size={16} />}
+                    onClick={() => onIncludeExcludeClick("exclude")}
+                  >
+                    Exclude from run
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+
         <div className="mt-3 flex rounded-small border-2 dark:border-neutral-700">
           <div className="w-3/12 border-r-1 dark:border-neutral-700">
             <Listbox aria-label="Listbox Variants" variant="light">
@@ -182,10 +242,13 @@ export default function RunEditor({ projectId, runId }: Props) {
               ))}
             </Listbox>
           </div>
-          <div className="">
+          <div className="w-9/12">
-            {testcases.map((testcase, index) => (
+            <TestCaseSelector
-              <div key={index}>{testcase.title}</div>
+              projectId={projectId}
-            ))}
+              cases={testcases}
+              selectedKeys={selectedKeys}
+              onSelectionChange={setSelectedKeys}
+            />
           </div>
         </div>
       </div>

frontend/app/projects/[projectId]/runs/[runId]/TestCaseSelector.tsx

@@ -0,0 +1,179 @@
+import { useState, useMemo, useCallback } from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Button,
+  Chip,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Selection,
+  SortDescriptor,
+  Link,
+} from "@nextui-org/react";
+import { Plus, MoreVertical, Trash } from "lucide-react";
+
+const headerColumns = [
+  { name: "ID", uid: "id", sortable: true },
+  { name: "Title", uid: "title", sortable: true },
+  { name: "Priority", uid: "priority", sortable: true },
+  { name: "Actions", uid: "actions" },
+];
+
+import { priorities } from "@/config/selection";
+
+type Case = {
+  id: number;
+  title: string;
+  state: number;
+  priority: number;
+  type: number;
+  automationStatus: number;
+  description: string;
+  template: number;
+  preConditions: string;
+  expectedResults: string;
+  folderId: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+type Props = {
+  projectId: string;
+  cases: Case[];
+  selectedKeys: Selection;
+  onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
+};
+
+export default function TestCaseSelector({
+  projectId,
+  cases,
+  selectedKeys,
+  onSelectionChange,
+}: Props) {
+  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+    column: "id",
+    direction: "ascending",
+  });
+
+  const sortedItems = useMemo(() => {
+    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, cases]);
+  const renderCell = useCallback((testCase: Case, columnKey: Key) => {
+    const cellValue = testCase[columnKey as keyof Case];
+
+    switch (columnKey) {
+      case "id":
+        return <span>{cellValue}</span>;
+      case "title":
+        return (
+          <Link
+            underline="hover"
+            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+            className="dark:text-white"
+          >
+            {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 (
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <MoreVertical size={16} />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="test case actions">
+              <DropdownItem className="text-danger" onClick={() => {}}>
+                status change
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const classNames = useMemo(
+    () => ({
+      wrapper: ["min-w-3xl"],
+      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
+      td: [
+        // changing the rows border radius
+        // first
+        "group-data-[first=true]:first:before:rounded-none",
+        "group-data-[first=true]:last:before:rounded-none",
+        // middle
+        "group-data-[middle=true]:before:rounded-none",
+        // last
+        "group-data-[last=true]:first:before:rounded-none",
+        "group-data-[last=true]:last:before:rounded-none",
+      ],
+    }),
+    []
+  );
+
+  const handleSelectionChange = (keys: Selection) => {
+    onSelectionChange(keys)
+  }
+
+  return (
+    <>
+      <Table
+        isCompact
+        removeWrapper
+        aria-label="Tese cases table"
+        classNames={classNames}
+        selectedKeys={selectedKeys}
+        selectionMode="multiple"
+        sortDescriptor={sortDescriptor}
+        onSelectionChange={handleSelectionChange}
+        onSortChange={setSortDescriptor}
+      >
+        <TableHeader columns={headerColumns}>
+          {(column) => (
+            <TableColumn
+              key={column.uid}
+              align={column.uid === "actions" ? "center" : "start"}
+              allowsSorting={column.sortable}
+            >
+              {column.name}
+            </TableColumn>
+          )}
+        </TableHeader>
+        <TableBody emptyContent={"No cases found"} items={sortedItems}>
+          {(item) => (
+            <TableRow key={item.id}>
+              {(columnKey) => (
+                <TableCell>{renderCell(item, columnKey)}</TableCell>
+              )}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </>
+  );
+}