feat: changes for edit team in the teams page

[ishumita]

Description

This PR would bring in edit functionality for the teams card in teams permission page.

Changes Made

There is a new reactor built for the edit team, so have integrated new reactor call with the new edit modal. Have used the concept of add team modal to achieve the same.

How to Test

1. Go to team permissions page
2. Click on the three dots in the card you want to edit and click on Edit team
3. Edit modal will open - modify whatever you want to change and click on update.
4. You would see existing card is being updated.

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

feat: changes for edit team in the teams page

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Track and pass previous team identifiers

• Support custom group flag in edit modal

• Send old and new team data to API

• Update UI to replace edited team

---

Changes walkthrough 📝

Relevant files

Enhancement

AddTeamModal.tsx Track and supply previous team data                                            packages/client/src/components/teams/AddTeamModal.tsx Import React and add previousTeamName state Add previousType and isCustomGroup props Reset default values with custom logic for TEAM_TYPE Pass previous details to editTeam and onClose +28/-6    TeamTileCard.tsx Update list replace for edited teams                                          packages/client/src/components/teams/TeamTileCard.tsx Uncomment and enable edit menu item Pass isCustomGroup to AddTeamModal Map teams to update edited entry instead of append Use previousTeamName to identify target team +13/-11  monolith.store.ts Extend API to handle renames                                                          packages/client/src/stores/monolith/monolith.store.ts Rename endpoint to editGroupDetails Build POST data with old/new groupId and description Include flags and handle previousType and newType Restrict type fields when not custom group +10/-6

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review State Initialization previousType is initialized using the id value instead of the original type prop, causing incorrect tracking of the team’s prior type. const [previousTeamName, setPreviousTeamName] = React.useState< string | undefined >(id); const [previousType, setPreviousType] = React.useState<string | undefined>( id, ); API Parameter Logic The editTeam method sends type=previousType and newType=type, which may invert intended values and break the server-side update. Confirm correct parameter assignment and endpoint. postData += '&newDescription=' + encodeURIComponent(description); postData += '&newIsCustomGroup=' + encodeURIComponent(isCustomGroup); if (!isCustomGroup) { postData += '&type=' + encodeURIComponent(previousType); postData += '&newType=' + encodeURIComponent(type); } Unused Variable The navigate constant is declared but never used, leading to dead code and lint warnings. Remove or apply it as intended. const navigate = useNavigate(); const notification = useNotification();

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to b9c410c

Category	Suggestion	Impact
Possible issue	Correct previousType initial state The initial state for previousType is set to id, which is incorrect. Initialize it from the type or isCustomGroup prop to accurately reflect the prior team type. packages/client/src/components/teams/AddTeamModal.tsx [144-146] const [previousType, setPreviousType] = React.useState<string | undefined>( - id, + isCustomGroup ? 'Custom' : type, ); Suggestion importance[1-10]: 8 __ Why: The state previousType is initialized to id which is incorrect for capturing the prior team type; using isCustomGroup ? 'Custom' : type ensures correct behavior when editing.	Medium
	Add fallback for team matching If previousTeamName is undefined or changed by casing, this comparison may fail. Also fall back to the original id prop to ensure the correct team is updated. packages/client/src/components/teams/TeamTileCard.tsx [765-773] const updatedTeams = teams.map((t) => - t.id === team.previousTeamName + t.id === team.previousTeamName || t.id === id ? { id: team.id, description: team.description, type: team.type, } : t, ); Suggestion importance[1-10]: 4 __ Why: Including t.id === id as a fallback ensures the correct team is updated if previousTeamName is undefined or mismatched, though this is a minor edge-case improvement.	Low
