[HOLD for payment 2023-08-07] [$1000] The #announce is hidden for a long workspace name (works fine with small workspace name)

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to staging dot on web chrome
2. Create a new workspace and change the name of the workspace to a longer name
3. Go to announce of the workspace and send any message
4. Now click on reply thread and send any message
5. A new page opens up with the workspace header. Click on it
6. Click on share code
7. Notice that the #announce is hidden and is not shown.
8. If you follow the same steps on small workspace name, the #announce is shown. Since #announce is an important identifier, it should not be hidden even if the workspace name is longer

Expected Result:

The #announce should not be hidden for a long workspace name since it's the name of the room

Actual Result:

The #announce is hidden for a long workspace name (works fine with small workspace name)

Workaround:

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

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.16-6
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

error-2023-05-18_10.05.04.mp4

Expensify/Expensify Issue URL:
Issue reported by: @priya-zha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1684383597774089

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a124a19ae3e3c33f
• Upwork Job ID: 1662189223091150848
2023-07-19
• Automatic offers:
• | | 0
• priya-zha | Reporter | 25745668

[melvin-bot]

Triggered auto assignment to @sophiepintoraetz (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[PrashantMangukiya]

Proposal

Posting proposal early as per new guidelines

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

The #announce is hidden for a long workspace name (works fine with small workspace name)

What is the root cause of that problem?

Workspace name rendered as subtitle via code below:

App/src/components/QRShare/index.js

Lines 80 to 90 in 7378626

	{this.props.subtitle && (
	<Text
	family="EXP_NEUE_BOLD"
	fontSize={13}
	numberOfLines={1}
	style={{marginTop: 4}}
	color={defaultTheme.textSupporting}
	>
	{this.props.subtitle}
	</Text>
	)}

We restrict it with numberOfLines={1} at line 84 so long text will truncate. This is the root cause of the problem.

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

Within src/components/QRShare/index.js file we have to update subtitle as shown below.
i.e. Remove number of lines prop, and make text as center with break all, so if long text comes without space then it can break into multiple lines.

{this.props.subtitle && (
    <Text
        ...
        // numberOfLines={1} // *** Remove this ***
        // style={{marginTop: 4}} // *** Old Code ***
        style={[styles.mt1, styles.textAlignCenter, styles.breakAll]} // *** Updated Code ***
       ...
    >
       ...
    </Text>
)}

This will solve the issue as shown in result.

What alternative solutions did you explore? (Optional)

None

Result

[dukenv0307]

Proposal

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

The #announce is hidden for a long workspace name (works fine with small workspace name)

What is the root cause of that problem?

App/src/components/QRShare/index.js

Lines 80 to 90 in 8180113

	{this.props.subtitle && (
	<Text
	family="EXP_NEUE_BOLD"
	fontSize={13}
	numberOfLines={1}
	style={{marginTop: 4}}
	color={defaultTheme.textSupporting}
	>
	{this.props.subtitle}
	</Text>
	)}

We only display subTitles in one line. So the long workspace name will be truncated

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

We can move the workspace name to the beginning of subTitle and still truncate subTitle.

App/src/libs/ReportUtils.js

Lines 488 to 508 in 8180113

	function getChatRoomSubtitle(report) {
	if (isThread(report)) {
	if (!getChatType(report)) {
	return '';
	}
	const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
	// If thread is not from a DM or group chat, the subtitle will follow the pattern 'Workspace Name • #roomName'
	const workspaceName = getPolicyName(report);
	let roomName = '';
	if (isChatRoom(report)) {
	if (parentReport) {
	roomName = lodashGet(parentReport, 'displayName', '');
	} else {
	roomName = lodashGet(report, 'displayName', '');
	}
	}
	return [workspaceName, roomName].join(' • ');
	}

We add one more params in getChatRoomSubtitle function called shouldDisplayRoomNameFirst (default is false)
Then updating

App/src/libs/ReportUtils.js

Line 507 in 8180113

return [workspaceName, roomName].join(' • ');

to

return shouldDisplayRoomNameFirst ? [roomName, workspaceName].join(' • ') : [workspaceName, roomName].join(' • ');

and pass shouldDisplayRoomNameFirst is true in here

App/src/pages/ShareCodePage.js

Line 40 in 8180113

const subtitle = ReportUtils.getChatRoomSubtitle(this.props.report);

What alternative solutions did you explore? (Optional)

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[sophiepintoraetz]

Apologies Joe - I'm going OOO today for the week and didn't get a chance to try and replicate this - I'll keep myself assigned so that if it needs movement when I'm back, I'll catch up then!

[joekaufmanexpensify]

I can reproduce this, but I don't think this is a bug, and am not sure we should do anything to change this. Here is the language from the threads design doc discussing how we truncate the workspace name and root report. It looks like we applied this same logic to QR codes:

Truncation of both the rows in the header will work the same. We’ll fit as much as available space will allow leaving room for “..” if either row exceeds that space.

cc @stitesExpensify Curious if you agree this is not a bug?

It seems like we just did not optimize for workspace name longer than 30 characters so the root report is cut off on a QR code if the workspace name is longer than that (which is fair, since names this long shouldn't be common).

[stitesExpensify]

hm maybe we should just wrap in the QR code case? CC @JmillsExpensify

[joekaufmanexpensify]

Could you clarify what you mean by wrap here? Would that mean truncating the workspace name to make sure the root report is always shown?

[stitesExpensify]

As in the bottom portion below the qr code would expand, and have multiple lines.

Some alternatives would be:

1. Do nothing
2. Switch the order so that the room name is always first, and then the workspace so that it is always visible. If we make them linkable though (like you can click to go up a layer) then it won't make as much sense

[joekaufmanexpensify]

Got it. Personally, I am not opposed to doing nothing here. Since we're allowing users to navigate from thread back to parent room soon, it doesn't seem super realistic to me that users will end up confused about the root report of a thread.

Further, we are going to add limits on lengths of room names soon. Which will further reduce the likelihood of anyone running into this.

[joekaufmanexpensify]

Brought question to Slack

[joekaufmanexpensify]

I see Stites is out of the office through the weekend. So going to add the external label to get more eyes on this.

[melvin-bot]

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

[melvin-bot]

Current assignee @joekaufmanexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[shawnborton]

Let's definitely center it. As for truncating after 2 lines or not, what's our current thinking/rules for this? No truncation via ellipsis, but perhaps we just prevent super long room names/workspace names upon creation?

[dangrous]

so we're allowing up to 100 chars for each right now as per the work being done in #18647

[shawnborton]

Cool, works for me. So I guess we don't worry about truncation here, and just center everything up.

[melvin-bot]

🎯 ⚡️ Woah @rushatgabhane / @varshamb, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @varshamb got assigned: 2023-07-25 16:50:19 Z
• when the PR got merged: 2023-07-26 15:45:28 UTC

On to the next one 🚀

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

• numberOfLines to 2 #23571

If no regressions arise, payment will be issued on 2023-08-07. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @rushatgabhane does not require payment (Eligable for Manual Requests)
• @varshamb requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

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

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

[sophiepintoraetz]

Payouts due:

Issue Reporter: $250 @priya-zha
Contributor: $1500 @varshamb
Contributor+: $1500 @rushatgabhane

Eligible for 50% #urgency bonus? Y

[priya-zha]

Hey @sophiepintoraetz. Seems like you have sent me an offer for this issue now. Melvin had already sent me an offer earlier. I accepted it and I'm just waiting for you to send the payment and end the contract. You can withdraw the contract that you've sent me now.

[rushatgabhane]

@priya-zha FYI, you could also reject the offer on upwork

[rushatgabhane]

1. The PR that introduced the bug has been identified. Link to the PR: This is not a bug. This is an UX enhancement.

2. 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: N.A.

3. 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: N.A.

4. Determine if we should create a regression test for this bug. No

5. 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 - N.A.

[rushatgabhane]

created a manual request - https://staging.new.expensify.com/r/3749561052279859

[sophiepintoraetz]

@priya-zha - please can you just accept the offer as it appears the original has timed out.

[sophiepintoraetz]

@varshamb - I believe I sent you an offer via Upwork, can you please confirm you have received it?|
https://www.upwork.com/jobs/~01b4b2a05ab4dd6216

[priya-zha]

@priya-zha - please can you just accept the offer as it appears the original has timed out.

Okay. Accepted the offer that you sent me today. If the original has timed out, can you withdraw the offer that Melvin sent me earlier . I accepted that offer (melvin's) but the payment has not been done for that.

Thanks

[varshamb]

@varshamb - I believe I sent you an offer via Upwork, can you please confirm you have received it?| https://www.upwork.com/jobs/~01b4b2a05ab4dd6216

Thank you! Accepted the offer.

[JmillsExpensify]

Reviewed details for @rushatgabhane. These details are accurate based on summary from Business Reviewer and are now approved for payment in NewDot.

[sophiepintoraetz]

Payments done here!