Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: regressions related to workspace avatars #41485

Merged
merged 13 commits into from
May 15, 2024
Merged

fix: regressions related to workspace avatars #41485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
00dd36f
fix: Each workspace avatar in sender list has the same avatar
nkdengineer May 2, 2024
e8f3568
fix: regression 41387
nkdengineer May 2, 2024
89c652b
remove useless code
nkdengineer May 3, 2024
b3e8557
resolve conflict
nkdengineer May 7, 2024
9ca04c6
fix: typo
nkdengineer May 8, 2024
afdc4a0
Add comment to report avatar
nkdengineer May 9, 2024
1a416d2
Fix the avatar of report preview action
nkdengineer May 9, 2024
1ad57da
Merge branch 'main' into fix/41385
nkdengineer May 10, 2024
18c70b4
Merge branch 'main' into fix/41385
nkdengineer May 13, 2024
be0f122
rename accountID prop to avatarID prop
nkdengineer May 13, 2024
ce7f3a4
merge main
nkdengineer May 14, 2024
c911404
resolve conflict
nkdengineer May 14, 2024
e602e57
Update src/pages/ReportAvatar.tsx
nkdengineer May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -66,7 +66,7 @@ function Avatar({
fallbackIconTestID = '',
type = CONST.ICON_TYPE_AVATAR,
name = '',
accountID,
avatarID,
}: AvatarProps) {
const theme = useTheme();
const styles = useThemeStyles();
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/HeaderWithBackButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/MentionSuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions src/components/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -342,6 +345,7 @@ function MenuItem(
isPaneMenu = false,
shouldPutLeftPaddingWhenNoIcon = false,
onFocus,
avatarID,
}: MenuItemProps,
ref: PressableRef,
) {
Expand Down Expand Up @@ -526,6 +530,7 @@ function MenuItem(
source={icon as AvatarSource}
fallbackIcon={fallbackIcon}
name={title}
avatarID={avatarID}
type={CONST.ICON_TYPE_WORKSPACE}
/>
)}
Expand Down
2 changes: 2 additions & 0 deletions src/components/MoneyRequestConfirmationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1134,6 +1134,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)}
Expand Down Expand Up @@ -1208,6 +1209,7 @@ function MoneyRequestConfirmationList({
reportID,
senderWorkspace?.avatarURL,
senderWorkspace?.name,
senderWorkspace?.id,
shouldShowAllFields,
styles.confirmationListMapItem,
styles.flex1,
Expand Down
8 changes: 4 additions & 4 deletions src/components/MultipleAvatars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down Expand Up @@ -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}
/>
Expand Down Expand Up @@ -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>
Expand All @@ -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}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/RoomHeaderAvatars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down Expand Up @@ -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}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SelectionList/TransactionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/SubscriptAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand All @@ -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}
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/ReportAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Technically this will work, but the prop name is called originalFileName so passing policy.id will confuse people in future.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a comment to explain, please check again

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add why we need to do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

        // 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.

@MonilBhavsar I added a comment.

shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/home/report/ReportActionItemSingle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -205,7 +205,7 @@ function ReportActionItemSingle({
source={icon.source}
type={icon.type}
name={icon.name}
accountID={icon.id}
avatarID={icon.id}
fallbackIcon={fallbackIcon}
/>
</View>
Expand Down
1 change: 1 addition & 0 deletions src/pages/iou/request/step/IOURequestStepSendFrom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/WorkspaceProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
),
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/WorkspacesListRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
Loading