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

[Avatars] Revert PR #50557 If two avatars, use Name 1 & Name 2 pattern. #50697

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
+106 −29
Open

[Avatars] Revert PR #50557 If two avatars, use Name 1 & Name 2 pattern. #50697

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4ba67b3
Revert "Merge pull request #50557 from Expensify/revert-50341-georgia…
grgia Oct 14, 2024
b544601
Fix text for long names
grgia Oct 14, 2024
c38868c
lint
grgia Oct 14, 2024
7b38784
use managerIcon
grgia Oct 15, 2024
5ea5a4e
Merge branch 'main' into georgia-revert-50557
grgia Oct 15, 2024
e58d4b3
Merge branch 'main' into georgia-revert-50557
grgia Oct 30, 2024
55430fe
Merge branch 'main' into georgia-revert-50557
grgia Nov 12, 2024
4e1a806
code review
grgia Nov 12, 2024
c0d8bc6
Merge branch 'main' into georgia-revert-50557
grgia Nov 14, 2024
e1ab6d6
IOS
grgia Nov 14, 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
2 changes: 1 addition & 1 deletion src/libs/ReportUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2394,7 +2394,7 @@ function getIcons(

// For one transaction IOUs, display a simplified report icon
if (isOneTransactionReport(report?.reportID ?? '-1')) {
grgia marked this conversation as resolved.
Show resolved Hide resolved
return [ownerIcon];
return [managerIcon];
Copy link
Contributor

Choose a reason for hiding this comment

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

Just to confirm - this change fixes the header avatar of Report expense page right?

Screenshot 2024-10-15 at 8 34 22 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This should match the IOU case. For IOUs we use managerIcon, for expense reports, ownerIcon

}

return isManager ? [managerIcon, ownerIcon] : [ownerIcon, managerIcon];
Expand Down
130 changes: 103 additions & 27 deletions src/pages/home/report/ReportActionItemSingle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ function ReportActionItemSingle({
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
const isTripRoom = ReportUtils.isTripRoom(report);
const displayAllActors = isReportPreviewAction && !isTripRoom && !ReportUtils.isPolicyExpenseChat(report);
const icons = ReportUtils.getIcons(iouReport ?? null, personalDetails);
const displayAllActors = isReportPreviewAction && !isTripRoom && !ReportUtils.isPolicyExpenseChat(report) && (icons ? icons.length > 1 : true);
const isInvoiceReport = ReportUtils.isInvoiceReport(iouReport ?? null);
const isWorkspaceActor = isInvoiceReport || (ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors));

Expand Down Expand Up @@ -151,24 +152,40 @@ function ReportActionItemSingle({
} else {
secondaryAvatar = {name: '', source: '', type: 'avatar'};
}
const icon = {
source: avatarSource ?? FallbackAvatar,
type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
name: primaryDisplayName ?? '',
id: avatarId,
};
const icon = useMemo(
() => ({
source: avatarSource ?? FallbackAvatar,
type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
name: primaryDisplayName ?? '',
id: avatarId,
}),
[avatarSource, isWorkspaceActor, primaryDisplayName, avatarId],
);

// Since the display name for a report action message is delivered with the report history as an array of fragments
// we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
// we should stop referring to the report history items entirely for this information.
const personArray = displayName
? [
{
type: 'TEXT',
text: displayName,
},
]
: action?.person;
const personArray = useMemo(() => {
const baseArray = displayName
? [
{
type: 'TEXT',
text: displayName,
},
]
: [action?.person?.at(0)].filter(Boolean) ?? [];

if (displayAllActors && secondaryAvatar?.name) {
return [
...baseArray,
{
type: 'TEXT',
text: secondaryAvatar?.name ?? '',
},
];
}
return baseArray;
}, [displayName, action?.person, displayAllActors, secondaryAvatar?.name]);

const reportID = report?.reportID;
const iouReportID = iouReport?.reportID;
Expand Down Expand Up @@ -232,6 +249,76 @@ function ReportActionItemSingle({
</UserDetailsTooltip>
);
};

const getHeading = useCallback(() => {
return () => {
if (displayAllActors && personArray.length === 2 && isReportPreviewAction) {
return (
<View style={[styles.flexRow]}>
<ReportActionItemFragment
style={[styles.flexShrink1]}
key={`person-${action?.reportActionID}-${0}`}
accountID={Number(icon.id) ?? -1}
fragment={{...personArray.at(0), type: 'TEXT', text: displayName ?? ''}}
delegateAccountID={action?.delegateAccountID}
isSingleLine
actorIcon={icon}
moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
/>
<Text
numberOfLines={1}
style={[styles.chatItemMessageHeaderSender, styles.pre, styles.flexShrink0]}
>
{` & `}
</Text>
<ReportActionItemFragment
style={[styles.flexShrink1]}
key={`person-${action?.reportActionID}-${1}`}
accountID={parseInt(`${secondaryAvatar?.id ?? -1}`, 10)}
fragment={{...personArray.at(1), type: 'TEXT', text: secondaryAvatar.name ?? ''}}
delegateAccountID={action?.delegateAccountID}
isSingleLine
actorIcon={secondaryAvatar}
moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
/>
</View>
);
}
return (
<View>
{personArray.map((fragment, index) => (
<ReportActionItemFragment
style={[styles.flex1]}
// eslint-disable-next-line react/no-array-index-key
key={`person-${action?.reportActionID}-${index}`}
accountID={actorAccountID ?? -1}
fragment={{...fragment, type: fragment?.type ?? '', text: fragment?.text ?? ''}}
delegateAccountID={action?.delegateAccountID}
isSingleLine
actorIcon={icon}
moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
/>
))}
</View>
);
};
}, [
displayAllActors,
secondaryAvatar,
isReportPreviewAction,
personArray,
styles.flexRow,
styles.flexShrink0,
styles.flexShrink1,
styles.flex1,
styles.chatItemMessageHeaderSender,
styles.pre,
action,
actorAccountID,
displayName,
icon,
]);

const hasEmojiStatus = !displayAllActors && status?.emojiCode;
const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');
const statusText = status?.text ?? '';
Expand Down Expand Up @@ -262,18 +349,7 @@ function ReportActionItemSingle({
accessibilityLabel={actorHint}
role={CONST.ROLE.BUTTON}
>
{personArray?.map((fragment, index) => (
<ReportActionItemFragment
// eslint-disable-next-line react/no-array-index-key
key={`person-${action?.reportActionID}-${index}`}
accountID={Number(icon.id) ?? -1}
fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
delegateAccountID={action?.delegateAccountID}
isSingleLine
actorIcon={icon}
moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
/>
))}
{getHeading()}
</PressableWithoutFeedback>
{!!hasEmojiStatus && (
<Tooltip text={statusTooltipText}>
Expand Down
Loading