From 00dd36fe7cc3d6d78a5d667ded5ec6fe978bbcfe Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 2 May 2024 14:46:33 +0700 Subject: [PATCH 1/8] fix: Each workspace avatar in sender list has the same avatar --- src/components/MenuItem.tsx | 5 +++++ src/components/MoneyRequestConfirmationList.tsx | 1 + src/pages/iou/request/step/IOURequestStepSendFrom.tsx | 1 + 3 files changed, 7 insertions(+) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index bf35d65340fc..6d07ea1538b3 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -259,6 +259,9 @@ type MenuItemBaseProps = { /** Handles what to do when the item is focused */ onFocus?: () => void; + + /** Optional account id if it's user avatar or policy id if it's workspace avatar */ + accountId?: number | string; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -334,6 +337,7 @@ function MenuItem( isPaneMenu = false, shouldPutLeftPaddingWhenNoIcon = false, onFocus, + accountId = '', }: MenuItemProps, ref: PressableRef, ) { @@ -515,6 +519,7 @@ function MenuItem( fallbackIcon={fallbackIcon} name={title} type={CONST.ICON_TYPE_WORKSPACE} + accountID={accountId} /> )} {iconType === CONST.ICON_TYPE_AVATAR && ( diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index dd3e207c45fa..4c51e6a9235f 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1040,6 +1040,7 @@ function MoneyRequestConfirmationList({ )} {isTypeInvoice && ( Date: Fri, 3 May 2024 00:31:04 +0700 Subject: [PATCH 2/8] fix: regression 41387 --- .../UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx | 1 + src/pages/ReportAvatar.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index 0f7316062027..09631eadc785 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx @@ -64,6 +64,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA type={icon?.type ?? CONST.ICON_TYPE_AVATAR} name={icon?.name ?? userLogin} fallbackIcon={icon?.fallbackIcon} + accountID={icon?.id} /> {title} diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx index 121b238012bf..020db2f76bd9 100644 --- a/src/pages/ReportAvatar.tsx +++ b/src/pages/ReportAvatar.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React from 'react'; +import React, {useEffect} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; @@ -35,7 +35,7 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re }} isWorkspaceAvatar maybeIcon - originalFileName={policy?.originalFileName ?? policyName} + originalFileName={policy?.originalFileName ?? policy?.id} shouldShowNotFoundPage={!report?.reportID && !isLoadingApp} isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp} /> From 89c652b5e6dc701d6f5f810b567144abdb9c71d1 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 3 May 2024 09:27:10 +0700 Subject: [PATCH 3/8] remove useless code --- src/pages/ReportAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx index 020db2f76bd9..8ef32fbece38 100644 --- a/src/pages/ReportAvatar.tsx +++ b/src/pages/ReportAvatar.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useEffect} from 'react'; +import React from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; From 9ca04c65c26fcd48cd07e1edf2ae9fd604cedccd Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 8 May 2024 12:00:58 +0700 Subject: [PATCH 4/8] fix: typo --- src/components/MenuItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 6d07ea1538b3..69fa795391b4 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -261,7 +261,7 @@ type MenuItemBaseProps = { onFocus?: () => void; /** Optional account id if it's user avatar or policy id if it's workspace avatar */ - accountId?: number | string; + accountID?: number | string; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -337,7 +337,7 @@ function MenuItem( isPaneMenu = false, shouldPutLeftPaddingWhenNoIcon = false, onFocus, - accountId = '', + accountID = '', }: MenuItemProps, ref: PressableRef, ) { @@ -519,7 +519,7 @@ function MenuItem( fallbackIcon={fallbackIcon} name={title} type={CONST.ICON_TYPE_WORKSPACE} - accountID={accountId} + accountID={accountID} /> )} {iconType === CONST.ICON_TYPE_AVATAR && ( From afdc4a023551e8c518be9d709d03dbf022158050 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 9 May 2024 22:28:13 +0700 Subject: [PATCH 5/8] Add comment to report avatar --- src/components/MenuItem.tsx | 2 +- src/components/MoneyRequestConfirmationList.tsx | 1 + src/pages/ReportAvatar.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 69fa795391b4..82df915334a8 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -337,7 +337,7 @@ function MenuItem( isPaneMenu = false, shouldPutLeftPaddingWhenNoIcon = false, onFocus, - accountID = '', + accountID, }: MenuItemProps, ref: PressableRef, ) { diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index b97578210ad9..b38976c75631 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1106,6 +1106,7 @@ function MoneyRequestConfirmationList({ )} {isTypeInvoice && ( Date: Fri, 10 May 2024 00:26:18 +0700 Subject: [PATCH 6/8] Fix the avatar of report preview action --- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 234147a30bd5..bf0a1c6e3f71 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -135,7 +135,7 @@ function ReportActionItemSingle({ source: avatarSource, type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, name: primaryDisplayName ?? '', - id: isWorkspaceActor ? '' : actorAccountID, + id: isWorkspaceActor ? report.policyID : actorAccountID, }; // Since the display name for a report action message is delivered with the report history as an array of fragments From be0f12227e53a6b983076342cdd0b03f687828f7 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 13 May 2024 15:36:03 +0700 Subject: [PATCH 7/8] rename accountID prop to avatarID prop --- src/components/Avatar.tsx | 8 ++++---- src/components/HeaderWithBackButton/index.tsx | 2 +- src/components/MentionSuggestions.tsx | 2 +- src/components/MenuItem.tsx | 6 +++--- src/components/MoneyRequestConfirmationList.tsx | 2 +- src/components/MultipleAvatars.tsx | 8 ++++---- src/components/RoomHeaderAvatars.tsx | 4 ++-- src/components/SelectionList/TransactionListItem.tsx | 2 +- src/components/SubscriptAvatar.tsx | 4 ++-- .../UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx | 2 +- src/pages/ReportAvatar.tsx | 2 +- src/pages/home/report/ReportActionItemSingle.tsx | 2 +- src/pages/workspace/WorkspaceProfilePage.tsx | 2 +- src/pages/workspace/WorkspacesListRow.tsx | 2 +- 14 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 4acf197ba178..f633869ccd30 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -52,7 +52,7 @@ type AvatarProps = { name?: string; /** Optional account id if it's user avatar or policy id if it's workspace avatar */ - accountID?: number | string; + avatarID?: number | string; }; function Avatar({ @@ -66,7 +66,7 @@ function Avatar({ fallbackIconTestID = '', type = CONST.ICON_TYPE_AVATAR, name = '', - accountID, + avatarID, }: AvatarProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -86,7 +86,7 @@ function Avatar({ const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined; // We pass the color styles down to the SVG for the workspace and fallback avatar. - const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(accountID)); + const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(avatarID)); 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'; @@ -94,7 +94,7 @@ function Avatar({ let iconColors; if (isWorkspace) { - iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(accountID?.toString() ?? ''); + iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(avatarID?.toString() ?? ''); } else if (useFallBackAvatar) { iconColors = StyleUtils.getBackgroundColorAndFill(theme.buttonHoveredBG, theme.icon); } else { diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index 70f1b97c04b1..78cd92dbc223 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -182,7 +182,7 @@ function HeaderWithBackButton({ containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]} source={policyAvatar?.source} name={policyAvatar?.name} - accountID={policyAvatar?.id} + avatarID={policyAvatar?.id} type={policyAvatar?.type} /> )} diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index b11ae4f5ecd8..a787ac5ded56 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -83,7 +83,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe source={item.icons[0].source} size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER} name={item.icons[0].name} - accountID={item.icons[0].id} + avatarID={item.icons[0].id} type={item.icons[0].type} fill={isIcon ? theme.success : undefined} fallbackIcon={item.icons[0].fallbackIcon} diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 0745d75d9ab9..dbd5fb9ef761 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -267,7 +267,7 @@ type MenuItemBaseProps = { onFocus?: () => void; /** Optional account id if it's user avatar or policy id if it's workspace avatar */ - accountID?: number | string; + avatarID?: number | string; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -345,7 +345,7 @@ function MenuItem( isPaneMenu = false, shouldPutLeftPaddingWhenNoIcon = false, onFocus, - accountID, + avatarID, }: MenuItemProps, ref: PressableRef, ) { @@ -527,7 +527,7 @@ function MenuItem( fallbackIcon={fallbackIcon} name={title} type={CONST.ICON_TYPE_WORKSPACE} - accountID={accountID} + avatarID={avatarID} /> )} {iconType === CONST.ICON_TYPE_AVATAR && ( diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 151b94de7fe5..bc82fea8cb53 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1107,7 +1107,7 @@ function MoneyRequestConfirmationList({ )} {isTypeInvoice && ( @@ -206,7 +206,7 @@ function MultipleAvatars({ source={icon.source ?? fallbackIcon} size={size} name={icon.name} - accountID={icon.id} + avatarID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> @@ -265,7 +265,7 @@ function MultipleAvatars({ imageStyles={[singleAvatarStyle]} name={icons[0].name} type={icons[0].type} - accountID={icons[0].id} + avatarID={icons[0].id} fallbackIcon={icons[0].fallbackIcon} /> @@ -285,7 +285,7 @@ function MultipleAvatars({ size={avatarSize} imageStyles={[singleAvatarStyle]} name={icons[1].name} - accountID={icons[1].id} + avatarID={icons[1].id} type={icons[1].type} fallbackIcon={icons[1].fallbackIcon} /> diff --git a/src/components/RoomHeaderAvatars.tsx b/src/components/RoomHeaderAvatars.tsx index bdb4a0ac78ab..fc3dda9668dd 100644 --- a/src/components/RoomHeaderAvatars.tsx +++ b/src/components/RoomHeaderAvatars.tsx @@ -47,7 +47,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) { imageStyles={styles.avatarLarge} size={CONST.AVATAR_SIZE.LARGE} name={icons[0].name} - accountID={icons[0].id} + avatarID={icons[0].id} type={icons[0].type} fallbackIcon={icons[0].fallbackIcon} /> @@ -83,7 +83,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) { size={CONST.AVATAR_SIZE.LARGE} containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]} name={icon.name} - accountID={icon.id} + avatarID={icon.id} type={icon.type} fallbackIcon={icon.fallbackIcon} /> diff --git a/src/components/SelectionList/TransactionListItem.tsx b/src/components/SelectionList/TransactionListItem.tsx index 0965ce6dabce..2fd2c107bb96 100644 --- a/src/components/SelectionList/TransactionListItem.tsx +++ b/src/components/SelectionList/TransactionListItem.tsx @@ -96,7 +96,7 @@ function TransactionListItem({ source={avatarURL} name={displayName} type={iconType} - accountID={isWorkspace ? participant?.id : participant?.accountID} + avatarID={isWorkspace ? participant?.id : participant?.accountID} /> @@ -109,7 +109,7 @@ function SubscriptAvatar({ size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT} fill={secondaryAvatar.fill} name={secondaryAvatar.name} - accountID={secondaryAvatar.id} + avatarID={secondaryAvatar.id} type={secondaryAvatar.type} fallbackIcon={secondaryAvatar.fallbackIcon} /> diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index 09631eadc785..7a54aadac495 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx @@ -64,7 +64,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA type={icon?.type ?? CONST.ICON_TYPE_AVATAR} name={icon?.name ?? userLogin} fallbackIcon={icon?.fallbackIcon} - accountID={icon?.id} + avatarID={icon?.id} /> {title} diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx index 8ab55a096f66..e8e63e51e146 100644 --- a/src/pages/ReportAvatar.tsx +++ b/src/pages/ReportAvatar.tsx @@ -35,7 +35,7 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re }} isWorkspaceAvatar maybeIcon - // In the case of the default workspace avatar, we will use the policy id instead of the workspace name + // In the case of the default workspace avatar, we will use the policy id that will be originalFileName prop to get the color of the avatar. originalFileName={policy?.originalFileName ?? policy?.id} shouldShowNotFoundPage={!report?.reportID && !isLoadingApp} isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index bf0a1c6e3f71..c082a9122dbb 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -205,7 +205,7 @@ function ReportActionItemSingle({ source={icon.source} type={icon.type} name={icon.name} - accountID={icon.id} + avatarID={icon.id} fallbackIcon={fallbackIcon} /> diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index 8500aecdcaa7..ca332072b1f5 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -93,7 +93,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi fallbackIcon={Expensicons.FallbackWorkspaceAvatar} size={CONST.AVATAR_SIZE.XLARGE} name={policyName} - accountID={policy?.id ?? ''} + avatarID={policy?.id ?? ''} type={CONST.ICON_TYPE_WORKSPACE} /> ), diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index a1affd935c50..86cbbabb1784 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -196,7 +196,7 @@ function WorkspacesListRow({ size={CONST.AVATAR_SIZE.DEFAULT} source={workspaceIcon} fallbackIcon={fallbackWorkspaceIcon} - accountID={policyID} + avatarID={policyID} name={title} type={CONST.ICON_TYPE_WORKSPACE} /> From e602e57c52598d9d536d861435d467245a9b9a1b Mon Sep 17 00:00:00 2001 From: nkdengineer <161821005+nkdengineer@users.noreply.github.com> Date: Wed, 15 May 2024 18:38:59 +0700 Subject: [PATCH 8/8] Update src/pages/ReportAvatar.tsx Co-authored-by: Monil Bhavsar --- src/pages/ReportAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx index e8e63e51e146..6b4c2e35c19f 100644 --- a/src/pages/ReportAvatar.tsx +++ b/src/pages/ReportAvatar.tsx @@ -35,7 +35,7 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re }} isWorkspaceAvatar maybeIcon - // In the case of the default workspace avatar, we will use the policy id that will be originalFileName prop to get the color of the avatar. + // In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar originalFileName={policy?.originalFileName ?? policy?.id} shouldShowNotFoundPage={!report?.reportID && !isLoadingApp} isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}