Implemented test run editor's test case selection

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

@@ -59,7 +59,7 @@ export default function RunEditor({ projectId, runId }: Props) {
   const [folders, setFolders] = useState([]);
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
   const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
-  const [testcases, setTestCases] = useState([]);
+  const [testcases, setTestCases] = useState<CaseType[]>([]);
   const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const router = useRouter();
@@ -116,6 +116,26 @@ export default function RunEditor({ projectId, runId }: Props) {
     fetchCasesData();
   }, [selectedFolder]);
 
+  const handleIncludeExcludeCase = async (
+    isInclude: boolean,
+    clickedTestCaseId: number
+  ) => {
+    if (isInclude) {
+      await createRunCase(runId, clickedTestCaseId);
+    } else {
+      await deleteRunCase(runId, clickedTestCaseId);
+    }
+
+    setTestCases((prevTestCases) => {
+      return prevTestCases.map((testCase) => {
+        if (testCase.id === clickedTestCaseId) {
+          return { ...testCase, isIncluded: isInclude };
+        }
+        return testCase;
+      });
+    });
+  };
+
   const onIncludeExcludeClick = async (mode: string) => {
     console.log(mode);
     if (selectedKeys === "all") {
@@ -128,16 +148,6 @@ export default function RunEditor({ projectId, runId }: Props) {
     setSelectedKeys(new Set([]));
   };
 
-  const handleIncludeCase = async (includeTestCaseId: number) => {
-    await createRunCase(runId, includeTestCaseId);
-    fetchAndUpdateCases();
-  };
-
-  const handleExcludeCase = async (excludeTestCaseId: number) => {
-    await deleteRunCase(runId, excludeTestCaseId);
-    fetchAndUpdateCases();
-  };
-
   const baseClass = "";
   const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
 
@@ -285,8 +295,12 @@ export default function RunEditor({ projectId, runId }: Props) {
               cases={testcases}
               selectedKeys={selectedKeys}
               onSelectionChange={setSelectedKeys}
-              onIncludeCase={handleIncludeCase}
-              onExcludeCase={handleExcludeCase}
+              onIncludeCase={(includeTestId) =>
+                handleIncludeExcludeCase(true, includeTestId)
+              }
+              onExcludeCase={(excludeCaseId) =>
+                handleIncludeExcludeCase(false, excludeCaseId)
+              }
             />
           </div>
         </div>

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

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from "react";
+import { useState, useMemo } from "react";
 import {
   Table,
   TableHeader,
@@ -40,7 +40,7 @@ export default function TestCaseSelector({
   selectedKeys,
   onSelectionChange,
   onIncludeCase,
-  onExcludeCase
+  onExcludeCase,
 }: Props) {
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: "id",
@@ -60,7 +60,7 @@ export default function TestCaseSelector({
   const notIncludedCaseClass = "text-neutral-200 dark:text-neutral-600";
   const chipBaseClass = "border-none gap-1 text-default-600";
 
-  const renderCell = useCallback((testCase: CaseType, columnKey: Key) => {
+  const renderCell = (testCase: CaseType, columnKey: Key) => {
     const cellValue = testCase[columnKey as keyof CaseType];
     const isIncluded = testCase.isIncluded;
 
@@ -129,7 +129,7 @@ export default function TestCaseSelector({
       default:
         return cellValue;
     }
-  }, []);
+  };
 
   const classNames = useMemo(
     () => ({