[STU-343] Edit sequence name & description

src/renderer/hooks/useTestSequencerProject.ts

@@ -17,8 +17,16 @@ import { toastResultPromise } from "../utils/report-error";
 
 function usePrepareStateManager(): StateManager {
   const { elems, project } = useDisplayedSequenceState();
-  const { addNewSequence, removeSequence, sequences } = useSequencerState();
-  return { elems, project, addNewSequence, removeSequence, sequences };
+  const { addNewSequence, removeSequence, sequences, setSequences } =
+    useSequencerState();
+  return {
+    elems,
+    project,
+    addNewSequence,
+    removeSequence,
+    sequences,
+    setSequences,
+  };
 }
 
 export function useSaveSequence() {

src/renderer/routes/test_sequencer_panel/components/data-table/SequenceTable.tsx

@@ -2,6 +2,7 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/renderer/components/ui/context-menu";
 import {
@@ -40,14 +41,16 @@ import {
 import { parseInt, map } from "lodash";
 import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "lucide-react";
 import LockableButton from "@/renderer/routes/test_sequencer_panel/components/lockable/LockedButtons";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { DraggableRowSequence } from "@/renderer/routes/test_sequencer_panel/components/dnd/DraggableRowSequence";
 import { getCompletionTime, getSuccessRate, mapStatusToDisplay } from "./utils";
 import useWithPermission from "@/renderer/hooks/useWithPermission";
 import { useImportSequences } from "@/renderer/hooks/useTestSequencerProject";
 import { useSequencerModalStore } from "@/renderer/stores/modal";
 import { useSequencerStore } from "@/renderer/stores/sequencer";
 import { useShallow } from "zustand/react/shallow";
+import { RenameModal } from "../modals/RenameModal";
+import { toast } from "sonner";
 
 export function SequenceTable() {
   const { project, isLocked } = useDisplayedSequenceState();
@@ -255,8 +258,82 @@ export function SequenceTable() {
     );
   };
 
+  const onRenameSequence = (idx: number) => {
+    const sequence = sequences[idx];
+    renameForIdx.current = idx;
+    setRenameTarget(sequence.project.name);
+    setInitialName(sequence.project.name);
+    setIsRenameNameModalOpen(true);
+  };
+
+  const handleRenameSequence = (newName: string) => {
+    // make sure the new name is unique
+    if (sequences.some((seq) => seq.project.name === newName)) {
+      toast.error("Sequence name must be unique");
+      return;
+    }
+    setSequences(
+      [...sequences].map((seq, idx) => {
+        if (idx === renameForIdx.current) {
+          return {
+            ...seq,
+            project: { ...seq.project, name: newName },
+            testSequenceUnsaved: true,
+          };
+        }
+        return seq;
+      }),
+    );
+    setIsRenameNameModalOpen(false);
+  };
+  const [isRenameNameModalOpen, setIsRenameNameModalOpen] = useState(false);
+  const [isRenameDescModalOpen, setIsRenameDescModalOpen] = useState(false);
+  const [renameTarget, setRenameTarget] = useState("");
+  const [initialName, setInitialName] = useState("");
+  const renameForIdx = useRef(-1);
+
+  const onRenameDescription = (idx: number) => {
+    const sequence = sequences[idx];
+    renameForIdx.current = idx;
+    setRenameTarget(sequence.project.name);
+    setInitialName(sequence.project.description);
+    setIsRenameDescModalOpen(true);
+  };
+
+  const handleRenameDescription = (newDescription: string) => {
+    setSequences(
+      [...sequences].map((seq, idx) => {
+        if (idx === renameForIdx.current) {
+          return {
+            ...seq,
+            project: { ...seq.project, description: newDescription },
+            testSequenceUnsaved: true,
+          };
+        }
+        return seq;
+      }),
+    );
+    setIsRenameDescModalOpen(false);
+  };
+
   return (
     <div className="flex flex-col">
+      <RenameModal
+        title="Rename sequence"
+        isModalOpen={isRenameNameModalOpen}
+        setModalOpen={setIsRenameNameModalOpen}
+        initialName={initialName}
+        handleSubmit={handleRenameSequence}
+        target={renameTarget}
+      />
+      <RenameModal
+        title="Edit description"
+        isModalOpen={isRenameDescModalOpen}
+        setModalOpen={setIsRenameDescModalOpen}
+        initialName={initialName}
+        handleSubmit={handleRenameDescription}
+        target={renameTarget}
+      />
       <div className="m-1 flex items-center py-0">
         {isAdmin() ? (
           <LockableButton
@@ -336,6 +413,21 @@ export function SequenceTable() {
                     />
                   </ContextMenuTrigger>
                   <ContextMenuContent>
+                    <ContextMenuItem
+                      onClick={() => {
+                        onRenameSequence(row.index);
+                      }}
+                    >
+                      Rename sequence
+                    </ContextMenuItem>
+                    <ContextMenuItem
+                      onClick={() => {
+                        onRenameDescription(row.index);
+                      }}
+                    >
+                      Edit description
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
                     <ContextMenuItem
                       onClick={() => {
                         onRemoveSequence([row.index]);

src/renderer/routes/test_sequencer_panel/components/data-table/TestTable.tsx

@@ -2,6 +2,7 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/renderer/components/ui/context-menu";
 import {
@@ -454,42 +455,43 @@ export function TestTable() {
                       Add Conditional
                     </ContextMenuItem>
                     {row.original.type === "test" && (
-                      <ContextMenuItem
-                        onClick={() => {
-                          openRenameTestModal(row.original.id);
-                        }}
-                      >
-                        Rename Test
-                      </ContextMenuItem>
+                      <>
+                        <ContextMenuSeparator />
+                        <ContextMenuItem
+                          onClick={() => {
+                            setOpenPyTestFileModal(true);
+                            setTestToDisplay(row.original as Test);
+                          }}
+                        >
+                          Consult Code
+                        </ContextMenuItem>
+                        <ContextMenuSeparator />
+                        <ContextMenuItem
+                          onClick={() => {
+                            openRenameTestModal(row.original.id);
+                          }}
+                        >
+                          Rename Test
+                        </ContextMenuItem>
+                        <ContextMenuItem
+                          onClick={() => {
+                            toggleExportToCloud(row.original.id);
+                          }}
+                        >
+                          {row.original.exportToCloud
+                            ? "Disable export to Cloud"
+                            : "Enable export to Cloud"}
+                        </ContextMenuItem>
+                      </>
                     )}
+                    <ContextMenuSeparator />
                     <ContextMenuItem
                       onClick={() => onRemoveTest([parseInt(row.id)])}
                     >
                       {row.original.type === "test"
                         ? "Remove Test"
                         : "Remove Conditional"}
                     </ContextMenuItem>
-                    {row.original.type === "test" && (
-                      <ContextMenuItem
-                        onClick={() => {
-                          setOpenPyTestFileModal(true);
-                          setTestToDisplay(row.original as Test);
-                        }}
-                      >
-                        Consult Code
-                      </ContextMenuItem>
-                    )}
-                    {row.original.type === "test" && (
-                      <ContextMenuItem
-                        onClick={() => {
-                          toggleExportToCloud(row.original.id);
-                        }}
-                      >
-                        {row.original.exportToCloud
-                          ? "Disable export to Cloud"
-                          : "Enable export to Cloud"}
-                      </ContextMenuItem>
-                    )}
                   </ContextMenuContent>
                 </ContextMenu>
               ))

src/renderer/routes/test_sequencer_panel/components/dnd/DraggableRowSequence.tsx

@@ -13,6 +13,7 @@ import { TestSequenceContainer } from "@/renderer/types/test-sequencer";
 export const DraggableRowSequence = ({
   isSelected,
   row,
+  ...props
 }: {
   isSelected: boolean;
   row: Row<TestSequenceContainer>;
@@ -80,6 +81,7 @@ export const DraggableRowSequence = ({
       className={"relative" + (isSelected ? " bg-primary-foreground" : "")}
       onClick={() => handleDisplaySequence(row.index)}
       ref={drag}
+      {...props}
     >
       {/* capture drag on above */}
       <div ref={dropAbove} className="absolute top-0 z-10 h-1/2 w-full" />

src/renderer/routes/test_sequencer_panel/components/modals/RenameModal.tsx

@@ -0,0 +1,42 @@
+import { Button } from "@/renderer/components/ui/button";
+import { Dialog, DialogContent } from "@/renderer/components/ui/dialog";
+import { Input } from "@/renderer/components/ui/input";
+import { useEffect, useState } from "react";
+
+export const RenameModal = ({
+  title,
+  isModalOpen,
+  setModalOpen,
+  initialName,
+  handleSubmit,
+  target,
+}: {
+  title: string;
+  isModalOpen: boolean;
+  setModalOpen: (value: boolean) => void;
+  initialName: string;
+  handleSubmit: (newName: string) => void;
+  target: string;
+}) => {
+  const [newName, setNewName] = useState<string>(initialName);
+  useEffect(() => {
+    setNewName(initialName);
+  }, [initialName]);
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={setModalOpen}>
+      <DialogContent>
+        <h2 className="text-lg font-bold text-accent1">{title}</h2>
+        <div className="pb-1 text-muted-foreground">
+          <h2>{target}</h2>
+        </div>
+        <Input
+          placeholder="New Name"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+        />
+        <Button onClick={() => handleSubmit(newName)}>Rename</Button>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/renderer/routes/test_sequencer_panel/utils/SequenceHandler.ts

@@ -28,6 +28,7 @@ export type StateManager = {
   removeSequence: (name: string) => void;
   project: TestSequencerProject | null;
   sequences: TestSequenceContainer[];
+  setSequences: (sequences: TestSequenceContainer[]) => void;
 };
 
 export async function createSequence(
@@ -82,6 +83,15 @@ export async function saveSequence(
   if (isSync.isErr()) {
     return isSync;
   }
+  // Set the sequence as saved
+  stateManager.setSequences(
+    [...stateManager.sequences].map((seq) => {
+      if (seq.project.name === sequence.name) {
+        return { ...seq, testSequenceUnsaved: false };
+      }
+      return seq;
+    }),
+  );
   return ok(undefined);
 }
 
@@ -110,6 +120,12 @@ export async function saveSequences(
     if (res.isErr()) {
       return err(res.error);
     }
+    stateManager.setSequences(
+      [...stateManager.sequences].map((seq) => ({
+        ...seq,
+        testSequenceUnsaved: false,
+      })),
+    );
   });
   return ok(undefined);
 }