Refactor AgentsListRow and AgentsPage components to replace Avatar with ReportActionAvatars for improved visual consistency. Remove avatar prop from AgentsPage and update related styles. Integrate usePersonalDetails hook for better data handling in AgentsPage.

NicolasBonet · NicolasBonet · commit 6ea694248748 · 2026-05-01T16:46:46.000-05:00
diff --git a/src/pages/settings/Agents/AgentsListRow.tsx b/src/pages/settings/Agents/AgentsListRow.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {View} from 'react-native';
-import Avatar from '@components/Avatar';
+import ReportActionAvatars from '@components/ReportActionAvatars';
 import Text from '@components/Text';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {AvatarSource} from '@libs/UserAvatarUtils';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type AgentsListRowProps = {
@@ -15,25 +16,19 @@ type AgentsListRowProps = {
 
     /** Login email of the agent */
     login: string;
-
-    /** Avatar source of the agent */
-    avatar: AvatarSource;
 };
 
-function AgentsListRow({accountID, displayName, login, avatar}: AgentsListRowProps) {
+function AgentsListRow({accountID, displayName, login}: AgentsListRowProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
 
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.highlightBG, styles.br3, styles.mh5, styles.mb3, styles.ph5, styles.pv3, styles.gap5]}>
-            <Avatar
-                size={CONST.AVATAR_SIZE.DEFAULT}
-                source={avatar}
-                avatarID={accountID}
-                name={displayName}
-                type={CONST.ICON_TYPE_AVATAR}
-                containerStyles={styles.agentsListRowAvatar}
-                imageStyles={styles.agentsListRowAvatar}
-                iconAdditionalStyles={styles.agentsListRowAvatarInner}
+            <ReportActionAvatars
+                accountIDs={[accountID]}
+                size={CONST.AVATAR_SIZE.LARGE_NORMAL}
+                shouldShowTooltip={false}
+                singleAvatarContainerStyle={[StyleUtils.getWidthAndHeightStyle(variables.avatarSizeLargeNormal)]}
             />
             <View style={[styles.flex1, styles.gap2]}>
                 <Text
diff --git a/src/pages/settings/Agents/AgentsPage.tsx b/src/pages/settings/Agents/AgentsPage.tsx
@@ -3,6 +3,7 @@ import {FlatList, View} from 'react-native';
 import Button from '@components/Button';
 import GenericEmptyStateComponent from '@components/EmptyStateComponent/GenericEmptyStateComponent';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
@@ -24,21 +25,20 @@ type AgentItem = {
     accountID: number;
     displayName: string;
     login: string;
-    avatar: string;
 };
 
 function AgentsPage() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const illustrations = useMemoizedLazyIllustrations(['TvScreenRobot', 'AiBot']);
-    const icons = useMemoizedLazyExpensifyIcons(['Plus', 'FallbackAvatar']);
+    const icons = useMemoizedLazyExpensifyIcons(['Plus']);
     const {isBetaEnabled} = usePermissions();
     const isCustomAgentEnabled = isBetaEnabled(CONST.BETAS.CUSTOM_AGENT);
     useDocumentTitle(translate('agentsPage.title'));
 
     const [agentPrompts] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT);
-    const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const personalDetailsList = usePersonalDetails();
 
     useEffect(() => {
         if (!isCustomAgentEnabled) {
@@ -60,19 +60,17 @@ function AgentsPage() {
                         accountID,
                         displayName: details.displayName ?? details.login ?? '',
                         login: details.login ?? '',
-                        avatar: (details.avatar as string) ?? (icons.FallbackAvatar as string),
                     };
                 })
                 .filter((item): item is AgentItem => item !== null),
-        [agentPrompts, personalDetailsList, icons.FallbackAvatar],
+        [agentPrompts, personalDetailsList],
     );
 
     const renderItem = ({item}: {item: AgentItem}) => (
         <AgentsListRow
             accountID={item.accountID}
             displayName={item.displayName}
             login={item.login}
-            avatar={item.avatar}
         />
     );
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -5496,19 +5496,6 @@ const staticStyles = (theme: ThemeColors) =>
             alignSelf: 'center',
         },
 
