[HOLD for payment 2024-06-28] [$250] Web - Categorizing - Offline indicator appears in Edit categories RHP on web layout

[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!

---

Issue found when validating #41344
Version Number: 1.4.79-3
Reproducible in staging?: y
Reproducible in production?: no, new feature
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

Precondition:

• Workspace has no categories.

1. Go to staging.new.expensify.com
2. Go to FAB > Track expense > Manual.
3. Select Categorize it from the actionable whisper.
4. Select the workspace with no categories.
5. Click Edit categories.
6. Go offline.

Expected Result:

Offline indicator will not appear in Edit categories RHP on web layout.

Actual Result:

Offline indicator appears in Edit categories RHP on web layout.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6501966_1717528079754.bandicam_2024-06-05_03-03-42-464.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a222d1a32818ce76
• Upwork Job ID: 1798291771349278720
• Last Price Increase: 2024-06-12
• Automatic offers:
• bernhardoj | Contributor | 102727195

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @arosiclair (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[m-natarajan]

@laurenreidexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[m-natarajan]

We think that this bug might be related to #wave-collect - Release 1

[Nodebrute]

Proposal

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

Categorizing - Offline indicator appears in Edit categories RHP on web layout

What is the root cause of that problem?

We are adding shouldShowOfflineIndicatorInWideScreen

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 290 in d51b3eb

shouldShowOfflineIndicatorInWideScreen

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

We can remove this line

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 290 in d51b3eb

shouldShowOfflineIndicatorInWideScreen

We can do the same to fix this in other places too

What alternative solutions did you explore? (Optional)

[arosiclair]

This seems to be enabled in several workspace pages. I'm not sure why but it doesn't seem accidental. I'm going to remove the blocker label since this is not really a new issue and reach out about it.

[bernhardoj]

Proposal

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

The offline indicator is shown in edit categories RHP page.

What is the root cause of that problem?

The categories page enable the offline indicator in wide screen.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 286 to 290 in 3c04b02

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	style={[styles.defaultModalContainer]}
	testID={WorkspaceCategoriesPage.displayName}
	shouldShowOfflineIndicatorInWideScreen

By default, the offline indicator is only shown on a small screen because we don't want to show the offline indicator in RHP. On a large screen, the offline indicator is only shown on the report screen and any screen that is in the center of the page, like categories and any other workspace/settings page.

But when the categories page is used in RHP too, we don't want the offline indicator.

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

Disable the offline indicator in wide screen if we are in RHP.

shouldShowOfflineIndicatorInWideScreen={!shouldUseNarrowLayout}

I searched for all usages of shouldShowOfflineIndicatorInWideScreen and only categories page that use useResponsiveLayout which indicates it's also being used in RHP.

OR

Update the condition here to use shouldUseNarrowLayout instead to fix it globally and prevent any issue in future.

App/src/components/ScreenWrapper.tsx

Lines 279 to 284 in 3c04b02

	{!isSmallScreenWidth && shouldShowOfflineIndicatorInWideScreen && (
	<OfflineIndicator
	containerStyles={[]}
	style={[styles.pl5, styles.offlineIndicatorRow, offlineIndicatorStyle]}
	/>
	)}

{!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && (

[melvin-bot]

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

[melvin-bot]

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

[allroundexperts]

Reviewing now.

[bernhardoj]

PR is ready

cc: @allroundexperts

[melvin-bot]

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

[laurenreidexpensify]

@lschurr adding you here for parental leave sub. no action required this BZ this week, PR is still in review, but adding you for payment in coming weeks when the fix makes it to prod. Thanks

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.85-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix offline indicator appears in Edit categories RHP on large layout #43740

If no regressions arise, payment will be issued on 2024-06-28. 🎊

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allroundexperts] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allroundexperts] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allroundexperts] Determine if we should create a regression test for this bug.
• [@allroundexperts] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@lschurr] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[lschurr]

Payment summary for tomorrow, 6/28:

• Contributor: $250 @bernhardoj (Paid in Upwork)
• Contributor+: $250 @allroundexperts (please request in Newdot)

[lschurr]

This is complete.

[JmillsExpensify]

$250 approved for @allroundexperts