Implemented test run editor's test case selection

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

@@ -8,12 +8,18 @@ import {
   Select,
   SelectItem,
   Tooltip,
+  Listbox,
+  ListboxItem,
+  Divider,
 } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
-import { Save, ArrowLeft, Plus } from "lucide-react";
+import { Save, ArrowLeft, Folder } from "lucide-react";
 import { testRunStatus } from "@/config/selection";
 import { RunType } from "@/types/run";
+import { FolderType } from "@/types/folder";
 import { fetchRun, updateRun } from "../runsControl";
+import { fetchFolders } from "../../folders/foldersControl";
+import { fetchCases } from "../../folders/[folderId]/cases/caseControl";
 
 const defaultTestRun = {
   id: 0,
@@ -31,6 +37,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 [selectedFolder, setSelectedFolder] = useState<FolderType>({});
   const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const router = useRouter();
@@ -38,8 +47,10 @@ export default function RunEditor({ projectId, runId }: Props) {
   useEffect(() => {
     async function fetchDataEffect() {
       try {
-        const data = await fetchRun(runId);
-        setTestRun(data);
+        const caseData = await fetchRun(runId);
+        setTestRun(caseData);
+        const foldersData = await fetchFolders(projectId);
+        setFolders(foldersData);
       } catch (error) {
         console.error("Error in effect:", error.message);
       }
@@ -48,6 +59,24 @@ export default function RunEditor({ projectId, runId }: Props) {
     fetchDataEffect();
   }, []);
 
+  useEffect(() => {
+    async function fetchCasesData() {
+      if (selectedFolder && selectedFolder.id) {
+        try {
+          const testCasesData = await fetchCases(selectedFolder.id);
+          setTestCases(testCasesData);
+        } catch (error) {
+          console.error("Error fetching cases data:", error.message);
+        }
+      }
+    }
+
+    fetchCasesData();
+  }, [selectedFolder]);
+
+  const baseClass = "";
+  const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
+
   return (
     <>
       <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
@@ -80,6 +109,7 @@ export default function RunEditor({ projectId, runId }: Props) {
       </div>
 
       <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
+        <h6>Basic</h6>
         <Input
           size="sm"
           type="text"
@@ -94,16 +124,6 @@ export default function RunEditor({ projectId, runId }: Props) {
           className="mt-3"
         />
 
-        <Button
-          startContent={<Plus size={16} />}
-          size="sm"
-          color="primary"
-          onPress={async () => {}}
-          className="mt-3"
-        >
-          Select test case
-        </Button>
-
         <Textarea
           size="sm"
           variant="bordered"
@@ -128,7 +148,7 @@ export default function RunEditor({ projectId, runId }: Props) {
               );
               setTestRun({ ...testRun, state: index });
             }}
-            label="template"
+            label="status"
             className="mt-3 max-w-xs"
           >
             {testRunStatus.map((state, index) => (
@@ -138,6 +158,36 @@ export default function RunEditor({ projectId, runId }: Props) {
             ))}
           </Select>
         </div>
+
+        <Divider className="my-6" />
+        <h6>Select test cases</h6>
+        <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">
+              {folders.map((folder, index) => (
+                <ListboxItem
+                  key={index}
+                  onClick={() => setSelectedFolder(folder)}
+                  startContent={
+                    <Folder size={20} color="#F7C24E" fill="#F7C24E" />
+                  }
+                  className={
+                    selectedFolder && folder.id === selectedFolder.id
+                      ? selectedClass
+                      : baseClass
+                  }
+                >
+                  {folder.name}
+                </ListboxItem>
+              ))}
+            </Listbox>
+          </div>
+          <div className="">
+            {testcases.map((testcase, index) => (
+              <div key={index}>{testcase.title}</div>
+            ))}
+          </div>
+        </div>
       </div>
     </>
   );