[$500] Web - FAB - "New Workspace" option is disabled after deleting Workspace in offline mode

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open URL https://staging.new.expensify.com/
2. Login with any account
3. Go to Settings->Workspace
4. Kill the internet connection
5. Delete the workspace
6. Turn on the internet connection
7. Click on FAB button and check for a "New workspace" option

Expected Result:

"New Workspace" option should be available

Actual Result:

"New Workspace" option is disabled. "New Workspace" option becomes available only after re-login

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.14.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/93399543/195712579-88b42f99-83ea-4a33-ad42-7506c1d36476.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot[bot]]

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

[Julesssss]

Nice spot. Confirmed that we'll need to re-show the FAB New Workspace option.

[melvin-bot[bot]]

@Julesssss Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Julesssss]

Awaiting contributors

[alexpensify]

Disregard my last comment, I'll work on the job posting later this week.

[alexpensify]

The job has been created in Upwork:

Internal: https://www.upwork.com/ab/applicants/1583564673241923584/job-details External: https://www.upwork.com/jobs/~017971a3070c51f85a

[mallenexpensify]

Price Doubled to $500 https://www.upwork.com/jobs/~017971a3070c51f85a

[ahsan-K]

As per my understanding you guys using Redux in your project and after making API request of delete workspace you are calling Redux action to update the UI state and Redux store. The main problem is your tooltip UI popup which is appearing after clicking on "Plus" button is not updating successfully. I will debug the whole code and will read Popup component's code as well for getting information is you code successfully updating (re-rendering) or not.

[Santhosh-Sellavel]

@ahsan-K Seems you are new here.

Get started by checking out our contributing guidelines first and don't forget to check out readme.

[ahsan-K]

@Santhosh-Sellavel I have read and posted the proposal on Upwork as well.

[Santhosh-Sellavel]

I'm afraid you skipped the whole thing, take time to read through and understand our process.

Checkout how to Propose a solution for the job

[ahsan-K]

"Proposal" Hello Sir, I'm am senior software engineer with over 5+ years of experience on ReactJS. I have strong grip on javascript. I have read the description and saw the video of that issue which is on Github. I will be more then happy to solve your issue. I have understand that why "New Workspace" button is not showing after deleting the Work Space.

How i will solve this problem? As per my understanding you guys using Redux in your project and after making API request of delete workspace you are calling Redux action to update the UI state and Redux store. The main problem is your tooltip UI popup which is appearing after clicking on "Plus" button is not updating successfully. I will debug the whole code and will read Popup component's code as well for getting information is you code successfully updating (re-rendering) or not.

Let's jump on an initial call/meeting so that we can discuss more about it.

Best Regards, Ahsan Ali

[smrutiparida]

@kbecciv I am not able to reproduce the issue in staging and local environment.

https://user-images.githubusercontent.com/5945400/198107169-1a0dc728-a662-4f09-8043-cc8e10827286.mov

My hypothesis was that the App.reconnectApp shall first fetch the policy that is deleted in client from the server post reconnection and then the Pusher based deletion of policy happens which must be updating the UI again. As both actions are synchronous, we must be seeing such a behavior for a moment till Onyx is updated because of server load or network slow connection.

componentDidMount() {
       NetworkConnection.listenForReconnect();
       NetworkConnection.onReconnect(() => App.reconnectApp());
       PusherConnectionManager.init();
       ...
       ...
   }

However i can't reproduce this issue. It shall help immensely if you check once. All the time my UI in local and staging are updated with 'Create new workspace' the moment is network is back.

[Julesssss]

Hi @ahsan-K. @Santhosh-Sellavel was directing you to the readme as we do not use Redux, and it explains our process for hiring external contributors.

[Ollyws]

Proposal

This issue occurs because in the FAB menu we check if the user is admin of a policy with the type FREE in order to determine whether to add the New workspace button.

https://github.com/Expensify/App/blob/a341945917aa39adcc9ecad8e6a6d74d6a95f2c4/src/libs/actions/Policy.js#L177-L181

