[Flowchart Update Name]: Add a character limit to the Flowchart Name

[Castro19]

💡 User Story

As a user, I want to be prevented from entering flowchart names longer than 50 characters, so that I can maintain clean and consistent naming across my flowcharts.

📖 Description

Currently, there is no character limit enforced for flowchart names in the application. This can lead to excessively long names that may cause UI issues or make it difficult to identify flowcharts in the list view. We need to implement a 50-character limit for flowchart names on both the frontend and backend.

The implementation should:

1. Add client-side validation to prevent users from entering more than 50 characters in the name input field
2. Add server-side validation to ensure that flowchart names cannot exceed 50 characters
3. Provide appropriate error messages to users when they attempt to exceed this limit

This feature will improve the user experience by maintaining consistent naming conventions and preventing potential UI issues caused by extremely long names.

✅ Acceptance Criteria

• Frontend validation prevents users from entering more than 50 characters in the flowchart name input field
• Server-side validation rejects requests with flowchart names longer than 50 characters
• Users receive a clear error message when they attempt to save a flowchart with a name longer than 50 characters
• The character limit is enforced in all places where flowchart names can be modified (creation, editing, etc.)
• Existing flowcharts with names longer than 50 characters are not affected by this change (grandfathered in)

📌 Technical Details

Frontend Implementation:

1. Modify the handleNameChange function in Client/src/components/flowchart/flowchartSidePanel/flowchartList/SavedFlowchartList.tsx to limit input to 50 characters
2. Add validation before submitting the form to ensure the name is within the limit

Backend Implementation:

1. Add validation in server/src/db/models/flowchart/flowchartCollection.ts to check the name length before saving
2. Update the error handling in server/src/routes/flowchart.ts to return appropriate error messages for name length violations
3. Ensure consistent validation across all flowchart-related endpoints (optional)

Code Changes Required:

1. In Client/src/components/flowchart/flowchartSidePanel/flowchartList/SavedFlowchartList.tsx:

   // Handle name change
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newName = e.target.value;
     // Limit to 50 characters
     if (newName.length <= 50) {
       setName(newName);
     }
   };

2. In server/src/db/models/flowchart/flowchartCollection.ts:

   // Add validation before updating
   if (name.length > 50) {
     throw new Error("Flowchart name cannot exceed 50 characters");
   }

🖼️ UI/UX Mockups (If applicable)

The UI should include a character counter below the name input field, showing something like "X/50 characters" to provide visual feedback to users.

📎 Related Issues or Dependencies

• None identified

🚀 Priority & Story Points

• Priority: Medium
• Story Points: 3

File Paths

The files that might need to be modified are:

1. Client/src/components/flowchart/flowchartSidePanel/flowchartList/SavedFlowchartList.tsx
2. Client/src/components/flowchart/flowchartSidePanel/flowchartList/FlowchartLogOptions.tsx
3. server/src/db/models/flowchart/flowchartCollection.ts
4. server/src/routes/flowchart.ts