fix: init test cases when update test run

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

@@ -18,7 +18,7 @@ import {
   DropdownMenu,
   DropdownItem,
 } from '@nextui-org/react';
-import { Save, ArrowLeft, Folder, ChevronDown, CopyPlus, CopyMinus, RotateCw } from 'lucide-react';
+import { Save, Circle, ArrowLeft, Folder, ChevronDown, CopyPlus, CopyMinus, RotateCw } from 'lucide-react';
 import RunProgressChart from './RunPregressDonutChart';
 import TestCaseSelector from './TestCaseSelector';
 import { testRunStatus } from '@/config/selection';
@@ -94,6 +94,16 @@ export default function RunEditor({
     setRunStatusCounts(statusCounts);
   };
 
+  const initTestCases = async () => {
+    const casesData = await fetchProjectCases(context.token.access_token, Number(projectId));
+    casesData.forEach((testCase: CaseType) => {
+      if (testCase.RunCases && testCase.RunCases.length > 0) {
+        testCase.RunCases[0].editState = 'notChanged';
+      }
+    });
+    setTestCases(casesData);
+  };
+
   useEffect(() => {
     async function fetchDataEffect() {
       if (!context.isSignedIn()) {
@@ -105,14 +115,7 @@ export default function RunEditor({
         const foldersData = await fetchFolders(context.token.access_token, Number(projectId));
         setFolders(foldersData);
         setSelectedFolder(foldersData[0]);
-
+        initTestCases();
-        const casesData = await fetchProjectCases(context.token.access_token, Number(projectId));
-        casesData.forEach((testCase: CaseType) => {
-          if (testCase.RunCases && testCase.RunCases.length > 0) {
-            testCase.RunCases[0].editState = 'notChanged';
-          }
-        });
-        setTestCases(casesData);
       } catch (error: any) {
         console.error('Error in effect:', error.message);
       }
@@ -163,16 +166,13 @@ export default function RunEditor({
     setSelectedKeys(new Set([]));
   };
 
-  const resetEditStateAll = () => {
+  const onSave = async () => {
-    const newTestCases = [...testCases];
+    setIsUpdating(true);
-    newTestCases.forEach((itr) => {
+    await updateRun(context.token.access_token, testRun);
-      if (itr.RunCases && itr.RunCases.length > 0) {
+    await updateRunCases(context.token.access_token, Number(runId), testCases);
-        itr.RunCases[0].editState = 'notChanged';
+    await initTestCases();
-      }
+    setIsUpdating(false);
-    });
+    setIsDirty(false);
-
-    setTestCases(newTestCases);
-    setSelectedKeys(new Set([]));
   };
 
   const baseClass = '';
@@ -194,24 +194,20 @@ export default function RunEditor({
           </Tooltip>
           <h3 className="font-bold ms-2">{testRun.name}</h3>
         </div>
+        <div className="flex items-center">
+          {isDirty && <Circle size={8} color="#525252" fill="#525252" className="me-1" />}
           <Button
             startContent={<Save size={16} />}
             size="sm"
             isDisabled={!context.isProjectReporter(Number(projectId))}
             color="primary"
             isLoading={isUpdating}
-          onPress={async () => {
+            onPress={onSave}
-            setIsUpdating(true);
-            await updateRun(context.token.access_token, testRun);
-            await updateRunCases(context.token.access_token, Number(runId), testCases);
-            resetEditStateAll();
-            setIsUpdating(false);
-            setIsDirty(false);
-          }}
           >
             {isUpdating ? messages.updating : messages.update}
           </Button>
         </div>
+      </div>
 
       <div className="container mx-auto max-w-5xl pt-6 px-6 flex-grow">
         <div className="flex">