[HOLD for payment 2024-07-10] [$250] Android - Workspaces - "Workspaces" title is shown in two lines

[lanitochka17]

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: 9.0.1-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
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Device font size must be large
• Or use a narrow screen device like Samsung Galaxy Z Fold (front display) and use minimum font size in this case

1. Launch New Expensify app
2. Go to Account settings
3. Go to Workspaces

Expected Result:

"Workspaces" title will not be shown in two lines

Actual Result:

"Workspaces" title is shown in two lines

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01db4b9a25dfd3bca7
• Upwork Job ID: 1804562341394542349
• Last Price Increase: 2024-06-22
• Automatic offers:
• Krishna2323 | Contributor | 102838388

Issue Owner

Current Issue Owner: @eh2077

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

[melvin-bot]

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

[lanitochka17]

@tgolen 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

[lanitochka17]

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

[Krishna2323]

Proposal

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

Android - Workspaces - "Workspaces" title is shown in two lines

What is the root cause of that problem?

When the screen is small we don't render the button outside of HeaderWithBackButton.

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 366 to 379 in 425804a

	<HeaderWithBackButton
	title={translate('common.workspaces')}
	shouldShowBackButton={isSmallScreenWidth}
	onBackButtonPress={() => Navigation.goBack()}
	icon={Illustrations.BigRocket}
	>
	<Button
	accessibilityLabel={translate('workspace.new.newWorkspace')}
	success
	medium
	text={translate('workspace.new.newWorkspace')}
	onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
	/>
	</HeaderWithBackButton>

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

We need to follow other workspace pages and render the button outside the HeaderWithBackButton so it will be below the header.

                <HeaderWithBackButton
                    title={translate('common.workspaces')}
                    shouldShowBackButton={isSmallScreenWidth}
                    onBackButtonPress={() => Navigation.goBack()}
                    icon={Illustrations.BigRocket}
                >
                    {!isSmallScreenWidth && (
                        <Button
                            accessibilityLabel={translate('workspace.new.newWorkspace')}
                            success
                            medium
                            text={translate('workspace.new.newWorkspace')}
                            onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
                        />
                    )}
                </HeaderWithBackButton>
                {isSmallScreenWidth && (
                    <View style={[styles.pl5, styles.pr5]}>
                        {' '}
                        <Button
                            accessibilityLabel={translate('workspace.new.newWorkspace')}
                            success
                            medium
                            text={translate('workspace.new.newWorkspace')}
                            onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
                            style={isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3}
                        />
                    </View>
                )}

Note we also need to do the same when rendering the empty workspace section and we can create a function to return the button like we do in other components.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 534 to 545 in 425804a

	<HeaderWithBackButton
	title={translate('workspace.common.members')}
	icon={Illustrations.ReceiptWrangler}
	onBackButtonPress={() => {
	Navigation.goBack();
	}}
	shouldShowBackButton={isSmallScreenWidth}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
	>
	{!isSmallScreenWidth && getHeaderButtons()}
	</HeaderWithBackButton>
	{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}

What alternative solutions did you explore? (Optional)

Result

workspace_list_page_title_line_break.mp4

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[tgolen]

Thanks for the proposal @Krishna2323

It looks good to me! Can you please do a PR?

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

@tgolen, PR will be ready in a hour.

[Krishna2323]

@tgolen, the PR is almost ready. I just need to record for Android native. I'm facing build issues and have been trying to resolve them for the last hour. Will update as soon as it get resolved.

[ishpaul777]

I was also having build issues, Deleting android/app/.cxx and rebuilding worked for me @Krishna2323 you may want to try that else let know i'll give you the screenshot/Video for Android : )

[parasharrajat]

We can remove this from the deploy blocker list. It is not really a blocker. @tgolen

[Krishna2323]

Thanks for the help, @ishpaul777, but it didn't work for me. It would be great if you could record a video for Android native. I moved the project code to an external SSD to free up some space, maybe that's causing the error.

[Krishna2323]

@tgolen, PR is ready for review, all recordings have been added. @ishpaul777, thanks for the help.

[mountiny]

I agree this does not have to be a blocker given the preconditions of narrow screen and increased base font size

[parasharrajat]

I was C+ on the PR. Please assign me.

[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 9.0.3-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Workspaces - Workspaces title is shown in two lines. #44215

If no regressions arise, payment will be issued on 2024-07-10. 🎊

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

• @parasharrajat requires payment through NewDot Manual Requests
• @Krishna2323 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:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR:
• [@parasharrajat] 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:
• [@parasharrajat] 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:
• [@parasharrajat] Determine if we should create a regression test for this bug.
• [@parasharrajat] 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.
• [] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[parasharrajat]

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:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: [Wave 8] Ideal nav  #33280
• [@parasharrajat] 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: https://github.com/Expensify/App/pull/33280/files#r1665152047
• [@parasharrajat] 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: Not needed
• [@parasharrajat] Determine if we should create a regression test for this bug. yes
• [@parasharrajat] 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.

Regression Test Steps

For devices with width greater than 800px

1. Launch New Expensify app
2. Go to Account settings
3. Go to Workspaces
4. Verify the New Workspace is in the same line as header text Workspaces

For devices with width less than 800px

1. Launch New Expensify app
2. Go to Account settings
3. Go to Workspaces
4. Verify the New Workspace is below the header text Workspaces

Do you agree 👍 or 👎 ?

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @MitchExpensify you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[MitchExpensify]

Payment summary:

• $250 @parasharrajat requires payment through NewDot Manual Requests
• $250 @Krishna2323 requires payment automatic offer (Contributor)

[MitchExpensify]

Paid and contract ended @Krishna2323

[parasharrajat]

Payment requested as per #44210 (comment)

[JmillsExpensify]

$250 approved for @parasharrajat