`Submit` button is green on the `Reports` page, when it should be grey/button color

[JmillsExpensify]

Problem

We're showing conflicting colors for the Submit button based on the view. For instance, on the Reports page, you can see that this Submit button is green.

Clicking into the same report, the Submit button is correctly showing as grey/button color, as the report is scheduled to be automatically submitted.

Solution

The Search page should be using the grey/button color, consistent with the report header.

cc @luacmartins since we've messed with this logic recently. I'll still open this up for external unless you decide otherwise.

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

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

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the Bug assigner, not assigning anyone new.

[NJ-2020]

I think we need to hold for this #54732

[luacmartins]

Agree to put a hold for #54732

[bernhardoj]

Proposal

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

Submit button is green on the Reports page even though it's scheduled to be automatically submitted.

What is the root cause of that problem?

We don't have any logic to turn it to gray when the expense is scheduled to be automatically submitted, compared to the money report header.

App/src/components/MoneyReportHeader.tsx

Lines 293 to 296 in 3541c89

	const isWaitingForSubmissionFromCurrentUser = useMemo(
	() => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
	[chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
	);

App/src/components/MoneyReportHeader.tsx

Lines 396 to 397 in 3541c89

	<Button
	success={isWaitingForSubmissionFromCurrentUser}

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

The ActionCell already has a prop called shouldUseSuccessStyle (it will be removed in #54732 but we can just re-add it) which we can control to either show it as green or gray. The value depends on !policy?.harvesting?.enabled, just like on the report header.

shouldUseSuccessStyle={!policy?.harvesting?.enabled}

We need to apply it to all these places. The policy will be from the item.policyID

App/src/components/SelectionList/Search/ReportListItem.tsx

Lines 162 to 173 in 3541c89

	{!isLargeScreenWidth && (
	<ExpenseItemHeaderNarrow
	participantFrom={participantFrom}
	participantFromDisplayName={participantFromDisplayName}
	participantTo={participantTo}
	participantToDisplayName={participantToDisplayName}
	action={reportItem.action}
	onButtonPress={handleOnButtonPress}
	containerStyle={[styles.ph3, styles.pt1half, styles.mb1half]}
	isLoading={reportItem.isActionLoading}
	shouldUseSuccessStyle={!hasHeldExpenses}
	/>

App/src/components/SelectionList/Search/ReportListItem.tsx

Lines 203 to 205 in 3541c89

	<ActionCell
	action={reportItem.action}
	shouldUseSuccessStyle={!hasHeldExpenses}

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 283 in 3541c89

shouldUseSuccessStyle={!isOnHold}

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Lines 448 to 450 in 3541c89

	<ActionCell
	action={item.action}
	shouldUseSuccessStyle={!isOnHold}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We can create a UI test to make sure it's shown as green if harvesting is disabled and gray otherwise.

[melvin-bot]

@JmillsExpensify, @luacmartins, @parasharrajat Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!