[$250] Reports - Submit button is green for the admin side on Report page

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.91-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2625/folder/13176702/41236788/1103225255 / #66140
Email or phone of affected tester (no customers): leungbratt6+admincollect@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 10/Chrome
App Component: Chat Report View

Action Performed:

Precondition: Admin of a collect workspace invites a member to the workspace
Steps :

1. As the Employee goes to Workspace chat
2. Create a manual expense but do not submit yet
3. As the Admin open the Report page

Expected Result:

Submit button should be grey for Admin

Actual Result:

Submit button is green for admin on Report page

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022009435784570696637
• Upwork Job ID: 2009435784570696637
• Last Price Increase: 2026-01-21
• Automatic offers:
• ChavdaSachin | Contributor | 110239184

Issue Owner

Current Issue Owner: @Gonals

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Reports - Submit button is green for the admin side on Report page

What is the root cause of that problem?

ActionCell component always renders the submit/approve/export action buttons with success={true}, making them green for everyone (submitter, admin, manager) regardless of who is viewing the report

App/src/components/SelectionListWithSections/Search/ActionCell.tsx

Lines 180 to 193 in 634b5ce

	return (
	<Button
	text={text}
	onPress={goToItem}
	small={!extraSmall}
	extraSmall={extraSmall}
	style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
	isLoading={isLoading}
	success
	isDisabled={isOffline || shouldDisablePointerEvents}
	shouldStayNormalOnDisable={shouldDisablePointerEvents}
	isNested
	/>
	);

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

We should conditionally set the success prop based on whether the current user is the report submitter

    const isReportSubmitter = isCurrentUserSubmitter(iouReport);

    return (
        <Button
            text={text}
            onPress={goToItem}
            small={!extraSmall}
            extraSmall={extraSmall}
            style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
            isLoading={isLoading}
            success={isReportSubmitter}
            isDisabled={isOffline || shouldDisablePointerEvents}
            shouldStayNormalOnDisable={shouldDisablePointerEvents}
            isNested
        />
    );

Or set the success prop to true only for SUBMIT actions when the current user is the report submitter

    const isReportSubmitter = isCurrentUserSubmitter(iouReport);
    const isSubmitAction = action === CONST.SEARCH.ACTION_TYPES.SUBMIT;

    return (
        <Button
            text={text}
            onPress={goToItem}
            small={!extraSmall}
            extraSmall={extraSmall}
            style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
            isLoading={isLoading}
            success={isSubmitAction ? isReportSubmitter : true}
            isDisabled={isOffline || shouldDisablePointerEvents}
            shouldStayNormalOnDisable={shouldDisablePointerEvents}
            isNested
        />
    );

App/src/components/SelectionListWithSections/Search/ActionCell.tsx

Lines 180 to 193 in 634b5ce

	return (
	<Button
	text={text}
	onPress={goToItem}
	small={!extraSmall}
	extraSmall={extraSmall}
	style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
	isLoading={isLoading}
	success
	isDisabled={isOffline || shouldDisablePointerEvents}
	shouldStayNormalOnDisable={shouldDisablePointerEvents}
	isNested
	/>
	);

Note: We can adjust the success prop condition for other actions as needed

What alternative solutions did you explore? (Optional)

None

[ChavdaSachin]

Proposal

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

Reports - Submit button is green for the admin side on Report page

What is the root cause of that problem?

We always pass success prop here

App/src/components/SelectionListWithSections/Search/ActionCell.tsx

Lines 181 to 192 in c41b92b

	<Button
	text={text}
	onPress={goToItem}
	small={!extraSmall}
	extraSmall={extraSmall}
	style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
	isLoading={isLoading}
	success
	isDisabled={isOffline || shouldDisablePointerEvents}
	shouldStayNormalOnDisable={shouldDisablePointerEvents}
	isNested
	/>

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

We should conditionally pass the success theme to action cell similar to MoneyRequestReportPreview

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 232 to 237 in c41b92b

	// The submit button should be success green color only if the user is submitter and the policy does not have Scheduled Submit turned on
	// Or if the report has been reopened or retracted
	const isWaitingForSubmissionFromCurrentUser = useMemo(() => {
	const isOwnAndReportHasBeenRetracted = isReportOwner(iouReport) && hasReportBeenRetracted;
	return isOwnAndReportHasBeenRetracted || isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy);
	}, [chatReport, policy, hasReportBeenRetracted, iouReport]);

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Line 558 in c41b92b

