[Due for payment 2025-12-26] [$125] Text `Report title` and `Customize report titles` are not grayed out while creating workspace in offline

[m-natarajan]

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: 9.2.75-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @daledah
Slack conversation (hyperlinked to channel name): #Open Source

Action Performed:

1. Login to the app
2. Go to offline mode
3. Create a new workspace
4. Go to Workflows page
5. Observed that everything was grayed out
6. Go to Reports page

Expected Result:

Text Report title and Customize report titles are grayed out.

Actual Result:

Text Report title and Customize report titles are not grayed out

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

bug.1.mov

Recording.2035.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022003132548828796183
• Upwork Job ID: 2003132548828796183
• Last Price Increase: 2025-12-22

[melvin-bot]

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

[daledah]

Proposal

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

Text Report title and Customize report titles are not grayed out

What is the root cause of that problem?

Other parts of the Reports page (e.g., OfflineWithFeedback around MenuItemWithTopDescription) handle offline states, but the Section title and subtitle were not included.

App/src/pages/workspace/reports/WorkspaceReportsPage.tsx

Lines 198 to 208 in 41ad0a9

	<Section
	isCentralPane
	title={translate('workspace.common.reportTitle')}
	renderSubtitle={() => (
	<View style={[[styles.renderHTML, styles.mt1]]}>
	<RenderHTML html={translate('workspace.reports.customReportNamesSubtitle')} />
	</View>
	)}
	containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
	titleStyles={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1]}
	>

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

We should check if the workspace has pending add action, we'll apply styles.offlineFeedbackPending the Section title and subtitle styles

    const isPendingAdd = policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD; // or we can use other condition here like `reportTitlePendingFields.defaultValue`
    ...
    <Section
        isCentralPane
        title={translate('workspace.common.reportTitle')}
        renderSubtitle={() => (
            <View style={[styles.renderHTML, styles.mt1, isPendingAdd && styles.offlineFeedbackPending]}>
                <RenderHTML html={translate('workspace.reports.customReportNamesSubtitle')} />
            </View>
        )}
        containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
        titleStyles={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1, isPendingAdd && styles.offlineFeedbackPending]}
    >

App/src/pages/workspace/reports/WorkspaceReportsPage.tsx

Lines 198 to 208 in 41ad0a9

	<Section
	isCentralPane
	title={translate('workspace.common.reportTitle')}
	renderSubtitle={() => (
	<View style={[[styles.renderHTML, styles.mt1]]}>
	<RenderHTML html={translate('workspace.reports.customReportNamesSubtitle')} />
	</View>
	)}
	containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
	titleStyles={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1]}
	>

Note: we should do the same with other places that has the same problem

What alternative solutions did you explore? (Optional)

We can add prop pendingAction to Section component, then in Section component we can add styles.offlineFeedbackPending for title or subtitle (or we can wrap them in OfflineWithFeedback)

[melvin-bot]

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

Text Report title and Customize report titles are not grayed out while creating workspace in offline

What is the root cause of that problem?

The report header section doesn’t have opacity when there is a pending action

App/src/pages/workspace/reports/WorkspaceReportsPage.tsx

Lines 198 to 208 in 41ad0a9

	<Section
	isCentralPane
	title={translate('workspace.common.reportTitle')}
	renderSubtitle={() => (
	<View style={[[styles.renderHTML, styles.mt1]]}>
	<RenderHTML html={translate('workspace.reports.customReportNamesSubtitle')} />
	</View>
	)}
	containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
	titleStyles={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1]}
	>

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

We can use renderTitle and renderSubtitle then wrap it with OfflineWithFeedback

                        <Section
                            isCentralPane
                            renderTitle={() => (
                                <OfflineWithFeedback pendingAction={reportTitlePendingFields.defaultValue}>
                                    <Text style={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1]}>
                                        {translate('workspace.common.reportTitle')}
                                    </Text>
                                </OfflineWithFeedback>
                            )}
                            renderSubtitle={() => (
                                <OfflineWithFeedback pendingAction={reportTitlePendingFields.defaultValue}>
                                    <View style={[[styles.renderHTML, styles.mt1]]}>
                                        <RenderHTML html={translate('workspace.reports.customReportNamesSubtitle')} />
                                    </View>
                                </OfflineWithFeedback>
                            )}
                            containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
                        >

Or we can use policy?.pendingAction instead

What alternative solutions did you explore? (Optional)

None

[muhammadawais20]

Proposal

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

When a workspace is forced offline via the test tools, the report title section (title + “customize report titles” subtitle) remains visually active instead of appearing disabled, so users don’t get a clear offline cue.

What is the root cause of that problem?

The Section header and subtitle weren’t consuming the offline state or applying the disabled styling, so their visuals stayed in the normal state even though actions should be limited offline.

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

Apply the existing disabled/opacity style to the Section title and subtitle when isOffline is true, so the header text and subtitle render muted/greyed out. Keep the existing offline-aware behavior of the interactive controls (switches/menu items) consistent with that visual state.

What alternative solutions did you explore? (Optional)

N/A

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.

77385.webm

[QichenZhu]

@nyomanjyotisa's proposal looks good to me, and the approach is commonly used in our app.

[QichenZhu]

🎀👀🎀 C+ reviewed