[Due for payment 2026-01-29] [$250] Change Approver dialog - make options explicit & skip when single option

[marcaaron]

coming from https://expensify.slack.com/archives/C07NMDKEFMH/p1765388830729039

cc @garrettmknight

Problem

• Dialog reads like paragraphs, not a selectable list.
• Page appears when only one option.
• No option is preselected.

Solution

• Header: "Choose an option to change the approver for this report. (Update your workspace settings to change this permanently for all reports.)"
• If options.length === 1, skip the dialog and apply the single choice.
• Render options and ensure one option is selected by default.

Requirements

• Header updated.
• Dialog skipped when only one option exists.
• Options shown with a default selection.

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022005687283419334557
• Upwork Job ID: 2005687283419334557
• Last Price Increase: 2026-01-05
• Automatic offers:
• nyomanjyotisa | Contributor | 110083706

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[nyomanjyotisa]

🚨 Edited by proposal-police: This proposal was edited at 2025-12-11 01:09:15 UTC.

Proposal

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

Change Approver dialog - make options explicit & skip when single option

What is the root cause of that problem?

The header is built from separate subtitle and description translations

App/src/pages/ReportChangeApproverPage.tsx

Lines 114 to 124 in 6db192d

	const listHeader = useMemo(
	() => (
	<>
	<Text style={[styles.ph5, styles.mb5]}>{translate('iou.changeApprover.subtitle')}</Text>
	<View style={[styles.ph5, styles.mb5, styles.renderHTML, styles.flexRow]}>
	<RenderHTML html={translate('iou.changeApprover.description', {workflowSettingLink: `${environmentURL}/${ROUTES.WORKSPACE_WORKFLOWS.getRoute(policy?.id)}`})} />
	</View>
	</>
	),
	[environmentURL, policy?.id, styles.flexRow, styles.mb5, styles.ph5, styles.renderHTML, translate],
	);

And the selectedApproverType state is initialized as undefined, so no option is preselected

App/src/pages/ReportChangeApproverPage.tsx

Line 48 in 6db192d

const [selectedApproverType, setSelectedApproverType] = useState<ApproverType>();

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

1. We can create a new translation key like iou.changeApprover.header and then update the header to use the new text format

            header: ({workflowSettingLink}: WorkflowSettingsParam) =>
                `Choose an option to change the approver for this report. (Update your <a href="${workflowSettingLink}">workspace settings</a> to change this permanently for all reports.)`,

    const listHeader = useMemo(
        () => (
            <View style={[styles.ph5, styles.mb5, styles.renderHTML, styles.flexRow]}>
                <RenderHTML
                    html={translate('iou.changeApprover.header', {
                        workflowSettingLink: `${environmentURL}/${ROUTES.WORKSPACE_WORKFLOWS.getRoute(policy?.id)}`,
                    })}
                />
            </View>
        ),
        [environmentURL, policy?.id, styles.flexRow, styles.mb5, styles.ph5, styles.renderHTML, translate],
    );

App/src/pages/ReportChangeApproverPage.tsx

Lines 114 to 124 in 6db192d

	const listHeader = useMemo(
	() => (
	<>
	<Text style={[styles.ph5, styles.mb5]}>{translate('iou.changeApprover.subtitle')}</Text>
	<View style={[styles.ph5, styles.mb5, styles.renderHTML, styles.flexRow]}>
	<RenderHTML html={translate('iou.changeApprover.description', {workflowSettingLink: `${environmentURL}/${ROUTES.WORKSPACE_WORKFLOWS.getRoute(policy?.id)}`})} />
	</View>
	</>
	),
	[environmentURL, policy?.id, styles.flexRow, styles.mb5, styles.ph5, styles.renderHTML, translate],
	);

2. Initialize selectedApproverType with the first option

    // Auto-select first option if none selected
    useEffect(() => {
        if (selectedApproverType === undefined && approverTypes.length > 0) {
            setSelectedApproverType(approverTypes[0].keyForList as ApproverType);
        }
    }, [approverTypes, selectedApproverType]);

    // Skip dialog if only one option
    useEffect(() => {
        if (!isLoadingReportData && !hasAutoAppliedRef.current && approverTypes.length === 1 && selectedApproverType === approverTypes[0].keyForList) {
            hasAutoAppliedRef.current = true;
            changeApprover();
        }
    }, [approverTypes, selectedApproverType, changeApprover, isLoadingReportData]);

App/src/pages/ReportChangeApproverPage.tsx

Line 101 in 6db192d

3. We can pass initiallyFocusedItemKey={selectedApproverType} to the SelectionList as well to make the preselected item highlighted

App/src/pages/ReportChangeApproverPage.tsx

Line 140 in 6db192d

<SelectionList

4. After adding an approver, Navigation.dismissModal was called synchronously, which meant the report update from addReportApprover would cause ReportChangeApproverPage to re-render and trigger the auto-apply logic before the modal was dismissed. We can wrap Navigation.dismissModal in requestAnimationFrame or Navigation.setNavigationActionToMicrotaskQueue to prevent the skip dialog / auto-apply from retriggering

        requestAnimationFrame(() => {
            Navigation.dismissModal();
        });

App/src/pages/ReportAddApproverPage.tsx

Line 103 in 6db192d

Navigation.dismissModal();

What alternative solutions did you explore? (Optional)

None

[marcaaron]

Putting a hold on this while we continue to discuss.