When this policy is deleted in an offline state it is only given the pendingAction CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE so the New workspace button is still added to the FAB menu as it never checks for any pending delete action, as it does in the InitialSettingsPage.

To resolve this we can create a new function in Policy.js :

This firstly checks that the user has any free policies, then checks if the user has any free policies without pending actions (in which case the FAB menu shouldn't be displayed). It then checks if any new free policies have been added while offline (in which case FAB should not be displayed) and finally checks whether the remaining policy has been deleted while offline (in which case the FAB menu should be displayed).

+   /**
+    * Check if the user has any active free policies (aka workspaces)
+    *
+    * @param {Array} policies
+    * @returns {Boolean}
+    */
+   function hasActiveFreePolicy(policies) {
+       const adminFreePolicies = _.filter(policies, policy => policy
+           && policy.type === CONST.POLICY.TYPE.FREE
+           && policy.role === CONST.POLICY.ROLE.ADMIN);
+   
+       if (adminFreePolicies.length === 0) {
+           return false;
+       }
+   
+       if (_.some(adminFreePolicies, policy => !policy.pendingAction)) {
+           return true;
+       }
+   
+       if (_.some(adminFreePolicies, policy => policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD)) {
+           return true;
+       }
+   
+       if (_.some(adminFreePolicies, policy => policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)) {
+           return false;
+       }
+   
+       return true;
+   }

This function can be used in BaseSideBarScreen when creating the FAB menu: https://github.com/Expensify/App/blob/a341945917aa39adcc9ecad8e6a6d74d6a95f2c4/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js#L172-L175

-...(!Policy.isAdminOfFreePolicy(this.props.allPolicies) ? [ 
+...(!Policy.hasActiveFreePolicy(this.props.allPolicies) ? [

[kbecciv]

@smrutiparida Issue is not reproduced any more with build 1.2.21.4

https://user-images.githubusercontent.com/93399543/198907265-b1366529-b1f9-4cec-86aa-7b3a8a3df856.mp4

[melvin-bot[bot]]

@alexpensify, @Julesssss, @mallenexpensify, @Santhosh-Sellavel Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Santhosh-Sellavel]

Only when we go online, the option appears. But should we hide the option until we go online, I believe we should still look for solution @kbecciv ? @Julesssss What do you think?

There is a proposal above looks promising didn't get to test it though. Let me if we wish to proceed will test and update thanks!

[Julesssss]

Yeah, @Ollyws's proposal sounds good to me. @Santhosh-Sellavel please take a quick review

[Santhosh-Sellavel]

@Julesssss @Ollyws proposal looks good, test well!

C+ Reviewed 🎀 👀 🎀

[melvin-bot[bot]]

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

[Ollyws]

Should have the PR ready within 24 hours.

[alexpensify]

Thanks for the update!

[alexpensify]

Cool, looks like we are moving to reviews!

[alexpensify]

I've checked this GH and see Jule's comment that this one is still under review.

[melvin-bot[bot]]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist will need to be completed before the issue can be closed:

• [ ] A regression test has been added or updated so that the same bug will not reach production again. Link to the updated test here:
• [ ] The PR that introduced the bug has been identified. Link to the PR:
• [ ] 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:
• [ ] A discussion in #contributor-plus 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:
• [ ] Payment has been made to the issue reporter (if applicable)
• [ ] Payment has been made to the contributor that fixed the issue (if applicable)
• [ ] Payment has been made to the contributor+ that helped on the issue (if applicable)

[melvin-bot[bot]]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist will need to be completed before the issue can be closed:

• [ ] A regression test has been added or updated so that the same bug will not reach production again. Link to the updated test here:
• [ ] The PR that introduced the bug has been identified. Link to the PR:
• [ ] 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:
• [ ] A discussion in #contributor-plus 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:
• [ ] Payment has been made to the issue reporter (if applicable)
• [ ] Payment has been made to the contributor that fixed the issue (if applicable)
• [ ] Payment has been made to the contributor+ that helped on the issue (if applicable)