feat: enhance flow settings with minimum length validation and default naming (#7970)

* feat: enhance flow settings with minimum length validation and default naming

* fix: remove console log from getFlowToAddToCanvas function

src/backend/base/langflow/api/v1/flows.py

@@ -322,6 +322,10 @@ async def update_flow(
 
         update_data = flow.model_dump(exclude_unset=True, exclude_none=True)
 
+        # Specifically handle endpoint_name when it's explicitly set to null or empty string
+        if flow.endpoint_name is None or flow.endpoint_name == "":
+            update_data["endpoint_name"] = None
+
         if settings_service.settings.remove_api_keys:
             update_data = remove_api_keys(update_data)
 

src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

@@ -216,8 +216,8 @@ export const MenuBar = memo((): JSX.Element => {
   ]);
 
   useEffect(() => {
-    if (currentFlowName && !editingName) {
-      setFlowName(currentFlowName);
+    if (!editingName) {
+      setFlowName(currentFlowName ?? "Untitled Flow");
     }
   }, [currentFlowName, editingName]);
 
@@ -233,7 +233,7 @@ export const MenuBar = memo((): JSX.Element => {
       : getNumberFromString(currentFlowGradient ?? currentFlowId ?? "")) %
     swatchColors.length;
 
-  return currentFlowName && onFlowPage ? (
+  return onFlowPage ? (
     <div
       className="flex w-full items-center justify-center gap-2"
       data-testid="menu_bar_wrapper"
@@ -303,7 +303,7 @@ export const MenuBar = memo((): JSX.Element => {
                 onKeyDown={handleKeyDown}
                 onFocus={() => {
                   setEditingName(true);
-                  setFlowName(currentFlowName);
+                  setFlowName(currentFlowName ?? "Untitled Flow");
                   const flows = useFlowsManagerStore.getState().flows;
                   setFlowNames(
                     flows
@@ -315,6 +315,7 @@ export const MenuBar = memo((): JSX.Element => {
                 value={flowName}
                 id="input-flow-name"
                 data-testid="input-flow-name"
+                placeholder="Untitled Flow"
               />
               <span
                 ref={measureRef}
@@ -322,7 +323,7 @@ export const MenuBar = memo((): JSX.Element => {
                 aria-hidden="true"
                 data-testid="flow_name"
               >
-                {flowName}
+                {flowName || "Untitled Flow"}
               </span>
             </div>
           </div>

src/frontend/src/components/core/editFlowSettingsComponent/index.tsx

@@ -11,11 +11,13 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   description,
   endpointName,
   maxLength = 50,
+  minLength = 1,
   setName,
   setDescription,
   setEndpointName,
 }: InputProps): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
+  const [isMinLength, setIsMinLength] = useState(false);
   const [validEndpointName, setValidEndpointName] = useState(true);
   const [isInvalidName, setIsInvalidName] = useState(false);
 
@@ -26,6 +28,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
+    if (value.length < minLength) {
+      setIsMinLength(true);
+    } else {
+      setIsMinLength(false);
+    }
     let invalid = false;
     for (let i = 0; i < invalidNameList!.length; i++) {
       if (value === invalidNameList![i]) {
@@ -35,7 +42,15 @@ export const EditFlowSettings: React.FC<InputProps> = ({
       invalid = false;
     }
     setIsInvalidName(invalid);
-    setName!(value);
+
+    // Only update the name if it's valid (not empty and not invalid)
+    if (value.length >= minLength && !invalid) {
+      setName!(value);
+    } else if (value.length === 0) {
+      // For empty string, update state but keep isMinLength true
+      setName!("");
+      setIsMinLength(true);
+    }
   };
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -43,11 +58,19 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   };
 
   const handleEndpointNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
     // Validate the endpoint name
     // use this regex r'^[a-zA-Z0-9_-]+$'
     const isValid = isEndpointNameValid(event.target.value, maxLength);
     setValidEndpointName(isValid);
-    setEndpointName!(event.target.value);
+
+    // Only update if valid and meets minimum length (if set)
+    if (isValid && value.length >= minLength) {
+      setEndpointName!(value);
+    } else if (value.length === 0) {
+      // Always allow empty endpoint name (it's optional)
+      setEndpointName!("");
+    }
   };
 
   //this function is necessary to select the text when double clicking, this was not working with the onFocus event
@@ -61,6 +84,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           {isMaxLength && (
             <span className="edit-flow-span">Character limit reached</span>
           )}
+          {isMinLength && (
+            <span className="edit-flow-span">
+              Minimum {minLength} character(s) required
+            </span>
+          )}
           {isInvalidName && (
             <span className="edit-flow-span">
               Name invalid or already exists
@@ -77,6 +105,8 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             placeholder="Flow name"
             id="name"
             maxLength={maxLength}
+            minLength={minLength}
+            required={true}
             onDoubleClickCapture={(event) => {
               handleFocus(event);
             }}
@@ -137,6 +167,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             value={endpointName ?? ""}
             placeholder="An alternative name to run the endpoint"
             maxLength={maxLength}
+            minLength={minLength}
             id="endpoint_name"
             onDoubleClickCapture={(event) => {
               handleFocus(event);

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -28,17 +28,19 @@ export default function FlowSettingsModal({
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const flows = useFlowsManagerStore((state) => state.flows);
   const flow = flowData ?? currentFlow;
-  useEffect(() => {
-    setName(flow?.name ?? "");
-    setDescription(flow?.description ?? "");
-  }, [flow?.name, flow?.description, open]);
-
   const [name, setName] = useState(flow?.name ?? "");
   const [description, setDescription] = useState(flow?.description ?? "");
   const [endpoint_name, setEndpointName] = useState(flow?.endpoint_name ?? "");
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
   const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
+
+  useEffect(() => {
+    setName(flow?.name ?? "");
+    setDescription(flow?.description ?? "");
+    setEndpointName(flow?.endpoint_name ?? "");
+  }, [flow?.name, flow?.description, flow?.endpoint_name, open]);
+
   function handleClick(): void {
     setIsSaving(true);
     if (!flow) return;

src/frontend/src/pages/FlowPage/index.tsx

@@ -149,7 +149,6 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
   const getFlowToAddToCanvas = async (id: string) => {
     const flow = await getFlow({ id: id });
-    console.log(flow);
     setCurrentFlow(flow);
   };
 

src/frontend/src/types/components/index.ts

@@ -303,6 +303,7 @@ export type InputProps = {
   description: string | null;
   endpointName?: string | null;
   maxLength?: number;
+  minLength?: number;
   setName?: (name: string) => void;
   setDescription?: (description: string) => void;
   setEndpointName?: (endpointName: string) => void;