[$1000] Offline: auto-suggestion modal is transparent when Offline so UI is being distorted

[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 offline
2. Create a new chat, with a user with no chat history
3. Type :sm and we will see the auto-suggestion modal is transparent

Expected Result:

Auto-suggestion modal UI should display correctly, and should not have the transparent background

Actual Result:

Auto-suggestion modal UI distorted when offline

Workaround:

unknown

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

az_recorder_20230329_221217.1.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0163de738c1968d0cf
• Upwork Job ID: 1641455102435086336
• Last Price Increase: 2023-04-06

[MelvinBot]

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

[MelvinBot]

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

[esh-g]

I think the better steps to reproduce this are:

1. Go Offline.
2. Create a new Chat.
3. Type :sm to see the emoji suggestions.

Because this is not reproducible with steps given in the inital Action Performed.
This also occurs on mWeb and native/ios and macOs/Chrome/Safari.

cc @kavimuru

[conorpendergrast]

Haven't been able to reproduce via Browserstack (Android) or iOS yet and will keep trying.

Online	Offline (simulated via app)

[esh-g]

@conorpendergrast First go offline and then create a new chat like "test@asd.com". And after that, try opening the emoji Suggestions. The whole report screen should be grayed out when you open the newly created chat offline.

[conorpendergrast]

Ah, nice! That got it, thanks @esh-g!

Updated the OP with the platforms affected and the exact duplication steps

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~0163de738c1968d0cf

[MelvinBot]

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

[MelvinBot]

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

[esh-g]

Proposal

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

When creating a new report offline, and getting a suggestion for emoji, the component is translucent and doesn't appear correctly.

What is the root cause of that problem?

When the chat creation request is pending, the OfflineWithFeedback component sets the opacity of the parent component in the footer to be 0.5 and all the child components inherit that opacity.

App/src/pages/home/report/ReportFooter.js

Lines 92 to 105 in c327eb2

	<OfflineWithFeedback
	pendingAction={this.props.pendingAction}
	style={this.props.isComposerFullSize ? styles.chatItemFullComposeRow : {}}
	contentContainerStyle={this.props.isComposerFullSize ? styles.flex1 : {}}
	>
	<ReportActionCompose
	onSubmit={this.props.onSubmitComment}
	reportID={this.props.report.reportID.toString()}
	reportActions={this.props.reportActions}
	report={this.props.report}
	isComposerFullSize={this.props.isComposerFullSize}
	disabled={this.props.shouldDisableCompose}
	/>
	</OfflineWithFeedback>

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

Unfortunately, there is no way to get rid of the opacity of the parent element. So what we need to do it move the EmojiSuggestions component out of OfflineWithFeedback, So that it doesn't affect it's state when offline.

So what we can do is, to change the location of the OfflineWithFeedback component from ReportFooter.js to ReportActionCompose.js and wrap all the components except the EmojiSuggestions in it.

App/src/pages/home/report/ReportActionCompose.js

Lines 901 to 910 in c327eb2

	{!_.isEmpty(this.state.suggestedEmojis) && this.state.shouldShowSuggestionMenu && (
	<ArrowKeyFocusManager
	focusedIndex={this.state.highlightedEmojiIndex}
	maxIndex={getMaxArrowIndex(this.state.suggestedEmojis.length, this.state.isEmojiPickerLarge)}
	shouldExcludeTextAreaNodes={false}
	onFocusedIndexChanged={index => this.setState({highlightedEmojiIndex: index})}
	>
	<EmojiSuggestions
	onClose={() => this.setState({suggestedEmojis: []})}
	highlightedEmojiIndex={this.state.highlightedEmojiIndex}

We would also have to pass the pendingAction prop from ReportFooter to ReportActionCompose as well so that we can provide it to the OfflineWithFeedback as a prop.

Result:

Screen.Recording.2023-03-30.at.11.02.59.AM.mov

Optional Change

If we want to dull the EmojiSuggestions a little but when the creation of the report is pending, we can pass isActionPending as a prop to EmojiSuggestions and display a dark overlay above the component.
Like this:

Screen.Recording.2023-03-30.at.3.26.35.PM.mov

This can be accomplished with the following code, placed after the FlatList in the EmojiSuggestions component.

{props.isActionPending && <View pointerEvents='none' style={{ position: "absolute", backgroundColor: "#0006", width: "100%", height: "100%" }} />}

What alternative solutions did you explore? (Optional)

• Another option is to make a portal for the EmojiSuggestions component to the ReportFooter so that it is outside of the OfflineWithFeedback. This has been tested and works as just like the above solution. We already are using @gorhom/portal library at many places and this can be a possible solution.

• We can also refactor the EmojiSuggestions component completely and place it closer to the root and handle changes to it with refs and callbacks like we do with the PopoverReportActionContextMenu component now. But this will be a more complicated approach requiring a lot of changes

[MelvinBot]

Triggered auto assignment to @MonilBhavsar (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[kaushiktd]

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

Offline: auto-suggestion modal is transparent when Offline so UI is being distorted

What is the root cause of that problem ?

In below-mentioned file:

App/src/pages/home/report/ReportFooter.js

Lines 92 to 105 in c327eb2

	<OfflineWithFeedback
	pendingAction={this.props.pendingAction}
	style={this.props.isComposerFullSize ? styles.chatItemFullComposeRow : {}}
	contentContainerStyle={this.props.isComposerFullSize ? styles.flex1 : {}}
	>
	<ReportActionCompose
	onSubmit={this.props.onSubmitComment}
	reportID={this.props.report.reportID.toString()}
	reportActions={this.props.reportActions}
	report={this.props.report}
	isComposerFullSize={this.props.isComposerFullSize}
	disabled={this.props.shouldDisableCompose}
	/>
	</OfflineWithFeedback>

OfflineWithFeedback component sets the opacity to 0.5 for all child components in offline mode.
You can see below for opacity:
styles.offlineFeedback.pending sets the opacity to 0.5 when offline in the below file:

App/src/components/OfflineWithFeedback.js

Line 102 in c327eb2

style={[needsOpacity ? styles.offlineFeedback.pending : {}, props.contentContainerStyle]}

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

You need to remove isOfflinePendingAction from below mentioned file on line#89

App/src/components/OfflineWithFeedback.js

Line 89 in c327eb2

const needsOpacity = (isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError;

of you need to set the opacity value to 1 in
styles.offlineFeedback.pending in line# 89

[conorpendergrast]

Getting proposals, waiting for them to be reviewed!

[sobitneupane]

The proposal from @esh-g looks good to me.

🎀👀🎀 C+ reviewed

cc: @MonilBhavsar

[esh-g]

@sobitneupane Thanks for your positive comment. 😇
Would you also like to include the optional change of darkening the EmojiSuggestions when offline?

[sobitneupane]

I would say Yes. The optional change you suggested goes well with the offline experience of the app.

[esh-g]

Should I make a PR now? Or wait for assignment?
@sobitneupane

[sobitneupane]

Let's wait for the confirmation from @MonilBhavsar.

[MelvinBot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.1-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Offline emoji suggestion opacity fix #17405

If no regressions arise, payment will be issued on 2023-04-26. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter: @harshad2711 - $250
• Contributor that fixed the issue: @esh-g - $1000 base + 50% bonus = $1500.
• Contributor+ that helped on the issue and/or PR: @sobitneupane $1000 base + 50% bonus = $1500.

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[MelvinBot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
• [@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@conorpendergrast] Determine if we should create a regression test for this bug.
• [@sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@conorpendergrast] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/281073

[conorpendergrast]

Oh it's pay day, yay! Will get that done

[conorpendergrast]

Assigned: April 13th 11:59am
Merge: April 17th 7:47am
With a weekend in between, that is less than 3 business days and will have the +50% bonus

[conorpendergrast]

Offers sent. Once they're accepted I'll pay them here: https://www.upwork.com/ab/applicants/1641455102435086336/offers

[esh-g]

@conorpendergrast Seems like the offer was withdrawn?

[harshad2711]

I have same problem @esh-g

[harshad2711]

[sobitneupane]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#14686

• [@sobitneupane] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

#14686 (comment)

• [@sobitneupane] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

https://expensify.slack.com/archives/C049HHMV9SM/p1682656211944779

[sobitneupane]

Regression Test Proposal

• Go Offline
• Create a new chat
• Try to type :sm or some other emoji suggestion prefix
• Verify that the suggestion modal that opens is not transparent.

Do we agree 👍 or 👎

[conorpendergrast]

@esh-g @harshad2711 I'm sorry about that - I have no idea why those offers were withdrawn, that is very annoying. I've sent new offers now and will pay those when they're accepted (and hopefully they are not also mysteriously withdrawn)

[MonilBhavsar]

Verify that the suggestion modal that opens is not transparent and has expected background.

Verify that the emoji suggestion modal that opens is not transparent and has expected background

[esh-g]

Thanks @conorpendergrast for resending, I have accepted the offer!

[conorpendergrast]

Both paid now!

[MonilBhavsar]

Looks like everyone is paid here.
We can close this issue after adding regression tests cc @conorpendergrast

[conorpendergrast]

Regression test request created: https://github.com/Expensify/Expensify/issues/281073

All done!