[payment due 9/6][$250] Avatar - Unable to choose profile avatar from library

[izarutskaya]

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

---

Version Number: v9.0.26-1
Reproducible in staging?: Y
Reproducible in production?: N
Pending when validation PR #47338
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Launch New Expensify app.
2. Go to Account settings > Profile.
3. Tap on the avatar.
4. Tap Choose from library.
5. Select a photo.
6. Tap on the app back button.
7. Tap on the avatar.
8. Tap Choose from library.

Expected Result:

User should be able to choose profile avatar from library.

Actual Result:

Nothing happens after tapping Choose from library.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6585847_1724882763812.ScreenRecording_08-29-2024_06-02-18_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ca983c30cf1e2b4a
• Upwork Job ID: 1829208880175339857
• Last Price Increase: 2024-08-29
• Automatic offers:
• eh2077 | Reviewer | 103738968

Issue Owner

Current Issue Owner: @eh2077

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[bernhardoj]

Proposal

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

The option to select image doesn't show after selecting Upload photo

What is the root cause of that problem?

The profile page is wrapped with MenuItemGroup.

App/src/pages/settings/Profile/ProfilePage.tsx

Lines 147 to 158 in c867918

	<MenuItemGroup>
	<View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
	<Section
	title={translate('profilePage.publicSection.title')}
	subtitle={translate('profilePage.publicSection.subtitle')}
	isCentralPane
	subtitleMuted
	childrenStyles={styles.pt5}
	titleStyles={styles.accountSettingsSectionTitle}
	>
	<View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}>
	<AvatarWithImagePicker

MenuItemGroup pass down a context of single execution and wait for navigate function.

App/src/components/MenuItemGroup.tsx

Lines 22 to 31 in c867918

	function MenuItemGroup({children, shouldUseSingleExecution = true}: MenuItemGroupProps) {
	const {isExecuting, singleExecution} = useSingleExecution();
	const waitForNavigate = useWaitForNavigation();
	const value = useMemo(
	() => (shouldUseSingleExecution ? {isExecuting, singleExecution, waitForNavigate} : undefined),
	[shouldUseSingleExecution, isExecuting, singleExecution, waitForNavigate],
	);
	return <MenuItemGroupContext.Provider value={value}>{children}</MenuItemGroupContext.Provider>;

When we press Upload photo, it will call single execution and wait for navigate. Single execution will set the isExecuting state to true

App/src/components/MenuItem.tsx

Lines 531 to 540 in c867918

	if (onPress && event) {
	if (!singleExecution || !waitForNavigate) {
	onPress(event);
	return;
	}
	singleExecution(
	waitForNavigate(() => {
	onPress(event);
	}),
	)();

which will disable the menu item.

App/src/components/MenuItem.tsx

Line 583 in c867918

disabled={disabled || isExecuting}

It will be enabled back once the promise of the action passed to singleExecution is resolved.

App/src/hooks/useSingleExecution/index.native.ts

Lines 26 to 33 in c867918

	InteractionManager.runAfterInteractions(() => {
	if (!(execution instanceof Promise)) {
	setIsExecuting(false);
	return;
	}
	execution.finally(() => {
	setIsExecuting(false);
	});

In our case, the promise is the waitForNavigate,

App/src/hooks/useWaitForNavigation.ts

Lines 27 to 31 in c867918

	return (navigate: () => void) => () => {
	navigate();
	return new Promise<void>((resolve) => {
	resolvePromises.current.push(resolve);
	});

and it will be resolved once the blur event is triggered. But since there is no navigation happening, the promise is never resolved.

This issue happens after the copilot PR where we move the profile image to profile page.

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

We can disable the single execution + wait for navigate thing for the profile image picker by wrapping it with another MenuItemGroup and pass shouldUseSingleExecution as false. This way, the menu item inside the popover menu won't use the single execution logic and will behave like before the copilot PR.

<MenuItemGroup shouldUseSingleExecution={false}>
    <AvatarWithImagePicker ...

App/src/pages/settings/Profile/ProfilePage.tsx

Lines 157 to 158 in c867918

	<View style={[styles.pt3, styles.pb6, styles.alignSelfStart]}>
	<AvatarWithImagePicker

Or we can do it the hard way by accepting a new props to disable either single execution or wait for navigate or both.

What alternative solutions did you explore? (Optional)

[melvin-bot]

Triggered auto assignment to @yuwenmemon (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ca983c30cf1e2b4a

[melvin-bot]

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

[melvin-bot]

📣 @eh2077 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @eh2077

[allroundexperts]

Since I reviewed the PR, can I be assigned here?

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Christinadobrzyn]

Looks like PR was deployed to production on 8/30. Payment day is 9/6. I'm going to be ooo so going to add a BZ teammate to issue payment.

Payouts due:

• Contributor: $250 @bernhardoj (offer - https://www.upwork.com/nx/wm/offer/103805189)

• Contributor+: $250 @allroundexperts (offer - https://www.upwork.com/nx/wm/offer/103805194)

• I think both of you are paid in NewDot? (if not please accept these Upwork offers)

• Do we need a regression test?

cc @zanyrenney

[bernhardoj]

Yes, I'll request in ND.

[zanyrenney]

I don't think we need a regression test for this.

[zanyrenney]

Payment summary above closing as both are paid via ND.

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj

[JmillsExpensify]

$250 approved for @allroundexperts