[HOLD for payment 2024-02-15] [HOLD for payment 2024-02-14] [$1000] HIGH: Show "Room description" everywhere (2/2, external)

This is held on #32953 because we want to refactor the confusing naming of "Room welcome message" to "Room description" before changing where that description shows up.

Strategy:
Chat is the highest-frequency action that happens inside of a company -- whoever owns a company's chat, has the strategic high ground to cross-sell everything else, as that's the stickiest use case. Part of chat involves getting a company to capture all its conversations on the platform, split up into a bunch of room. Each room is devoted to a different topic, and the "room welcome message" is how the admin explains what that topic is. It is currently delivered via a whisper when someone joins the room.

Problem:
When the admin configures the "room welcome message", they currently don't see it anywhere in product (because it's only delivered via whisper to new people when they are added, and by definition they are already in it because they created it. So, this just feels broken. Additionally, there's no way an admin would guess that it's going to be secretly delivered to new users when they join, which is confusing.

Solution:
Update room welcome message to be room description and put the description at the top of the chat, in addition to delivering it via a whisper to those who join a room that already has enough content that the top has scrolled off the screen. Specifically, a chat has:

Header:
- <#room name> in <workspace name> - pressing opens the chat details
- <workspace description; truncated> - pressing opens the description editor in the RHP
  - Note: If there is no custom description; remove this 2nd line and vertically center the first
  - Note: Only workspace members who have write access to the room should be able to edit the description
Chat masthead:
- Welcome to <#roomname>
- <room description, full> - pressing opens the description editor in the RHP
  - Note: If there is no custom description, use the current default masthead language
Chat details:
- Avatar
- <#room name> - Any member can press to rename the report
- <workspace name>
- "Description"
- <room description> - Shows the first 5 lines truncated, with a more control to expand fully;
  - Note: Only workspace members who have write access to the room should be able to edit the description
API
- Remove all UpdateWelcomeMessage API calls
- Replace them with updateRoomDescription API calls

Mockups:

More discussion in Slack here.

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01ce65d2b9e9db71e4
Upwork Job ID: 1744191782833340416
Last Price Increase: 2024-01-15
Automatic offers:

esh-g | Contributor | 28088918
ishpaul777 | Contributor | 28148450

Proposal

Please re-state the problem we are trying to solve

Update the room description to be shown in the header and make it editable for admins

What is the root cause of this problem

N/A (New feature)

What changes should be made to fix this?

We need to change the welcome message in the main pane here:

App/src/components/ReportWelcomeText.js

Lines 92 to 98 in d6f359f

    
           {isChatRoom && ( 
        
               <> 
        
                   <Text>{roomWelcomeMessage.phrase1}</Text> 
        
                   {roomWelcomeMessage.showReportName && ( 
        
                       <Text 
        
                           style={[styles.textStrong]} 
        
                           onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID))}

We should render this only when roomDescription doesn't exist
Then we can add a conditional to render for the roomDescription with <RenderHTML html={roomDescription} /> (assuming we want the description to have html capabilities, otherwise we can use Text)
We can change this line:

App/src/components/ReportWelcomeText.js

Line 72 in d6f359f

    
           const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(props.report, isUserPolicyAdmin);

const roomDescription = lodashGet(props.report, 'description');
...
{isChatRoom && (
<>
  {!_.isEmpty(roomDescription) ? <RenderHTML html={roomDescription} /> : (
      <>
          <Text>{roomWelcomeMessage.phrase1}</Text>
          {roomWelcomeMessage.showReportName && (
              <Text
                  style={[styles.textStrong]}
                  onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID))}
                  suppressHighlighting
              >
                  {ReportUtils.getReportName(props.report)}
              </Text>
          )}
          {roomWelcomeMessage.phrase2 !== undefined && <Text>{roomWelcomeMessage.phrase2}</Text>}
      </>
  )}
  
</>
)}

For changing the header to have the description as the subtitle, we first need to do the following:

Create a function to get the description after sanitising all the html from the text (ReportUtils.getReportDescription())
Change the conditional to display the current subtitle only when room description not present (!_.isEmpty(subtitle) && _.isEmpty(reportDescription))
Add a conditional render for room description after the subtitle. (!_.isEmpty(reportDescription))
Currently the title (DisplayNames) is nested in a flex column with the subtitle. We need to add another wrapper for DisplayNames block here as a flex row with it's sibling being the text in Workspace Co.
So here are the changes:

