[Pay day 2023-04-26] [$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 [email protected] 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?

• [x] Android / native
• [ ] Android / Chrome
• [x] iOS / native
• [x] iOS / Safari
• [x] 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

https://user-images.githubusercontent.com/43996225/228710652-b5246a6f-f9aa-44ce-b813-ccc69efddbf3.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)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] 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
• [x] 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.
• [x] 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.
• [x] 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 "[email protected]". 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. https://github.com/Expensify/App/blob/c327eb27abe67483e98c7904b69855415e2ffc9a/src/pages/home/report/ReportFooter.js#L92-L105

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. https://github.com/Expensify/App/blob/c327eb27abe67483e98c7904b69855415e2ffc9a/src/pages/home/report/ReportActionCompose.js#L901-L910

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:

https://user-images.githubusercontent.com/77237602/228802300-fbc3b78c-75a7-46f3-89f7-f3921faa194b.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:

https://user-images.githubusercontent.com/77237602/228803430-c95af722-9277-4fbe-a27f-cfec77f7bb9c.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: https://github.com/Expensify/App/blob/c327eb27abe67483e98c7904b69855415e2ffc9a/src/pages/home/report/ReportFooter.js#L92-L105 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: https://github.com/Expensify/App/blob/c327eb27abe67483e98c7904b69855415e2ffc9a/src/components/OfflineWithFeedback.js#L102

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 https://github.com/Expensify/App/blob/c327eb27abe67483e98c7904b69855415e2ffc9a/src/components/OfflineWithFeedback.js#L89 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? 💸

[conorpendergrast]

@MonilBhavsar Bump on the proposal review please!

[MonilBhavsar]

Sorry, I was ooo. Looking now.

[MonilBhavsar]

@esh-g 's proposal looks good to me 👍

But, I am not sure if we should go with an optional change. I think the ideology behind darkening is that an action is still pending, but in this case the emoji selector has nothing to do with offline. @conorpendergrast what do you think. Should we darken the emoji selector when we're offline, as mentioned in "Optional change" here? Also, cc @shawnborton

[shawnborton]

I agree, the emoji suggestion box does not need to be reduced opacity here. cc @trjExpensify @JmillsExpensify my favorite offline pattern experts

[conorpendergrast]

Agree with you both, this seems like it doesn't fit the pattern of what we should darken 👍

[trjExpensify]

I agree, the emoji suggestion box does not need to be reduced opacity here. cc @trjExpensify @JmillsExpensify my favorite offline pattern experts

Agreed! The selection isn't pending, so it wouldn't be at reduced opacity. 👍

[esh-g]

Okay, so we can skip the optional change and I'll make the PR without that change cc @MonilBhavsar

[MonilBhavsar]

Thank you everyone for the thoughts 🙏 @esh-g yes, we can skip the optional change

[MelvinBot]

📣 @esh-g You have been assigned to this job by @MonilBhavsar! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[MelvinBot]

@conorpendergrast @sobitneupane @MonilBhavsar @esh-g this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[esh-g]

PR is up! 🚀 @MonilBhavsar @sobitneupane Please review... The diff in the PR might look a bit much but I have only changed the OfflineWithFeedback and the diff looks so large because of the re-indentation of the child components. I think it will look normal in the VScode diff editor.