[Due for payment 2025-02-18] [$250] Web - LHN - LHN shows empty without any placeholder

[vincdargento]

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.0.78-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

1. Login into same account in 2 tabs.
2. Make sure LHN doesn't have any pinned or unread chats.
3. From first tab, go any invalid report route (ie: https://staging.new.expensify.com/r/abcxyz)
4. From second tab, turn on the #focus mode. Go back to the first tab.
5. Notice the the main LHN screen is empty without any placeholder.

Expected Result:

If LHN is empty, we should show the same empty state we use on mobile. It should look like this:

Note that we also want to slightly update the text below the "Hmm... it's not here" text to use our textSupporting color, with a small copy update as well. We also need to make sure there is a search icon in the top right that launches the search router.

Actual Result:

There's no placeholder and it shows empty screen.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021873766942117852803
• Upwork Job ID: 1873766942117852803
• Last Price Increase: 2025-01-06
• Automatic offers:
• truph01 | Contributor | 105640342

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[truph01]

Edited by proposal-police: This proposal was edited at 2025-01-08 12:42:29 UTC.

Proposal

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

• There's no placeholder and it shows empty screen.

What is the root cause of that problem?

• We initially implemented logic to add Concierge to the LHN when the report list was empty in PR #19945. However, this logic was removed in PR #37361, where we opted to show an empty state view when no reports were available in the LHN. This approach works as intended for smaller screens.

• On wide screens, the assumption was that there would always be an open chat, rendering the empty state view unnecessary. However, this issue highlights a scenario where no reports are displayed in the LHN on wide screens, exposing a gap in the current logic.

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

• We can remove the shouldUseNarrowLayout in:

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Line 50 in 918488a

const shouldShowEmptyLHN = shouldUseNarrowLayout && data.length === 0;

so the empty state view can be displayed in all devices, not only small screens.

• Then, we need to update the text below the "Hmm... it's not here" text to use our textSupporting color, with a small copy update as well. We also need to make sure there is a search icon in the top left that launches the search router. To do it, with the not here page in the ReportScreen, we use:
  

  App/src/components/BlockingViews/FullPageNotFoundView.tsx

  Line 68 in c9a90e0

  <HeaderWithBackButton

                <HeaderWithBackButton
                    shouldDisplaySearchRouter
                />

• Test branch here.

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

• Add a unit test to verify that the LHNOptionsList renders the empty state when the data is empty: The test will involve rendering the sidebar, mocking the reports data to ensure no reports are displayed in the sidebar, and then verifying that the empty state view appears as expected

        it('display empty state', () => {
            const reportCollectionDataSet: ReportCollectionDataSet = {};
            LHNTestUtils.getDefaultRenderedSidebarLinks();
            return (
                waitForBatchedUpdates()
                    // When Onyx is updated to contain that data and the sidebar re-renders
                    .then(() =>
                        Onyx.multiSet({
                            [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.GSD,
                            [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
                            [ONYXKEYS.IS_LOADING_APP]: false,
                            ...reportCollectionDataSet,
                        }),
                    )

                    .then(() => {
                        expect(screen.getByText(Localize.translateLocal('common.emptyLHN.title'))).toBeOnTheScreen();
                    })
            );
        });

What alternative solutions did you explore? (Optional)

• We can restore the logic from the add Concierge to the LHN PR, but now, we will apply it only on wide screens to maintain consistency with the approach outlined in the Empty state UI for LHN PR. In detail, the condition to add the concierge report will be updated from _.isEmpty(reportsToDisplay) to _.isEmpty(reportsToDisplay) && !shouldUseNarrowLayout

Result

[truph01]

@bfitzexpensify

We initially implemented logic to add Concierge to the LHN when the report list was empty in PR #19945, which aligns with the expected behavior in this issue. However, that logic was removed in PR #37361, where we shifted to displaying an empty state view when no reports were available in the LHN. While this works as intended for smaller screens, we didn't implement it in wide screen.

Would you like to display the empty state view on wide screens as well, or should we still keep the expected behavior outlined in the OP?

[melvin-bot]

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

[melvin-bot]

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