Apoorva - feat: Add 100 character limit to team name inputs#4565
Apoorva - feat: Add 100 character limit to team name inputs#4565one-community merged 1 commit intodevelopmentfrom
Conversation
- Added maxLength attribute to team name input in CreateNewTeamPopup - Added character counter with visual feedback in both locations - Added maxLength to AddTeamsAutoComplete component - Enforced 100 character limit in both team creation flows - Tested in both locations: Other Links > Teams and Profile > Teams - Addresses PR #1229 requirements
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
one-community
added
the
High Priority - Please Review First
one-community
changed the title
ShreyaMP1999
left a comment
ShreyaMP1999
left a comment
There was a problem hiding this comment.
Hi @apoorvajainrp21
I verified locally as Admin/Owner. Tested character counter behavior in both Other Links → Teams (Create New Team) and Profile → Teams (Assign Team) flows. Confirmed real-time counter accuracy (0/100), enforcement of the 100-character limit for typing and pasting, successful creation of teams with exactly 100 characters, correct truncation beyond the limit, and proper rendering/styling in both light and dark modes. All tested scenarios are working as expected.
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Apoorva,
I have reviewed your PR locally and it works as per requirement for all instances.
|
Thank you all, merging! |
Vikas-8055
left a comment
Vikas-8055
left a comment
There was a problem hiding this comment.
hi apoorva i have reviewed your PR and it works as per the requirements
Shravan-neelamsetty
left a comment
Shravan-neelamsetty
left a comment
There was a problem hiding this comment.
Hi Apoorva, I’ve reviewed and tested this PR locally, and all the functionalities are working perfectly as expected. I verified the 100-character limit enforcement in both team creation flows (Other Links → Teams and Profile → Teams), including real-time character counter updates, correct handling of typing and pasting beyond the limit, successful creation with exactly 100 characters, and proper truncation thereafter. The visual feedback is clear and consistent, and the counter renders correctly in both light and dark modes.
6 participants
Description
This PR implements a 100-character limit for team name inputs across both team creation locations in the application. The implementation includes visual feedback through character counters and enforces the limit both at the browser level (using HTML maxLength attribute) and programmatically through validation logic.
Related PRS (if any):
This frontend PR is related to PR #1229
To test this frontend PR, you need to checkout the Ramakrishna_bugfix_assign_members_new_team backend branch.
Main changes explained:
Updated src/components/Teams/CreateNewTeamPopup.jsx:
Added TEAM_NAME_MAX_LENGTH = 100 constant
Added maxLength attribute to the Input component
Implemented real-time character counter displaying "X/100 characters"
Updated handleTeamNameChange function to enforce character limit programmatically
Added dark mode support for character counter styling
Updated src/components/UserProfile/TeamsAndProjects/AddTeamsAutoComplete.jsx:
Added TEAM_NAME_MAX_LENGTH = 100 constant
Added maxLength attribute to the Input component
Implemented real-time character counter with "X/100 characters" display
Added dark mode support for character counter styling
How to test:
Setup:
Checkout current branch: feature/limit-team-name-100-chars
Run npm install to install dependencies
Checkout backend branch Ramakrishna_bugfix_assign_members_new_team in HGNRest repository
Start both backend and frontend servers
Clear site data/cache in browser
Test Location 1 - Other Links → Teams:
Log in as Admin/Owner user
Navigate to Dashboard → Other Links → Teams → Create New Team
Click "Create New Team" button to open the modal
In the team name input field:
Verify character counter shows "0/100 characters"
Type a normal team name (e.g., "Test Team 2024") - verify counter updates
Try to type more than 100 characters - verify it stops at 100
Try pasting text longer than 100 characters - verify it truncates at 100
Verify counter displays correctly in both light and dark modes
Attempt to create a team with exactly 100 characters - verify it succeeds
Verify the character counter styling is appropriate and readable
Test Location 2 - Profile → Teams:
Navigate to Profile → Teams
Click "Assign Team" button to open the "Add Team" modal
In the "Add to Team" search/input field:
Verify character counter shows "0/100 characters"
Type a new team name that doesn't exist (e.g., "Brand New Team XYZ")
Verify counter updates as you type
Try to type more than 100 characters - verify it stops at 100
Try pasting text longer than 100 characters - verify it truncates at 100
Verify "Create new team: [team name]" option appears
Click to create the new team with 100 characters - verify it succeeds
Verify counter displays correctly in both light and dark modes
Screenshots or videos of changes:
Note:
Include the information the reviewers need to know.