Implemented test run editor's test case selection

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

@@ -31,7 +31,12 @@ import { testRunStatus } from "@/config/selection";
 import { RunType } from "@/types/run";
 import { CaseType } from "@/types/case";
 import { FolderType } from "@/types/folder";
-import { fetchRun, updateRun } from "../runsControl";
+import {
+  fetchRun,
+  updateRun,
+  createRunCase,
+  deleteRunCase,
+} from "../runsControl";
 import { fetchFolders } from "../../folders/foldersControl";
 import { fetchCases } from "../../folders/[folderId]/cases/caseControl";
 
@@ -74,33 +79,37 @@ export default function RunEditor({ projectId, runId }: Props) {
     fetchDataEffect();
   }, []);
 
+  const fetchAndUpdateCases = async () => {
+    try {
+      const testCasesData = await fetchCases(selectedFolder.id);
+
+      // Check if each testCase has an association with testRun
+      // and add "isIncluded" property
+      testCasesData.forEach((caseItr: CaseType) => {
+        let isIncluded: boolean = false;
+        let runStatus: number = 0;
+
+        testRun.Cases.forEach((runCaseItr: CaseType) => {
+          if (runCaseItr.id === caseItr.id) {
+            isIncluded = true;
+            runStatus = runCaseItr.runCases.status;
+          }
+        });
+
+        caseItr.isIncluded = isIncluded;
+        caseItr.runStatus = runStatus;
+      });
+
+      setTestCases(testCasesData);
+    } catch (error) {
+      console.error("Error fetching cases data:", error.message);
+    }
+  };
+
   useEffect(() => {
     async function fetchCasesData() {
       if (selectedFolder && selectedFolder.id) {
-        try {
-          const testCasesData = await fetchCases(selectedFolder.id);
-
-          // Check if each testCase has an association with testRun
-          // and add "isIncluded" property
-          testCasesData.forEach((caseItr: CaseType) => {
-            let isIncluded: boolean = false;
-            let runStatus: number = 0;
-
-            testRun.Cases.forEach((runCaseItr: CaseType) => {
-              if (runCaseItr.id === caseItr.id) {
-                isIncluded = true;
-                runStatus = runCaseItr.runCases.status;
-              }
-            });
-
-            caseItr.isIncluded = isIncluded;
-            caseItr.runStatus = runStatus;
-          });
-
-          setTestCases(testCasesData);
-        } catch (error) {
-          console.error("Error fetching cases data:", error.message);
-        }
+        await fetchAndUpdateCases();
       }
     }
 
@@ -119,6 +128,16 @@ 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`;
 
@@ -224,13 +243,13 @@ export default function RunEditor({ projectId, runId }: Props) {
                     startContent={<CopyPlus size={16} />}
                     onClick={() => onIncludeExcludeClick("include")}
                   >
-                    Include in run
+                    Include selected cases in run
                   </DropdownItem>
                   <DropdownItem
                     startContent={<CopyMinus size={16} />}
                     onClick={() => onIncludeExcludeClick("exclude")}
                   >
-                    Exclude from run
+                    Exclude selected cases from run
                   </DropdownItem>
                 </DropdownMenu>
               </Dropdown>
@@ -266,6 +285,8 @@ export default function RunEditor({ projectId, runId }: Props) {
               cases={testcases}
               selectedKeys={selectedKeys}
               onSelectionChange={setSelectedKeys}
+              onIncludeCase={handleIncludeCase}
+              onExcludeCase={handleExcludeCase}
             />
           </div>
         </div>

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

@@ -15,7 +15,7 @@ import {
   Selection,
   SortDescriptor,
 } from "@nextui-org/react";
-import { ChevronDown, MoreVertical } from "lucide-react";
+import { ChevronDown, MoreVertical, CopyPlus, CopyMinus } from "lucide-react";
 import { priorities, testRunCaseStatus } from "@/config/selection";
 import { CaseType } from "@/types/case";
 
@@ -31,12 +31,16 @@ type Props = {
   cases: CaseType[];
   selectedKeys: Selection;
   onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
+  onIncludeCase: (includeCaseId: number) => {};
+  onExcludeCase: (excludeCaseId: number) => {};
 };
 
 export default function TestCaseSelector({
   cases,
   selectedKeys,
   onSelectionChange,
+  onIncludeCase,
+  onExcludeCase
 }: Props) {
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: "id",
@@ -104,9 +108,20 @@ export default function TestCaseSelector({
                 <MoreVertical size={16} />
               </Button>
             </DropdownTrigger>
-            <DropdownMenu aria-label="test case actions">
-              <DropdownItem className="text-danger" onClick={() => {}}>
-                status change
+            <DropdownMenu aria-label="include or exclude actions">
+              <DropdownItem
+                startContent={<CopyPlus size={16} />}
+                isDisabled={testCase.isIncluded}
+                onClick={() => onIncludeCase(testCase.id)}
+              >
+                Include in run
+              </DropdownItem>
+              <DropdownItem
+                startContent={<CopyMinus size={16} />}
+                isDisabled={!testCase.isIncluded}
+                onClick={() => {onExcludeCase(testCase.id)}}
+              >
+                Exclude from run
               </DropdownItem>
             </DropdownMenu>
           </Dropdown>

frontend/app/projects/[projectId]/runs/runsControl.ts

@@ -97,7 +97,7 @@ async function updateRun(updateTestRun: RunType) {
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error("Error updating project:", error);
+    console.error("Error updating run:", error);
     throw error;
   }
 }
@@ -118,9 +118,53 @@ async function deleteRun(runId: number) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
   } catch (error) {
-    console.error("Error deleting project:", error);
+    console.error("Error deleting run:", error);
     throw error;
   }
 }
 
-export { fetchRun, fetchRuns, createRun, updateRun, deleteRun };
+async function createRunCase(runId: string, caseId: number) {
+  const fetchOptions = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const url = `${apiServer}/runcases?runId=${runId}&caseId=${caseId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error creating new runcase:", error);
+    throw error;
+  }
+}
+
+async function deleteRunCase(runId: string, caseId: number) {
+  const fetchOptions = {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const url = `${apiServer}/runcases?runId=${runId}&caseId=${caseId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error deleting runcase:", error);
+    throw error;
+  }
+}
+
+export { fetchRun, fetchRuns, createRun, updateRun, deleteRun, createRunCase, deleteRunCase };