[HOLD for payment 2023-09-20] [HOLD for payment 2023-09-18][$1000] Inconsistency: Different grayness levels on parent and child message

@daveSeife

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:

Be Offline
Go to any chat
Send a message
Go reply in thread
send a reply
Notice the level of grayness on the Parent and child message

Expected Result:

Same grayness levels

Actual Result:

Different grayness levels

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?

Version Number: 1.3.51-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

Test99.Graynesslevel-1.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0192daee63c42d4dbd
Upwork Job ID: 1689013073676578816
Last Price Increase: 2023-08-15
Automatic offers:

ginsuma | Contributor | 26258577
daveSeife | Reporter | 26258578

@joekaufmanexpensify

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

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

Proposal

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

Inconsistency: Different grayness levels on parent and child message

What is the root cause of that problem?

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

Lines 55 to 60 in bba0eb2

    
           <OfflineWithFeedback 
        
               pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(props.report, 'pendingFields.createChat')} 
        
               errors={lodashGet(props.report, 'errorFields.addWorkspaceRoom') || lodashGet(props.report, 'errorFields.createChat')} 
        
               errorRowStyles={[styles.ml10, styles.mr2]} 
        
               onClose={() => Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)} 
        
           >

We are applying OfflineWithFeedback to both ReportActionItemParentAction and ReportActionItemCreated with the same props

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

Lines 59 to 65 in c9df4db

    
           <OfflineWithFeedback 
        
               pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(props.report, 'pendingFields.createChat')} 
        
               errors={lodashGet(props.report, 'errorFields.addWorkspaceRoom') || lodashGet(props.report, 'errorFields.createChat')} 
        
               errorRowStyles={[styles.ml10, styles.mr2]} 
        
               onClose={() => Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)} 
        
               needsOffscreenAlphaCompositing 
        
           >

So that the parent message of the thread will be wrapped by 2 OfflineWithFeedback Components. It makes the parent message of the thread become darker gray than other comments

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

We should remove the OfflineWithFeedback in ReportActionItemParentAction

Result

Proposal

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

Inconsistency: Different grayness levels on parent and child message

What is the root cause of that problem?

The ReportActionItemParentAction content is wrapped by two OfflineWithFeedback here and here.
When adding a message and creating a thread with it in offline mode, both will have opacity. This makes that item looks different than only one OfflineWithFeedback wrapper.

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

Solution 1:
We add a new prop called isDisabledOpacity to OfflineWithFeedback, and change needsOpacity here to:

const needsOpacity = !props.isDisabledOpacity && (...)

In ReportActionItemParentAction, we use that prop to avoid setting opacity when ReportActionItem will set it.

<OfflineWithFeedback
    isDisabledOpacity={parentReportAction.pendingAction}

Solution 2:
No need to add a new prop, but it will show only one error message.

return parentReportAction.pendingAction ? (
   {reportActionContent}
) : (
    <OfflineWithFeedback
        ...
    >
        {reportActionContent}
    </OfflineWithFeedback>
);

I can reproduce this. I can't think of any reason why we'd want parent and child messages to be in a different shade of grey here. Especially as the parent and child messages are normally the same text color while online.

2023-08-08_16-31-23.mp4

Job added to Upwork: https://www.upwork.com/jobs/~0192daee63c42d4dbd

@joekaufmanexpensify

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

@sobitneupane

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

@joekaufmanexpensify

I will request payment in newDot once the payment is summarized.

cc: @joekaufmanexpensify

Great, thanks! I will work on the BZ checklist.

IMO, this is a very minor visual bug, and no regression test is needed.

@daveSeife

BZ checklist is complete, all set to issue payment. We need to make the following payments:

@daveSeife - $250 for report. Paid via Upwork.
@ginsuma - $500 for PR. (Originally $1,000 and reduced 50% because of regression. Regression also negates urgency bonus.) Paid via Upwork.
@sobitneupane - $500 for C+. (Originally $1,000 and reduced 50% because of regression. Regression also negates urgency bonus.) Paid via NewDot.

@daveSeife

@daveSeife $250 sent and contract ended!

@ginsuma

@ginsuma $500 sent and contract ended!

@sobitneupane

@sobitneupane could you please request $500 and confirm here once that's done? TY!

@joekaufmanexpensify

@joekaufmanexpensify received. Thank you!

Pending request

@sobitneupane

Closing per our slack discussion! Payment summary message for when @sobitneupane requests is here.

#24263 (comment)

Requested payment on newDot

@sobitneupane

$500 payment approved for @sobitneupane based on BZ summary.

Navigation Menu

Repository navigation

[HOLD for payment 2023-09-20] [HOLD for payment 2023-09-18][$1000] Inconsistency: Different grayness levels on parent and child message #24263

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

Result

Proposal

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

What is the root cause of that problem?

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

88 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<OfflineWithFeedback
	pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom') \|\| lodashGet(props.report, 'pendingFields.createChat')}
	errors={lodashGet(props.report, 'errorFields.addWorkspaceRoom') \|\| lodashGet(props.report, 'errorFields.createChat')}
	errorRowStyles={[styles.ml10, styles.mr2]}
	onClose={() => Report.navigateToConciergeChatAndDeleteReport(props.report.reportID)}
	>

[HOLD for payment 2023-09-20] [HOLD for payment 2023-09-18][$1000] Inconsistency: Different grayness levels on parent and child message #24263

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Aug 8, 2023

melvin-bot commented on Aug 8, 2023

Bug0 Triage Checklist (Main S/O)

tienifr commented on Aug 8, 2023

Proposal

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

What is the root cause of that problem?

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

Result

ginsuma commented on Aug 8, 2023

Proposal

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

What is the root cause of that problem?

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

joekaufmanexpensify commented on Aug 8, 2023

melvin-bot commented on Aug 8, 2023

melvin-bot commented on Aug 8, 2023

melvin-bot commented on Aug 8, 2023

88 remaining items

sobitneupane commented on Sep 25, 2023

joekaufmanexpensify commented on Sep 26, 2023

joekaufmanexpensify commented on Sep 27, 2023

joekaufmanexpensify commented on Sep 27, 2023

joekaufmanexpensify commented on Sep 27, 2023

joekaufmanexpensify commented on Sep 27, 2023

joekaufmanexpensify commented on Sep 27, 2023

daveSeife commented on Sep 27, 2023

joekaufmanexpensify commented on Sep 28, 2023

joekaufmanexpensify commented on Sep 28, 2023

sobitneupane commented on Oct 9, 2023

JmillsExpensify commented on Oct 9, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions