Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2024-10-11] [$150] Expense - Combined report is more grayed out than the transaction thread #46200

Closed
6 tasks done
lanitochka17 opened this issue Jul 25, 2024 · 87 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@lanitochka17
Copy link

lanitochka17 commented Jul 25, 2024

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Version Number: 9.0.12-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: N/A
Issue reported by: Applause - Internal Team

Action Performed:

  1. Go to staging.new.expensify.com
  2. Go to DM with user that has no unsettled expense
  3. Go offline
  4. Submit an expense
  5. Click on the expense preview to go to expense report (combined report)
  6. Take note of the grayness
  7. Submit another expense
  8. Click on the expense preview to go to transaction thread
  9. Note the difference in report grayness between Step 6 and 8

Expected Result:

The grayness of the combined report and the transaction thread should be the same

Actual Result:

The combined report is more grayed out than the transaction thread

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

Add any screenshot/video evidence

Bug6552519_1721902826735.bandicam_2024-07-25_18-16-58-090.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~010079feefd518ffb7
  • Upwork Job ID: 1821119086877872721
  • Last Price Increase: 2024-09-23
  • Automatic offers:
    • dukenv0307 | Reviewer | 104088606
    • nkdengineer | Contributor | 104088608
Issue OwnerCurrent Issue Owner: @dylanexpensify
@lanitochka17 lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jul 25, 2024
Copy link

melvin-bot bot commented Jul 25, 2024

Triggered auto assignment to @dylanexpensify (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.

@Krishna2323
Copy link
Contributor

Krishna2323 commented Jul 25, 2024

Edited by proposal-police: This proposal was edited at 2024-08-15 11:53:52 UTC.

Proposal

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

  • When we use MoneyRequestView inside ReportActionItemContentCreated, we are wrapping it with OfflineWithFeedback but the content inside MoneyRequestView already covers the state for pending action for each field expect ReceiptEmptyState

if (ReportUtils.isExpenseReport(report) || ReportUtils.isIOUReport(report) || ReportUtils.isInvoiceReport(report)) {
return (
<OfflineWithFeedback pendingAction={action.pendingAction}>
{transactionThreadReport && !isEmptyObject(transactionThreadReport) ? (
<>
<MoneyReportView
report={report}
policy={policy}
isCombinedReport
shouldShowTotal={transactionCurrency !== report.currency}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
<ShowContextMenuContext.Provider value={contextValue}>
<View>
<MoneyRequestView
report={transactionThreadReport}
shouldShowAnimatedBackground={false}
/>
{renderThreadDivider}
</View>
</ShowContextMenuContext.Provider>
</>
) : (
<MoneyReportView
report={report}
policy={policy}
shouldHideThreadDividerLine={shouldHideThreadDividerLine}
/>
)}
</OfflineWithFeedback>
);
}

  • Expense - Combined report is more grayed out than the transaction thread

What is the root cause of that problem?

ReceiptEmptyState isn't wrapped with OfflineWithFeedback.

{shouldShowReceiptEmptyState && (
<ReceiptEmptyState
hasError={hasErrors}
disabled={!canEditReceipt || readonly}
onPress={() =>
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
CONST.IOU.ACTION.EDIT,
iouType,
transaction?.transactionID ?? '-1',
report?.reportID ?? '-1',
Navigation.getActiveRouteWithoutParams(),
),
)
}
/>
)}

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

  1. Wrap ReceiptEmptyState with OfflineWithFeedback like we do for ReportActionItemImage.
  2. Do not wrap MoneyRequestView inside ReportActionItemContentCreated with OfflineWithFeedback.
  3. We can also wrap ReceiptAudit with OfflineWithFeedback.
            <View>
                {transactionThreadReport && !isEmptyObject(transactionThreadReport) ? (
                    <>
                        <OfflineWithFeedback pendingAction={action.pendingAction}>
                            <MoneyReportView
                                report={report}
                                policy={policy}
                                isCombinedReport
                                shouldShowTotal={transactionCurrency !== report.currency}
                                shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                            />
                        </OfflineWithFeedback>
                        <ShowContextMenuContext.Provider value={contextValue}>
                            <View>
                                <MoneyRequestView
                                    report={transactionThreadReport}
                                    shouldShowAnimatedBackground={false}
                                />
                                {renderThreadDivider}
                            </View>
                        </ShowContextMenuContext.Provider>
                    </>
                ) : (
                    <OfflineWithFeedback pendingAction={action.pendingAction}>
                        <MoneyReportView
                            report={report}
                            policy={policy}
                            shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                        />
                    </OfflineWithFeedback>
                )}
            </View>

What alternative solutions did you explore? (Optional)

const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => pendingAction ? undefined : transaction?.pendingFields?.[fieldPath]

Result

Monosnap.screencast.2024-07-25.20-47-05.mp4

@nkdengineer
Copy link
Contributor

nkdengineer commented Jul 25, 2024

Edited by proposal-police: This proposal was edited at 2024-08-07 11:17:24 UTC.

Proposal

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

The combined report is more grayed out than the transaction thread

What is the root cause of that problem?

In the combined report, we wrap the MoneyRequestView with an OfflineWithFeedback. So all item in MoneyRequestView is grayed out.

<OfflineWithFeedback pendingAction={action.pendingAction}>

But in the transaction thread report, we don't do it here

<ShowContextMenuContext.Provider value={contextValue}>
<View>
<MoneyRequestView

And in MoneyRequestView both Receipt labels and Receipt empty component isn't grayed out

pendingAction={pendingAction}

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

We should wrap the component here with OfflineWithFeedback and pass pendingAction prop as action.pendingAction

<ShowContextMenuContext.Provider value={contextValue}>
<View>
<MoneyRequestView

We also need to return the pending field action here as undefined if the pendingAction is not undefined to avoid the duplicate pending action because if pendingAction exists, we already wrapped OfflineWithFeedback outside the MoneyRequestView

const getPendingFieldAction = (fieldPath: TransactionPendingFieldsKey) => transaction?.pendingFields?.[fieldPath] ?? pendingAction;

OPTIONAL: We can also wrap the receipt label and receipt empty state with OfflineWithFeedback

We also need to update pendingFields for receipt when we replace the receipt here and delete the receipt here

and then also use getPendingFieldAction for receipt as well

getPendingFieldAction('receipt');

pendingAction={pendingAction}

We also need to do the same way for MoneyReportView

What alternative solutions did you explore? (Optional)

NA

@nyomanjyotisa
Copy link
Contributor

Proposal

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

Combined report is more grayed out than the transaction thread

What is the root cause of that problem?

When displaying the report we wrap it with OfflineWithFeedback

