diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index c0d89f4acf1e..2fbe69a120a0 100644 --- a/src/components/Avatar.tsx +++ b/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; }; @@ -64,7 +64,7 @@ function Avatar({ fill, fallbackIcon = Expensicons.FallbackAvatar, fallbackIconTestID = '', - type = CONST.ICON_TYPE_AVATAR, + type, name = '', avatarID, }: AvatarProps) { @@ -80,9 +80,9 @@ function Avatar({ }, [originalSource]); const isWorkspace = type === CONST.ICON_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'; diff --git a/src/components/AvatarWithIndicator.tsx b/src/components/AvatarWithIndicator.tsx index f024a1239f4e..bf8fe93b8b21 100644 --- a/src/components/AvatarWithIndicator.tsx +++ b/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} /> diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 851e2a9fdd16..66b444daf33a 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -184,17 +184,17 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti > - {(optionItem.icons?.length ?? 0) > 0 && + {!!optionItem.icons?.length && (optionItem.shouldShowSubscript ? ( ) : ( )} diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx index 46a88c54219c..789b4b4957c3 100644 --- a/src/components/SubscriptAvatar.tsx +++ b/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; diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts index 946c92fed19d..c5291a2864d7 100644 --- a/src/libs/UserUtils.ts +++ b/src/libs/UserUtils.ts @@ -212,7 +212,6 @@ export { generateAccountID, getAvatar, getAvatarUrl, - getDefaultAvatar, getDefaultAvatarURL, getFullSizeAvatar, getLoginListBrickRoadIndicator, diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index fd2b7696a5b1..df842f633644 100755 --- a/src/pages/ProfilePage.tsx +++ b/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} /> diff --git a/src/pages/ReportParticipantDetailsPage.tsx b/src/pages/ReportParticipantDetailsPage.tsx index 0e22901d8ff7..8f9c101e68cc 100644 --- a/src/pages/ReportParticipantDetailsPage.tsx +++ b/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} /> diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index aabe99019c4f..eb6e687fb337 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -141,6 +141,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(policy?.id ?? ''))} source={policy?.avatarURL ?? ''} + avatarID={policy?.id} size={CONST.AVATAR_SIZE.XLARGE} avatarStyle={styles.avatarXLarge} enablePreview diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index 236ca1e1b89c..5a2462a45cf9 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -212,6 +212,7 @@ function WorkspacesListRow({ diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 185b9cd0cfa2..5174e9324523 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/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} /> diff --git a/tests/unit/UserUtilsTest.ts b/tests/unit/UserUtilsTest.ts index f91f2a499e79..e5378c756751 100644 --- a/tests/unit/UserUtilsTest.ts +++ b/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'); + }); });