Make <Avatar> related code more consistent

src/components/Avatar.tsx

@@ -45,12 +45,12 @@ type AvatarProps = {
     /** Used to locate fallback icon in end-to-end tests. */
     fallbackIconTestID?: string;
 
-    /** Denotes whether it is an avatar or a workspace avatar */
-    type?: AvatarType;
-
     /** Owner of the avatar. If user, displayName. If workspace, policy name */
     name?: string;
 
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type: AvatarType;
+
     /** Optional account id if it's user avatar or policy id if it's workspace avatar */
     avatarID?: number | string;
 };
@@ -79,10 +79,10 @@ function Avatar({
         setImageError(false);
     }, [originalSource]);
 
-    const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
+    const isWorkspace = type === 'workspace';
+    const userAccountID = isWorkspace ? undefined : (avatarID as number);
 
-    // If it's user avatar then accountID will be a number
-    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, avatarID as number);
+    const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, userAccountID);
     const useFallBackAvatar = imageError || !source || source === Expensicons.FallbackAvatar;
     const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
     const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';

src/components/AvatarWithIndicator.tsx

@@ -41,6 +41,7 @@ function AvatarWithIndicator({source, accountID, tooltipText = '', fallbackIcon
                             source={UserUtils.getSmallSizeAvatar(source, accountID)}
                             fallbackIcon={fallbackIcon}
                             avatarID={accountID}
+                            type={CONST.ICON_TYPE_AVATAR}
                         />
                         <Indicator />
                     </>

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -184,11 +184,12 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                     >
                         <View style={sidebarInnerRowStyle}>
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                {(optionItem.icons?.length ?? 0) > 0 &&
+                                {optionItem.icons &&
+                                    optionItem.icons.length > 0 &&
                                     (optionItem.shouldShowSubscript ? (
                                         <SubscriptAvatar
                                             backgroundColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
-                                            mainAvatar={optionItem.icons?.[0]}
+                                            mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons?.[1]}
                                             size={isInFocusMode ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                         />

src/components/MenuItem.tsx

@@ -561,6 +561,7 @@ function MenuItem(
                                                             avatarID={avatarID}
                                                             fallbackIcon={fallbackIcon}
                                                             size={avatarSize}
+                                                            type={CONST.ICON_TYPE_AVATAR}
                                                         />
                                                     )}
                                                 </View>

src/components/SubscriptAvatar.tsx

@@ -27,8 +27,8 @@ type SubIcon = {
 };
 
 type SubscriptAvatarProps = {
-    /** Avatar URL or icon */
-    mainAvatar?: IconType;
+    /** Avatar icon */
+    mainAvatar: IconType;
 
     /** Subscript avatar URL or icon */
     secondaryAvatar?: IconType;

src/libs/UserUtils.ts

@@ -212,7 +212,6 @@ export {
     generateAccountID,
     getAvatar,
     getAvatarUrl,
-    getDefaultAvatar,
     getDefaultAvatarURL,
     getFullSizeAvatar,
     getLoginListBrickRoadIndicator,

src/pages/ProfilePage.tsx

@@ -198,6 +198,7 @@ function ProfilePage({route}: ProfilePageProps) {
                                         imageStyles={[styles.avatarXLarge]}
                                         source={details.avatar}
                                         avatarID={accountID}
+                                        type={CONST.ICON_TYPE_AVATAR}
                                         size={CONST.AVATAR_SIZE.XLARGE}
                                         fallbackIcon={fallbackIcon}
                                     />

src/pages/ReportParticipantDetailsPage.tsx

@@ -87,6 +87,7 @@ function ReportParticipantDetails({personalDetails, report, route}: ReportPartic
                         imageStyles={[styles.avatarXLarge]}
                         source={details.avatar}
                         avatarID={accountID}
+                        type={CONST.ICON_TYPE_AVATAR}
                         size={CONST.AVATAR_SIZE.XLARGE}
                         fallbackIcon={fallbackIcon}
                     />

src/pages/workspace/WorkspaceProfilePage.tsx

@@ -141,6 +141,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                         <AvatarWithImagePicker
                             onViewPhotoPress={() => Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? ''))}
                             source={policy?.avatarURL ?? ''}
+                            avatarID={policy?.id}
                             size={CONST.AVATAR_SIZE.XLARGE}
                             avatarStyle={styles.avatarXLarge}
                             enablePreview

src/pages/workspace/WorkspacesListRow.tsx

@@ -212,6 +212,7 @@ function WorkspacesListRow({
                             <Avatar
                                 source={ownerDetails.avatar}
                                 avatarID={ownerDetails.accountID}
+                                type={CONST.ICON_TYPE_AVATAR}
                                 size={CONST.AVATAR_SIZE.SMALL}
                                 containerStyles={styles.workspaceOwnerAvatarWrapper}
                             />

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -160,6 +160,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                 imageStyles={[styles.avatarXLarge]}
                                 source={details.avatar}
                                 avatarID={accountID}
+                                type={CONST.ICON_TYPE_AVATAR}
                                 size={CONST.AVATAR_SIZE.XLARGE}
                                 fallbackIcon={fallbackIcon}
                             />

tests/unit/UserUtilsTest.ts

@@ -1,9 +1,17 @@
 import * as UserUtils from '@src/libs/UserUtils';
 
 describe('UserUtils', () => {
-    it('should return the default avatar from the avatar url', () => {
+    it('should return default avatar if the url is for default avatar', () => {
         const avatarURL = 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/default-avatar_7.png';
-        const defaultAvatar = UserUtils.getDefaultAvatar(1, avatarURL);
+        const defaultAvatar = UserUtils.getAvatar(avatarURL, 1);
+
         expect(typeof defaultAvatar).toBe('function');
     });
+
+    it('should return the same url if url is not for default avatar', () => {
+        const avatarURL = 'https://test.com/images/some_avatar.png';
+        const avatar = UserUtils.getAvatar(avatarURL, 1);
+
+        expect(avatar).toEqual('https://test.com/images/some_avatar.png');
+    });
 });