From 1255bb138a5c4d4d36868cfad20f10ca9df481c8 Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Wed, 13 Nov 2024 17:41:25 +0800
Subject: [PATCH 1/7] feat: update frontend ui for crud testcases

---
 apps/frontend/src/app/question/page.tsx | 132 ++++++++++++++++++++++--
 1 file changed, 126 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/app/question/page.tsx b/apps/frontend/src/app/question/page.tsx
index cb88d0bf3f..a65f3e5097 100644
--- a/apps/frontend/src/app/question/page.tsx
+++ b/apps/frontend/src/app/question/page.tsx
@@ -14,12 +14,17 @@ import {
   Tag,
   Modal,
   Form,
+  Tabs,
+  Checkbox,
+  Tooltip,
+  Card,
 } from "antd";
 import { Content } from "antd/es/layout/layout";
 import {
   DeleteOutlined,
   EditOutlined,
   PlusCircleOutlined,
+  PlusOutlined,
   SearchOutlined,
 } from "@ant-design/icons";
 import "./styles.scss";
@@ -40,6 +45,7 @@ import {
 import Link from "next/link";
 import TextArea from "antd/es/input/TextArea";
 import { ValidateUser, VerifyTokenResponseType } from "../services/user";
+import TabPane from "antd/es/tabs/TabPane";
 
 /**
  * defines the State of the page whe a user is deleing an object. Has 3 general states:
@@ -120,10 +126,9 @@ export default function QuestionListPage() {
   const [isAdmin, setIsAdmin] = useState<boolean | undefined>(undefined);
 
   useLayoutEffect(() => {
-    ValidateUser()
-      .then((data: VerifyTokenResponseType) => {
-        setIsAdmin(data.data.isAdmin);
-      })
+    ValidateUser().then((data: VerifyTokenResponseType) => {
+      setIsAdmin(data.data.isAdmin);
+    });
   }, []);
 
   const handleEditClick = (index: number, question: Question) => {
@@ -248,6 +253,34 @@ export default function QuestionListPage() {
     return () => clearTimeout(timeout);
   }, [search]);
 
+  const [visibleTests, setVisibleTests] = useState<any>([
+    { key: "1", title: "Visible Test 1" },
+  ]);
+  const [hiddenTests, setHiddenTests] = useState<any>([]); // FIXME: fix the type!!
+  const [tabIndex, setTabIndex] = useState(2);
+
+  const handleAddVisibleTest = () => {
+    const newKey = `${Date.now()}`; // Use unique timestamp as key
+    setVisibleTests([...visibleTests, { key: newKey }]);
+  };
+
+  const handleAddHiddenTest = () => {
+    const newKey = `${Date.now()}`; // Use unique timestamp as key
+    setHiddenTests([...hiddenTests, { key: newKey }]);
+  };
+
+  const handleRemoveVisibleTest = (targetKey: string) => {
+    if (visibleTests.length > 1) {
+      setVisibleTests(
+        visibleTests.filter((test: any) => test.key !== targetKey)
+      );
+    }
+  };
+
+  const handleRemoveHiddenTest = (targetKey: string) => {
+    setHiddenTests(hiddenTests.filter((test: any) => test.key !== targetKey));
+  };
+
   // Table column specification
   var columns: TableProps<Question>["columns"];
   if (isAdmin) {
@@ -343,7 +376,7 @@ export default function QuestionListPage() {
                     },
                   ]}
                 >
-                  <TextArea name="description" />
+                  <TextArea name="description" rows={12} />
                 </Form.Item>
                 <Form.Item
                   name="complexity"
@@ -395,6 +428,93 @@ export default function QuestionListPage() {
                     allowClear
                   />
                 </Form.Item>
+                <Tabs defaultActiveKey="1">
+                  {/* Visible Tests Tab */}
+                  <TabPane tab="Visible Testcases" key="1">
+                    <Tabs
+                      type="editable-card"
+                      onEdit={(targetKey, action) =>
+                        action === "add"
+                          ? handleAddVisibleTest()
+                          : handleRemoveVisibleTest(targetKey.toString())
+                      }
+                    >
+                      {visibleTests.map((test: any, index: number) => (
+                        <TabPane
+                          tab={`Test ${index + 1}`} // Dynamic numbering based on index
+                          key={test.key}
+                          closable={visibleTests.length > 1} // Restrict removing if only one visible test
+                        >
+                          <Form.Item
+                            label="Input"
+                            name={`input_${test.key}`}
+                            rules={[
+                              {
+                                required: true,
+                                message: "Please enter input value",
+                              },
+                            ]}
+                          >
+                            <Input placeholder="Input" />
+                          </Form.Item>
+                          <Form.Item
+                            label="Output"
+                            name={`output_${test.key}`}
+                            rules={[
+                              {
+                                required: true,
+                                message: "Please enter output value",
+                              },
+                            ]}
+                          >
+                            <Input placeholder="Output" />
+                          </Form.Item>
+                        </TabPane>
+                      ))}
+                    </Tabs>
+                  </TabPane>
+
+                  {/* Hidden Tests Tab */}
+                  <TabPane tab="Hidden Testcases" key="2">
+                    <Tabs
+                      type="editable-card"
+                      onEdit={(targetKey, action) =>
+                        action === "add"
+                          ? handleAddHiddenTest()
+                          : handleRemoveHiddenTest(targetKey.toString())
+                      }
+                    >
+                      {hiddenTests.map((test: any, index: number) => (
+                        <TabPane tab={`Test ${index + 1}`} key={test.key}>
+                          <Form.Item
+                            label="Input"
+                            name={`input_${test.key}`}
+                            rules={[
+                              {
+                                required: true,
+                                message: "Please enter input value",
+                              },
+                            ]}
+                          >
+                            <Input placeholder="Input" />
+                          </Form.Item>
+                          <Form.Item
+                            label="Output"
+                            name={`output_${test.key}`}
+                            rules={[
+                              {
+                                required: true,
+                                message: "Please enter output value",
+                              },
+                            ]}
+                          >
+                            <Input placeholder="Output" />
+                          </Form.Item>
+                        </TabPane>
+                      ))}
+                    </Tabs>
+                  </TabPane>
+                </Tabs>
                 <Form.Item
                   style={{ display: "flex", justifyContent: "flex-end" }}
                 >
@@ -596,7 +716,7 @@ export default function QuestionListPage() {
                           },
                         ]}
                       >
-                        <TextArea name="description" />
+                        <TextArea name="description" rows={12} />
                       </Form.Item>
                       <Form.Item
                         name="complexity"

From 4243ae9f3df9a9d429f77dbd98d52360ab020362 Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Wed, 13 Nov 2024 21:36:37 +0800
Subject: [PATCH 2/7] feat(frontend): add fetch functions for testcases

---
 apps/frontend/src/app/services/execute.ts | 243 ++++++++++++++--------
 1 file changed, 160 insertions(+), 83 deletions(-)

