[HOLD for payment 2024-05-09] [$250] iOS - Start Chat - Offline indicator overlaps with navigation bar in Start chat list

[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: 1.4.63-7
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:

1. Launch New Expensify app
2. Go to FAB > Start chat
3. Go offline

Expected Result:

Offline indicator will not overlap with navigation bar

Actual Result:

Offline indicator overlaps with navigation bar

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/~011f820b0b52933326
• Upwork Job ID: 1781781063752663040
• Last Price Increase: 2024-04-20
• Automatic offers:
• Krishna2323 | Contributor | 0

[melvin-bot]

Triggered auto assignment to @srikarparsi (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]

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

[lanitochka17]

Production:

[Krishna2323]

Proposal

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

iOS - Start Chat - Offline indicator overlaps with navigation bar in Start chat list

What is the root cause of that problem?

We haven't wrapped NewChatPage with ScreenWrapper component. We have ScreenWrapper in WorkspaceNewRoomPage.

App/src/pages/NewChatPage.tsx

Lines 278 to 311 in 4350e96

	return (
	<View
	style={styles.flex1}
	testID={NewChatPage.displayName}
	>
	<KeyboardAvoidingView
	style={styles.flex1}
	behavior="padding"
	// Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
	// This is because when wrapping whole screen the screen was freezing when changing Tabs.
	keyboardVerticalOffset={variables.contentHeaderHeight + (insets?.top ?? 0) + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding}
	>
	<SelectionList<OptionsListUtils.Option & ListItem>
	ListItem={UserListItem}
	sections={areOptionsInitialized ? sections : CONST.EMPTY_ARRAY}
	textInputValue={searchTerm}
	textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
	onChangeText={setSearchTerm}
	textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
	headerMessage={headerMessage}
	onSelectRow={createChat}
	onConfirm={(e, option) => (selectedOptions.length > 0 ? createGroup() : createChat(option))}
	rightHandSideComponent={itemRightSideComponent}
	footerContent={footerContent}
	showLoadingPlaceholder={!areOptionsInitialized}
	shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
	isLoadingNewOptions={!!isSearchingForReports}
	initiallyFocusedOptionKey={firstKeyForList}
	/>
	{isSmallScreenWidth && <OfflineIndicator />}
	</KeyboardAvoidingView>
	</View>
	);
	}

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

Instead of View, we should wrap the component with ScreenWrapper like we do in WorkspaceNewRoomPage.

What alternative solutions did you explore? (Optional)

Result

[srikarparsi]

I believe this has to do with this PR. cc @Luke9389 @rushatgabhane. Is there a reason we don't use the shouldShowOfflineIndicator property in the outer NewChatSelectorPage.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011f820b0b52933326

[mountiny]

We have to move ahead with this PR to get it CPed soon, I will assign @Krishna2323

[melvin-bot]

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

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

[mountiny]

Adding Rushat from the offending PR

[Krishna2323]

@mountiny, there are 2 more issues.

1. We have medium sized button on start chat page.
2. The create room button has no padding bottom, it overflows from the container.

Found the solution for the first one but still looking for the second one.

[mountiny]

@Krishna2323 thanks for raising. I doubt there should be any styling differences between these buttons, why would one of them was smaller than another, could we make sure we use same styles?

Keep us posted on the progress

[Krishna2323]

The button size issue is also caused by this PR, they forgot to pass large prop to the button, that's why the button uses the default(medium) size.

App/src/pages/NewChatPage.tsx

Lines 266 to 272 in 8616678

	<Button
	success
	text={translate('common.next')}
	onPress={createGroup}
	pressOnEnter
	/>
	)}

[Krishna2323]

@rushatgabhane @mountiny, PR ready for review.

[srikarparsi]

Just left a comment @Krishna2323 but code changes look good to me.

[mountiny]

Adding @allroundexperts for a quick pr review

@srikarparsi can you please merge and request CP once they are done and no problems found? thanks!

[srikarparsi]

Yes will do :)

[srikarparsi]

Merged and requested CP @mountiny

[Krishna2323]

@srikarparsi @mountiny, PR was deployed to production on 22nd April, this is ready for the payments process. I guess no one is assigned yet to handle the payment.

[Krishna2323]

@srikarparsi @mountiny, friendly bump for payments.

[melvin-bot]

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

[mountiny]

$250 to @Krishna2323 and to @allroundexperts

[sakluger]

Summarizing payment on this issue:

Contributor: @Krishna2323 $250, paid via Upwork
Contributor+: @allroundexperts $250, please complete BZ checklist and request payment via Newdot

[allroundexperts]

Checklist

1. As mentioned by @srikarparsi, this is caused by New chat page list refactor 2 #38610
2. N/A
3. N/A
4. A regression test would be helpful. The steps given in the OP look clear enough to me.

[sakluger]

Thanks! Closing.

[JmillsExpensify]

$250 approved for @allroundexperts