[HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created #20510

kbecciv · 2023-06-09T12:35:25Z

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:

Go to https://staging.new.expensify.com/
Log in with a High traffic account that owns a existing Workspace
Click on the green + button
Click on the "New Room" option
Set the name of the #Room to anything you'd like (following the correct format)
Go to LHN

Expected Result:

The name of the room matches the name when created

Actual Result:

Room names in LHN do not match the name when created. Room name shows 0 at the end

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.26.1

Reproducible in staging?: yes

Reproducible in production?: yes

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

Bug6086477_Screen_Recording_20230609_090130_Chrome.mp4

Bug6086477_2023_06_09_13_46_Img_9746.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team / @Natnael-Guchima

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01172d30b33b712701
Upwork Job ID: 1667249070496825344
Last Price Increase: 2023-06-09

melvin-bot · 2023-06-09T12:35:31Z

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

melvin-bot · 2023-06-09T12:35:33Z

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

hungvu193 · 2023-06-09T16:00:43Z

Proposal

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

mWeb - New room - Room names in LHN do not match the name when created

What is the root cause of that problem?

Let take a look at this piece of code:

App/src/components/DisplayNames/index.js

Lines 108 to 114 in f64a388

    
           {this.props.displayNamesWithTooltips.length > 1 && this.state.isEllipsisActive && ( 
        
               <View style={styles.displayNameTooltipEllipsis}> 
        
                   <Tooltip text={this.props.fullTitle}> 
        
                       {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */} 
        
                       <Text>....</Text> 
        
                   </Tooltip> 
        
               </View>

As we can see we will render the tooltip when this.props.displayNamesWithTooltips.length > 1 and this.state.isEllipsisActive is true.

App/src/components/DisplayNames/index.js

Line 23 in f64a388

    
           isEllipsisActive: this.containerRef && this.containerRef.offsetWidth && this.containerRef.scrollWidth && this.containerRef.offsetWidth < this.containerRef.scrollWidth,

The problem is the this.containerRef.offsetWidth and this.containerRef.scrollWidth can be zero when we resize window.

Now this.state.isEllipsisActive can be 0:

And because of that the condition here will render 0 with this.props.displayNamesWithTooltips.length > 1.

App/src/components/DisplayNames/index.js

Lines 108 to 114 in f64a388

    
           {this.props.displayNamesWithTooltips.length > 1 && this.state.isEllipsisActive && ( 
        
               <View style={styles.displayNameTooltipEllipsis}> 
        
                   <Tooltip text={this.props.fullTitle}> 
        
                       {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */} 
        
                       <Text>....</Text> 
        
                   </Tooltip> 
        
               </View>

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

Make sure the this.state.isEllipsisActive is boolean value. We should cast it to Boolean.

 {this.props.displayNamesWithTooltips.length > 1 && Boolean(this.state.isEllipsisActive) && (
                    <View style={styles.displayNameTooltipEllipsis}>
                        <Tooltip text={this.props.fullTitle}>
                            {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
                            <Text>....</Text>
                        </Tooltip>
                    </View>
                )}

What alternative solutions did you explore? (Optional)

We can disable tooltip with mobile web

melvin-bot · 2023-06-09T19:15:31Z

Job added to Upwork: https://www.upwork.com/jobs/~01172d30b33b712701

melvin-bot · 2023-06-09T19:15:33Z

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

melvin-bot · 2023-06-09T19:15:39Z

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

melvin-bot · 2023-06-09T19:15:45Z

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

jeet-dhandha · 2023-06-10T05:09:04Z

Proposal

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

mWeb - New room - Room names has 0 at end.

What is the root cause of that problem?

As we are using this.state.isEllipsisActive to check if we need to render ellipsis or not.
But this.state.isEllipsisActive is not boolean value.
It is returning 0 as value when this.containerRef.scrollWidth / this.containerRef.offsetWidth is 0 and this.containerRef is an object.

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

Solution 1: Make sure the this.state.isEllipsisActive is boolean value. We should cast it to Boolean. (Mentioned by @hungvu193).
Solution 2:
- Create a function which check's and sets the this.state.isEllipsisActive state to false when scrollWidth is 0 || offsetWidth is 0. OR Set it to the return value of condition scrollWidth > offsetWidth.

class DisplayNames extends PureComponent {
    constructor(props) {
        ...rest code
        this.checkEllipsis = this.checkEllipsis.bind(this);
    }

    componentDidMount() {
      this.checkEllipsis() // Added function instead of direct setState call.
    }
    ...rest code

    /**
     * Function - Check if Ellipsis is active and Set the class variable.
     */
    checkEllipsis() {
      const {scrollWidth, offsetWidth} = this.containerRef || {};
      if ( !scrollWidth || !offsetWidth ) {
          this.setState({isEllipsisActive: false});
      }
      this.setState({isEllipsisActive: scrollWidth > offsetWidth});
    }
    ...rest code
}

What alternative solutions did you explore? (Optional)

N/A

tienifr · 2023-06-10T15:38:28Z

Proposal

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

Room names in LHN do not match the name when created. Room name shows 0 at the end

What is the root cause of that problem?

The issue is the condition here is not robust

App/src/components/DisplayNames/index.js

Line 23 in 9f1c0e0

    
           isEllipsisActive: this.containerRef && this.containerRef.offsetWidth && this.containerRef.scrollWidth && this.containerRef.offsetWidth < this.containerRef.scrollWidth,

When this.containerRef.scrollWidth or this.containerRef.offsetWidth is 0 (in case of mWeb), isEllipsisActive will be 0, not boolean as it should be, so it will show the additional 0 here

App/src/components/DisplayNames/index.js

Line 108 in 9f1c0e0

    
           {this.props.displayNamesWithTooltips.length > 1 && this.state.isEllipsisActive && (

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

We should never chain && with non-boolean values like this.containerRef.scrollWidth, this.containerRef.offsetWidth in order to get the boolean. We need to make the condition here more robust:

isEllipsisActive: !!this.containerRef && this.containerRef.offsetWidth > 0 && this.containerRef.scrollWidth > 0 && this.containerRef.offsetWidth < this.containerRef.scrollWidth,

(or can check this.containerRef !== null)

As we can see, all elements of the && chain are booleans, thus isEllipsisActive will always be boolean, not some arbitrary values like null, 0, ...

What alternative solutions did you explore? (Optional)

We can cast isEllipsisActive to boolean inside componentDidMount before setting the state, this way at least we're not setting random values like null, 0 to the state. Although I still prefer to fix it at the root as mentioned above.

NicMendonca · 2023-06-12T14:15:01Z

@Santhosh-Sellavel bump on the proposals when you get the chance ^ thanks!

Santhosh-Sellavel · 2023-06-12T19:00:25Z

@Beamanator
@hungvu193 Proposal looks good to me
C+ Reviewed
🎀 👀 🎀

melvin-bot · 2023-06-12T21:08:47Z

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

tienifr · 2023-06-13T02:50:50Z

@Santhosh-Sellavel can you give some feedback on other proposals and why the selected proposal is the best? Since there're different solutions to the issue.

Thanks!

Santhosh-Sellavel · 2023-06-13T21:22:52Z

@tienifr
Sorry simple and straightforward issue. The root cause is the same. We should get the boolean value correctly from the computation. The change is already proposed by @hungvu193. And it's working.

@jeet-dhandha Proposed the same approach, the other approach is a bit over-engineered.

@tienifr You are just changing the computation. I think that's a good option too.

But instead of changing conditions, just getting a Boolean value from the final computation is simple and working so went with it.

cc: @Beamanator

tienifr · 2023-06-14T02:59:22Z

But instead of changing conditions, just getting a Boolean value from the final computation is simple and working so went with it.

@Santhosh-Sellavel It's working but:

The state saved for isEllipsisActive is 0 which is wrong since isEllipsisActive is supposed to be a boolean
It's easy to use isEllipsisActive in another place and forget to use Boolean, since it's supposed to be a boolean value, this can cause issue in the future
The problem is in how isEllipsisActive is computed, not how it's used, so I don't think converting to Boolean fixes the root cause, it's rather a workaround

cc @Beamanator

Santhosh-Sellavel · 2023-06-14T03:44:09Z

It's easy to use isEllipsisActive in another place and forget to use Boolean since it's supposed to be a boolean value, this can cause issues in the future

That's not the case now and fairly simple usage and more or less an edge case, I can't think of any scenario where might need that. In the future when it's needed the changes will be done accordingly. Where there stated need to be computed/change state also, instead of one-time initialization. At that point, we might go with a function that computes the state and return it once.

cc: @Beamanator

melvin-bot · 2023-06-23T19:14:28Z

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

NicMendonca · 2023-06-23T19:15:28Z

@Natnael-Guchima @hungvu193 have been paid.

@Santhosh-Sellavel can you please apply to the job and complete the BZ check list?

I am going OOO until Wednesday so assigning a buddy to watch this while I am away. @michaelhaxhiu can you please pay @Santhosh-Sellavel once they apply? You can leave the BZ checklist for me until Wednesday

melvin-bot · 2023-06-26T20:08:18Z

@Beamanator, @michaelhaxhiu, @hungvu193, @NicMendonca, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

Beamanator · 2023-06-27T08:27:24Z

Bump @michaelhaxhiu - are you able to get to payment today? If not, I guess @NicMendonca will be back tomorrow to finish payment (assuming @Santhosh-Sellavel applied for the job)

NicMendonca · 2023-06-28T12:26:50Z

@Santhosh-Sellavel accept my offer please 😄

NicMendonca · 2023-06-30T20:25:05Z

@Santhosh-Sellavel I know we're holding on payment for this one, but friendly bump on the checklist: #20510 (comment)

NicMendonca · 2023-07-04T16:23:44Z

@Santhosh-Sellavel bump ^

Santhosh-Sellavel · 2023-07-04T21:06:47Z

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:

[@Santhosh-Sellavel] The PR that introduced the bug has been identified. Link to the PR: N/A

[@Santhosh-Sellavel] 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

[@Santhosh-Sellavel] 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

[@Santhosh-Sellavel] Determine if we should create a regression test for this bug. Yes

[@Santhosh-Sellavel] 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. [HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created #20510 (comment)

[@NicMendonca] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

We can skip the checklist here as it's a very minor thing, I don't think we need regression tests as well. As this should be covered by the normal test cases. If needed let's use this

@Beamanator Let me know if differ on any of the above thanks!

Santhosh-Sellavel · 2023-07-04T21:08:06Z

Regression Steps:

Login with a High traffic account that owns an existing Workspace
Click on the green + button
Click on the "New Room" option
Set the name of the #Room to anything you'd like (following the correct format)
Go to LHN, and verify that the Room name in LHN matched the name when created

👍 or 👎

NicMendonca · 2023-07-06T11:40:47Z

@Santhosh-Sellavel can you remind me next steps for Payment?

Santhosh-Sellavel · 2023-07-06T15:43:03Z

Ya sure!

anmurali · 2023-07-07T11:53:24Z

Paid on New Dot

NicMendonca · 2023-07-07T12:31:35Z

Fab! We're all done set here then. Thanks everyone 🎉

kbecciv added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jun 9, 2023

melvin-bot bot assigned NicMendonca Jun 9, 2023

NicMendonca added the External Added to denote the issue can be worked on by a contributor label Jun 9, 2023

melvin-bot bot changed the title ~~mWeb - New room - Room names in LHN do not match the name when created~~ [$1000] mWeb - New room - Room names in LHN do not match the name when created Jun 9, 2023

melvin-bot bot assigned Santhosh-Sellavel Jun 9, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jun 9, 2023

melvin-bot bot assigned Beamanator Jun 9, 2023

melvin-bot bot added the Overdue label Jun 12, 2023

melvin-bot bot removed the Overdue label Jun 12, 2023

Beamanator assigned hungvu193 Jun 12, 2023

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Jun 12, 2023

hungvu193 mentioned this issue Jun 13, 2023

Fix: New room - Room names in LHN do not match the name when created #20641

Merged

56 tasks

melvin-bot bot added the Reviewing Has a PR in review label Jun 13, 2023

NicMendonca removed their assignment Jun 23, 2023

NicMendonca added the Bug Something is broken. Auto assigns a BugZero manager. label Jun 23, 2023

melvin-bot bot assigned michaelhaxhiu Jun 23, 2023

This comment was marked as duplicate.

Sign in to view

NicMendonca assigned NicMendonca and unassigned michaelhaxhiu Jun 23, 2023

NicMendonca assigned michaelhaxhiu Jun 23, 2023

melvin-bot bot added the Overdue label Jun 26, 2023

melvin-bot bot removed the Overdue label Jun 27, 2023

NicMendonca unassigned michaelhaxhiu Jun 28, 2023

NicMendonca changed the title ~~[HOLD for payment 2023-06-23] [$1000] mWeb - New room - Room names in LHN do not match the name when created~~ [HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created Jun 29, 2023

melvin-bot bot added the Overdue label Jun 30, 2023

melvin-bot bot added Overdue and removed Overdue labels Jun 30, 2023

melvin-bot bot removed the Overdue label Jul 4, 2023

NicMendonca mentioned this issue Jul 6, 2023

Add regression test for #20510 #22338

Closed

NicMendonca closed this as completed Jul 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created #20510

[HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created #20510

kbecciv commented Jun 9, 2023 •

edited by kavimuru

Loading

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023 •

edited by NicMendonca

Loading

hungvu193 commented Jun 9, 2023 •

edited

Loading

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023

jeet-dhandha commented Jun 10, 2023

tienifr commented Jun 10, 2023

NicMendonca commented Jun 12, 2023

Santhosh-Sellavel commented Jun 12, 2023

melvin-bot bot commented Jun 12, 2023

tienifr commented Jun 13, 2023

Santhosh-Sellavel commented Jun 13, 2023

tienifr commented Jun 14, 2023 •

edited

Loading

Santhosh-Sellavel commented Jun 14, 2023

melvin-bot bot commented Jun 23, 2023

This comment was marked as duplicate.

NicMendonca commented Jun 23, 2023

melvin-bot bot commented Jun 26, 2023

Beamanator commented Jun 27, 2023

NicMendonca commented Jun 28, 2023

NicMendonca commented Jun 30, 2023

NicMendonca commented Jul 4, 2023

Santhosh-Sellavel commented Jul 4, 2023 •

edited by NicMendonca

Loading

Santhosh-Sellavel commented Jul 4, 2023

NicMendonca commented Jul 6, 2023

Santhosh-Sellavel commented Jul 6, 2023

anmurali commented Jul 7, 2023

NicMendonca commented Jul 7, 2023

[HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created #20510

[HOLD for Santhosh] [$1000] mWeb - New room - Room names in LHN do not match the name when created #20510

Comments

kbecciv commented Jun 9, 2023 • edited by kavimuru Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023 • edited by NicMendonca Loading

Bug0 Triage Checklist (Main S/O)

hungvu193 commented Jun 9, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023

melvin-bot bot commented Jun 9, 2023

jeet-dhandha commented Jun 10, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

tienifr commented Jun 10, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

NicMendonca commented Jun 12, 2023

Santhosh-Sellavel commented Jun 12, 2023

melvin-bot bot commented Jun 12, 2023

tienifr commented Jun 13, 2023

Santhosh-Sellavel commented Jun 13, 2023

tienifr commented Jun 14, 2023 • edited Loading

Santhosh-Sellavel commented Jun 14, 2023

melvin-bot bot commented Jun 23, 2023

This comment was marked as duplicate.

NicMendonca commented Jun 23, 2023

melvin-bot bot commented Jun 26, 2023

Beamanator commented Jun 27, 2023

NicMendonca commented Jun 28, 2023

NicMendonca commented Jun 30, 2023

NicMendonca commented Jul 4, 2023

Santhosh-Sellavel commented Jul 4, 2023 • edited by NicMendonca Loading

Santhosh-Sellavel commented Jul 4, 2023

Regression Steps:

NicMendonca commented Jul 6, 2023

Santhosh-Sellavel commented Jul 6, 2023

anmurali commented Jul 7, 2023

NicMendonca commented Jul 7, 2023

kbecciv commented Jun 9, 2023 •

edited by kavimuru

Loading

melvin-bot bot commented Jun 9, 2023 •

edited by NicMendonca

Loading

hungvu193 commented Jun 9, 2023 •

edited

Loading

tienifr commented Jun 14, 2023 •

edited

Loading

Santhosh-Sellavel commented Jul 4, 2023 •

edited by NicMendonca

Loading