[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 contributors@expensify.com 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