function getReportDescription(report: Report) {
    if (!report.description) {
        return '';
    }
    // return after removing the html.
    const parser = new ExpensiMark();
    return parser.htmlToText(report.description);
}

const reportDescription = ReportUtils.getReportDescription(props.report);
const policyName = ReportUtils.getPolicyName(props.report);
const policyDescription = ReportUtils.getPolicyDescription(props.report.policyID); // need to add this function for policy expense chats
const reportDescription = isPolicyExpenseChat ? policyDescription : reportDescription;
...
<View style={[styles.flex1, styles.flexColumn]}>
    <View style={[styles.flex1, styles.flexRow, styles.gap1, styles.alignItemsBaseline]}> // add this row wrapper
        <DisplayNames
            fullTitle={title}
            displayNamesWithTooltips={displayNamesWithTooltips}
            tooltipEnabled
            numberOfLines={1}
            textStyles={[styles.headerText, styles.pre]}
            shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
        /> 
        {!_.isEmpty(policyName) && !_.isEmpty(reportDescription) && ( // code for the policyName display
            <>
                <Text
                    style={[styles.sidebarLinkText, styles.textLabelSupporting]}
                    numberOfLines={1}
                >
                    in {/* A translation can obviously be added. */}
                </Text>
                <Text 
                    style={[styles.sidebarLinkText, styles.textLabelSupporting, styles.textStrong]}
                    numberOfLines={1}
                >
                    {policyName}
                </Text>
            </>
        )}
    </View>
    ...

{!_.isEmpty(reportDescription) && (
   <Text
       style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
       numberOfLines={1}
   >
       {reportDescription}
   </Text>
)}

Result

(Also works for policyExpenseChat as needed here: #32955)

We also need to add the room description item in ReportDetails page which can be done like the following (we also need to add a REPORT_DESCRIPTION page as well):

<MenuItemWithTopDescription
    shouldShowRightIcon={isPolicyAdmin}
    title={props.report.description}
    shouldRenderAsHTML
    description={translate('common.description')}
    onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(props.report.reportID))}
/>

Final Result

Screen.Recording.2023-12-28.at.8.34.41.AM.mov

(The thing pending is to rename all the welcomeMessage page and routes and translations to description)

Eep! 4 days overdue now. Issues have feelings too...

Still overdue 6 days?! Let's take care of this!

@ishpaul777

📣 @ishpaul777 🎉 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 📖

@esh-g

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

Fix header for room description #35900

If no regressions arise, payment will be issued on 2024-02-15. 🎊

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

@esh-g requires payment automatic offer (Contributor)
@ishpaul777 requires payment automatic offer (Contributor)

@esh-g

@esh-g has been paid.

@ishpaul777 can you suggest regression test steps here? Once done, I'll pay you out too. Thanks!

Regression Test Proposal

Go to '+' -> 'start chat'.
Create a new workspace room with a custom description.
Make sure the description is shown in the header as well as in the Central pane above composer.
Click on the header
Click on description
Edit the description and try adding markdown
Make sure the description is changed in header and above composer
Make sure markdown is not rendered in Header.

Do we agree 👍 or 👎?

Great, thanks. All paid.

Thanks y'all!

Navigation Menu

Repository navigation

[HOLD for payment 2024-02-15] [HOLD for payment 2024-02-14] [$1000] HIGH: Show "Room description" everywhere (2/2, external) #32615

Proposal

Please re-state the problem we are trying to solve

What is the root cause of this problem

What changes should be made to fix this?

68 remaining items

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	{isChatRoom && (
	<>
	<Text>{roomWelcomeMessage.phrase1}</Text>
	{roomWelcomeMessage.showReportName && (
	<Text
	style={[styles.textStrong]}
	onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID))}

[HOLD for payment 2024-02-15] [HOLD for payment 2024-02-14] [$1000] HIGH: Show "Room description" everywhere (2/2, external) #32615

Description

Activity

esh-g commented on Dec 28, 2023

Proposal

Please re-state the problem we are trying to solve

What is the root cause of this problem

What changes should be made to fix this?

melvin-bot commented on Jan 2, 2024

melvin-bot commented on Jan 4, 2024

68 remaining items

melvin-bot commented on Feb 7, 2024

melvin-bot commented on Feb 8, 2024

puneetlath commented on Feb 15, 2024

ishpaul777 commented on Feb 15, 2024

Regression Test Proposal

puneetlath commented on Feb 15, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions