View update when delete Step

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx

@@ -9,7 +9,7 @@ import {
   Button,
   Divider,
 } from "@nextui-org/react";
-import { ArrowUpFromLine } from "lucide-react";
+import { Plus, ArrowUpFromLine } from "lucide-react";
 import { priorities, testTypes, templates } from "@/config/selection";
 import StepsEditor from "./steps-editor";
 import Config from "@/config/config";
@@ -145,12 +145,44 @@ export default function Page({
 
   const url = `${apiServer}/cases?caseId=${params.caseId}`;
 
+  const onPlusClick = async (newStepNo: number) => {
+    console.log(newStepNo);
+  };
+
   const onDeleteClick = async (stepId: number) => {
+    // find deletedStep's stepNo
+    const deletedStep = testCase.Steps.find((step) => step.id === stepId);
+    if (!deletedStep) {
+      return;
+    }
+    const deletedStepNo = deletedStep.caseSteps.stepNo;
+    console.log(deletedStepNo)
+
+    // delete request
     await fetchDeleteStep(stepId, params.caseId);
-    const updatedSteps = testCase.Steps.filter(step => step.id !== stepId);
+    // const updatedSteps = testCase.Steps.filter((step) => step.id !== stepId);
+    // setTestCase({
+    //   ...testCase,
+    //   Steps: updatedSteps,
+    // });
+
+    const updatedSteps = testCase.Steps.map(step => {
+      if (step.caseSteps.stepNo > deletedStepNo) {
+        console.log("bigger", step)
+        return {
+          ...step,
+          caseSteps: {
+            ...step.caseSteps,
+            stepNo: step.caseSteps.stepNo - 1
+          }
+        };
+      }
+      return step;
+    }).filter(step => step.id !== stepId);
+
     setTestCase({
       ...testCase,
-      Steps: updatedSteps
+      Steps: updatedSteps,
     });
   };
 
@@ -305,7 +337,18 @@ export default function Page({
         </div>
       ) : (
         <div>
-          <h6>Steps</h6>
+          <div className="flex items-center">
+            <h6>Steps</h6>
+            <Button
+              startContent={<Plus size={16} />}
+              size="sm"
+              color="primary"
+              className="ms-3"
+              onPress={() => onPlusClick(1)}
+            >
+              New Step
+            </Button>
+          </div>
           <StepsEditor
             steps={testCase.Steps}
             onStepUpdate={(stepId, changeStep) => {
@@ -320,7 +363,7 @@ export default function Page({
                 }),
               });
             }}
-            onStepPlus={() => {}}
+            onStepPlus={onPlusClick}
             onStepDelete={onDeleteClick}
           />
         </div>
@@ -331,7 +374,7 @@ export default function Page({
       <div className="flex items-center justify-center w-96 mt-3">
         <label
           htmlFor="dropzone-file"
-          className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+          className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-200 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
         >
           <div className="flex flex-col items-center justify-center pt-5 pb-6">
             <ArrowUpFromLine />

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/steps-editor.tsx

@@ -1,11 +1,11 @@
-import { Textarea, Button } from "@nextui-org/react";
+import { Textarea, Button, Tooltip } from "@nextui-org/react";
 import { StepType } from "./page";
 import { Plus, Trash } from "lucide-react";
 
 type Props = {
   steps: StepType[];
   onStepUpdate: (stepId: number, step: StepType) => void;
-  onStepPlus: () => void;
+  onStepPlus: (newStepNo: number) => void;
   onStepDelete: (stepId: number) => void;
 };
 
@@ -15,7 +15,6 @@ export default function StepsEditor({
   onStepPlus,
   onStepDelete,
 }: Props) {
-
   // sort steps by junction table's column
   const sortedSteps = steps.slice().sort((a, b) => {
     const stepNoA = a.caseSteps.stepNo;
@@ -27,6 +26,9 @@ export default function StepsEditor({
     <>
       {sortedSteps.map((step, index) => (
         <div key={index} className="flex">
+          <div className="bg-gray-50 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>
           <Textarea
             size="sm"
             variant="bordered"
@@ -51,22 +53,26 @@ export default function StepsEditor({
             className="mt-3 ms-1"
           />
           <div className="mt-3 ms-1">
-            <Button
+            <Tooltip content="Delete this step">
-              isIconOnly
+              <Button
-              size="sm"
+                isIconOnly
-              className="bg-transparent rounded-full"
+                size="sm"
-              onPress={() => onStepDelete(step.id)}
+                className="bg-transparent rounded-full"
-            >
+                onPress={() => onStepDelete(step.id)}
-              <Trash size={16} />
+              >
-            </Button>
+                <Trash size={16} />
-            <Button
+              </Button>
-              isIconOnly
+            </Tooltip>
-              size="sm"
+            <Tooltip content="Insert step">
-              className="bg-transparent rounded-full"
+              <Button
-              onPress={onStepPlus}
+                isIconOnly
-            >
+                size="sm"
-              <Plus size={16} />
+                className="bg-transparent rounded-full"
-            </Button>
+                onPress={() => onStepPlus(step.caseSteps.stepNo)}
+              >
+                <Plus size={16} />
+              </Button>
+            </Tooltip>
           </div>
         </div>
       ))}