From 47917470cdcdcbdfa36afb77b19671d6be694a13 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 12 Aug 2025 12:59:20 -0600
Subject: [PATCH] feat: Enhance FlowMenu and EditFlowSettings components

- Reintroduced memoization and hotkey handling in FlowMenu for improved performance.
- Updated EditFlowSettings to include locking functionality with a switch component, enhancing user control over flow settings.
- Adjusted layout and styling for better user experience in the EditFlowSettings component.
---
 .../components/FlowMenu/index.tsx             |  7 +++----
 .../core/editFlowSettingsComponent/index.tsx  | 21 ++++++++++++++++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
index 15ab90fad5..289064c3fe 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
@@ -1,6 +1,3 @@
-import { memo, useMemo, useRef, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
-import { useShallow } from "zustand/react/shallow";
 import IconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import FlowSettingsComponent from "@/components/core/flowSettingsComponent";
@@ -23,6 +20,9 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { useShortcutsStore } from "@/stores/shortcuts";
 import { swatchColors } from "@/utils/styleUtils";
 import { cn, getNumberFromString } from "@/utils/utils";
+import { memo, useMemo, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useShallow } from "zustand/react/shallow";
 
 export const MenuBar = memo((): JSX.Element => {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -195,7 +195,6 @@ export const MenuBar = memo((): JSX.Element => {
         align="center"
         sideOffset={15}
       >
-        <span className="text-sm font-semibold">Flow Details</span>
         <FlowSettingsComponent
           close={() => setOpenSettings(false)}
           open={openSettings}
diff --git a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
index 13a3860389..f62ec256b0 100644
--- a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
@@ -1,3 +1,5 @@
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import { Switch } from "@/components/ui/switch";
 import * as Form from "@radix-ui/react-form";
 import type React from "react";
 import { useState } from "react";
@@ -7,7 +9,7 @@ import { Input } from "../../ui/input";
 import { Textarea } from "../../ui/textarea";
 
 export const EditFlowSettings: React.FC<
-  InputProps & { submitForm?: () => void }
+  InputProps & { submitForm?: () => void; locked?: boolean; setLocked?: (v: boolean) => void }
 > = ({
   name,
   invalidNameList = [],
@@ -18,7 +20,9 @@ export const EditFlowSettings: React.FC<
   setName,
   setDescription,
   submitForm,
-}: InputProps & { submitForm?: () => void }): JSX.Element => {
+  locked = false,
+  setLocked,
+}: InputProps & { submitForm?: () => void; locked?: boolean; setLocked?: (v: boolean) => void }): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
   const [isMaxDescriptionLength, setIsMaxDescriptionLength] = useState(false);
   const [isMinLength, setIsMinLength] = useState(false);
@@ -128,7 +132,7 @@ export const EditFlowSettings: React.FC<
         </Form.Message>
       </Form.Field>
       <Form.Field name="description">
-        <div className="edit-flow-arrangement mt-3">
+        <div className="edit-flow-arrangement mt-2">
           <Form.Label className="text-mmd font-medium">
             Description{setDescription ? "" : ":"}
           </Form.Label>
@@ -165,7 +169,18 @@ export const EditFlowSettings: React.FC<
         <Form.Message match="valueMissing" className="field-invalid">
           Please enter a description
         </Form.Message>
+          <div className="flex items-center gap-2 mt-3">
+          <ForwardedIconComponent name={locked ? "Lock" : "Unlock"} className="text-muted-foreground !w-5 !h-5" />
+          <Form.Label className="text-mmd font-medium">Lock Flow</Form.Label>
+          <Switch
+            checked={!!locked}
+            onCheckedChange={(v) => setLocked?.(v)}
+            className="data-[state=checked]:bg-primary ml-auto"
+            data-testid="lock-flow-switch"
+          />
+        </div>
       </Form.Field>
+      
     </>
   );
 };