Add Workspace name label next to room name in the chats list

src/components/LHNOptionsList/OptionRowLHN.js

@@ -22,6 +22,7 @@ import CONST from '../../CONST';
 import variables from '../../styles/variables';
 import themeColors from '../../styles/themes/default';
 import SidebarUtils from '../../libs/SidebarUtils';
+import TextPill from '../TextPill';
 import OfflineWithFeedback from '../OfflineWithFeedback';
 
 const propTypes = {
@@ -66,11 +67,12 @@ const OptionRowLHN = (props) => {
         : styles.sidebarLinkText;
     const textUnreadStyle = optionItem.isUnread
         ? [textStyle, styles.sidebarLinkTextUnread] : [textStyle];
-    const displayNameStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT
-        ? [styles.optionDisplayName, ...textUnreadStyle, styles.optionDisplayNameCompact, styles.mr2]
-        : [styles.optionDisplayName, ...textUnreadStyle], props.style);
+    const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, ...textUnreadStyle], props.style);
+    const textPillStyle = props.isFocused
+        ? [styles.ml1, StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.icon, 0.5)]
+        : [styles.ml1];
     const alternateTextStyle = StyleUtils.combineStyles(props.viewMode === CONST.OPTION_MODE.COMPACT
-        ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact]
+        ? [textStyle, styles.optionAlternateText, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2]
         : [textStyle, styles.optionAlternateText, styles.textLabelSupporting], props.style);
     const contentContainerStyles = props.viewMode === CONST.OPTION_MODE.COMPACT
         ? [styles.flex1, styles.flexRow, styles.overflowHidden, styles.alignItemsCenter]
@@ -161,15 +163,24 @@ const OptionRowLHN = (props) => {
                                 )
                                 }
                                 <View style={contentContainerStyles}>
-                                    <DisplayNames
-                                        accessibilityLabel="Chat user display names"
-                                        fullTitle={optionItem.text}
-                                        displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
-                                        tooltipEnabled
-                                        numberOfLines={1}
-                                        textStyles={displayNameStyle}
-                                        shouldUseFullTitle={optionItem.isChatRoom || optionItem.isPolicyExpenseChat}
-                                    />
+                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, styles.overflowHidden]}>
+                                        <DisplayNames
+                                            accessibilityLabel="Chat user display names"
+                                            fullTitle={optionItem.text}
+                                            displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
+                                            tooltipEnabled
+                                            numberOfLines={1}
+                                            textStyles={displayNameStyle}
+                                            shouldUseFullTitle={optionItem.isChatRoom || optionItem.isPolicyExpenseChat}
+                                        />
+                                        {optionItem.isChatRoom && (
+                                            <TextPill
+                                                style={textPillStyle}
+                                                accessibilityLabel="Workspace name"
+                                                text={optionItem.subtitle}
+                                            />
+                                        )}
+                                    </View>
                                     {optionItem.alternateText ? (
                                         <Text
                                             style={alternateTextStyle}

src/components/TextPill.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from './Text';
+import styles from '../styles/styles';
+import stylePropTypes from '../styles/stylePropTypes';
+import * as StyleUtils from '../styles/StyleUtils';
+
+const propTypes = {
+    text: PropTypes.string.isRequired,
+
+    /** Text additional style */
+    style: stylePropTypes,
+};
+
+const defaultProps = {
+    style: [],
+};
+
+const TextPill = (props) => {
+    const propsStyle = StyleUtils.parseStyleAsArray(props.style);
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Text {...props} style={[styles.textPill, ...propsStyle]} numberOfLines={1}>{props.text}</Text>;
+};
+
+TextPill.propTypes = propTypes;
+TextPill.defaultProps = defaultProps;
+TextPill.displayName = 'TextPill';
+
+export default TextPill;

src/styles/StyleUtils.js

@@ -212,6 +212,26 @@ function getBackgroundColorStyle(backgroundColor) {
     };
 }
 
+/**
+ * Returns a background color with opacity style
+ *
+ * @param {String} backgroundColor
+ * @param {number} opacity
+ * @returns {Object}
+ */
+function getBackgroundColorWithOpacityStyle(backgroundColor, opacity) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(backgroundColor);
+    if (result !== null) {
+        const r = parseInt(result[1], 16);
+        const g = parseInt(result[2], 16);
+        const b = parseInt(result[3], 16);
+        return {
+            backgroundColor: `rgba(${r}, ${g}, ${b}, ${opacity})`,
+        };
+    }
+    return {};
+}
+
 /**
  * Generate a style for the background color of the Badge
  *
@@ -532,6 +552,7 @@ export {
     getAutoGrowTextInputStyle,
     getBackgroundAndBorderStyle,
     getBackgroundColorStyle,
+    getBackgroundColorWithOpacityStyle,
     getBadgeColorStyle,
     getButtonBackgroundColorStyle,
     getIconFillColor,

src/styles/styles.js

@@ -2698,6 +2698,17 @@ const styles = {
         maxWidth: 450,
         alignSelf: 'center',
     },
+
+    textPill: {
+        ellipsizeMode: 'end',
+        backgroundColor: colors.gray2,
+        borderRadius: 10,
+        overflow: 'hidden',
+        paddingVertical: 2,
+        flexShrink: 1,
+        fontSize: variables.fontSizeSmall,
+        ...spacing.ph2,
+    },
 };
 
 export default styles;