[HOLD for payment 2022-11-02] [$250] The ‘Multiple users are typing’ vertical text alignment is incorrect

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open group chat as user A
2. Type as User B on another device
3. Observe underlying "typing..." display as User A
4. Type as User B and User C on 2 different devices simultaneously
5. Observe underlying "typing..." display as User A

Expected Result:

Text should be aligned

Actual Result:

The ‘Multiple users are typing’ vertical text alignment is incorrect. When a single user is typing the text remains centered, but when multiple users are typing the text becomes uncentered:

Workaround:

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

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.88-14
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

WebmultipleUsersTyping.mov

Expensify/Expensify Issue URL:
Issue reported by: @Julesssss
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1660833359041749

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @robertjchen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Julesssss]

@robertjchen I'll take this as I'm on the C+ team, and reported the issue.

[melvin-bot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mdneyazahmad]

Proposal

App/src/pages/home/report/ReportTypingIndicator.js

Lines 64 to 87 in ca4ba68

	case 1:
	return (
	<TextWithEllipsis
	leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
	trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
	textStyle={[styles.chatItemComposeSecondaryRowSubText]}
	wrapperStyle={[styles.chatItemComposeSecondaryRow]}
	leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
	/>
	);
	default:
	return (
	<Text
	style={[
	styles.chatItemComposeSecondaryRowSubText,
	styles.chatItemComposeSecondaryRowOffset,
	]}
	numberOfLines={1}
	>
	{this.props.translate('reportTypingIndicator.multipleUsers')}
	{` ${this.props.translate('reportTypingIndicator.areTyping')}`}
	</Text>
	);

Use same component that is used to display single user typing message.

-                    <Text
-                        style={[
-                            styles.chatItemComposeSecondaryRowSubText,
-                            styles.chatItemComposeSecondaryRowOffset,
-                        ]}
-                        numberOfLines={1}
-                    >
-                        {this.props.translate('reportTypingIndicator.multipleUsers')}
-                        {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
-                    </Text>
+                    <TextWithEllipsis
+                        leadingText={this.props.translate('reportTypingIndicator.multipleUsers')}
+                        trailingText={` ${this.props.translate('reportTypingIndicator.areTyping')}`}
+                        textStyle={[styles.chatItemComposeSecondaryRowSubText]}
+                        wrapperStyle={[styles.chatItemComposeSecondaryRow]}
+                        leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
+                    />

Before

After

[MitchExpensify]

Upwork Job

[melvin-bot]

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

[melvin-bot]

Current assignee @Julesssss is eligible for the Exported assigner, not assigning anyone new.

[parasharrajat]

Checking on the proposal.

[parasharrajat]

@mdneyazahmad's proposal seems fine to me. The only difference will be that multiple users will start to show ellipsis instead of trimming the are typing... part, when the screen area is less than the required space for multiple users are typing.... This is unlikely to happen.

cc: @Julesssss

🎀 👀 🎀 C+ reviewed

[mdneyazahmad]

@parasharrajat I also think the same atleast in multiple user typing case it is very static "Multiple users are typing..." but when a single user is typing the name could be long and it will overflow the screen and the result will not be what are we expecting. But that is an issue that exist within TextWithEllipsis and is very unlikely to happen.

[parasharrajat]

that is an issue that exist within TextWithEllipsis

It is not an issue. TextWithEllipsis is created to behave that way.

[mdneyazahmad]

I see, are we fine or need to make some changes in my proposal?

App/src/components/TextWithEllipsis/index.js

Lines 32 to 45 in dbfd0eb

	const TextWithEllipsis = props => (
	<View style={[styles.flexRow, ...StyleUtils.parseStyleAsArray(props.wrapperStyle)]}>
	<View style={[styles.flexShrink1, ...StyleUtils.parseStyleAsArray(props.leadingTextParentStyle)]}>
	<Text style={[...StyleUtils.parseStyleAsArray(props.textStyle)]} numberOfLines={1}>
	{props.leadingText}
	</Text>
	</View>
	<View style={styles.flexShrink0}>
	<Text style={props.textStyle}>
	{props.trailingText}
	</Text>
	</View>
	</View>
	);

We can do some changes in TextWithEllipsis and make trailingText an optional and conditionally render trailing text.

+        {props.trailingText && (
         <View style={styles.flexShrink0}>
             <Text style={props.textStyle}>
                 {props.trailingText}
             </Text>
         </View>
+        )}

Now, we can pass text combined to leadingText prop.

[parasharrajat]

No that changes the motive of using TextWithEllipsis. After these changes, the end result can also be achieved using a simple Text component.

That said, your previous proposal is fine.

[melvin-bot]

📣 @mdneyazahmad You have been assigned to this job by @Julesssss!
Please apply to this job in Upwork 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 📖

[Julesssss]

It looks like there's an ongoing discussion in the PR review.

[Julesssss]

Hey @mdneyazahmad, there are some outstanding comments in the PR, are you able to take a look? Thanks!

[mdneyazahmad]

Sorry for the delay. I will update it sometime today. Thanks!

[MitchExpensify]

Any update @mdneyazahmad ?

[mdneyazahmad]

@MitchExpensify PR is deployed on staging #10790 (comment)

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.19-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: spacing on report typing indicator #10790

If no regressions arise, payment will be issued on 2022-11-02. 🎊

[MitchExpensify]

Made a note to pay on 2022-11-02

[Julesssss]

Not overdue, awaiting payment

[Julesssss]

Oh cool, it is the second of November today. Is that why the label changed priority? 🤯

[MitchExpensify]

I had to repost the job and have sent you both offers @parasharrajat & @mdneyazahmad. Will pay and close this once accepted! Thank you

[mdneyazahmad]

@MitchExpensify offer accepted. Thanks!

[MitchExpensify]

Paid! Thanks all