feat: initial commit - adding a plan to phases and different ui for phase order editing

ref: N25B-451

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx

@@ -6,16 +6,26 @@ import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
 import GestureValueEditor from "./GestureValueEditor"; 
 
+/**
+ * The properties of a plan editor.
+ * @property plan: The optional plan loaded into this editor.
+ * @property onSave: The function that will be called upon save.
+ * @property description: Optional description which is already set.
+ * @property onlyEditPhasing: Optional boolean to toggle
+ * whether or not this editor is part of the phase editing.
+ */
 type PlanEditorDialogProps = {
   plan?: Plan;
   onSave: (plan: Plan | undefined) => void;
   description? : string;
+  onlyEditPhasing? : boolean;
 };
 
 export default function PlanEditorDialog({
   plan,
   onSave,
   description,
+  onlyEditPhasing = false,
 }: PlanEditorDialogProps) {
   // UseStates and references
   const dialogRef = useRef<HTMLDialogElement | null>(null);
@@ -24,10 +34,11 @@ export default function PlanEditorDialog({
   const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
   const [newActionValue, setNewActionValue] = useState("");
   const [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const { setScrollable } = useFlowStore();
   const nodes = useFlowStore().nodes;
 
-  //Button Actions
+  // Button Actions
   const openCreate = () => {
     setScrollable(false);
     setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
@@ -89,9 +100,9 @@ export default function PlanEditorDialog({
         data-testid={"PlanEditorDialogTestID"}
       >
       <form method="dialog" className="flex-col gap-md">
-          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
+          <h3> {onlyEditPhasing ? "Editing Phase Ordering" : (draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan")} </h3>
           {/* Plan name text field */}
-          {draftPlan && (
+          {(draftPlan && !onlyEditPhasing) && (
               <TextField
                   value={draftPlan.name}
                   setValue={(name) =>
@@ -104,12 +115,14 @@ export default function PlanEditorDialog({
           {draftPlan && (<div className={styles.planEditor}>
               <div className={styles.planEditorLeft}>
               {/* Left Side (Action Adder) */}
-                  <h4>Add Action</h4>
+                  <h4>{onlyEditPhasing ? "You can't add any actions, only rearrange the steps." : "Add Action"}</h4>
                   {(!plan && description && draftPlan.steps.length === 0 && !hasInteractedWithPlan) && (<div className={styles.stepSuggestion}>
                       <label> Filled in as a suggestion! </label>
                       <label> Feel free to change! </label>
                   </div>)}
-                  <label>
+                
+                    
+                    {(!onlyEditPhasing) && (<label>
                       Action Type <wbr />
                       {/* Type selection */}
                       <select
@@ -123,10 +136,10 @@ export default function PlanEditorDialog({
                       <option value="gesture">Gesture Action</option>
                       <option value="llm">LLM Action</option>
                       </select>
-                  </label>
+                    </label>)}
 
-                  {/* Action value editor*/}
-                  {newActionType === "gesture" ? (
+                    {/* Action value editor*/}
+                    {!onlyEditPhasing && newActionType === "gesture" ? (
                       // Gesture get their own editor component
                       <GestureValueEditor
                         value={newActionValue}
@@ -134,17 +147,20 @@ export default function PlanEditorDialog({
                         setType={setNewActionGestureType}
                         placeholder="Gesture name"
                       />
-                  ) : (
-                      <TextField
+                    ) 
+                    :
+                    // Only show the text field if we're not just rearranging.
+                    (!onlyEditPhasing &&
+                      (<TextField
                           value={newActionValue}
                           setValue={setNewActionValue}
                           placeholder={
                               newActionType === "speech" ? "Speech text"
                               : "LLM goal"
                           }
-                      />
-                  )}
-
+                      />)
+                    )}
+                
                   {/* Adding steps */}
                   <button
                       type="button"