success={isWaitingForSubmissionFromCurrentUser}

    // The submit button should be success green color only if the user is submitter and the policy does not have Scheduled Submit turned on
    // Or if the report has been reopened or retracted
    const isWaitingForSubmissionFromCurrentUser = useMemo(() => {
        const isOwnAndReportHasBeenRetracted = isReportOwner(iouReport) && hasReportBeenRetracted;
        return isOwnAndReportHasBeenRetracted || isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy);
    }, [chatReport, policy, hasReportBeenRetracted, iouReport]);

    const isSubmitAction = action === CONST.SEARCH.ACTION_TYPES.SUBMIT;

    .
    .
    .
    
    return (
        <Button
            text={text}
            onPress={goToItem}
            small={!extraSmall}
            extraSmall={extraSmall}
            style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
            isLoading={isLoading}
            success={isSubmitAction ? isWaitingForSubmissionFromCurrentUser : true}
            isDisabled={isOffline || shouldDisablePointerEvents}
            shouldStayNormalOnDisable={shouldDisablePointerEvents}
            isNested
        />
    );
}

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ashu75575]

Proposal

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

The Submit button in ActionCell is always displayed in a green “success” state, even when the current user should not be allowed to submit the report.

What is the root cause of that problem?

The component currently hard-codes success={true} for the Submit button and does not validate report ownership or report state before enabling or styling the button.

App/src/components/SelectionListWithSections/Search/ActionCell.tsx

Line 188 in a035280

success

As a result:

• The button appears actionable for every viewer
• Ownership is never checked (ownerAccountID vs current user)
• Report state is ignored (stateNum / statusNum)
• Reports that are already submitted can still show a green Submit button

The problem is not just missing permission logic — the UI does not reflect the true actionability of the report.

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

We should introduce a simple validation rule inside ActionCell that determines whether the current user is actually allowed to perform the Submit action, and style the button according to that decision.

    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
    const currentUserAccountID = currentUserPersonalDetails?.accountID;
    
    // NEW: Validate if current user can perform the action
    const canPerformAction = useMemo(() => {
        // For non-submit actions, keep default behavior
        if (action !== CONST.SEARCH.ACTION_TYPES.SUBMIT) {
            return true;
        }
        
        // For submit action, validate:
        // 1. Report must be in draft state (not already submitted)
        // 2. Current user must be the report owner
        const isReportDraft = iouReport?.stateNum === CONST.REPORT.STATE_NUM.OPEN && 
                             iouReport?.statusNum === CONST.REPORT.STATUS_NUM.OPEN;
        const isReportOwner = currentUserAccountID === iouReport?.ownerAccountID;
        
        return isReportDraft && isReportOwner;
    }, [action, currentUserAccountID, iouReport?.ownerAccountID, iouReport?.stateNum, iouReport?.statusNum]);
    

then add changes from this:

App/src/components/SelectionListWithSections/Search/ActionCell.tsx

Lines 180 to 193 in a035280

	return (
	<Button
	text={text}
	onPress={goToItem}
	small={!extraSmall}
	extraSmall={extraSmall}
	style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
	isLoading={isLoading}
	success
	isDisabled={isOffline || shouldDisablePointerEvents}
	shouldStayNormalOnDisable={shouldDisablePointerEvents}
	isNested
	/>
	);

to:

return (
        <Button
            text={text}
            onPress={goToItem}
            small={!extraSmall}
            extraSmall={extraSmall}
            style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
            isLoading={isLoading}
            success={canPerformAction}  // ⬅️ Only green when user can perform action
            isDisabled={isOffline || shouldDisablePointerEvents || !canPerformAction}  // ⬅️ Disabled when user can't perform
            shouldStayNormalOnDisable={shouldDisablePointerEvents || !canPerformAction}  // ⬅️ Stay gray when disabled
            isNested
        />
    );

This keeps the change small, local to the component, and easy to understand and test, while fixing the misleading UI behavior.

What alternative solutions did you explore? (Optional)

N/A

[RachCHopkins]

@jponikarchuk this test appears to be specific to reopened or retracted reports.

Are you able to point to where it says that a new report's submit button should be grey for the admin?

[jponikarchuk]

Are you able to point to where it says that a new report's submit button should be grey for the admin?

@RachCHopkins Could you please check this PR or this comment

[melvin-bot]

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