[HOLD for payment 2024-10-07] Workspace - Invite message comes back after deleting it

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.41-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+ds@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Login to an account
2. Create a workspace
3. Go to the created workspace > Members
4. Click on invite member > Choose a user
5. On "add message" page try to delete the message

Expected Result:

Message is deleted

Actual Result:

The deleted message comes back

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6618028_1727488696018.Screen_Recording_2024-09-28_at_4.50.36_at_night.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @dangrous (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-09-29 18:55:32 UTC.

Proposal

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

Invite message comes back after deleting it

What is the root cause of that problem?

We are setting setWelcomeNote(getDefaultWelcomeNote()) again here

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 89 to 94 in 3047c1b

	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
	return;
	}
	setWelcomeNote(getDefaultWelcomeNote());
	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft]);

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

We can remove this code block

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 89 to 94 in 3047c1b

	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
	return;
	}
	setWelcomeNote(getDefaultWelcomeNote());
	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft]);

We should test the code to make sure everything is working properly

What alternative solutions did you explore? (Optional)

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-09-29 19:17:45 UTC.

Proposal


Offending PR: #48660

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

Workspace - Invite message comes back after deleting it

What is the root cause of that problem?

• We have multiple useEffect hooks to set the welcome note when the component mounts or the members change.

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 77 to 94 in 3047c1b

	useEffect(() => {
	if (!isEmptyObject(invitedEmailsToAccountIDsDraft)) {
	setWelcomeNote(getDefaultWelcomeNote());
	return;
	}
	if (isEmptyObject(policy)) {
	return;
	}
	Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(route.params.policyID), true);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, []);
	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
	return;
	}
	setWelcomeNote(getDefaultWelcomeNote());
	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft]);

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


• We can remove the second useEffect hook here:
  

  App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

  Lines 89 to 94 in 3047c1b

  	useEffect(() => {
  	if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
  	return;
  	}
  	setWelcomeNote(getDefaultWelcomeNote());
  	}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft]);

• And in WorkspaceInvitePage.tsx we need to clear the draft invite message when the component unmounts.

App/src/pages/workspace/WorkspaceInvitePage.tsx

Lines 78 to 83 in 3047c1b

	useEffect(() => {
	return () => {
	Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
	};
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [route.params.policyID]);

TO:

    useEffect(() => {
        return () => {
            Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
            Policy.setWorkspaceInviteMessageDraft(route.params.policyID, null);
        };
        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
    }, [route.params.policyID]);

• If we want to clear the draft message when invite members list changes, we can clear the message draft here or here.

What alternative solutions did you explore? (Optional)

Result

[Shahidullah-Muffakir]

Proposal

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

when a user deletes the invite message in the workspace invite process, the message reappears unexpectedly.

What is the root cause of that problem?

The root cause of this problem is that the component was automatically resetting the welcome message to its default value, even when the user had intentionally deleted it

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

we should update the useEffect to add a check that skips resetting the invite message if it is already empty. This ensures that when the user deletes the message, it doesn't get reset to the default value.

Add!welcomeNotecheck here:

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Lines 89 to 92 in 3047c1b

	useEffect(() => {
	if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
	return;
	}

to:

 useEffect(() => {
        if (isEmptyObject(invitedEmailsToAccountIDsDraft) || !welcomeNote) {
            return;
        }

Screen.20Recording.202024-09-30.20at.203.mp4

[huult]

Proposal

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

Invite message comes back after deleting it

What is the root cause of that problem?

Since we set getDefaultWelcomeNote as a dependency of this hook, the hook is triggered every time the input's onChange event occurs

App/src/pages/workspace/WorkspaceInviteMessagePage.tsx

Line 94 in 3634670

}, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft]);

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

We should remove getDefaultWelcomeNote from the dependency array to avoid re-renders when the input changes.

// .src/pages/workspace/WorkspaceInviteMessagePage.tsx#L94
    useEffect(() => {
        if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
            return;
        }
        setWelcomeNote(getDefaultWelcomeNote());
-    }, [getDefaultWelcomeNote, invitedEmailsToAccountIDsDraft]);
+    }, [invitedEmailsToAccountIDsDraft]);

and We need to validate this input, if necessary, to avoid empty values ("")

// .src/pages/workspace/WorkspaceInviteMessagePage.tsx#L119
        if (isEmptyObject(invitedEmailsToAccountIDsDraft)) {
            errorFields.welcomeMessage = translate('workspace.inviteMessage.inviteNoMembersError');
-        }
+        } else if (isEmptyObject(welcomeNote)) {
+            errorFields.welcomeMessage = 'Please enter a welcome note.';
        }

Details

POC

Screen.Recording.2024-09-30.at.09.24.15.mp4

[Gonals]

Seems to be a frontend issue, so removing Web-E blocker