feat(client): when adding members to an engine by name or email displayed already added

[aditiiisinhaa]

Description

In the Add members modal, if a user tries to add someone based name or email that already has access to the system then it display user with statement 'Already Added'.

Changes Made

In the add members modal Engine of Function and App, when someone search for the users unknowingly that the user have already been added by someone else and want to add them, then it will display user with statement 'Already Added' and the already added user are disabled to add.

How to Test

For Function

1. Open Function -> Choose Function -> Access Control -> Add Members
2. Search for user with name or email.

For App

1. Open Settings -> App Settings -> Select any app -> Add Members
2. Search for user with name or email.

[github-actions]

@CodiumAI-Agent /describe

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[CodiumAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Unused Import The has import from mobx is not referenced anywhere in the file. Remove it to avoid lint errors and keep the code clean. import { has } from 'mobx'; Duplicate Fetch Logic The two useEffect hooks for fetching project and engine users share almost identical logic. Extract the common code into a helper or custom hook to reduce duplication and improve maintainability. useEffect(() => { if (!open || type !== 'APP') return; let cancelled = false; setSearchLoading(true); const fetchProjectUsers = async () => { try { const [noCred, cred] = await Promise.all([ monolithStore.getProjectUsersNoCredentials( adminMode, id, AUTOCOMPLETE_LIMIT, offset, debouncedSearch || '', ), monolithStore.getProjectUsers( adminMode, id, debouncedSearch || '', '', // permission offset, AUTOCOMPLETE_LIMIT, ), ]); const all = [...(noCred?.data || []), ...(cred?.members || [])]; const unique = Array.from( new Map(all.map((u) => [u.id, u])).values(), ); if (!cancelled) { if (unique.length < AUTOCOMPLETE_LIMIT) setInfiniteOn(false); if ( renderedMembers.length >= AUTOCOMPLETE_LIMIT && offset > 0 ) { setRenderedMembers((prev) => [...prev, ...unique]); } else { setRenderedMembers(unique); } setSearchLoading(false); } } catch (e) { if (!cancelled) { notification.add({ color: 'error', message: String(e), }); setSearchLoading(false); } } }; fetchProjectUsers(); return () => { cancelled = true; }; // eslint-disable-next-line }, [open, debouncedSearch, offset, adminMode, id, type]); // Fetch and combine members for engine types useEffect(() => { if ( !open || !( type === 'DATABASE' || type === 'STORAGE' || type === 'MODEL' || type === 'VECTOR' || type === 'FUNCTION' ) ) { return; } let cancelled = false; setSearchLoading(true); const fetchEngineUsers = async () => { try { const [noCred, cred] = await Promise.all([ monolithStore.getEngineUsersNoCredentials( adminMode, id, AUTOCOMPLETE_LIMIT, offset, debouncedSearch || '', ), monolithStore.getEngineUsers( adminMode, id, debouncedSearch || '', '', // permission offset, AUTOCOMPLETE_LIMIT, ), ]); const all = [...(noCred?.data || []), ...(cred?.members || [])]; const unique = Array.from( new Map(all.map((u) => [u.id, u])).values(), ); if (!cancelled) { if (unique.length < AUTOCOMPLETE_LIMIT) setInfiniteOn(false); if ( renderedMembers.length >= AUTOCOMPLETE_LIMIT && offset > 0 ) { setRenderedMembers((prev) => [...prev, ...unique]); } else { setRenderedMembers(unique); } setSearchLoading(false); } } catch (e) { if (!cancelled) { notification.add({ color: 'error', message: String(e), }); setSearchLoading(false); } } }; fetchEngineUsers(); return () => { cancelled = true; }; // eslint-disable-next-line }, [open, debouncedSearch, offset, adminMode, id, type]); Permission Check The code disables options based on option.permission, but it’s unclear if that property always exists or correctly indicates an already-added user. Verify the data shape and property name to ensure the disable logic is reliable. getOptionDisabled={(option) => !!option.permission} renderOption={(props, option) => { const { ...optionProps } = props; const hasPermission = !!option.permission; return ( <li key={option.id} {...optionProps}> <div style={{ maxWidth: '85%', overflow: 'hidden', }} > <MembersAddOverlayUser name={option.name} id={option.id} email={option.email} type={option.type} /> </div> {hasPermission && ( <div style={{ whiteSpace: 'nowrap', display: 'inline-block', fontSize: '12px', }} > Already Added </div> )}

[CodiumAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 4f6416e

Category	Suggestion	Impact
Possible issue	Add effect cleanup Add a cleanup function in the effect to set cancelled to true when the component unmounts or dependencies change. This prevents state updates on unmounted components and avoids potential memory leaks. packages/client/src/components/settings/MembersAddOverlay.tsx [206-285] useEffect(() => { if (!open) return; let cancelled = false; setSearchLoading(true); const fetchUsers = async () => { /* ... */ }; fetchUsers(); + + return () => { + cancelled = true; + }; }, [open, debouncedSearch, offset, adminMode, id, type]); Suggestion importance[1-10]: 8 __ Why: The effect defines cancelled but lacks a cleanup to set it on unmount, so adding it prevents state updates on unmounted components and avoids memory leaks.	Medium
	Use functional state update Use a functional update for setRenderedMembers to remove the direct reference to renderedMembers. This ensures the logic always operates on the latest state without stale closures. packages/client/src/components/settings/MembersAddOverlay.tsx [264-272] if (!cancelled) { + setRenderedMembers((prev) => { + const next = prev.length >= AUTOCOMPLETE_LIMIT && offset > 0 + ? [...prev, ...all] + : all; + return next; + }); if (all.length < AUTOCOMPLETE_LIMIT) setInfiniteOn(false); - if (renderedMembers.length >= AUTOCOMPLETE_LIMIT && offset > 0) { - setRenderedMembers((prev) => [...prev, ...all]); - } else { - setRenderedMembers(all); - } setSearchLoading(false); } Suggestion importance[1-10]: 6 __ Why: Referencing renderedMembers directly within the effect can lead to stale closures; using a functional update ensures the latest state is used when updating.	Low

---

Previous suggestions

Suggestions up to commit 56347d8

Category	Suggestion	Impact
Possible issue	Use functional update for state Avoid referencing the outer renderedMembers state in the effect to prevent stale-value bugs; consolidate to a single functional state update that handles both initial loads and pagination. packages/client/src/components/settings/MembersAddOverlay.tsx [239-245] -if ( - renderedMembers.length >= AUTOCOMPLETE_LIMIT && - offset > 0 -) { - setRenderedMembers((prev) => [...prev, ...unique]); -} else { - setRenderedMembers(unique); -} +setRenderedMembers((prev) => { + if (offset > 0 && prev.length >= AUTOCOMPLETE_LIMIT) { + return [...prev, ...unique]; + } + return unique; +}); Suggestion importance[1-10]: 7 __ Why: Consolidating to a functional state update avoids stale references to renderedMembers and prevents potential bugs.	Medium
General	Remove stale commented code Remove this commented-out getMembers.refresh() call since it is no longer relevant and clutters the code. packages/client/src/components/settings/MembersAddOverlay.tsx [425] -// getMembers.refresh(); + Suggestion importance[1-10]: 2 __ Why: This commented-out call is no longer used and removing it improves readability, but it has minimal functional impact.	Low

[anurag91jain]

this is not being used

[aditiiisinhaa]

Okay, I've removed it.

[anurag91jain]

the items are always going to be unique so we don't need it

[aditiiisinhaa]

I've removed it, kindly review it once.

[anurag91jain]

why do we need to disable this?

[anurag91jain]

Instead of adding 2 useEffects, you can check whether the type is app or not. If the type is app, then the API calls need to go to getProjectUsersNoCredentials and getProjectUsers. If the type is not app, then the API calls need to go to getEngineUsersNoCredentials and getEngineUsers. The rest of the code is the same.

[aditiiisinhaa]

Okay, I've made the required changes, kindly review it.

[anurag91jain]

Remove unused code

[aditiiisinhaa]

Okay, I've removed the unused code.

[aditiiisinhaa]

Here are the screenshots of how it appears after the changes:

For Open Function:

For App:

[github-actions]

@CodiumAI-Agent /update_changelog

[CodiumAI-Agent]

Changelog updates: 🔄

2025-06-10 *

Added

• Display “Already Added” status and disable selection for users who already have access in the Add Members modal.

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