-        agentsListRowAvatar: {
-            width: variables.avatarSizeLargeNormal,
-            height: variables.avatarSizeLargeNormal,
-        },
-
-        agentsListRowAvatarInner: {
-            width: variables.avatarSizeLargeNormal,
-            height: variables.avatarSizeLargeNormal,
-            borderRadius: 24,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-
         emptyStateFolderWithPaperIconSize: {
             width: 160,
             height: 100,
diff --git a/tests/unit/pages/settings/AgentsPageTest.tsx b/tests/unit/pages/settings/AgentsPageTest.tsx
@@ -1,5 +1,6 @@
 import {render} from '@testing-library/react-native';
 import React from 'react';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import AgentsPage from '@pages/settings/Agents/AgentsPage';
@@ -36,11 +37,19 @@ jest.mock('@hooks/useDocumentTitle', () => jest.fn());
 
 jest.mock('@hooks/useLazyAsset', () => ({
     useMemoizedLazyIllustrations: jest.fn(() => ({TvScreenRobot: 1, AiBot: 1})),
-    useMemoizedLazyExpensifyIcons: jest.fn(() => ({Plus: 1, FallbackAvatar: 1})),
+    useMemoizedLazyExpensifyIcons: jest.fn(() => ({Plus: 1})),
 }));
 
 jest.mock('@hooks/useOnyx', () => jest.fn(() => [undefined, {status: 'loaded'}]));
 
+jest.mock('@components/OnyxListItemProvider', () => ({
+    usePersonalDetails: jest.fn(() => ({})),
+    useSession: jest.fn(() => ({})),
+    usePolicyCategories: jest.fn(() => ({})),
+    usePolicyTags: jest.fn(() => ({})),
+    useAllReportsTransactionsAndViolations: jest.fn(() => ({})),
+}));
+
 jest.mock('@libs/Navigation/Navigation', () => ({
     goBack: jest.fn(),
 }));
@@ -103,12 +112,14 @@ jest.mock('@pages/ErrorPage/NotFoundPage', () => {
 const mockUsePermissions = jest.mocked(usePermissions);
 const mockOpenAgentsPage = jest.mocked(openAgentsPage);
 const mockUseOnyx = jest.mocked(useOnyx);
+const mockUsePersonalDetails = jest.mocked(usePersonalDetails);
 
 describe('AgentsPage', () => {
     beforeEach(() => {
         jest.clearAllMocks();
         mockUsePermissions.mockReturnValue({isBetaEnabled: () => true});
         mockUseOnyx.mockReturnValue([undefined, {status: 'loaded'}]);
+        mockUsePersonalDetails.mockReturnValue({});
     });
 
     it('renders page content when customAgent beta is enabled', () => {
@@ -155,21 +166,16 @@ describe('AgentsPage', () => {
             if (key === ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT) {
                 return [{[`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${TEST_ACCOUNT_ID}`]: {prompt: 'Test prompt'}}, {status: 'loaded'}];
             }
-            if (key === ONYXKEYS.PERSONAL_DETAILS_LIST) {
-                return [
-                    {
-                        [TEST_ACCOUNT_ID]: {
-                            accountID: TEST_ACCOUNT_ID,
-                            displayName: 'Test Agent',
-                            login: 'agent@example.com',
-                            avatar: undefined,
-                        },
-                    },
-                    {status: 'loaded'},
-                ];
-            }
             return [undefined, {status: 'loaded'}];
         });
+        mockUsePersonalDetails.mockReturnValue({
+            [TEST_ACCOUNT_ID]: {
+                accountID: TEST_ACCOUNT_ID,
+                displayName: 'Test Agent',
+                login: 'agent@example.com',
+                avatar: undefined,
+            },
+        });
 
         const {toJSON} = render(<AgentsPage />);
         const output = JSON.stringify(toJSON());
@@ -184,12 +190,10 @@ describe('AgentsPage', () => {
             if (key === ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT) {
                 return [{[`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${TEST_ACCOUNT_ID}`]: {prompt: 'Test prompt'}}, {status: 'loaded'}];
             }
-            // personalDetailsList has no entry for TEST_ACCOUNT_ID
-            if (key === ONYXKEYS.PERSONAL_DETAILS_LIST) {
-                return [{}, {status: 'loaded'}];
-            }
             return [undefined, {status: 'loaded'}];
         });
+        // personalDetailsList has no entry for TEST_ACCOUNT_ID
+        mockUsePersonalDetails.mockReturnValue({});
 
         const {toJSON} = render(<AgentsPage />);
 