if (ReportUtils.isExpenseReport(report) || ReportUtils.isIOUReport(report) || ReportUtils.isInvoiceReport(report)) {
return (
<OfflineWithFeedback pendingAction={action.pendingAction}>

But when displaying it in transaction thread we don't wrap it with OfflineWithFeedback

return (
<ShowContextMenuContext.Provider value={contextValue}>
<View>
<MoneyRequestView
report={report}
shouldShowAnimatedBackground
/>
{renderThreadDivider}
</View>
</ShowContextMenuContext.Provider>
);

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

wrap it with OfflineWithFeedback when displaying it in transaction thread to make it consistent

        return (
            <OfflineWithFeedback pendingAction={action.pendingAction}>
                <ShowContextMenuContext.Provider value={contextValue}>
                    <View>
                        <MoneyRequestView
                            report={report}
                            shouldShowAnimatedBackground
                        />
                        {renderThreadDivider}
                    </View>
                </ShowContextMenuContext.Provider>
            </OfflineWithFeedback>
        );

What alternative solutions did you explore? (Optional)

@Krishna2323
Copy link
Contributor

Proposal Updated

  • Updated RCA and solution

@nkdengineer
Copy link
Contributor

Updated proposal #46200 (comment) to add alternative solution.

@Krishna2323
Copy link
Contributor

Proposal Updated

  • Minor update in solution section and added result video

@melvin-bot melvin-bot bot added the Overdue label Jul 29, 2024
Copy link

melvin-bot bot commented Jul 30, 2024

@dylanexpensify Eep! 4 days overdue now. Issues have feelings too...

Copy link

melvin-bot bot commented Aug 1, 2024

@dylanexpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

@dylanexpensify
Copy link
Contributor

reviewing today!

@melvin-bot melvin-bot bot removed the Overdue label Aug 5, 2024
@dylanexpensify dylanexpensify added the External Added to denote the issue can be worked on by a contributor label Aug 7, 2024
@melvin-bot melvin-bot bot changed the title Expense - Combined report is more grayed out than the transaction thread [$250] Expense - Combined report is more grayed out than the transaction thread Aug 7, 2024
Copy link

melvin-bot bot commented Aug 7, 2024

Job added to Upwork: https://www.upwork.com/jobs/~010079feefd518ffb7

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Aug 7, 2024
Copy link

melvin-bot bot commented Aug 7, 2024

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

@dylanexpensify dylanexpensify changed the title [$250] Expense - Combined report is more grayed out than the transaction thread [$125] Expense - Combined report is more grayed out than the transaction thread Aug 7, 2024
Copy link

melvin-bot bot commented Aug 7, 2024

Upwork job price has been updated to $125

@dylanexpensify
Copy link
Contributor

External, but lowered price for ease of fix

@nkdengineer
Copy link
Contributor

Updated proposal with another fix in the main solution.

@dukenv0307
Copy link
Contributor

Thanks for your proposals.

@Krishna2323 Your proposal will work, but it cause the inconsistency between other components like MoneyReportView. We use both OfflineWithFeedback outside and inside. The outside OfflineWithFeedback is used for create action, the inside one is used for update action.

@nyomanjyotisa Your solution is incorrect since it can cause the double greyed out problem

So I like the way to keep things consistent like @nkdengineer's solution, we should remove the fallbackPendingAction and wrap receipt label and receipt empty state with OfflineWithFeedback

Let's go with @nkdengineer's solution

🎀👀🎀 C+ reviewed

Copy link

melvin-bot bot commented Aug 8, 2024

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

@dukenv0307
Copy link
Contributor

@dylanexpensify BTW, The issue can be easy to fix, but finding a consistent solution that doesn't cause any regression is not too easy. Should we keep the initial price (250$) as usual? Thanks

@Krishna2323
Copy link
Contributor

Krishna2323 commented Aug 8, 2024

Your proposal will work, but it cause the inconsistency between other components like MoneyReportView. We use both OfflineWithFeedback outside and inside. The outside OfflineWithFeedback is used for create action, the inside one is used for update action.

@dukenv0307, I don't think that's the case. For instance, we can look at the TaskView component, which is also not wrapped with OfflineWithFeedback and handles the pending state view inside the component. Also, if we wrap the MoneyRequestView with OfflineWithFeedback in ReportActionItemContentCreated, it will cause regression as it will gray out any field twice if created and edited offline. Could you please verify this too? 🙏🏻

Monosnap.screencast.2024-08-08.11-02-08.mp4

return (
<View style={[styles.pRelative]}>
<AnimatedEmptyStateBackground />
<View>
<TaskView report={report} />
{renderThreadDivider}
</View>
</View>
);
}

Copy link

melvin-bot bot commented Sep 23, 2024

Upwork job price has been updated to $150

@melvin-bot melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 23, 2024
Copy link

melvin-bot bot commented Sep 23, 2024

📣 @dukenv0307 🎉 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

Copy link

melvin-bot bot commented Sep 23, 2024

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

Offer link
Upwork job
Please accept the offer 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 📖

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 24, 2024
@dylanexpensify
Copy link
Contributor

pending hitting prod the 7 day period

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 4, 2024
@melvin-bot melvin-bot bot changed the title [$150] Expense - Combined report is more grayed out than the transaction thread [HOLD for payment 2024-10-11] [$150] Expense - Combined report is more grayed out than the transaction thread Oct 4, 2024
Copy link

melvin-bot bot commented Oct 4, 2024

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

@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Oct 4, 2024
Copy link

melvin-bot bot commented Oct 4, 2024

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

If no regressions arise, payment will be issued on 2024-10-11. 🎊

For reference, here are some details about the assignees on this issue:

Copy link

melvin-bot bot commented Oct 4, 2024

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:

  • [@dukenv0307] The PR that introduced the bug has been identified. Link to the PR:
  • [@dukenv0307] 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:
  • [@dukenv0307] 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:
  • [@dukenv0307] Determine if we should create a regression test for this bug.
  • [@dukenv0307] 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.
  • [@dylanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@dylanexpensify
Copy link
Contributor

Coming up!

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Oct 11, 2024
@dylanexpensify
Copy link
Contributor

Payment summary:

Contributor: @nkdengineer $150
Contributor+: @dukenv0307 $150

Please apply/request!

@dylanexpensify
Copy link
Contributor

@nkdengineer @dukenv0307 please accept offers!

@melvin-bot melvin-bot bot removed the Overdue label Oct 14, 2024
@dukenv0307
Copy link
Contributor

BugZero Checklist:

  • The PR that introduced the bug has been identified. Link to the PR: N/A
  • 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: N/A
  • 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: N/A
  • Determine if we should create a regression test for this bug. Yes
  • 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.

Regression test:

  1. Go to DM with user that has no unsettled expense
  2. Go offline
  3. Submit an expense
  4. Click on the expense preview to go to expense report (combined report)
  5. Take note of the grayness
  6. Submit another expense
  7. Click on the expense preview to go to transaction thread
  8. Verify that: The grayness of the combined report and the transaction thread should be the same

@dylanexpensify
Copy link
Contributor

bump @dukenv0307 @nkdengineer on accepting contract

@dukenv0307
Copy link
Contributor

@dylanexpensify Sorry I missed that, I accepted the contract

@dylanexpensify
Copy link
Contributor

Done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
No open projects
Status: Polish
Development

No branches or pull requests

9 participants