[HOLD for payment 2021-12-15] “Cannot remove yourself from workspace” banner is shown over and over again while inviting a new member - Reported by: @aswin-s

[isagoico]

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:

1. Navigate to add member screen
2. Tap on check box against own account once.
3. Now tap on invite button to invite a new member
4. The banner keeps on popping up.
5. Even sending app to background and resuming or swiping down from notification panel also shows same behaviour.

Expected Result:

Banner notifying the user that own account can't be removed from workspace should show only one.

Actual Result:

Banner keeps showing up after clicking on invite button.

Workaround:

Force closing and reopening the app fixes the issue.

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.1.14-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

RPReplay_Final1636709392.MP4

Upwork job post: https://www.upwork.com/jobs/~01a1b16b70fceaf5f1

Issue reported by: @aswin-s
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1636709473156600

View all open jobs on GitHub

[MelvinBot]

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

[akshayasalvi]

For some reason, I am not able to reproduce this by following the given reproduction steps. I am unable to click the own admin checkbox itself. It shows the following tooltip. @isagoico Can you help with some clarity on the reproduction steps?

[isagoico]

My bad! I just updated the platforms affected. This is only reproducible in mobile.

[sketchydroide]

Thanks @isagoico.

This definetly sounds like a bug, specialy for being platform specific. Also setting this as an external.

[MelvinBot]

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

[PrashantMangukiya]

Proposed Solution:

Here is the Problem: It is calling componentDidUpdate() method when goes to background.

App/src/components/CheckboxWithTooltip/CheckboxWithTooltipForMobileWebAndNative.js

Lines 14 to 20 in 6701446

	componentDidUpdate() {
	if (!this.props.toggleTooltip) {
	return;
	}
	Growl.show(this.props.text, this.props.growlType, 3000);
	}

Solution: Put condition at line 19 i.e. If toggleTooltip change run Growl, otherwise not. This will correct the issue.

componentDidUpdate(prevProps) {
    if (!this.props.toggleTooltip) {
        return;
    }

    if (prevProps.toggleTooltip !== this.props.toggleTooltip) {
        Growl.show(this.props.text, this.props.growlType, 3000);
    }
}

Here is screen record, it works as expected with this solution:

iOS

iOS.mov

Android

Android.mp4

Mobile Web

MobileWeb.mov

[developvsn]

Proposal

This bug is occurring because in willTooltipShowForLogin function, in case when workspace owner wants to remove himself, this code this.setState({showTooltipForLogin: login}); allows to show popUp, but showTooltipForLogin state variable's value will be always login and popup will be shown over and over again.

App/src/pages/workspace/WorkspaceMembersPage.js

Lines 154 to 156 in 6701446

	if (!canBeRemoved) {
	this.setState({showTooltipForLogin: login});
	}

The simpest way to fix it is to set showTooltipForLogin variable value " " after popUp was shown first time, like this:

if (!canBeRemoved) {
            this.setState({showTooltipForLogin: login});
            setTimeout(() => this.setState({showTooltipForLogin: ''}), 100);
        }

IMG_9639.MP4

android.mp4

Mobile.web.mov