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

[quinthar]

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

[esh-g]

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?

1. 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>}
      </>
  )}
  
</>
)}

2. 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)

3. 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)

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[puneetlath]

@rushatgabhane looks like we already have one proposal. Please give it a review when you have a chance. And let me know if anything about the requirements is unclear.

[rushatgabhane]

@puneetlath i think this is pure implementation. We can assign @esh-g because they have demonstrated a working solution.
We'll refine the code in the PR

🎀 👀 🎀

[melvin-bot]

Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[esh-g]

@quinthar

1. Yes
2. there is a PR open here: Migrate welcome message to room description for report #34150

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

• Migrate welcome message to room description for report #34150
• Fix header for room description #35900

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

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

• @rushatgabhane requires payment through NewDot Manual Requests
• @esh-g requires payment automatic offer (Contributor)

[ishpaul777]

@puneetlath Can you please assign me to this PR, so i can track this for payment.

[melvin-bot]

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

[melvin-bot]

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)

[puneetlath]

@esh-g has been paid.

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

[ishpaul777]

Regression Test Proposal

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

Do we agree 👍 or 👎?

[puneetlath]

Great, thanks. All paid.

Thanks y'all!