diff --git a/apps/frontend/src/app/services/execute.ts b/apps/frontend/src/app/services/execute.ts
index 12c950bd6b..cc10b6f55e 100644
--- a/apps/frontend/src/app/services/execute.ts
+++ b/apps/frontend/src/app/services/execute.ts
@@ -1,126 +1,203 @@
 const EXECUTION_SERVICE_URL = process.env.NEXT_PUBLIC_EXECUTION_SERVICE_URL;
 
 export interface TestData {
-    input: string
-    expected: string
+  input: string;
+  expected: string;
 }
 
 export interface TestResult {
-    input: string
-    expected: string
-    actual: string
-    passed: boolean
-    error: string
+  input: string;
+  expected: string;
+  actual: string;
+  passed: boolean;
+  error: string;
 }
 
-export type Test = TestResult | TestData
+export type Test = TestResult | TestData;
 
 export const isTestResult = (test: Test): test is TestResult => {
-    return 'actual' in test && 'passed' in test && 'error' in test;
+  return "actual" in test && "passed" in test && "error" in test;
 };
 
 export interface GeneralTestResults {
-    passed: number;
-    total: number;
+  passed: number;
+  total: number;
 }
 
 export interface SubmissionHiddenTestResultsAndStatus {
-    hiddenTestResults: GeneralTestResults;
-    status: string;
+  hiddenTestResults: GeneralTestResults;
+  status: string;
 }
 
-export interface SubmissionResults extends SubmissionHiddenTestResultsAndStatus {
-    visibleTestResults: TestResult[];
+export interface SubmissionResults
+  extends SubmissionHiddenTestResultsAndStatus {
+  visibleTestResults: TestResult[];
 }
 
 export interface ExecutionResults {
-    visibleTestResults: TestResult[];
-    customTestResults: TestResult[];
+  visibleTestResults: TestResult[];
+  customTestResults: TestResult[];
 }
 
 export interface Code {
-    code: string;
-    language: string;
-    customTestCases: string;
+  code: string;
+  language: string;
+  customTestCases: string;
 }
 
 export interface Submission {
-    title: string
-    code: string
-    language: string
-    user: string
-    matchedUser: string
-    matchedTopics: string[]
-    questionDifficulty: string
-    questionTopics: string[]
+  title: string;
+  code: string;
+  language: string;
+  user: string;
+  matchedUser: string;
+  matchedTopics: string[];
+  questionDifficulty: string;
+  questionTopics: string[];
 }
 
 export const GetVisibleTests = async (
-    questionDocRefId: string,
+  questionDocRefId: string
 ): Promise<TestData[]> => {
-    const response = await fetch(
-        `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}`,
-        {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        }
-    );
-
-    if (response.status === 200) {
-        return response.json();
-    } else {
-        throw new Error(
-            `Error fetching test cases: ${response.status} ${response.statusText}`
-        );
+  const response = await fetch(
+    `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
     }
-}
+  );
+
+  if (response.status === 200) {
+    return response.json();
+  } else {
+    throw new Error(
+      `Error fetching test cases: ${response.status} ${response.statusText}`
+    );
+  }
+};
 
 export const ExecuteVisibleAndCustomTests = async (
-    questionDocRefId: string,
-    code: Code,
+  questionDocRefId: string,
+  code: Code
 ): Promise<ExecutionResults> => {
-    const response = await fetch(
-        `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}/execute`,
-        {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify(code),
-        }
+  const response = await fetch(
+    `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}/execute`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(code),
+    }
+  );
+
+  if (response.status === 200) {
+    return response.json();
+  } else {
+    throw new Error(
+      `Error executing code: ${response.status} ${response.statusText}`
     );
+  }
+};
 
-    if (response.status === 200) {
-        return response.json();
-    } else {
-        throw new Error(
-            `Error executing code: ${response.status} ${response.statusText}`
-        );
+export const ExecuteVisibleAndHiddenTestsAndSubmit = async (
+  questionDocRefId: string,
+  collaboration: Submission
+): Promise<SubmissionResults> => {
+  const response = await fetch(
+    `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}/submit`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(collaboration),
     }
-}
+  );
 
-export const ExecuteVisibleAndHiddenTestsAndSubmit = async (
-    questionDocRefId: string,
-    collaboration: Submission,
+  if (response.status === 200) {
+    return response.json();
+  } else {
+    throw new Error(
+      `Error submitting code: ${response.status} ${response.statusText}`
+    );
+  }
+};
+
+export const CreateTestcases = async (
+  questionDocRefId: string,
+  questionTitle: string,
+  visibleTestcases: TestData[],
+  hiddenTestcases: TestData[]
 ): Promise<SubmissionResults> => {
-    const response = await fetch(
-        `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}/submit`,
-        {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify(collaboration),
-        }
+  const response = await fetch(`${EXECUTION_SERVICE_URL}tests`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      questionDocRefId: questionDocRefId,
+      questionTitle: questionTitle,
+      visibleTestCases: visibleTestcases,
+      hiddenTestCases: hiddenTestcases,
+    }),
+  });
+
+  if (response.ok) {
+    return response.json();
+  } else {
+    throw new Error(
+      `Error creating testcases: ${response.status} ${response.statusText}`
     );
+  }
+};
 
-    if (response.status === 200) {
-        return response.json();
-    } else {
-        throw new Error(
-            `Error submitting code: ${response.status} ${response.statusText}`
-        );
+export const UpdateTestcases = async (
+  questionDocRefId: string,
+  visibleTestcases: TestData[],
+  hiddenTestcases: TestData[]
+): Promise<SubmissionResults> => {
+  const response = await fetch(
+    `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        visibleTestCases: visibleTestcases,
+        hiddenTestCases: hiddenTestcases,
+      }),
     }
-}
+  );
+
+  if (response.ok) {
+    return response.json();
+  } else {
+    throw new Error(
+      `Error updating testcases: ${response.status} ${response.statusText}`
+    );
+  }
+};
+
+export const DeleteTestcases = async (
+  questionDocRefId: string
+): Promise<void> => {
+  const response = await fetch(
+    `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Error deleting testcases: ${response.status} ${response.statusText}`
+    );
+  }
+};

From ed24f5a62878069989e4db8bc88e25ec74dbcb6f Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Wed, 13 Nov 2024 22:01:45 +0800
Subject: [PATCH 3/7] feat: add read for hidden tests

---
 apps/execution-service/handlers/readhidden.go | 56 +++++++++++++++++++
 apps/execution-service/main.go                |  1 +
 2 files changed, 57 insertions(+)
 create mode 100644 apps/execution-service/handlers/readhidden.go

