From be5f2840d3c02aac1b0c467100e418afda42543b Mon Sep 17 00:00:00 2001
From: Takeshi Kimata <117462761+kimatata@users.noreply.github.com>
Date: Sun, 4 Aug 2024 12:45:20 +0900
Subject: [PATCH] feat: indicates not saved changes on steps editor's screen

---
 .../[folderId]/cases/[caseId]/CaseEditor.tsx  | 41 +++++++-------
 .../cases/[caseId]/CaseStepsEditor.tsx        | 53 ++++++++++---------
 2 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
index d78992e..174a0bf 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
@@ -225,24 +225,27 @@ export default function CaseEditor({
           </Tooltip>
           <h3 className="font-bold ms-2">{testCase.title}</h3>
         </div>
-        <Button
-          startContent={<Save size={16} />}
-          size="sm"
-          isDisabled={!context.isProjectDeveloper(Number(projectId))}
-          color="primary"
-          isLoading={isUpdating}
-          onPress={async () => {
-            setIsUpdating(true);
-            await updateCase(context.token.access_token, testCase);
-            if (testCase.Steps) {
-              await updateSteps(context.token.access_token, Number(caseId), testCase.Steps);
-            }
-            setIsUpdating(false);
-            setIsDirty(false);
-          }}
-        >
-          {isUpdating ? messages.updating : messages.update}
-        </Button>
+        <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.isProjectDeveloper(Number(projectId))}
+            color="primary"
+            isLoading={isUpdating}
+            onPress={async () => {
+              setIsUpdating(true);
+              await updateCase(context.token.access_token, testCase);
+              if (testCase.Steps) {
+                await updateSteps(context.token.access_token, Number(caseId), testCase.Steps);
+              }
+              setIsUpdating(false);
+              setIsDirty(false);
+            }}
+          >
+            {isUpdating ? messages.updating : messages.update}
+          </Button>
+        </div>
       </div>
 
       <div className="p-5">
@@ -375,7 +378,7 @@ export default function CaseEditor({
           </div>
         ) : (
           <div>
-            <div className="flex items-center">
+            <div className="flex items-center mb-3">
               <h6 className="font-bold">{messages.steps}</h6>
               <Button
                 startContent={<Plus size={16} />}
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
index c16552e..4d25b4c 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseStepsEditor.tsx
@@ -1,4 +1,4 @@
-import { Textarea, Button, Tooltip } from '@nextui-org/react';
+import { Textarea, Button, Tooltip, Avatar } from '@nextui-org/react';
 import { CaseMessages, StepType } from '@/types/case';
 import { Plus, Trash } from 'lucide-react';
 
@@ -25,32 +25,33 @@ export default function StepsEditor({ isDisabled, steps, onStepUpdate, onStepPlu
   return (
     <>
       {filteredSteps.map((step, index) => (
-        <div key={index} className="flex">
-          <div className="bg-neutral-50 dark:bg-neutral-600 rounded-full flex items-center justify-center min-w-unit-8 w-unit-8 h-unit-8 mt-3 me-2">
-            <div>{step.caseSteps.stepNo}</div>
+        <div key={index} className="flex items-center my-1">
+          <Avatar className="me-2" size="sm" name={step.caseSteps.stepNo.toString()} />
+          <div key={step.id} className="grow flex gap-2">
+            <div className="w-1/2">
+              <Textarea
+                size="sm"
+                variant="bordered"
+                label={messages.detailsOfTheStep}
+                value={step.step}
+                onValueChange={(changeValue) => {
+                  onStepUpdate(step.id, { ...step, step: changeValue, editState: 'changed' });
+                }}
+              />
+            </div>
+            <div className="w-1/2">
+              <Textarea
+                size="sm"
+                variant="bordered"
+                label={messages.expectedResult}
+                value={step.result}
+                onValueChange={(changeValue) => {
+                  onStepUpdate(step.id, { ...step, result: changeValue, editState: 'changed' });
+                }}
+              />
+            </div>
           </div>
-          <Textarea
-            size="sm"
-            variant="bordered"
-            label={messages.detailsOfTheStep}
-            value={step.step}
-            onValueChange={(changeValue) => {
-              onStepUpdate(step.id, { ...step, step: changeValue, editState: 'changed' });
-            }}
-            className="mt-3 me-1"
-          />
-
-          <Textarea
-            size="sm"
-            variant="bordered"
-            label={messages.expectedResult}
-            value={step.result}
-            onValueChange={(changeValue) => {
-              onStepUpdate(step.id, { ...step, result: changeValue, editState: 'changed' });
-            }}
-            className="mt-3 ms-1"
-          />
-          <div className="mt-3 ms-1">
+          <div className="flex flex-col">
             <Tooltip content={messages.deleteThisStep} placement="left">
               <Button
                 isIconOnly