Skip to content

Commit 1ee5d03

Browse files
MonilBhavsarMonilBhavsar
authored
Merge pull request #41485 from nkdengineer/fix/41385
fix: regressions related to workspace avatars
2 parents 947f9c6 + e602e57 commit 1ee5d03

15 files changed

+30
-20
lines changed

‎src/components/Avatar.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ type AvatarProps = {
5252
name?: string;
5353

5454
/** Optional account id if it's user avatar or policy id if it's workspace avatar */
55-
accountID?: number | string;
55+
avatarID?: number | string;
5656
};
5757

5858
function Avatar({
@@ -66,7 +66,7 @@ function Avatar({
6666
fallbackIconTestID = '',
6767
type = CONST.ICON_TYPE_AVATAR,
6868
name = '',
69-
accountID,
69+
avatarID,
7070
}: AvatarProps) {
7171
const theme = useTheme();
7272
const styles = useThemeStyles();
@@ -86,15 +86,15 @@ function Avatar({
8686
const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined;
8787

8888
// We pass the color styles down to the SVG for the workspace and fallback avatar.
89-
const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(accountID));
89+
const source = isWorkspace ? originalSource : UserUtils.getAvatar(originalSource, Number(avatarID));
9090
const useFallBackAvatar = imageError || !source || source === Expensicons.FallbackAvatar;
9191
const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
9292
const fallbackAvatarTestID = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatarTestID(name) : fallbackIconTestID || 'SvgFallbackAvatar Icon';
9393
const avatarSource = useFallBackAvatar ? fallbackAvatar : source;
9494

9595
let iconColors;
9696
if (isWorkspace) {
97-
iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(accountID?.toString() ?? '');
97+
iconColors = StyleUtils.getDefaultWorkspaceAvatarColor(avatarID?.toString() ?? '');
9898
} else if (useFallBackAvatar) {
9999
iconColors = StyleUtils.getBackgroundColorAndFill(theme.buttonHoveredBG, theme.icon);
100100
} else {

‎src/components/HeaderWithBackButton/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ function HeaderWithBackButton({
182182
containerStyles={[StyleUtils.getWidthAndHeightStyle(StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.DEFAULT)), styles.mr3]}
183183
source={policyAvatar?.source}
184184
name={policyAvatar?.name}
185-
accountID={policyAvatar?.id}
185+
avatarID={policyAvatar?.id}
186186
type={policyAvatar?.type}
187187
/>
188188
)}

‎src/components/MentionSuggestions.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
8383
source={item.icons[0].source}
8484
size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
8585
name={item.icons[0].name}
86-
accountID={item.icons[0].id}
86+
avatarID={item.icons[0].id}
8787
type={item.icons[0].type}
8888
fill={isIcon ? theme.success : undefined}
8989
fallbackIcon={item.icons[0].fallbackIcon}

‎src/components/MenuItem.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,9 @@ type MenuItemBaseProps = {
265265

266266
/** Handles what to do when the item is focused */
267267
onFocus?: () => void;
268+
269+
/** Optional account id if it's user avatar or policy id if it's workspace avatar */
270+
avatarID?: number | string;
268271
};
269272

270273
type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -342,6 +345,7 @@ function MenuItem(
342345
isPaneMenu = false,
343346
shouldPutLeftPaddingWhenNoIcon = false,
344347
onFocus,
348+
avatarID,
345349
}: MenuItemProps,
346350
ref: PressableRef,
347351
) {
@@ -526,6 +530,7 @@ function MenuItem(
526530
source={icon as AvatarSource}
527531
fallbackIcon={fallbackIcon}
528532
name={title}
533+
avatarID={avatarID}
529534
type={CONST.ICON_TYPE_WORKSPACE}
530535
/>
531536
)}

‎src/components/MoneyRequestConfirmationList.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1133,6 +1133,7 @@ function MoneyRequestConfirmationList({
11331133
{isTypeInvoice && (
11341134
<MenuItem
11351135
key={translate('workspace.invoices.sendFrom')}
1136+
avatarID={senderWorkspace?.id}
11361137
shouldShowRightIcon={!isReadOnly && canUpdateSenderWorkspace}
11371138
title={senderWorkspace?.name}
11381139
icon={senderWorkspace?.avatarURL ? senderWorkspace?.avatarURL : getDefaultWorkspaceAvatar(senderWorkspace?.name)}
@@ -1207,6 +1208,7 @@ function MoneyRequestConfirmationList({
12071208
reportID,
12081209
senderWorkspace?.avatarURL,
12091210
senderWorkspace?.name,
1211+
senderWorkspace?.id,
12101212
shouldShowAllFields,
12111213
styles.confirmationListMapItem,
12121214
styles.flex1,

‎src/components/MultipleAvatars.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ function MultipleAvatars({
156156
size={size}
157157
fill={icons[0].fill}
158158
name={icons[0].name}
159-
accountID={icons[0].id}
159+
avatarID={icons[0].id}
160160
type={icons[0].type}
161161
fallbackIcon={icons[0].fallbackIcon}
162162
/>
@@ -206,7 +206,7 @@ function MultipleAvatars({
206206
source={icon.source ?? fallbackIcon}
207207
size={size}
208208
name={icon.name}
209-
accountID={icon.id}
209+
avatarID={icon.id}
210210
type={icon.type}
211211
fallbackIcon={icon.fallbackIcon}
212212
/>
@@ -265,7 +265,7 @@ function MultipleAvatars({
265265
imageStyles={[singleAvatarStyle]}
266266
name={icons[0].name}
267267
type={icons[0].type}
268-
accountID={icons[0].id}
268+
avatarID={icons[0].id}
269269
fallbackIcon={icons[0].fallbackIcon}
270270
/>
271271
</View>
@@ -285,7 +285,7 @@ function MultipleAvatars({
285285
size={avatarSize}
286286
imageStyles={[singleAvatarStyle]}
287287
name={icons[1].name}
288-
accountID={icons[1].id}
288+
avatarID={icons[1].id}
289289
type={icons[1].type}
290290
fallbackIcon={icons[1].fallbackIcon}
291291
/>

‎src/components/RoomHeaderAvatars.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
4747
imageStyles={styles.avatarLarge}
4848
size={CONST.AVATAR_SIZE.LARGE}
4949
name={icons[0].name}
50-
accountID={icons[0].id}
50+
avatarID={icons[0].id}
5151
type={icons[0].type}
5252
fallbackIcon={icons[0].fallbackIcon}
5353
/>
@@ -83,7 +83,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
8383
size={CONST.AVATAR_SIZE.LARGE}
8484
containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
8585
name={icon.name}
86-
accountID={icon.id}
86+
avatarID={icon.id}
8787
type={icon.type}
8888
fallbackIcon={icon.fallbackIcon}
8989
/>

‎src/components/SelectionList/TransactionListItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function TransactionListItem<TItem extends ListItem>({
9898
source={avatarURL}
9999
name={displayName}
100100
type={iconType}
101-
accountID={isWorkspace ? participant?.id : participant?.accountID}
101+
avatarID={isWorkspace ? participant?.id : participant?.accountID}
102102
/>
103103
<Text
104104
numberOfLines={1}

‎src/components/SubscriptAvatar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ function SubscriptAvatar({
8282
source={mainAvatar?.source}
8383
size={size}
8484
name={mainAvatar?.name}
85-
accountID={mainAvatar?.id}
85+
avatarID={mainAvatar?.id}
8686
type={mainAvatar?.type}
8787
fallbackIcon={mainAvatar?.fallbackIcon}
8888
/>
@@ -109,7 +109,7 @@ function SubscriptAvatar({
109109
size={isSmall ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
110110
fill={secondaryAvatar.fill}
111111
name={secondaryAvatar.name}
112-
accountID={secondaryAvatar.id}
112+
avatarID={secondaryAvatar.id}
113113
type={secondaryAvatar.type}
114114
fallbackIcon={secondaryAvatar.fallbackIcon}
115115
/>

‎src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateA
6464
type={icon?.type ?? CONST.ICON_TYPE_AVATAR}
6565
name={icon?.name ?? userLogin}
6666
fallbackIcon={icon?.fallbackIcon}
67+
avatarID={icon?.id}
6768
/>
6869
</View>
6970
<Text style={[styles.mt2, styles.textMicroBold, styles.textReactionSenders, styles.textAlignCenter]}>{title}</Text>

‎src/pages/ReportAvatar.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
3535
}}
3636
isWorkspaceAvatar
3737
maybeIcon
38-
originalFileName={policy?.originalFileName ?? policyName}
38+
// In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar
39+
originalFileName={policy?.originalFileName ?? policy?.id}
3940
shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
4041
isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
4142
/>

‎src/pages/home/report/ReportActionItemSingle.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ function ReportActionItemSingle({
135135
source: avatarSource,
136136
type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
137137
name: primaryDisplayName ?? '',
138-
id: isWorkspaceActor ? '' : actorAccountID,
138+
id: isWorkspaceActor ? report.policyID : actorAccountID,
139139
};
140140

141141
// 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({
205205
source={icon.source}
206206
type={icon.type}
207207
name={icon.name}
208-
accountID={icon.id}
208+
avatarID={icon.id}
209209
fallbackIcon={fallbackIcon}
210210
/>
211211
</View>

‎src/pages/iou/request/step/IOURequestStepSendFrom.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ function IOURequestStepSendFrom({route, transaction, allPolicies}: IOURequestSte
4747
keyForList: policy.id,
4848
icons: [
4949
{
50+
id: policy.id,
5051
source: policy?.avatarURL ? policy.avatarURL : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
5152
fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
5253
name: policy.name,

‎src/pages/workspace/WorkspaceProfilePage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
9292
fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
9393
size={CONST.AVATAR_SIZE.XLARGE}
9494
name={policyName}
95-
accountID={policy?.id ?? ''}
95+
avatarID={policy?.id ?? ''}
9696
type={CONST.ICON_TYPE_WORKSPACE}
9797
/>
9898
),

‎src/pages/workspace/WorkspacesListRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ function WorkspacesListRow({
196196
size={CONST.AVATAR_SIZE.DEFAULT}
197197
source={workspaceIcon}
198198
fallbackIcon={fallbackWorkspaceIcon}
199-
accountID={policyID}
199+
avatarID={policyID}
200200
name={title}
201201
type={CONST.ICON_TYPE_WORKSPACE}
202202
/>

0 commit comments

Comments
 (0)