[HOLD for payment 2024-09-18][$250] Workspaces -"Add custom segment or record" image appears briefly after adding the first one

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://github.com/Expensify/Web-Expensify/pull/42969
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Open the app
2. Log in with a new expensifail account
3. Click on FAB - New workspace
4. Enable "Accounting" in the "More features" page.
5. Navigate to "Accounting"
6. Connect to NetSuite and upgrade the workspace to Control when asked
7. Wait for the sync to finish
8. Navigate to Accounting - Import - Custom Segments/records
9. Click on the "Add custom segment/record" button
10. Add a Custom record with any random data

Expected Result:

I should only the added segment or record.

Actual Result:

"Add custom segment or record" image appears briefly after adding the first one.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Note: A shorter video showing the problem is here: #47501 (comment)

Bug6559939_1722575555547.bandicam_2024-08-02_07-02-13-997.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f07df597970e1a9f
• Upwork Job ID: 1824147642331660429
• Last Price Increase: 2024-08-21

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

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

[izarutskaya]

Created by this comment https://github.com/Expensify/Web-Expensify/pull/42969#issuecomment-2265845791

[aldo-expensify]

The relevant part of the video in the GH issue description is this:

Screen.Recording.2024-08-15.at.10.48.42.AM.mov

This screen flashing briefly after having added the first segment:

The flashing is so short that maybe it is not worth doing anything.

[puneetlath]

It is short, but I feel like we should still fix it if possible. An external contributor could do it right?

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[melvin-bot]

@puneetlath, @mollfpr Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Upwork job price has been updated to $250

[puneetlath]

Updated the price to see if we can get a proposal.

[NJ-2020]

Is there is any NetSuite credentials for testing this issue? Thanks

cc: @puneetlath

[CyberAndrii]

Proposal

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

"Add custom segment or record" image appears briefly after adding first segment.

What is the root cause of that problem?

It's a bug with withOnyx where it doesn't give the most up-to-date data, in this case on the first rendering. This causes the "Add custom segment or record" page to appear until withOnyx returns the correct value during the second render.

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

As withOnyx is now deprecated, we can replace it with useOnyx in withPolicy component

App/src/pages/workspace/withPolicy.tsx

Lines 92 to 99 in 56f021d

	return withOnyx<TProps & RefAttributes<TRef>, WithPolicyOnyxProps>({
	policy: {
	key: (props) => `${ONYXKEYS.COLLECTION.POLICY}${getPolicyIDFromRoute(props.route)}`,
	},
	policyDraft: {
	key: (props) => `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${getPolicyIDFromRoute(props.route)}`,
	},
	})(forwardRef(WithPolicy));

[CyberAndrii]

One thing — I haven't found a consistent way to reproduce this with 100% certainty about my solution. It happens once in about 10 attempts. Maybe you have some ideas?

Is there is any NetSuite credentials for testing this issue? Thanks

@NJ-2020 you can disable credentials validation with this changes

diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
index 11c47a21f2e..869dd8cf600 100644
--- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx
+++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
@@ -231,7 +231,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
             return [];
         }
         const shouldShowSynchronizationError = !!synchronizationError;
-        const shouldHideConfigurationOptions = isConnectionUnverified(policy, connectedIntegration);
+        const shouldHideConfigurationOptions = false;
         const integrationData = getAccountingIntegrationData(connectedIntegration, policyID, translate, policy);
         const iconProps = integrationData?.icon ? {icon: integrationData.icon, iconType: CONST.ICON_TYPE_AVATAR} : {};

diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx
index c3d77b656b5..15bc437782b 100644
--- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx
+++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx
@@ -23,7 +23,7 @@ function NetSuiteImportPage({policy}: WithPolicyConnectionsProps) {
     const {canUseNetSuiteUSATax} = usePermissions();
 
     const policyID = policy?.id ?? '-1';
-    const config = policy?.connections?.netsuite?.options.config;
+    const config = policy?.connections?.netsuite?.options?.config;
     const {subsidiaryList} = policy?.connections?.netsuite?.options?.data ?? {};
     const selectedSubsidiary = useMemo(() => (subsidiaryList ?? []).find((subsidiary) => subsidiary.internalID === config?.subsidiaryID), [subsidiaryList, config?.subsidiaryID]);

[NJ-2020]

@CyberAndrii Thank you

[mollfpr]

One thing — I haven't found a consistent way to reproduce this with 100% certainty about my solution. It happens once in about 10 attempts. Maybe you have some ideas?

@CyberAndrii You can consistently reproduce it if you haven't created custom segments/records.

---

The proposal from @CyberAndrii looks good to me and working well!

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

@puneetlath, @mollfpr 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

📣 @CyberAndrii You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[CyberAndrii]

UPD: Ok, managed to fix this with InteractionManager.runAfterInteractions, will submit a PR soon.

@mollfpr I didn't realize until now that my fix works in a browser and the desktop app, but not in the mobile app. I'm not sure why it behaves differently or how to fix it. The only difference I've noticed is that on mWeb clicking the "Confirm" button instantly opens the next page, while in the native app it plays a modal closing animation. Maybe the modal prevents the page behind it from re-rendering until the modal is closed?

mWeb iOS

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-08-27.at.14.24.09.mp4

Native iOS

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-08-27.at.14.43.28.mp4

[mollfpr]

Not overdue, Melv.

[melvin-bot]

@puneetlath @mollfpr @CyberAndrii this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[CyberAndrii]

The PR was deployed to production in #48791. The payment is due 2024-09-18.

[mollfpr]

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] 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:

I couldn't find the offending PR but I believe this issue is a race condition on transitioning the page and displaying the Onyx data. We fix the issue by replacing the deprecated withOnyx with the hook useOnyx.

[@mollfpr] 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:

The regression step should be enough.

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] 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.

1. Open the app
2. Log in or create a new account
3. Open Account settings > Workspaces
4. Create a new workspace
5. Enable "Accounting" on the "More features" page
6. Navigate to "Accounting"
7. Connect to NetSuite and upgrade the workspace to Control when asked
8. Wait for the sync to finish
9. Navigate to Accounting - Import - Custom segments/records
10. Click on the "Add custom segment/record" button
11. Add a Custom record with any random data
12. Verify that the "Add custom segment or record" image did not appear after clicking the "Confirm" button on the last step
13. 👍 or 👎

---

@puneetlath Could you create the payment summary? Thank you!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @mollfpr owed $250 via NewDot
• ROLE: @CyberAndrii paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@puneetlath)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1824147642331660429/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[puneetlath]

@CyberAndrii can you provide me your Upwork profile? It doesn't look like you were hired for the job.

Payment summary:

• C - $250 - @CyberAndrii - to be paid via Upwork
• C+ - 250 - @mollfpr - to be paid via NewDot

[CyberAndrii]

@puneetlath https://www.upwork.com/freelancers/~01ca590af4f896abcb

It was a manual application #47501 (comment), but the job seems to have been closed a few days ago

[puneetlath]

Ok I sent you a new offer here: https://www.upwork.com/nx/wm/offer/104079114. Please ping me on this issue when you've accepted.

[CyberAndrii]

@puneetlath done

[puneetlath]

Ok @CyberAndrii has been paid. @mollfpr please request on NewDot. Thanks everyone!

[garrettmknight]

$250 approved for @mollfpr