diff --git a/apps/execution-service/handlers/readhidden.go b/apps/execution-service/handlers/readhidden.go
new file mode 100644
index 0000000000..6c8a493530
--- /dev/null
+++ b/apps/execution-service/handlers/readhidden.go
@@ -0,0 +1,56 @@
+package handlers
+
+import (
+	"encoding/json"
+	"execution-service/models"
+	"execution-service/utils"
+	"net/http"
+
+	"github.com/go-chi/chi/v5"
+	"google.golang.org/api/iterator"
+)
+
+func (s *Service) ReadHiddenTests(w http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	questionDocRefId := chi.URLParam(r, "questionDocRefId")
+	if questionDocRefId == "" {
+		http.Error(w, "questionDocRefId is required", http.StatusBadRequest)
+		return
+	}
+
+	iter := s.Client.Collection("tests").Where("questionDocRefId", "==", questionDocRefId).Limit(1).Documents(ctx)
+	doc, err := iter.Next()
+	if err != nil {
+		if err == iterator.Done {
+			http.Error(w, "Test not found", http.StatusNotFound)
+			return
+		}
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+	defer iter.Stop()
+
+	var test models.Test
+	if err := doc.DataTo(&test); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	_, hiddenTestCases, err := utils.GetTestLengthAndUnexecutedCases(test.HiddenTestCases)
+
+	var hiddenTests []models.HiddenTest
+	for _, hiddenTestCase := range hiddenTestCases {
+		hiddenTests = append(hiddenTests, models.HiddenTest{
+			Input:    hiddenTestCase.Input,
+			Expected: hiddenTestCase.Expected,
+		})
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(hiddenTests)
+}
+
+//curl -X GET http://localhost:8083/tests/bmzFyLMeSOoYU99pi4yZ/ \
+//-H "Content-Type: application/json"
diff --git a/apps/execution-service/main.go b/apps/execution-service/main.go
index df0dab53b2..dcccef77a7 100644
--- a/apps/execution-service/main.go
+++ b/apps/execution-service/main.go
@@ -93,6 +93,7 @@ func registerRoutes(r *chi.Mux, service *handlers.Service) {
 			r.Put("/", service.UpdateTest)
 			r.Delete("/", service.DeleteTest)
 			r.Get("/", service.ReadVisibleTests)
+			r.Get("/hidden", service.ReadHiddenTests)
 			r.Post("/execute", service.ExecuteVisibleAndCustomTests)
 			r.Post("/submit", service.ExecuteVisibleAndHiddenTestsAndSubmit)
 		})

From f14b98d73f66b6bcf0887255c3b55aba6f1e0b50 Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Wed, 13 Nov 2024 22:08:09 +0800
Subject: [PATCH 4/7] feat(execution): fetch all tests for a qn

---
 .../handlers/{readhidden.go => readall.go}    | 19 +++++++++++++++++--
 .../handlers/{read.go => readvisible.go}      |  0
 apps/execution-service/main.go                |  2 +-
 apps/execution-service/models/visibleTest.go  | 10 ++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)
 rename apps/execution-service/handlers/{readhidden.go => readall.go} (71%)
 rename apps/execution-service/handlers/{read.go => readvisible.go} (100%)

diff --git a/apps/execution-service/handlers/readhidden.go b/apps/execution-service/handlers/readall.go
similarity index 71%
rename from apps/execution-service/handlers/readhidden.go
rename to apps/execution-service/handlers/readall.go
index 6c8a493530..4b622d5294 100644
--- a/apps/execution-service/handlers/readhidden.go
+++ b/apps/execution-service/handlers/readall.go
@@ -10,7 +10,7 @@ import (
 	"google.golang.org/api/iterator"
 )
 
-func (s *Service) ReadHiddenTests(w http.ResponseWriter, r *http.Request) {
+func (s *Service) ReadAllTests(w http.ResponseWriter, r *http.Request) {
 	ctx := r.Context()
 
 	questionDocRefId := chi.URLParam(r, "questionDocRefId")
@@ -47,9 +47,24 @@ func (s *Service) ReadHiddenTests(w http.ResponseWriter, r *http.Request) {
 		})
 	}
 
+	_, visibleTestCases, err := utils.GetTestLengthAndUnexecutedCases(test.VisibleTestCases)
+
+	var visibleTests []models.VisibleTest
+	for _, visibleTestCase := range visibleTestCases {
+		visibleTests = append(visibleTests, models.VisibleTest{
+			Input:    visibleTestCase.Input,
+			Expected: visibleTestCase.Expected,
+		})
+	}
+
+	allTests := models.AllTests{
+		VisibleTests: visibleTests,
+		HiddenTests:  hiddenTests,
+	}
+
 	w.Header().Set("Content-Type", "application/json")
 	w.WriteHeader(http.StatusOK)
-	json.NewEncoder(w).Encode(hiddenTests)
+	json.NewEncoder(w).Encode(allTests)
 }
 
 //curl -X GET http://localhost:8083/tests/bmzFyLMeSOoYU99pi4yZ/ \
diff --git a/apps/execution-service/handlers/read.go b/apps/execution-service/handlers/readvisible.go
similarity index 100%
rename from apps/execution-service/handlers/read.go
rename to apps/execution-service/handlers/readvisible.go
diff --git a/apps/execution-service/main.go b/apps/execution-service/main.go
index dcccef77a7..7bf004153f 100644
--- a/apps/execution-service/main.go
+++ b/apps/execution-service/main.go
@@ -93,7 +93,7 @@ func registerRoutes(r *chi.Mux, service *handlers.Service) {
 			r.Put("/", service.UpdateTest)
 			r.Delete("/", service.DeleteTest)
 			r.Get("/", service.ReadVisibleTests)
-			r.Get("/hidden", service.ReadHiddenTests)
+			r.Get("/readall", service.ReadAllTests)
 			r.Post("/execute", service.ExecuteVisibleAndCustomTests)
 			r.Post("/submit", service.ExecuteVisibleAndHiddenTestsAndSubmit)
 		})
diff --git a/apps/execution-service/models/visibleTest.go b/apps/execution-service/models/visibleTest.go
index 39c2bf48cb..2386df5dd2 100644
--- a/apps/execution-service/models/visibleTest.go
+++ b/apps/execution-service/models/visibleTest.go
@@ -4,3 +4,13 @@ type VisibleTest struct {
 	Input    string `json:"input"`
 	Expected string `json:"expected"`
 }
+
+type HiddenTest struct {
+	Input    string `json:"input"`
+	Expected string `json:"expected"`
+}
+
+type AllTests struct {
+	VisibleTests []VisibleTest `json:"visibleTests"`
+	HiddenTests  []HiddenTest  `json:"hiddenTests"`
+}

From 983d9ae98ffeac4322bfb73d6a006bff676dac46 Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Thu, 14 Nov 2024 00:31:16 +0800
Subject: [PATCH 5/7] feat: link with backend

---
 apps/frontend/package.json                |   3 +-
 apps/frontend/pnpm-lock.yaml              |  27 +-
 apps/frontend/src/app/question/page.tsx   | 358 ++++++++++++++++++++--
 apps/frontend/src/app/services/execute.ts |  45 ++-
 4 files changed, 388 insertions(+), 45 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 792fc18474..517787304d 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -32,15 +32,16 @@
     "react-use-websocket": "^4.9.0",
     "sass": "^1.79.2",
     "typeface-montserrat": "^1.1.13",
