[$250] Domains - No RBR error on the Domain Admins page when changing primary contact fails

[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: 9.3.6-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: #79765
Email or phone of affected tester (no customers): applausetester@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Mac 26.1 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Log in as domain admin (applausetester@applause.expensifail.com).

1. Go to staging.new.expensify.com
2. Go to Workspaces.
3. Scroll to the bottom.
4. Tap applause.expensifail.com domain.
5. Go to Domain admins.
6. Click Settings.
7. Open CMD+D and enable "Simulate failing network requests", close the modal.
8. Click Primary contact.
9. Select other contact.
10. Close the RHP.

Expected Result:

• An RBR error appears on the Domain Admins page.
• Clicking the error navigates to the Settings RHP.

Actual Result:

There is no RBR error on the Domain Admins 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/~022014812157853469840
• Upwork Job ID: 2014812157853469840
• Last Price Increase: 2026-01-30
• Automatic offers:
• situchan | Reviewer | 110312983

Issue Owner

Current Issue Owner: @war-in

[melvin-bot]

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

[cosmicvulpes]

Proposal

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

When changing the primary contact on the Domain Admins Settings page fails (e.g., due to network failure), no RBR error indicator appears on the Domain Admins page to guide users to the Settings RHP where the actual error is displayed.

What is the root cause of that problem?

The DomainAdminsPage subscribes to domainErrors from Onyx but only uses adminErrors for displaying errors on admin list items. The Settings button (lines 77-83) does not check for or display errors from technicalContactEmailErrors or useTechnicalContactBillingCardErrors.

While errors are properly displayed in DomainAdminsSettingsPage via OfflineWithFeedback, there's no RBR indicator on the parent page to lead users there.

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

Add a red DotIndicator next to the Settings button when settings errors exist, following the same pattern used in DomainsListRow.

In DomainAdminsPage.tsx:

1. Add necessary imports and compute hasSettingsErrors:

import {View} from 'react-native';
import Icon from '@components/Icon';
import useTheme from '@hooks/useTheme';
import {isEmptyObject} from '@src/types/utils/EmptyObject';

// Inside component:
const theme = useTheme();
const icons = useMemoizedLazyExpensifyIcons(['Gear', 'Plus', 'DotIndicator']);

const hasSettingsErrors = !isEmptyObject(domainErrors?.technicalContactEmailErrors) || 
                          !isEmptyObject(domainErrors?.useTechnicalContactBillingCardErrors);

2. Wrap the Settings button with a View and conditionally render the RBR indicator:

<View style={[styles.flexRow, styles.alignItemsCenter, shouldUseNarrowLayout && styles.flexGrow1]}>
    <Button
        onPress={() => Navigation.navigate(ROUTES.DOMAIN_ADMINS_SETTINGS.getRoute(domainAccountID))}
        text={translate('domain.admins.settings')}
        icon={icons.Gear}
        innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
        style={[shouldUseNarrowLayout && [styles.flexGrow1, styles.mb3]]}
    />
    {hasSettingsErrors && (
        <View style={[styles.ml2]}>
            <Icon
                src={icons.DotIndicator}
                fill={theme.danger}
            />
        </View>
    )}
</View>

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[CortneyOfstad]

Hey @shubham1206agra! There is a proposal above for review – thanks!

[HiepPP]

Proposal for Issue #80206

Problem

When changing the primary contact on the Domain Admins Settings page fails (e.g., due to network failure), no RBR error indicator appears on the Domain Admins page to guide users to the Settings RHP where the actual error is displayed.

Root Cause

The DomainAdminsPage subscribes to domainErrors from Onyx but only uses adminErrors for displaying errors on admin list items. The Settings button does not check for or display errors from technicalContactEmailErrors or useTechnicalContactBillingCardErrors.

While errors are properly displayed in DomainAdminsSettingsPage via OfflineWithFeedback, there's no RBR indicator on the parent page to lead users there.

Key code paths:

• src/pages/domain/Admins/DomainAdminsPage.tsx:35-42 - domainErrors and domainPendingAction are fetched but not fully utilized
• src/pages/domain/Admins/DomainAdminsPage.tsx:77-83 - Settings button lacks error indicator
• src/pages/domain/Admins/DomainAdminsSettingsPage.tsx:58-70 - Errors displayed correctly in Settings
• src/components/Domain/DomainsListRow.tsx:65-71 - Reference pattern for DotIndicator usage

Solution

Add a red DotIndicator next to the Settings button when settings errors exist, following the same pattern used in DomainsListRow.

Implementation

Files Modified

src/pages/domain/Admins/DomainAdminsPage.tsx

Step 1: Add necessary imports

Add these imports after line 18:

import {View} from 'react-native';
import Icon from '@components/Icon';
import useTheme from '@hooks/useTheme';
import {isEmptyObject} from '@src/types/utils/EmptyObject';

Step 2: Add DotIndicator to icons and initialize theme

Replace line 27 with:

const icons = useMemoizedLazyExpensifyIcons(['Gear', 'Plus', 'DotIndicator']);

Add after line 29 (after const styles = useThemeStyles();):

const theme = useTheme();

Step 3: Compute hasSettingsErrors

Add after line 42 (after the domainPendingAction selector):

const hasSettingsErrors = !isEmptyObject(domainErrors?.technicalContactEmailErrors) ||
                          !isEmptyObject(domainErrors?.useTechnicalContactBillingCardErrors);

Step 4: Wrap Settings button with error indicator

Replace the Settings button (lines 77-83) with:

<View style={[styles.flexRow, styles.alignItemsCenter, shouldUseNarrowLayout && styles.flexGrow1]}>
    <Button
        onPress={() => Navigation.navigate(ROUTES.DOMAIN_ADMINS_SETTINGS.getRoute(domainAccountID))}
        text={translate('domain.admins.settings')}
        icon={icons.Gear}
        innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
        style={[shouldUseNarrowLayout && [styles.flexGrow1, styles.mb3]]}
    />
    {hasSettingsErrors && (
        <View style={[styles.ml2]}>
            <Icon
                src={icons.DotIndicator}
                fill={theme.danger}
            />
        </View>
    )}
</View>

Complete Modified Section

Here's the complete modified DomainAdminsPage.tsx with all changes integrated:

// ... existing imports ...
import {View} from 'react-native';
import Icon from '@components/Icon';
import useTheme from '@hooks/useTheme';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
// ... rest of imports ...

function DomainAdminsPage({route}: DomainAdminsPageProps) {
    const {domainAccountID} = route.params;
    const {translate} = useLocalize();
    const styles = useThemeStyles();
    const {shouldUseNarrowLayout} = useResponsiveLayout();
    const illustrations = useMemoizedLazyIllustrations(['UserShield']);
    const icons = useMemoizedLazyExpensifyIcons(['Gear', 'Plus', 'DotIndicator']);
    const theme = useTheme();

    const [adminAccountIDs] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN}${domainAccountID}`, {
        canBeMissing: true,
        selector: adminAccountIDsSelector,
    });

    const [domainErrors] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_ERRORS}${domainAccountID}`, {
        canBeMissing: true,
    });

    const [domainPendingAction] = useOnyx(`${ONYXKEYS.COLLECTION.DOMAIN_PENDING_ACTIONS}${domainAccountID}`, {
        canBeMissing: true,
        selector: adminPendingActionSelector,
    });

    const hasSettingsErrors = !isEmptyObject(domainErrors?.technicalContactEmailErrors) ||
                              !isEmptyObject(domainErrors?.useTechnicalContactBillingCardErrors);

    // ... rest of component ...

    const headerContent = isAdmin ? (
        <>
            <Button
                success
                onPress={() => Navigation.navigate(ROUTES.DOMAIN_ADD_ADMIN.getRoute(domainAccountID))}
                text={translate('domain.admins.addAdmin')}
                icon={icons.Plus}
                innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
                style={shouldUseNarrowLayout && [styles.flexGrow1, styles.mb3]}
            />
            <View style={[styles.flexRow, styles.alignItemsCenter, shouldUseNarrowLayout && styles.flexGrow1]}>
                <Button
                    onPress={() => Navigation.navigate(ROUTES.DOMAIN_ADMINS_SETTINGS.getRoute(domainAccountID))}
                    text={translate('domain.admins.settings')}
                    icon={icons.Gear}
                    innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
                    style={[shouldUseNarrowLayout && [styles.flexGrow1, styles.mb3]]}
                />
                {hasSettingsErrors && (
                    <View style={[styles.ml2]}>
                        <Icon
                            src={icons.DotIndicator}
                            fill={theme.danger}
                        />
                    </View>
                )}
            </View>
        </>
    ) : null;

    // ... rest unchanged ...
}

