[HOLD for payment 2022-11-04] [$250] Add Workspace name label next to room name in the chats list

[shawnborton]

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:

As soon as you have multiple workspaces, it becomes impossible to decipher from a glance which rooms belong to which workspaces when you look at the LHN. As a result, you have to click into each chat to obtain that information in the chat header.

cc @trjExpensify

Actual Result:

Proposed Change:

Let's add a small pill style label next to the room name to indicate which workspace the room belongs to.

Platform:

Where is this issue occurring?

• All Platforms

Upwork URL: https://www.upwork.com/jobs/~01d70c28c08ade2a30
Slack conversation: Internal link

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[trjExpensify]

Thanks, @shawnborton. Christina, I'll snag this from you and move it along to Upwork as it's impacting the productivity of the guides agents.

[trjExpensify]

Upwork job here: https://www.upwork.com/jobs/~01d70c28c08ade2a30

[akshayasalvi]

Proposal

We need to update the DisplayNames component to accept nodes instead of Proptypes.string.

App/src/components/LHNOptionsList/OptionRowLHN.js

Lines 162 to 166 in ce740fe

	<View style={contentContainerStyles}>
	<DisplayNames
	accessibilityLabel="Chat user display names"
	fullTitle={optionItem.text}
	displayNamesWithTooltips={displayNamesWithTooltips}

<DisplayNames
    accessibilityLabel="Chat user display names"
-    fullTitle={optionItem.text}
+    fullTitle={(
+        <View style={[styles.flexRow]}>
+            <Text>{optionItem.text}</Text>
+           <View style={styles.pillContainer}>
+                <Text style={styles.textMicro}>{optionItem.subtitle}</Text>
+            </View>
+        </View>
+   )}

and add in styles.js:

   pillContainer: {
     ...styles.pv1, 
     ...styles.ph2, 
     ...styles.mh2, 
     backgroundColor: colors.gray2,
     borderRadius: variables.componentBorderRadiusCard,
     height: 20,
  },

Here's how it looks like after implementing, and I can update the styles if I get some design feedback.

cc - @mananjadhav @shawnborton

[shawnborton]

Ideally the pill should only be 20px tall, and we'll want to make sure it doesn't get cut off like it currently is.

[akshayasalvi]

@shawnborton Pill with 20px height, and updated the proposal.

What do we do about the text overflowing when the workspace name is too long (second last row in the screenshot)

[mananjadhav]

@akshayasalvi's proposal here #11543 (comment) looks good. Will still wait for @shawnborton's comment on text overflow.

🎀 👀 🎀 
C+ reviewed

[melvin-bot]

📣 @bernhardoj You have been assigned to this job by @marcochavezf!
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 📖

[bernhardoj]

I have applied for the Upwork job. I will open the PR ASAP, today or tomorrow.

[trjExpensify]

@bernhardoj - offer sent!
@mananjadhav - invite to job sent!

[bernhardoj]

Hi, the pull request is opened. Here is the pull request #11799. Kindly review it! Thanks!

[mananjadhav]

Done with one round of review, have raised comments. Once resolved, I'll review once again and then Test.

[mananjadhav]

@bernhardoj Let me know once it is ready for the next round of review. I can see some comments are not resolved yet. Also can you sync with the latest main branch (can see some conflicts)?

[bernhardoj]

I have pulled the latest changes from main and commit the newest changes. Kindly review it again. Thanks! @mananjadhav

[trjExpensify]

@mananjadhav looks like we just need your re-review here and then this one is good to go. Can you get to it this week, please? It's a huge quality of life issue this one for our onboarding Guides. Thanks!

[mananjadhav]

It's on my todo today!

[mananjadhav]

@trjExpensify @marcochavezf this is done.

[trjExpensify]

Excellent, thanks! @marcochavezf can you get this reviewed now, please?

[melvin-bot]

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

• Add Workspace name label next to room name in the chats list #11799

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

[trjExpensify]

Settled up!