+    "uuid": "^11.0.3",
     "y-codemirror.next": "^0.3.5",
     "y-webrtc": "^10.3.0",
     "yjs": "^13.6.20"
   },
   "devDependencies": {
-    "@types/codemirror": "^5.60.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@types/codemirror": "^5.60.15",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
     "@types/peerjs": "^1.1.0",
diff --git a/apps/frontend/pnpm-lock.yaml b/apps/frontend/pnpm-lock.yaml
index 413f0c29e3..fec069f7da 100644
--- a/apps/frontend/pnpm-lock.yaml
+++ b/apps/frontend/pnpm-lock.yaml
@@ -74,6 +74,9 @@ importers:
       typeface-montserrat:
         specifier: ^1.1.13
         version: 1.1.13
+      uuid:
+        specifier: ^11.0.3
+        version: 11.0.3
       y-codemirror.next:
         specifier: ^0.3.5
         version: 0.3.5(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(yjs@13.6.20)
@@ -3078,6 +3081,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
@@ -4876,8 +4883,8 @@ snapshots:
       '@typescript-eslint/parser': 8.8.0(eslint@8.0.0)(typescript@5.0.2)
       eslint: 8.0.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.0.0)
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.0.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.0.0)
       eslint-plugin-react: 7.37.1(eslint@8.0.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.0.0)
@@ -4896,37 +4903,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.0.0):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
       eslint: 8.0.0
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.0.0))(eslint@8.0.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.0.0)
+      eslint-plugin-import: 2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.0.0))(eslint@8.0.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.8.0(eslint@8.0.0)(typescript@5.0.2)
       eslint: 8.0.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.0.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.0.0):
