[Awaiting payment some time in the past] [$250] Workspace switcher - Empty workspace switcher does not have "Create a workspace" modal

[lanitochka17]

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.0.21-0
Reproducible in staging?: Y
Reproducible in production?: N
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): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new account (account must have no workspace)
3. Open workspace switcher

Expected Result:

The empty workspace switcher will have "Create a workspace" modal

Actual Result:

The empty workspace switcher does not have "Create a workspace" modal

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

Add any screenshot/video evidence

Bug6573290_1723753657422.20240816_042526.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01720ac33ff733e428
• Upwork Job ID: 1824216428360268213
• Last Price Increase: 2024-08-15
• Automatic offers:
• dukenv0307 | Reviewer | 103545556
• Krishna2323 | Contributor | 103545557

Issue Owner

Current Issue Owner: @dukenv0307

[melvin-bot]

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

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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[Krishna2323]

Regression from #42413

Proposal

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

Workspace switcher - Empty workspace switcher does not have "Create a workspace" modal

What is the root cause of that problem?

WorkspaceSwitcherPage uses listFooterContent to render WorkspaceCardCreateAWorkspaceInstance but the selection list is not rendered when the list is empty.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 696 to 701 in 5b83a4b

	{flattenedSections.allOptions.length === 0 ? (
	renderListEmptyContent()
	) : (
	<>
	{!listHeaderContent && header()}
	<SectionList

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 478 to 486 in 5b83a4b

	const renderListEmptyContent = () => {
	if (showLoadingPlaceholder) {
	return <OptionsListSkeletonView shouldStyleAsTable={shouldUseUserSkeletonView} />;
	}
	if (shouldShowListEmptyContent) {
	return listEmptyContent;
	}
	return null;
	};

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

• We should use listEmptyContent={WorkspaceCardCreateAWorkspaceInstance} & shouldShowListEmptyContent={shouldShowCreateWorkspace} props.
• We should also check for other components which uses listFooterContent and listEmptyContent.

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2024-08-16.02-59-50.mp4

[yuwenmemon]

@Krishna2323 LGTM, thanks for identifying the regression as well. cc @tienifr

[melvin-bot]

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

[melvin-bot]

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

[yuwenmemon]

@Krishna2323 Are you able to spin up a PR for CP ASAP?

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@yuwenmemon, yep, just give me few minutes.

[Krishna2323]

@yuwenmemon @dukenv0307, PR ready for review ^

[Krishna2323]

@yuwenmemon, sorry for the delay, I found that there are 25 components that uses listEmptyContent prop without shouldShowListEmptyContent. Due to this, the empty component will never be shown according to the logic below.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 478 to 486 in 5b83a4b

	const renderListEmptyContent = () => {
	if (showLoadingPlaceholder) {
	return <OptionsListSkeletonView shouldStyleAsTable={shouldUseUserSkeletonView} />;
	}
	if (shouldShowListEmptyContent) {
	return listEmptyContent;
	}
	return null;
	};

App/src/pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage.tsx

Lines 54 to 70 in b860a58

	<SelectionScreen
	policyID={policyID}
	featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
	displayName={SageIntacctPaymentAccountPage.displayName}
	sections={vendorSelectorOptions.length ? [{data: vendorSelectorOptions}] : []}
	listItem={RadioListItem}
	onSelectRow={updateDefaultVendor}
	initiallyFocusedOptionKey={vendorSelectorOptions.find((mode) => mode.isSelected)?.keyForList}
	onBackButtonPress={() => Navigation.goBack(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED.getRoute(policyID))}
	title="workspace.sageIntacct.paymentAccount"
	listEmptyContent={listEmptyContent}
	connectionName={CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT}
	pendingAction={settingsPendingAction([CONST.SAGE_INTACCT_CONFIG.REIMBURSEMENT_ACCOUNT_ID], config?.pendingFields)}
	errors={ErrorUtils.getLatestErrorField(config ?? {}, CONST.SAGE_INTACCT_CONFIG.REIMBURSEMENT_ACCOUNT_ID)}
	errorRowStyles={[styles.ph5, styles.pv3]}
	onClose={() => Policy.clearSageIntacctErrorField(policyID, CONST.SAGE_INTACCT_CONFIG.REIMBURSEMENT_ACCOUNT_ID)}
	/>

I have 2 solutions in my mind:

1. We can default shouldShowListEmptyContent to true.
   

   App/src/components/SelectionList/BaseSelectionList.tsx

   Line 100 in 414157d

   shouldShowListEmptyContent = false,

2. All 25 components pass the listEmptyContent to SelectionScreen, which then passes it to SelectionList. We can introduce a new prop (shouldShowListEmptyContent) inside SelectionScreen and default it to true and then pass the prop to SelectionList.
   

   App/src/components/SelectionScreen.tsx

   Line 157 in 414157d

   listFooterContent={listFooterContent}

@tienifr, can you please take a look?

[dukenv0307]

@yuwenmemon Do we need C+ on this issue?

[tienifr]

@Krishna2323 Thanks for bumping me. I think we can go with option 1, can you create the PR for that?

[Krishna2323]

@tienifr, thanks for confirming. I will raise a PR for that.

[yuwenmemon]

@Krishna2323 Thanks! I'll take this out of review while we work on the larger scoped issue.

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

[Krishna2323]

Will create the new PR today.

[Krishna2323]

@yuwenmemon PR ready for review ^, I think @dukenv0307 will review this, right?

[Krishna2323]

@yuwenmemon, PR was deployed to production in 27th Aug, this will be ready for payments tomorrow.

[Krishna2323]

@yuwenmemon, I think no one is assigned to handle the payments, can you please add the labels? 🙏🏻

[melvin-bot]

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

[yuwenmemon]

@trjExpensify Can you help with the payment?

[trjExpensify]

Yeah bwoii!

Payment summary as follows:

• $250 to @Krishna2323 for the fix
• $250 to @dukenv0307 for the C+ review

I note the deploy blocker comment from melvin, but @yuwenmemon @dukenv0307 you agree with @Krishna2323's comment here that states that wasn't a DB from this PR?

[dukenv0307]

I agree

[trjExpensify]

Great, settled up with you both. Closing!