[HOLD for payment 2023-08-28] [$1000] not able to show preview of avatr in thread

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. go to any chat
2. send any message
3. click on reply in thread option
4. click the header of thread
5. click on avatar to see preview

Expected Result:

should show preview of avatar

Actual Result:

does not show preview of avatar

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.29-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-12.at.2.30.30.PM.mov

Recording.1026.mp4

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686560482456669

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015a875266a3d365a7
• Upwork Job ID: 1671152204532953088
• Last Price Increase: 2023-07-11
• Automatic offers:
• aimane-chnaif | Reviewer | 26069023
• spcheema | Contributor | 26069025
• gadhiyamanan | Reporter | 26069029

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[spcheema]

Proposed solution

Please re-state the problem that we are trying to solve in this issue.

Not able to show preview of avatar in thread

What is the root cause of that problem?

On details page, Avatar component is not wrapped in a AttachmentModal

https://github.com/Expensify/App/blob/main/src/components/RoomHeaderAvatars.js#L26-L37

What changes do you think we should make in order to solve the problem?

• Wrap Avatar in AttachmentModal & PressableWithoutFocus similar to profile page

        const displayName = props.icons[0].type === CONST.ICON_TYPE_AVATAR ? getDisplayNameForParticipant(props.icons[0].id) : props.icons[0].name
        return (
            <AttachmentModal
                headerTitle={props.icons[0].name}
                source={UserUtils.getFullSizeAvatar(props.icons[0].source, props.icons[0].id)}
                isAuthTokenRequired
            >
                {({ show }) => (
            <PressableWithoutFocus
                onPress={show}
                accessibilityRole="imagebutton"
                accessibilityLabel={props.icons[0].name}>
                <Avatar
                    source={props.icons[0].source}
                    imageStyles={[styles.avatarLarge]}
                    fill={themeColors.iconSuccessFill}
                    size={CONST.AVATAR_SIZE.LARGE}
                    name={props.icons[0].name}
                    type={props.icons[0].type}
                />
                </PressableWithoutFocus>
            )}
            </AttachmentModal>
        );

• Replicate similar changes in the case of multiple avatars (reply in thread to a message in workspace)
• Change view pointerEvents from none to box-none in order to make avatars clickable.

<View pointerEvents="box-none">
            <View style={[styles.flexRow, styles.wAuto, styles.ml3]}>
                {_.map(iconsToDisplay, (icon, index) => {
                    const displayName = icon.type === CONST.ICON_TYPE_AVATAR ? getDisplayNameForParticipant(icon.id) : icon.name
                    return (
                        <View
                            key={`${icon.source}${index}`}
                            style={[styles.justifyContentCenter, styles.alignItemsCenter]}
                        >
                            <AttachmentModal
                                headerTitle={icon.name}
                                source={UserUtils.getFullSizeAvatar(icon.source, details.accountID)}
                                isAuthTokenRequired
                                originalFileName={lodashGet(details, 'originalFileName', '')}
                            >
                                {({ show }) => (
                                    <PressableWithoutFocus
                                        onPress={show}
                                        accessibilityRole="imagebutton"
                                        accessibilityLabel={icon.name}>
                            <Avatar
                                source={icon.source}
                                fill={themeColors.iconSuccessFill}
                                size={CONST.AVATAR_SIZE.LARGE}
                                containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
                                name={icon.name}
                                type={icon.type}
                            />
                                    </PressableWithoutFocus>
                                )}
                            </AttachmentModal>
                            {index === CONST.REPORT.MAX_PREVIEW_AVATARS - 1 && props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS !== 0 && (
                                <>
                                    <View
                                        style={[
                                            styles.roomHeaderAvatarSize,
                                            styles.roomHeaderAvatar,
                                            ...iconStyle,
                                            StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type),
                                            styles.roomHeaderAvatarOverlay,
                                        ]}
                                    />
                                    <Text
                                        style={styles.avatarInnerTextChat}>{`+${props.icons.length - CONST.REPORT.MAX_PREVIEW_AVATARS}`}</Text>
                                </>
                            )}
                        </View>
                    )
                })}
            </View>
        </View>

What alternative solutions did you explore? (Optional)

N/A

[getusha]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Preview is not implemented for avatars in thread

What is the root cause of that problem?

There is no implementation for avatar preview in both single and multiple avatars like on other places that show preview for the avatars. in this case it's just rendering the icons.

App/src/components/RoomHeaderAvatars.js

Lines 26 to 37 in f0c6631

	if (props.icons.length === 1) {
	return (
	<Avatar
	source={props.icons[0].source}
	imageStyles={[styles.avatarLarge]}
	fill={themeColors.iconSuccessFill}
	size={CONST.AVATAR_SIZE.LARGE}
	name={props.icons[0].name}
	type={props.icons[0].type}
	/>
	);
	}

App/src/components/RoomHeaderAvatars.js

Lines 55 to 61 in f0c6631

	<Avatar
	source={icon.source}
	fill={themeColors.iconSuccessFill}
	size={CONST.AVATAR_SIZE.LARGE}
	containerStyles={[...iconStyle, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
	name={icon.name}
	type={icon.type}

What changes do you think we should make in order to solve the problem?

The first thing we should do is get personalDetails for each participants

    const participantProfiles = _.map(participants, participant => lodashGet(props.personalDetails, participant));

we can pass participantProfiles to RoomHeaderAvatars component as a prop and use that to get the full size avatar and also the originalFileName

As suggested by @aimane-chnaif we should check if the displayName exists and show the name accordingly, the code below will behave like ProfilePage taking the details from props.participantProfiles

App/src/pages/ProfilePage.js

Line 106 in 5f5dd02

const displayName = details.displayName ? details.displayName : props.translate('common.hidden');

or we can check if the displayName exists and if not use the details.login which is the email address or phone.

const displayName = details.displayName ? details.displayName : details.login;

<AttachmentModal
    headerTitle={props.participantProfiles[0].login}
    source={UserUtils.getFullSizeAvatar(props.icons[0].source, props.participantProfiles[index])}
    isAuthTokenRequired
    originalFileName={props.participantProfiles[index].originalFileName}
>

we can also handle for multiple avatars

<AttachmentModal
    headerTitle={props.participantProfiles[index].login}
    source={UserUtils.getFullSizeAvatar(props.icons[index].source, props.participantProfiles[index])}
    isAuthTokenRequired
    originalFileName={props.participantProfiles[index].originalFileName}
>

We should also handle this every place RoomHeaderAvatars used.
the Overall implementation will be like:

App/src/pages/DetailsPage.js

Lines 143 to 164 in f0c6631

	<AttachmentModal
	headerTitle={details.displayName}
	source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
	isAuthTokenRequired
	originalFileName={details.originalFileName}
	>
	{({show}) => (
	<PressableWithoutFocus
	style={styles.noOutline}
	onPress={show}
	>
	<OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
	<Avatar
	containerStyles={[styles.avatarLarge, styles.mb3]}
	imageStyles={[styles.avatarLarge]}
	source={UserUtils.getAvatar(details.avatar, details.accountID)}
	size={CONST.AVATAR_SIZE.LARGE}
	/>
	</OfflineWithFeedback>
	</PressableWithoutFocus>
	)}
	</AttachmentModal>

Result:

Screen.Recording.2023-06-20.at.8.31.21.AM.mov

What alternative solutions did you explore? (Optional)

[spcheema]

@getusha Yeah if needed can be done in the same way. Just need to replicated the same code for each participants.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015a875266a3d365a7

[melvin-bot]

Current assignee @kevinksullivan is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)