Merge pull request #41485 from nkdengineer/fix/41385

fix: regressions related to workspace avatars
Expensify · May 15, 2024 · 1ee5d03 · 1ee5d03
2 parents 947f9c6 + e602e57
commit 1ee5d03
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 20 deletions.
diff --git 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,15 +86,15 @@ 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';
     const avatarSource = useFallBackAvatar ? fallbackAvatar : source;
 
     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
@@ -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
@@ -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
@@ -265,6 +265,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 */
+    avatarID?: number | string;
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -342,6 +345,7 @@ function MenuItem(
         isPaneMenu = false,
         shouldPutLeftPaddingWhenNoIcon = false,
         onFocus,
+        avatarID,
     }: MenuItemProps,
     ref: PressableRef,
 ) {
@@ -526,6 +530,7 @@ function MenuItem(
                                                             source={icon as AvatarSource}
                                                             fallbackIcon={fallbackIcon}
                                                             name={title}
+                                                            avatarID={avatarID}
                                                             type={CONST.ICON_TYPE_WORKSPACE}
                                                         />
                                                     )}

diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -1133,6 +1133,7 @@ function MoneyRequestConfirmationList({
                 {isTypeInvoice && (
                     <MenuItem
                         key={translate('workspace.invoices.sendFrom')}
+                        avatarID={senderWorkspace?.id}
                         shouldShowRightIcon={!isReadOnly && canUpdateSenderWorkspace}
                         title={senderWorkspace?.name}
                         icon={senderWorkspace?.avatarURL ? senderWorkspace?.avatarURL : getDefaultWorkspaceAvatar(senderWorkspace?.name)}
@@ -1207,6 +1208,7 @@ function MoneyRequestConfirmationList({
             reportID,
             senderWorkspace?.avatarURL,
             senderWorkspace?.name,
+            senderWorkspace?.id,
             shouldShowAllFields,
             styles.confirmationListMapItem,
             styles.flex1,

diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
@@ -156,7 +156,7 @@ function MultipleAvatars({
                         size={size}
                         fill={icons[0].fill}
                         name={icons[0].name}
-                        accountID={icons[0].id}
+                        avatarID={icons[0].id}
                         type={icons[0].type}
                         fallbackIcon={icons[0].fallbackIcon}
                     />
@@ -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}
                         />
                     </View>
@@ -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
@@ -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
@@ -98,7 +98,7 @@ function TransactionListItem<TItem extends ListItem>({
                     source={avatarURL}
                     name={displayName}
                     type={iconType}
-                    accountID={isWorkspace ? participant?.id : participant?.accountID}
+                    avatarID={isWorkspace ? participant?.id : participant?.accountID}
                 />
                 <Text
                     numberOfLines={1}

diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
@@ -82,7 +82,7 @@ function SubscriptAvatar({
                         source={mainAvatar?.source}
                         size={size}
                         name={mainAvatar?.name}
-                        accountID={mainAvatar?.id}
+                        avatarID={mainAvatar?.id}
                         type={mainAvatar?.type}
                         fallbackIcon={mainAvatar?.fallbackIcon}
                     />
@@ -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
@@ -64,6 +64,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
                         type={icon?.type ?? CONST.ICON_TYPE_AVATAR}
                         name={icon?.name ?? userLogin}
                         fallbackIcon={icon?.fallbackIcon}
+                        avatarID={icon?.id}
                     />
                 </View>
                 <Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{title}</Text>

diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx
@@ -35,7 +35,8 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
             }}
             isWorkspaceAvatar
             maybeIcon
-            originalFileName={policy?.originalFileName ?? policyName}
+            // 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}
         />

diff --git 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
@@ -205,7 +205,7 @@ function ReportActionItemSingle({
                         source={icon.source}
                         type={icon.type}
                         name={icon.name}
-                        accountID={icon.id}
+                        avatarID={icon.id}
                         fallbackIcon={fallbackIcon}
                     />
                 </View>

diff --git a/src/pages/iou/request/step/IOURequestStepSendFrom.tsx b/src/pages/iou/request/step/IOURequestStepSendFrom.tsx
@@ -47,6 +47,7 @@ function IOURequestStepSendFrom({route, transaction, allPolicies}: IOURequestSte
             keyForList: policy.id,
             icons: [
                 {
+                    id: policy.id,
                     source: policy?.avatarURL ? policy.avatarURL : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
                     fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
                     name: policy.name,

diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -92,7 +92,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
@@ -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}
                         />