[HOLD for payment 2022-01-27] Sent messages has grey baground after disabled the Airplane mode

[kbecciv]

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. Lunch the app
2. Log in with any account
3. Use mobile data only, disable the Wifi
4. Start sending the messages
5. Enable Airplane mode and send more messages
6. Disable the Airplane mode

Expected Result:

Sent messages has white baground after disabled the Airplane mode

Actual Result:

Sent messages has grey baground after disabled the Airplane mode

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.29.3

Reproducible in staging?: Yes

Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20220113-115041_New.Expensify.1.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause

Slack conversation:

Issue was found when executing: #6567

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @cead22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @Beamanator (Demolition), see https://stackoverflow.com/c/expensify/questions/8099 for more details.

[MelvinBot]

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

[Beamanator]

This should be able to be worked externally 👍

[parasharrajat]

Proposal

1. I added the row highlighting logic which depends on reportActionID of each action(report comment) but I didn't notice at that time(approx 3 months ago) that the unsent message does not have any reportActionID. So ultimately as the report action have undefined reportActionID until it is sent.
   Thus

   App/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

   Line 97 in f7f8643

   return this.state.reportAction.reportActionID === actionID;

   will return true for undefined.

To fix this,
we need to add a check for truthy value of actionID in this condition.

        return actionID && this.state.reportAction.reportActionID === actionID;

This creates another question. What should happen to the contextMenu and Minimenu for unsent messages?

[Beamanator]

@parasharrajat Aah and that's causing

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

Line 160 in f7f8643

|| this.state.isContextMenuActive

to be true, which makes the background color the same as if it's hovered, yeah?

This creates another question. What should happen to the contextMenu and Minimenu for unsent messages?

This is a good question, can you bring this up in #expensify-open-source so we can get more 👀 ? Can we do this fix without worrying about the contextmenu / minimenu for unsent messages?