+  eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -4937,7 +4944,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.0.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.0.0))(eslint@8.0.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@8.8.0(eslint@8.0.0)(typescript@5.0.2))(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -6968,6 +6975,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.0.3: {}
+
   v8-compile-cache-lib@3.0.1: {}
 
   v8-compile-cache@2.4.0: {}
diff --git a/apps/frontend/src/app/question/page.tsx b/apps/frontend/src/app/question/page.tsx
index a65f3e5097..17bc2705c0 100644
--- a/apps/frontend/src/app/question/page.tsx
+++ b/apps/frontend/src/app/question/page.tsx
@@ -46,6 +46,14 @@ import Link from "next/link";
 import TextArea from "antd/es/input/TextArea";
 import { ValidateUser, VerifyTokenResponseType } from "../services/user";
 import TabPane from "antd/es/tabs/TabPane";
+import {
+  CreateTestcases,
+  DeleteTestcases,
+  ReadAllTestcases,
+  TestData,
+  UpdateTestcases,
+} from "../services/execute";
+import { v4 as uuidv4 } from "uuid";
 
 /**
  * defines the State of the page whe a user is deleing an object. Has 3 general states:
@@ -55,6 +63,10 @@ import TabPane from "antd/es/tabs/TabPane";
  */
 type DeletionStage = {} | { index: Question; deleteConfirmed: boolean };
 
+type Test = TestData & {
+  key?: string;
+};
+
 function DeleteModal({
   isDeleting,
   questionTitle,
@@ -132,6 +144,8 @@ export default function QuestionListPage() {
   }, []);
 
   const handleEditClick = (index: number, question: Question) => {
+    fetchTestsForQuestion(question.docRefId);
+
     // Open the modal for the specific question
     const updatedModals =
       isEditModalOpen && isEditModalOpen.map((_, idx) => idx === index);
@@ -161,7 +175,18 @@ export default function QuestionListPage() {
     docRefId: string
   ) => {
     try {
-      const editedQuestion = await EditQuestion(values, docRefId);
+      const editedQuestion = await EditQuestion(
+        {
+          title: values.title,
+          description: values.description,
+          categories: values.categories,
+          complexity: values.complexity,
+        },
+        docRefId
+      );
+
+      await UpdateTestcases(docRefId, visibleTests, hiddenTests);
+
       // Reset form or update UI as needed
       handleModalClose(index);
       editForm.resetFields();
@@ -174,7 +199,20 @@ export default function QuestionListPage() {
 
   const handleCreateQuestion = async (values: NewQuestion) => {
     try {
-      const createdQuestion = await CreateQuestion(values);
+      const createdQuestion = await CreateQuestion({
+        title: values.title,
+        description: values.description,
+        categories: values.categories,
+        complexity: values.complexity,
+      });
+
+      await CreateTestcases(
+        createdQuestion.docRefId,
+        createdQuestion.title,
+        visibleTests,
+        hiddenTests
+      );
+
       // Reset form or update UI as needed
       setIsNewProblemModelOpen(false);
       form.resetFields();
@@ -186,6 +224,8 @@ export default function QuestionListPage() {
   };
 
   const showNewProblemModal = () => {
+    setVisibleTests([{ key: uuidv4(), input: "", expected: "" }]);
+    setHiddenTests([]);
     setIsNewProblemModelOpen(true);
   };
 
@@ -253,34 +293,89 @@ export default function QuestionListPage() {
     return () => clearTimeout(timeout);
   }, [search]);
 
-  const [visibleTests, setVisibleTests] = useState<any>([
-    { key: "1", title: "Visible Test 1" },
-  ]);
-  const [hiddenTests, setHiddenTests] = useState<any>([]); // FIXME: fix the type!!
-  const [tabIndex, setTabIndex] = useState(2);
+  const [visibleTests, setVisibleTests] = useState<Test[]>([]);
+  const [hiddenTests, setHiddenTests] = useState<Test[]>([]);
 
   const handleAddVisibleTest = () => {
-    const newKey = `${Date.now()}`; // Use unique timestamp as key
-    setVisibleTests([...visibleTests, { key: newKey }]);
+    const newKey = uuidv4();
+    setVisibleTests([
+      ...visibleTests,
+      { key: newKey, input: "", expected: "" },
+    ]);
   };
 
   const handleAddHiddenTest = () => {
-    const newKey = `${Date.now()}`; // Use unique timestamp as key
-    setHiddenTests([...hiddenTests, { key: newKey }]);
+    const newKey = uuidv4();
+    setHiddenTests([...hiddenTests, { key: newKey, input: "", expected: "" }]);
   };
 
   const handleRemoveVisibleTest = (targetKey: string) => {
     if (visibleTests.length > 1) {
       setVisibleTests(
-        visibleTests.filter((test: any) => test.key !== targetKey)
+        visibleTests.filter((test: Test) => test.key !== targetKey)
       );
     }
   };
 
   const handleRemoveHiddenTest = (targetKey: string) => {
-    setHiddenTests(hiddenTests.filter((test: any) => test.key !== targetKey));
+    setHiddenTests(hiddenTests.filter((test: Test) => test.key !== targetKey));
   };
 
+  const handleTestChange = (
+    type: string,
+    index: number,
+    input?: string,
+    expected?: string
+  ) => {
+    // Determine which array to update based on the type (visible or hidden)
+    if (type === "visible") {
+      const updatedTests = [...visibleTests];
+      updatedTests[index].input = input ?? updatedTests[index].input;
+      updatedTests[index].expected = expected ?? updatedTests[index].expected;
+      setVisibleTests(updatedTests);
+    } else if (type === "hidden") {
+      const updatedTests = [...hiddenTests];
+      updatedTests[index].input = input ?? updatedTests[index].input;
+      updatedTests[index].expected = expected ?? updatedTests[index].expected;
+      setHiddenTests(updatedTests);
+    }
+  };
+
+  async function fetchTestsForQuestion(questionId: string) {
+    try {
+      const response = await ReadAllTestcases(questionId); // Replace with the actual API call to fetch tests
+      const { visibleTests, hiddenTests } = response;
+
+      // Add a unique key to each test
+      if (visibleTests) {
+        setVisibleTests(
+          visibleTests.map((test) => ({
+            ...test,
+            key: uuidv4(),
+          }))
+        );
+      }
+      if (hiddenTests) {
+        setHiddenTests(
+          hiddenTests.map((test) => ({
+            ...test,
+            key: uuidv4(),
+          }))
+        );
+      }
+    } catch (err) {
+      error("Error fetching tests for question.");
+    }
+  }
+
+  async function deleteTestsByDocRefId(docRefId: string) {
+    try {
+      await DeleteTestcases(docRefId); // Replace with the actual API call
+    } catch (err) {
+      error("Error deleting tests associated with the question.");
+    }
+  }
+
   // Table column specification
   var columns: TableProps<Question>["columns"];
   if (isAdmin) {
@@ -430,7 +525,14 @@ export default function QuestionListPage() {
                 </Form.Item>
                 <Tabs defaultActiveKey="1">
                   {/* Visible Tests Tab */}
-                  <TabPane tab="Visible Testcases" key="1">
+                  <TabPane
+                    tab={
+                      <Tooltip title="There must be at least one visible testcase">
+                        Visible Testcases
+                      </Tooltip>
+                    }
+                    key="1"
+                  >
                     <Tabs
                       type="editable-card"
                       onEdit={(targetKey, action) =>
@@ -439,7 +541,7 @@ export default function QuestionListPage() {
                           : handleRemoveVisibleTest(targetKey.toString())
                       }
                     >
-                      {visibleTests.map((test: any, index: number) => (
+                      {visibleTests.map((test: Test, index: number) => (
                         <TabPane
                           tab={`Test ${index + 1}`} // Dynamic numbering based on index
                           key={test.key}
@@ -447,7 +549,7 @@ export default function QuestionListPage() {
                         >
                           <Form.Item
                             label="Input"
-                            name={`input_${test.key}`}
+                            name={`visible-input-${test.key}`}
                             rules={[
                               {
                                 required: true,
@@ -455,19 +557,41 @@ export default function QuestionListPage() {
                               },
                             ]}
                           >
-                            <Input placeholder="Input" />
+                            <Input
+                              placeholder="Input"
+                              value={test.input}
+                              onChange={(e) => {
+                                handleTestChange(
+                                  "visible",
+                                  index,
+                                  e.target.value,
+                                  undefined
+                                );
+                              }}
+                            />
                           </Form.Item>
                           <Form.Item
-                            label="Output"
-                            name={`output_${test.key}`}
+                            label="Expected"
+                            name={`visible-expected-${test.key}`}
                             rules={[
                               {
                                 required: true,
-                                message: "Please enter output value",
+                                message: "Please enter expected value",
                               },
                             ]}
                           >
-                            <Input placeholder="Output" />
+                            <Input
+                              placeholder="Expected"
+                              value={test.expected}
+                              onChange={(e) => {
+                                handleTestChange(
+                                  "visible",
+                                  index,
+                                  undefined,
+                                  e.target.value
+                                );
+                              }}
+                            />
                           </Form.Item>
                         </TabPane>
                       ))}
@@ -475,7 +599,14 @@ export default function QuestionListPage() {
                   </TabPane>
 
                   {/* Hidden Tests Tab */}
-                  <TabPane tab="Hidden Testcases" key="2">
+                  <TabPane
+                    tab={
+                      <Tooltip title="There can be any number of hidden testcases">
+                        Hidden Testcases
+                      </Tooltip>
+                    }
+                    key="2"
+                  >
                     <Tabs
                       type="editable-card"
                       onEdit={(targetKey, action) =>
@@ -484,11 +615,11 @@ export default function QuestionListPage() {
                           : handleRemoveHiddenTest(targetKey.toString())
                       }
                     >
-                      {hiddenTests.map((test: any, index: number) => (
+                      {hiddenTests.map((test: Test, index: number) => (
                         <TabPane tab={`Test ${index + 1}`} key={test.key}>
                           <Form.Item
                             label="Input"
-                            name={`input_${test.key}`}
+                            name={`hidden-input-${test.key}`}
                             rules={[
                               {
                                 required: true,
@@ -496,19 +627,41 @@ export default function QuestionListPage() {
                               },
                             ]}
                           >
-                            <Input placeholder="Input" />
+                            <Input
+                              placeholder="Input"
+                              value={test.input}
+                              onChange={(e) => {
+                                handleTestChange(
+                                  "hidden",
+                                  index,
+                                  e.target.value,
+                                  undefined
+                                );
+                              }}
+                            />
                           </Form.Item>
                           <Form.Item
-                            label="Output"
-                            name={`output_${test.key}`}
+                            label="Expected"
+                            name={`hidden-expected-${test.key}`}
                             rules={[
                               {
                                 required: true,
-                                message: "Please enter output value",
+                                message: "Please enter expected value",
                               },
                             ]}
                           >
-                            <Input placeholder="Output" />
+                            <Input
+                              placeholder="Expected"
+                              value={test.expected}
+                              onChange={(e) => {
+                                handleTestChange(
+                                  "hidden",
+                                  index,
+                                  undefined,
+                                  e.target.value
+                                );
+                              }}
+                            />
                           </Form.Item>
                         </TabPane>
                       ))}
@@ -639,6 +792,7 @@ export default function QuestionListPage() {
 
     setDeletionStage({ index: deletionStage.index, deleteConfirmed: true });
     await DeleteQuestionByDocref(deletionStage.index.docRefId);
+    await deleteTestsByDocRefId(deletionStage.index.docRefId);
     if (questions.length == 1 && currentPage > 1) {
       setCurrentPage(currentPage - 1);
       success("Question deleted successfully");
@@ -768,6 +922,152 @@ export default function QuestionListPage() {
                           allowClear
                         />
                       </Form.Item>
+                      {/* REFACTOR: should abstract out tabs to a common component for reusability */}
+                      <Tabs defaultActiveKey="1">
+                        {/* Visible Tests Tab */}
+                        <TabPane
+                          tab={
+                            <Tooltip title="There must be at least one visible testcase">
+                              Visible Testcases
+                            </Tooltip>
+                          }
+                          key="1"
+                        >
+                          <Tabs
+                            type="editable-card"
+                            onEdit={(targetKey, action) =>
+                              action === "add"
+                                ? handleAddVisibleTest()
+                                : handleRemoveVisibleTest(targetKey.toString())
+                            }
+                          >
+                            {visibleTests.map((test: Test, index: number) => (
+                              <TabPane
+                                tab={`Test ${index + 1}`} // Dynamic numbering based on index
+                                key={test.key}
+                                closable={visibleTests.length > 1} // Restrict removing if only one visible test
+                              >
+                                <Form.Item
+                                  label="Input"
+                                  name={`visible-input-${test.key}`}
+                                  rules={[
+                                    {
+                                      required: true,
+                                      message: "Please enter input value",
+                                    },
+                                  ]}
+                                >
+                                  <Input
+                                    placeholder="Input"
+                                    value={test.input}
+                                    onChange={(e) => {
+                                      handleTestChange(
+                                        "visible",
+                                        index,
+                                        e.target.value,
+                                        undefined
+                                      );
+                                    }}
+                                  />
+                                </Form.Item>
+                                <Form.Item
+                                  label="Expected"
+                                  name={`visible-expected-${test.key}`}
+                                  rules={[
+                                    {
+                                      required: true,
+                                      message: "Please enter expected value",
+                                    },
+                                  ]}
+                                >
+                                  <Input
+                                    placeholder="Expected"
+                                    value={test.expected}
+                                    onChange={(e) => {
+                                      handleTestChange(
+                                        "visible",
+                                        index,
+                                        undefined,
+                                        e.target.value
+                                      );
+                                    }}
+                                  />
+                                </Form.Item>
+                              </TabPane>
+                            ))}
+                          </Tabs>
+                        </TabPane>
+
+                        {/* Hidden Tests Tab */}
+                        <TabPane
+                          tab={
+                            <Tooltip title="There can be any number of hidden testcases">
+                              Hidden Testcases
+                            </Tooltip>
+                          }
+                          key="2"
+                        >
+                          <Tabs
+                            type="editable-card"
+                            onEdit={(targetKey, action) =>
+                              action === "add"
+                                ? handleAddHiddenTest()
+                                : handleRemoveHiddenTest(targetKey.toString())
+                            }
+                          >
+                            {hiddenTests.map((test: Test, index: number) => (
+                              <TabPane tab={`Test ${index + 1}`} key={test.key}>
+                                <Form.Item
+                                  label="Input"
+                                  name={`hidden-input-${test.key}`}
+                                  rules={[
+                                    {
+                                      required: true,
+                                      message: "Please enter input value",
+                                    },
+                                  ]}
+                                >
+                                  <Input
+                                    placeholder="Input"
+                                    value={test.input}
+                                    onChange={(e) => {
+                                      handleTestChange(
+                                        "hidden",
+                                        index,
+                                        e.target.value,
+                                        undefined
+                                      );
+                                    }}
+                                  />
+                                </Form.Item>
+                                <Form.Item
+                                  label="Expected"
+                                  name={`hidden-expected-${test.key}`}
+                                  rules={[
+                                    {
+                                      required: true,
+                                      message: "Please enter expected value",
+                                    },
+                                  ]}
+                                >
+                                  <Input
+                                    placeholder="Expected"
+                                    value={test.expected}
+                                    onChange={(e) => {
+                                      handleTestChange(
+                                        "hidden",
+                                        index,
+                                        undefined,
+                                        e.target.value
+                                      );
+                                    }}
+                                  />
+                                </Form.Item>
+                              </TabPane>
+                            ))}
+                          </Tabs>
+                        </TabPane>
+                      </Tabs>
                       <Form.Item
                         style={{ display: "flex", justifyContent: "flex-end" }}
                       >
diff --git a/apps/frontend/src/app/services/execute.ts b/apps/frontend/src/app/services/execute.ts
index cc10b6f55e..cde725feec 100644
--- a/apps/frontend/src/app/services/execute.ts
+++ b/apps/frontend/src/app/services/execute.ts
@@ -13,12 +13,23 @@ export interface TestResult {
   error: string;
 }
 
+export interface AllTests {
+  visibleTests: TestData[];
+  hiddenTests: TestData[];
+}
+
 export type Test = TestResult | TestData;
 
 export const isTestResult = (test: Test): test is TestResult => {
   return "actual" in test && "passed" in test && "error" in test;
 };
 
+function parseTestcases(tests: Test[]) {
+  return tests.reduce((accum: string, t: Test) => {
+    return accum + t.input + "\n" + t.expected + "\n";
+  }, `${tests.length}\n`);
+}
+
 export interface GeneralTestResults {
   passed: number;
   total: number;
@@ -131,7 +142,7 @@ export const CreateTestcases = async (
   questionTitle: string,
   visibleTestcases: TestData[],
   hiddenTestcases: TestData[]
-): Promise<SubmissionResults> => {
+): Promise<any> => {
   const response = await fetch(`${EXECUTION_SERVICE_URL}tests`, {
     method: "POST",
     headers: {
@@ -140,8 +151,8 @@ export const CreateTestcases = async (
     body: JSON.stringify({
       questionDocRefId: questionDocRefId,
       questionTitle: questionTitle,
-      visibleTestCases: visibleTestcases,
-      hiddenTestCases: hiddenTestcases,
+      visibleTestCases: parseTestcases(visibleTestcases),
+      hiddenTestCases: parseTestcases(hiddenTestcases),
     }),
   });
 
@@ -154,11 +165,33 @@ export const CreateTestcases = async (
   }
 };
 
+export const ReadAllTestcases = async (
+  questionDocRefId: string
+): Promise<AllTests> => {
+  const response = await fetch(
+    `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}/readall`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+
+  if (response.ok) {
+    return response.json();
+  } else {
+    throw new Error(
+      `Error reading testcases: ${response.status} ${response.statusText}`
+    );
+  }
+};
+
 export const UpdateTestcases = async (
   questionDocRefId: string,
   visibleTestcases: TestData[],
   hiddenTestcases: TestData[]
-): Promise<SubmissionResults> => {
+): Promise<any> => {
   const response = await fetch(
     `${EXECUTION_SERVICE_URL}tests/${questionDocRefId}`,
     {
@@ -167,8 +200,8 @@ export const UpdateTestcases = async (
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        visibleTestCases: visibleTestcases,
-        hiddenTestCases: hiddenTestcases,
+        visibleTestCases: parseTestcases(visibleTestcases),
+        hiddenTestCases: parseTestcases(hiddenTestcases),
       }),
     }
   );

From dc6fc173eeeae6c05cd1015ec2299a56bcd7fed1 Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Thu, 14 Nov 2024 00:51:17 +0800
Subject: [PATCH 6/7] feat: add loading icon

---
 apps/frontend/src/app/question/page.tsx | 315 +++++++++++++-----------
 1 file changed, 167 insertions(+), 148 deletions(-)

diff --git a/apps/frontend/src/app/question/page.tsx b/apps/frontend/src/app/question/page.tsx
index 17bc2705c0..112dbed6b9 100644
--- a/apps/frontend/src/app/question/page.tsx
+++ b/apps/frontend/src/app/question/page.tsx
@@ -18,6 +18,7 @@ import {
   Checkbox,
   Tooltip,
   Card,
+  Spin,
 } from "antd";
 import { Content } from "antd/es/layout/layout";
 import {
@@ -293,8 +294,11 @@ export default function QuestionListPage() {
     return () => clearTimeout(timeout);
   }, [search]);
 
+  // Testcases
+
   const [visibleTests, setVisibleTests] = useState<Test[]>([]);
   const [hiddenTests, setHiddenTests] = useState<Test[]>([]);
+  const [isTestsLoading, setIsTestsLoading] = useState<boolean>(true);
 
   const handleAddVisibleTest = () => {
     const newKey = uuidv4();
@@ -342,38 +346,41 @@ export default function QuestionListPage() {
   };
 
   async function fetchTestsForQuestion(questionId: string) {
-    try {
-      const response = await ReadAllTestcases(questionId); // Replace with the actual API call to fetch tests
-      const { visibleTests, hiddenTests } = response;
+    setIsTestsLoading(true);
+    ReadAllTestcases(questionId)
+      .then((response) => {
+        const { visibleTests, hiddenTests } = response;
 
-      // Add a unique key to each test
-      if (visibleTests) {
-        setVisibleTests(
-          visibleTests.map((test) => ({
-            ...test,
-            key: uuidv4(),
-          }))
-        );
-      }
-      if (hiddenTests) {
-        setHiddenTests(
-          hiddenTests.map((test) => ({
-            ...test,
-            key: uuidv4(),
-          }))
-        );
-      }
-    } catch (err) {
-      error("Error fetching tests for question.");
-    }
+        // Add a unique key to each test
+        if (visibleTests) {
+          setVisibleTests(
+            visibleTests.map((test) => ({
+              ...test,
+              key: uuidv4(),
+            }))
+          );
+        }
+        if (hiddenTests) {
+          setHiddenTests(
+            hiddenTests.map((test) => ({
+              ...test,
+              key: uuidv4(),
+            }))
+          );
+        }
+      })
+      .catch((err) => {
+        error("Error fetching tests for question.");
+      })
+      .finally(() => {
+        setIsTestsLoading(false);
+      });
   }
 
   async function deleteTestsByDocRefId(docRefId: string) {
-    try {
-      await DeleteTestcases(docRefId); // Replace with the actual API call
-    } catch (err) {
+    await DeleteTestcases(docRefId).catch((e) => {
       error("Error deleting tests associated with the question.");
-    }
+    });
   }
 
   // Table column specification
@@ -533,69 +540,75 @@ export default function QuestionListPage() {
                     }
                     key="1"
                   >
-                    <Tabs
-                      type="editable-card"
-                      onEdit={(targetKey, action) =>
-                        action === "add"
-                          ? handleAddVisibleTest()
-                          : handleRemoveVisibleTest(targetKey.toString())
-                      }
-                    >
-                      {visibleTests.map((test: Test, index: number) => (
-                        <TabPane
-                          tab={`Test ${index + 1}`} // Dynamic numbering based on index
-                          key={test.key}
-                          closable={visibleTests.length > 1} // Restrict removing if only one visible test
-                        >
-                          <Form.Item
-                            label="Input"
-                            name={`visible-input-${test.key}`}
-                            rules={[
-                              {
-                                required: true,
-                                message: "Please enter input value",
-                              },
-                            ]}
-                          >
-                            <Input
-                              placeholder="Input"
-                              value={test.input}
-                              onChange={(e) => {
-                                handleTestChange(
-                                  "visible",
-                                  index,
-                                  e.target.value,
-                                  undefined
-                                );
-                              }}
-                            />
-                          </Form.Item>
-                          <Form.Item
-                            label="Expected"
-                            name={`visible-expected-${test.key}`}
-                            rules={[
-                              {
-                                required: true,
-                                message: "Please enter expected value",
-                              },
-                            ]}
+                    {isTestsLoading ? (
+                      <Spin style={{ justifySelf: "center" }} />
+                    ) : (
+                      <Tabs
+                        type="editable-card"
+                        onEdit={(targetKey, action) =>
+                          action === "add"
+                            ? handleAddVisibleTest()
+                            : handleRemoveVisibleTest(targetKey.toString())
+                        }
+                      >
+                        {visibleTests.map((test: Test, index: number) => (
+                          <TabPane
+                            tab={`Test ${index + 1}`} // Dynamic numbering based on index
+                            key={test.key}
+                            closable={visibleTests.length > 1} // Restrict removing if only one visible test
                           >
-                            <Input
-                              placeholder="Expected"
-                              value={test.expected}
-                              onChange={(e) => {
-                                handleTestChange(
-                                  "visible",
-                                  index,
-                                  undefined,
-                                  e.target.value
-                                );
-                              }}
-                            />
-                          </Form.Item>
-                        </TabPane>
-                      ))}
-                    </Tabs>
+                            <Form.Item
+                              label="Input"
+                              name={`visible-input-${test.key}`}
+                              initialValue={test.input}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: "Please enter input value",
+                                },
+                              ]}
+                            >
+                              <Input
+                                placeholder="Input"
+                                value={test.input}
+                                onChange={(e) => {
+                                  handleTestChange(
+                                    "visible",
+                                    index,
+                                    e.target.value,
+                                    undefined
+                                  );
+                                }}
+                              />
+                            </Form.Item>
+                            <Form.Item
+                              label="Expected"
+                              name={`visible-expected-${test.key}`}
+                              initialValue={test.expected}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: "Please enter expected value",
+                                },
+                              ]}
+                            >
+                              <Input
+                                placeholder="Expected"
+                                value={test.expected}
+                                onChange={(e) => {
+                                  handleTestChange(
+                                    "visible",
+                                    index,
+                                    undefined,
+                                    e.target.value
+                                  );
+                                }}
+                              />
+                            </Form.Item>
+                          </TabPane>
+                        ))}
+                      </Tabs>
+                    )}
                   </TabPane>
 
                   {/* Hidden Tests Tab */}
@@ -607,65 +620,71 @@ export default function QuestionListPage() {
                     }
                     key="2"
                   >
-                    <Tabs
-                      type="editable-card"
-                      onEdit={(targetKey, action) =>
-                        action === "add"
-                          ? handleAddHiddenTest()
-                          : handleRemoveHiddenTest(targetKey.toString())
-                      }
-                    >
-                      {hiddenTests.map((test: Test, index: number) => (
-                        <TabPane tab={`Test ${index + 1}`} key={test.key}>
-                          <Form.Item
-                            label="Input"
-                            name={`hidden-input-${test.key}`}
-                            rules={[
-                              {
-                                required: true,
-                                message: "Please enter input value",
-                              },
-                            ]}
-                          >
-                            <Input
-                              placeholder="Input"
-                              value={test.input}
-                              onChange={(e) => {
-                                handleTestChange(
-                                  "hidden",
-                                  index,
-                                  e.target.value,
-                                  undefined
-                                );
-                              }}
-                            />
-                          </Form.Item>
-                          <Form.Item
-                            label="Expected"
-                            name={`hidden-expected-${test.key}`}
-                            rules={[
-                              {
-                                required: true,
-                                message: "Please enter expected value",
-                              },
-                            ]}
-                          >
-                            <Input
-                              placeholder="Expected"
-                              value={test.expected}
-                              onChange={(e) => {
-                                handleTestChange(
-                                  "hidden",
-                                  index,
-                                  undefined,
-                                  e.target.value
-                                );
-                              }}
-                            />
-                          </Form.Item>
-                        </TabPane>
-                      ))}
-                    </Tabs>
+                    {isTestsLoading ? (
+                      <Spin />
+                    ) : (
+                      <Tabs
+                        type="editable-card"
+                        onEdit={(targetKey, action) =>
+                          action === "add"
+                            ? handleAddHiddenTest()
+                            : handleRemoveHiddenTest(targetKey.toString())
+                        }
+                      >
+                        {hiddenTests.map((test: Test, index: number) => (
+                          <TabPane tab={`Test ${index + 1}`} key={test.key}>
+                            <Form.Item
+                              label="Input"
+                              name={`hidden-input-${test.key}`}
+                              initialValue={test.input}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: "Please enter input value",
+                                },
+                              ]}
+                            >
+                              <Input
+                                placeholder="Input"
+                                value={test.input}
+                                onChange={(e) => {
+                                  handleTestChange(
+                                    "hidden",
+                                    index,
+                                    e.target.value,
+                                    undefined
+                                  );
+                                }}
+                              />
+                            </Form.Item>
+                            <Form.Item
+                              label="Expected"
+                              name={`hidden-expected-${test.key}`}
+                              initialValue={test.expected}
+                              rules={[
+                                {
+                                  required: true,
+                                  message: "Please enter expected value",
+                                },
+                              ]}
+                            >
+                              <Input
+                                placeholder="Expected"
+                                value={test.expected}
+                                onChange={(e) => {
+                                  handleTestChange(
+                                    "hidden",
+                                    index,
+                                    undefined,
+                                    e.target.value
+                                  );
+                                }}
+                              />
+                            </Form.Item>
+                          </TabPane>
+                        ))}
+                      </Tabs>
+                    )}
                   </TabPane>
                 </Tabs>
                 <Form.Item

From 1b8eddb4201186c80da702dd670949f99fd3a7b6 Mon Sep 17 00:00:00 2001
From: tituschewxj <tituschewxj@gmail.com>
Date: Thu, 14 Nov 2024 01:06:01 +0800
Subject: [PATCH 7/7] feat: use active key for tabs

---
 apps/frontend/src/app/question/page.tsx | 49 +++++++++++++++++++++----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/app/question/page.tsx b/apps/frontend/src/app/question/page.tsx
index 112dbed6b9..3e1e1048f0 100644
--- a/apps/frontend/src/app/question/page.tsx
+++ b/apps/frontend/src/app/question/page.tsx
@@ -299,6 +299,8 @@ export default function QuestionListPage() {
   const [visibleTests, setVisibleTests] = useState<Test[]>([]);
   const [hiddenTests, setHiddenTests] = useState<Test[]>([]);
   const [isTestsLoading, setIsTestsLoading] = useState<boolean>(true);
+  const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
+  const [testActiveKey, setTestActiveKey] = useState<string>("1");
 
   const handleAddVisibleTest = () => {
     const newKey = uuidv4();
@@ -306,11 +308,13 @@ export default function QuestionListPage() {
       ...visibleTests,
       { key: newKey, input: "", expected: "" },
     ]);
+    setActiveKey(newKey);
   };
 
   const handleAddHiddenTest = () => {
     const newKey = uuidv4();
     setHiddenTests([...hiddenTests, { key: newKey, input: "", expected: "" }]);
+    setActiveKey(newKey);
   };
 
   const handleRemoveVisibleTest = (targetKey: string) => {
@@ -353,12 +357,13 @@ export default function QuestionListPage() {
 
         // Add a unique key to each test
         if (visibleTests) {
-          setVisibleTests(
-            visibleTests.map((test) => ({
-              ...test,
-              key: uuidv4(),
-            }))
-          );
+          const keyedVisibleTests = visibleTests.map((test, index) => ({
+            ...test,
+            key: uuidv4(),
+          }));
+          setVisibleTests(keyedVisibleTests);
+          setActiveKey(keyedVisibleTests[0].key);
+          setTestActiveKey("1");
         }
         if (hiddenTests) {
           setHiddenTests(
@@ -530,7 +535,16 @@ export default function QuestionListPage() {
                     allowClear
                   />
                 </Form.Item>
-                <Tabs defaultActiveKey="1">
+                <Tabs
+                  defaultActiveKey="1"
+                  onChange={(key) => {
+                    setActiveKey(
+                      key == "1" ? visibleTests[0].key : hiddenTests[0]?.key
+                    );
+                    setTestActiveKey(key);
+                  }}
+                  activeKey={testActiveKey}
+                >
                   {/* Visible Tests Tab */}
                   <TabPane
                     tab={
@@ -550,6 +564,8 @@ export default function QuestionListPage() {
                             ? handleAddVisibleTest()
                             : handleRemoveVisibleTest(targetKey.toString())
                         }
+                        onChange={(key) => setActiveKey(key)}
+                        activeKey={activeKey}
                       >
                         {visibleTests.map((test: Test, index: number) => (
                           <TabPane
@@ -630,6 +646,8 @@ export default function QuestionListPage() {
                             ? handleAddHiddenTest()
                             : handleRemoveHiddenTest(targetKey.toString())
                         }
+                        onChange={(key) => setActiveKey(key)}
+                        activeKey={activeKey}
                       >
                         {hiddenTests.map((test: Test, index: number) => (
                           <TabPane tab={`Test ${index + 1}`} key={test.key}>
@@ -942,7 +960,18 @@ export default function QuestionListPage() {
                         />
                       </Form.Item>
                       {/* REFACTOR: should abstract out tabs to a common component for reusability */}
-                      <Tabs defaultActiveKey="1">
+                      <Tabs
+                        defaultActiveKey="1"
+                        onChange={(key) => {
+                          setActiveKey(
+                            key == "1"
+                              ? visibleTests[0].key
+                              : hiddenTests[0]?.key
+                          );
+                          setTestActiveKey(key);
+                        }}
+                        activeKey={testActiveKey}
+                      >
                         {/* Visible Tests Tab */}
                         <TabPane
                           tab={
@@ -959,6 +988,8 @@ export default function QuestionListPage() {
                                 ? handleAddVisibleTest()
                                 : handleRemoveVisibleTest(targetKey.toString())
                             }
+                            onChange={(key) => setActiveKey(key)}
+                            activeKey={activeKey}
                           >
                             {visibleTests.map((test: Test, index: number) => (
                               <TabPane
@@ -1033,6 +1064,8 @@ export default function QuestionListPage() {
                                 ? handleAddHiddenTest()
                                 : handleRemoveHiddenTest(targetKey.toString())
                             }
+                            onChange={(key) => setActiveKey(key)}
+                            activeKey={activeKey}
                           >
                             {hiddenTests.map((test: Test, index: number) => (
                               <TabPane tab={`Test ${index + 1}`} key={test.key}>