General	Switch to URLSearchParams Manually concatenating form data risks missing ampersands or encoding issues. Use URLSearchParams to build the request body. packages/client/src/stores/monolith/monolith.store.ts [1115-1123] -let url = `${Env.MODULE}/api/auth/admin/`, - postData = ''; -url += 'group/editGroupDetails'; -postData += 'groupId=' + encodeURIComponent(previousTeamName); -postData += '&newGroupId=' + encodeURIComponent(groupId); -postData += '&newDescription=' + encodeURIComponent(description); -postData += '&newIsCustomGroup=' + encodeURIComponent(isCustomGroup); +const params = new URLSearchParams(); +params.append('groupId', previousTeamName || ''); +params.append('newGroupId', groupId); +params.append('newDescription', description); +params.append('newIsCustomGroup', String(isCustomGroup)); if (!isCustomGroup) { - postData += '&type=' + encodeURIComponent(previousType); - postData += '&newType=' + encodeURIComponent(type); + params.append('type', previousType || ''); + params.append('newType', type || ''); } +const response = await axios.post<{ success: boolean }>(url, params.toString(), { + headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, +}); Suggestion importance[1-10]: 7 __ Why: Building the request body with URLSearchParams guarantees proper encoding and placement of &, reducing manual string concatenation errors and improving maintainability.	Medium
	Guard previous values update on open Only update previousTeamName and previousType when the modal actually opens to avoid stale values on prop changes. Wrap the setters in an if (open) check. packages/client/src/components/teams/AddTeamModal.tsx [163-174] useEffect(() => { reset({ TEAM_NAME: id || '', TEAM_DESCRIPTION: description || '', TEAM_TYPE: (isCustomGroup || type === 'custom' ? 'Custom' : type) || '', }); - - // Update the previous team name when the modal is opened + if (open) { setPreviousTeamName(id); setPreviousType(isCustomGroup ? 'Custom' : type); -}, [id, type, description, isCustomGroup, reset]); + } +}, [open, id, type, description, isCustomGroup, reset]); Suggestion importance[1-10]: 6 __ Why: Wrapping setPreviousTeamName and setPreviousType in if (open) prevents overwriting the previous values when the modal is closed, avoiding stale state issues.	Low

---

Previous suggestions

Suggestions up to commit 6cf1821

Category	Suggestion	Impact
Possible issue	Correct previousType initialization Initialize previousType state with the original type prop instead of id to correctly track the previous team type. This ensures the component stores the actual previous type value. packages/client/src/components/teams/AddTeamModal.tsx [144-146] const [previousType, setPreviousType] = React.useState<string | undefined>( - id, + type, ); Suggestion importance[1-10]: 8 __ Why: Initializing previousType with id is incorrect; using the type prop ensures the component tracks the actual previous team type and prevents wrong values in the API call.	Medium
	Fallback previousTeamName and preserve fields Provide a fallback to the new team.id when previousTeamName is undefined and spread existing fields to preserve any other properties on the team object. packages/client/src/components/teams/TeamTileCard.tsx [765-773] +const key = team.previousTeamName || team.id; const updatedTeams = teams.map((t) => - t.id === team.previousTeamName - ? { - id: team.id, - description: team.description, - type: team.type, - } + t.id === key + ? { ...t, id: team.id, description: team.description, type: team.type } : t, ); Suggestion importance[1-10]: 7 __ Why: Spreading t retains all existing team properties and using a fallback key prevents matching against undefined, ensuring accurate updates without data loss.	Medium
General	Use URLSearchParams for payload Use URLSearchParams to build the request body with proper encoding and set the Content-Type header to application/x-www-form-urlencoded for clearer, safer parameter handling. packages/client/src/stores/monolith/monolith.store.ts [1112-1124] -let url = `${Env.MODULE}/api/auth/admin/`, - postData = ''; -url += 'group/editGroupDetails'; -postData += 'groupId=' + encodeURIComponent(previousTeamName); -postData += '&newGroupId=' + encodeURIComponent(groupId); -postData += '&newDescription=' + encodeURIComponent(description); -postData += '&newIsCustomGroup=' + encodeURIComponent(isCustomGroup); -if (!isCustomGroup) { - postData += '&type=' + encodeURIComponent(previousType); - postData += '&newType=' + encodeURIComponent(type); -} +const url = `${Env.MODULE}/api/auth/admin/group/editGroupDetails`; +const params = new URLSearchParams({ + groupId: previousTeamName!, + newGroupId: groupId, + newDescription: description, + newIsCustomGroup: String(isCustomGroup), + ...(!isCustomGroup && { type: previousType!, newType: type! }), +}); +const response = await axios.post<{ success: boolean }>( + url, + params.toString(), + { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } +); Suggestion importance[1-10]: 6 __ Why: Switching to URLSearchParams and explicitly setting the Content-Type header improves encoding safety and makes the request payload handling clearer and more maintainable.	Low

Suggestions up to commit 6cf1821

Category	Suggestion	Impact
Possible issue	Fix previousType initial value The initial state for previousType is incorrectly using id instead of the existing type. Initialize it using type (or 'Custom' when isCustomGroup is true) so that the old team type is tracked properly. packages/client/src/components/teams/AddTeamModal.tsx [144-146] const [previousType, setPreviousType] = React.useState<string | undefined>( - id, + isCustomGroup ? 'Custom' : type, ); Suggestion importance[1-10]: 8 __ Why: Initializing previousType with id instead of the actual type will break tracking of the old team’s type, so correcting this value prevents a logic bug.	Medium
	Guard undefined previousTeamName If previousTeamName is undefined the API will receive groupId=undefined. Default to the current groupId parameter or guard the call so the endpoint always receives a valid identifier. packages/client/src/stores/monolith/monolith.store.ts [1117] -postData += 'groupId=' + encodeURIComponent(previousTeamName); +const oldGroupId = previousTeamName ?? groupId; +postData += 'groupId=' + encodeURIComponent(oldGroupId); Suggestion importance[1-10]: 6 __ Why: If previousTeamName is undefined, the API receives groupId=undefined, causing invalid requests, so defaulting or guarding ensures a valid identifier is sent.	Low
General	Normalize custom type check The comparison against 'Custom' may fail if casing differs. Normalize both sides to the same case (e.g., lowercase) before comparing to avoid branching errors. packages/client/src/components/teams/AddTeamModal.tsx [200-217] -const editResponse = - data.TEAM_TYPE === 'Custom' - ? monolithStore.editTeam( - data.TEAM_NAME, - data.TEAM_DESCRIPTION, - true, - 'Custom', - previousTeamName, - previousType, - ) - : monolithStore.editTeam( - data.TEAM_NAME, - data.TEAM_DESCRIPTION, - false, - data.TEAM_TYPE, - previousTeamName, - previousType, - ); +const isCustom = data.TEAM_TYPE.toLowerCase() === 'custom'; +const editResponse = monolithStore.editTeam( + data.TEAM_NAME, + data.TEAM_DESCRIPTION, + isCustom, + isCustom ? 'Custom' : data.TEAM_TYPE, + previousTeamName, + previousType, +); Suggestion importance[1-10]: 5 __ Why: Relying on a case-sensitive comparison against 'Custom' can fail if casing differs, so normalizing both sides avoids subtle branching errors.	Low

[johbaxter]

@anurag91jain and @AAfghahi Has this been tested e2e yet

[kunal0137]

where is the call for this being made from?

[kunal0137]

please use the template - we will not close PRs unless the template is filled. @ishumita

[ishumita]

@kunal0137 updated the template.

[AAfghahi]

why not just import useState instead of doing via react?

[ishumita]

It is just the same thing, useState was not imported explicitly in the code, so I just used it directly using React.useState, it doesn't really matter at all. Let me know if you still want me to change it.

[AAfghahi]

Tested locally that it works.

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-06-12 *

Added

• Edit team modal on the Teams permissions page
• Integration with backend API to update existing team details

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'