Testing Approach

1. Enable "Simulate failing network requests" via CMD+D
2. Navigate to Workspaces -> Domain -> Domain Admins
3. Tap Settings button
4. Tap "Primary contact"
5. Select a different contact
6. Close the RHP (navigate back to Domain Admins page)
7. Verify: Red dot indicator appears next to Settings button
8. Tap Settings button again
9. Verify: Error message is visible on Primary contact row
10. Disable network failure simulation
11. Verify: Dot indicator disappears when errors clear

Expected Behavior

• When technicalContactEmailErrors or useTechnicalContactBillingCardErrors exist, a red dot appears next to the Settings button
• Clicking Settings navigates to the Settings page where the full error message is displayed
• The dot disappears when errors are cleared
• Works in both narrow (mobile) and wide (desktop) layouts

Alternatives Considered

Alternative 1: Full-page error banner

Display a large error banner at the top of the Domain Admins page.
Rejected: Too invasive for this use case; the dot indicator pattern is already established in the codebase.

Alternative 2: Error toast notification

Show a toast message when the user returns to the page.
Rejected: Toasts are transient and don't persist to guide users to the error location.

Alternative 3: Modal error dialog

Display a modal when errors are detected.
Rejected: Modals interrupt user flow and are inconsistent with existing RBR patterns.

References

• Issue: [$250] Domains - No RBR error on the Domain Admins page when changing primary contact fails #80206
• Reference pattern: src/components/Domain/DomainsListRow.tsx:65-71
• BRICK_ROAD_INDICATOR_STATUS constants: src/CONST/index.ts:4011-4014
• Domain Admins Page: src/pages/domain/Admins/DomainAdminsPage.tsx
• Domain Admins Settings Page: src/pages/domain/Admins/DomainAdminsSettingsPage.tsx:58-70

[shubham1206agra]

@situchan and @war-in should take over this as a regression.