[$1000] Web-Workspace-App does nothing on clicking on 3 dots when modal is open (modal closes for phone) #24284

izarutskaya · 2023-08-08T17:41:37Z

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:

Open the app
Open settings->workspaces->any workspace
Click on 3 dots, modal will be displayed, again click on 3 dots and observe that it does nothing
Visit any user report, click on phone icon in header, it will open modal, again click on phone icon and observe that it will close the modal
Similar working happens for all other modals like Actions, New, Emoji

Expected Result:

App should close the modal when we click on 3 dots again like it does for all other type of modals throughout the app

Actual Result:

App does nothing when we click on 3 dots again

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

Version Number: v1.3.51-0
Reproducible in staging?: Y
Reproducible in production?: N
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

Recording.1134.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691491820472469

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~019ad6bb952da737f6
Upwork Job ID: 1691525643834966016
Last Price Increase: 2023-08-15
Automatic offers:

aimane-chnaif | Reviewer | 26139650
ishpaul777 | Contributor | 26139655

melvin-bot · 2023-08-08T17:41:43Z

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

melvin-bot · 2023-08-08T17:41:45Z

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

OSBotify · 2023-08-08T17:53:38Z

👋 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:

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

melvin-bot · 2023-08-08T17:53:41Z

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

ishpaul777 · 2023-08-08T18:02:47Z

Proposal

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

Web-Workspace-App does nothing on clicking on 3 dots when modal is open

What is the root cause of that problem?

~~we are not closing the popover here only opening the popover using this.showPopoverMenu() on press of button~~

These are all non-toggle popovers and closing of the popovers not handeled :

ThreeDotsMenu
AddPaymentMethodMenu
ButtonWithDropdownMenu

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

changes for ThreeDotsMenu
add the condition to close popover if isPopupMenuVisible is true (popover is open) using this.hidePopoverMenu()

                        onPress={() => {
                                if (this.state.isPopupMenuVisible) {
                                    this.hidePopoverMenu();
                                    return;
                                }
                                this.showPopoverMenu();
                                if (this.props.onIconPress) { 
                                    this.props.onIconPress();
                                }
                            }}

note: i am not sure if we should call onIconPress both on opening and closing. currently ThreeDotMenu is used in HeaderView (onIconPress is not defined using default prop - () => {})and function HeaderWithBackButton defined but still it is a default prop () => {}

changes for AddPaymentMethodMenu in payments page
add the following condition here

 const paymentMethodPressed = (nativeEvent, accountType, account, isDefault, methodID) => {
        if(shouldShowAddPaymentMenu) {
            setShouldShowAddPaymentMenu(false);
            return;
        }
// rest of code

In BaseKYCWall add following changes: (wasn't able to test this properly i dont have beta access)

 continue(event, iouPaymentType) {
          if (this.state.shouldShowAddPaymentMenu) {
                this.setState({shouldShowAddPaymentMenu: false});
                return;
            }
      //.....

changes for ButtonWithDropdownMenu.

onPress={() => setIsMenuVisible(!isMenuVisible)}
// or onPress={() => setIsMenuVisible((prev) => !prev)}

mkhutornyi · 2023-08-08T18:07:46Z

Proposal

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

App does nothing on clicking 3 dots when modal is open

What is the root cause of that problem?

When click 3 dots, showPopoverMenu is called instead of toggle

App/src/components/ThreeDotsMenu/index.js

Lines 89 to 95 in 32326f6

    
           <PressableWithoutFeedback 
        
               onPress={() => { 
        
                   this.showPopoverMenu(); 
        
                   if (this.props.onIconPress) { 
        
                       this.props.onIconPress(); 
        
                   } 
        
               }}

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

We should update logic similar to VideoChatButtonAndMenu so when click, popover open/closed status should be toggled

App/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js

Lines 90 to 100 in 32326f6

    
           onPress={Session.checkIfActionIsAllowed(() => { 
        
               // Drop focus to avoid blue focus ring. 
        
               videoChatButtonRef.current.blur(); 
        
               // If this is the Concierge chat, we'll open the modal for requesting a setup call instead 
        
               if (props.isConcierge && props.guideCalendarLink) { 
        
                   Linking.openURL(props.guideCalendarLink); 
        
                   return; 
        
               } 
        
               setIsVideoChatMenuActive((previousVal) => !previousVal); 
        
           })}

puneetlath · 2023-08-08T18:11:49Z

I don't think we need to block the deploy over this. Removing the label.

aimane-chnaif · 2023-08-08T18:11:54Z

I don't think this is blocker, even not a bug. Just inconsistency issue.

aimane-chnaif · 2023-08-08T18:21:35Z

Toggle popovers:

FAB
Composer +
EmojiPicker
AvatarWithImagePicker
BaseVideoChatButtonAndMenu

Non-toggle popovers:

ButtonWithDropdownMenu
AddPaymentMethodMenu
ThreeDotsMenu

ishpaul777 · 2023-08-08T18:24:22Z

are these intentional non toggle popovers or do we need to make them toggle popovers ?

aimane-chnaif · 2023-08-08T18:25:35Z

I tend to close this as not bug.
But if anyone disagrees and wanna make them consistent either toggle or non-toggle, please feel free to suggest.

dhanashree-sawant · 2023-08-08T18:29:25Z

Hi @aimane-chnaif, one of the effects of it is that we can write and send anything in background even when menu is open, it doesn't do that for any other modal, I think that should be worth fixing.

2023-08-09.00-00-08.mp4

ishpaul777 · 2023-08-08T18:30:58Z

~~IMO ThreeDotsMenu should be a toggle button, not sure about others (i am unaware of where each of them are used so dont have a opinion yet)~~
All of non-toggle popovers should toggle for the sake of consistency IMO

melvin-bot · 2023-08-08T19:02:32Z

📣 @msapple0338! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

melvin-bot · 2023-08-08T22:10:16Z

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

slafortune · 2023-08-09T20:06:16Z

@PauloGasparSv and @aimane-chnaif - do you think we should move forward with this or close

PauloGasparSv · 2023-08-11T17:21:01Z

Thks so much for all the help here @aimane-chnaif

@PauloGasparSv and @aimane-chnaif - do you think we should move forward with #24284 (comment) or close

I'm not sure. IMO we should go for consistency (but I also don't consider this a "Bug").

Would love to hear your opinion on this too @slafortune

If you agree then let's add the External label here and change these "Non-toggle popovers" so they close when we click again!

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

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

ruiyun43 · 2023-08-15T19:44:19Z

Hi. Glad meet you here
I am ruiyunhuang from USA.
I am Senior web and mobile app developer with 10 years of experience.
I have rich experience in react, react native, next.js, redux and hook.
I am also good at implement interactivity using react native.
https://github.com/SuperStar1012/Lilipad.
please check it.
this is my previous front end code with implement interactivity.

to solve this problem I need to use a onPress() function in react native.
then using flag that monitoring the open status of modal.
I can fix this issue with in one day.
please contact me.
I am always ready to solve your issue immediately.
Thanks.

melvin-bot · 2023-08-15T19:51:55Z

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

ruiyun43 · 2023-08-15T20:00:19Z

and also we have to use the TouchableWithoutFeedBack component.
That's all.
Thanks.

melvin-bot · 2023-08-15T20:12:44Z

📣 @ruiyun43! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

ruiyun43 · 2023-08-15T20:46:34Z

I got it. but I think that explain about the solution to solve this problem is not enough with speaking. I want to explain about the solution on call.
btw I don't want get paid from upwork.
so if you can only pay to me through upwork, I can't work with you.

ishpaul777 · 2023-08-15T21:00:02Z

Hi @ruiyun43, welcome to the community, this issue is assigned to me already. Please go through the guidelines,
View all open jobs on GitHub

ruiyun43 · 2023-08-15T21:27:42Z

Hmm.
got it.

ishpaul777 · 2023-08-16T13:07:51Z

@aimane-chnaif, how can i test ButtonWithDropdownMenu? (where is it used and how can i see the usage)?
also what should be done to test usage of AddPaymentMethodMenu in BaseKYCWall?

aimane-chnaif · 2023-08-16T13:12:40Z

@aimane-chnaif, how can i test ButtonWithDropdownMenu? (where is it used and how can i see the usage)? also what should be done to test usage of AddPaymentMethodMenu in BaseKYCWall?

Both account A and B should have policyExpenseChat beta permission
From A, create workspace and invite B
From B, request money in A's workspace
From A, find pay button in expense request

ishpaul777 · 2023-08-16T13:28:50Z

i tried overriding beta permission but as soon as I click on workspace chat it disappears, how can i get the beta permissions?

aimane-chnaif · 2023-08-16T13:34:31Z

i tried overriding beta permission but as soon as I click on workspace chat it disappears, how can i get the beta permissions?

Please ask permission on slack providing your emails to be added to beta. @PauloGasparSv might help as assigned engineer here

ishpaul777 · 2023-08-16T13:38:36Z

thanks @aimane-chnaif, just one question if i ask for permission for email@gmail.com. all test accounts (eg."email+abcd@gmail.com") got the permission right? or should i ask for all the test email accounts?

aimane-chnaif · 2023-08-16T14:09:19Z

thanks @aimane-chnaif, just one question if i ask for permission for email@gmail.com. all test accounts (eg."email+abcd@gmail.com") got the permission right? or should i ask for all the test email accounts?

no, only required email

ishpaul777 · 2023-08-16T14:12:37Z

okay thanks, and what are testing steps for AddPaymentMethodMenu in BaseKYCWall?

PauloGasparSv · 2023-08-16T14:19:33Z

Hey @ishpaul777 I found the slack post where you requested access.

Sorry for not checking this myself but do you know what exact Betas you need?
I think we should probably add you to the specific Betas you need instead of enabling all : )

thanks @aimane-chnaif, just one question if i ask for permission for email@gmail.com. all test accounts (eg."email+abcd@gmail.com") got the permission right? or should i ask for all the test email accounts?

Aimane already answered this but yeah, I'm pretty sure it doesn't work like that and that the betas will only be applied to the account you specifically ask them for!

ishpaul777 · 2023-08-16T14:27:10Z

Thanks for your response @PauloGasparSv, can you add me to the betas that are required for testing of AddPaymentMethodMenu in BaseKYCWall and ButtonWithDropdownMenu.

email - ishpaul207@gmail.com, ishpaul207+web@gmail.com, ishpaul207+native@gmail.com

PauloGasparSv · 2023-08-16T14:36:38Z

Thanks for your response @PauloGasparSv, can you add me to the betas that are required for testing of AddPaymentMethodMenu in BaseKYCWall and ButtonWithDropdownMenu.

email - ishpaul207@gmail.com, ishpaul207+web@gmail.com, ishpaul207+native@gmail.com

Sure thing @ishpaul777!

As mentioned on slack I have added your 3 accounts to the policyExpenseChat Beta!

Please note that Betas will usually take up to an hour to have an effect. So if this doesn't work let's wait a bit before checking if you need another Beta or something : D

ishpaul777 · 2023-08-16T14:40:20Z

I greatly appreciate your assistance, @PauloGasparSv. Could you kindly provide a response to #24284 (comment)

ishpaul777 · 2023-08-16T16:35:52Z

@aimane-chnaif I tried to override the condition here https://github.com/Expensify/App/blob/043b1eded5eef81d06611df2891b0d6c793b42dd/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js#L290C1-L291C1
for testing AddPaymentMethodMenu in BaseKYCWall

Notice a weired positioning of AddPaymentMethodMenu.
No changes made other than props.userWallet.currentBalance > -1

https://www.loom.com/share/bb08c53218f44163a24fb1a39d23fae8?sid=46a8cc00-00b9-4545-876f-559454fffac6

melvin-bot · 2023-08-18T18:08:57Z

🎯 ⚡️ Woah @aimane-chnaif / @ishpaul777, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

when @ishpaul777 got assigned: 2023-08-15 19:31:06 Z
when the PR got merged: 2023-08-18 18:08:56 UTC

On to the next one 🚀

slafortune · 2023-08-22T21:14:31Z

External issue reporter - @dhanashree-sawant - $250 - OFFER SENT
Contributor that fixed the issue - @ishpaul777, $1500
Contributor+ that helped on the issue and/or PR - @aimane-chnaif $1500
🎉 Speed bonus to be given

slafortune · 2023-08-28T14:43:36Z

Paid

izarutskaya added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Aug 8, 2023

melvin-bot bot assigned slafortune Aug 8, 2023

mvtglobally added the DeployBlockerCash This issue or pull request should block deployment label Aug 8, 2023

github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Aug 8, 2023

OSBotify mentioned this issue Aug 8, 2023

Deploy Checklist: New Expensify 2023-08-07 #24230

Closed

98 tasks

melvin-bot bot assigned PauloGasparSv Aug 8, 2023

melvin-bot bot added Daily KSv2 and removed Hourly KSv2 labels Aug 8, 2023

puneetlath removed the DeployBlockerCash This issue or pull request should block deployment label Aug 8, 2023

puneetlath mentioned this issue Aug 8, 2023

Web - Workspace - "More" tooltip is displayed when hovering over the three dots after clicking on them #24300

Closed

6 tasks

ishpaul777 mentioned this issue Aug 16, 2023

fix non-toggle popover to toggle #24645

Merged

67 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Aug 16, 2023

slafortune added Daily KSv2 and removed Weekly KSv2 labels Aug 22, 2023

slafortune closed this as completed Aug 28, 2023

[$1000] Web-Workspace-App does nothing on clicking on 3 dots when modal is open (modal closes for phone) #24284

[$1000] Web-Workspace-App does nothing on clicking on 3 dots when modal is open (modal closes for phone) #24284

Comments

izarutskaya commented Aug 8, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Aug 8, 2023

melvin-bot bot commented Aug 8, 2023

Bug0 Triage Checklist (Main S/O)

OSBotify commented Aug 8, 2023

melvin-bot bot commented Aug 8, 2023

ishpaul777 commented Aug 8, 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?

mkhutornyi commented Aug 8, 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?

puneetlath commented Aug 8, 2023

aimane-chnaif commented Aug 8, 2023

aimane-chnaif commented Aug 8, 2023 • edited Loading

ishpaul777 commented Aug 8, 2023

aimane-chnaif commented Aug 8, 2023

dhanashree-sawant commented Aug 8, 2023 • edited Loading

ishpaul777 commented Aug 8, 2023 • edited Loading

melvin-bot bot commented Aug 8, 2023

melvin-bot bot commented Aug 8, 2023

slafortune commented Aug 9, 2023

PauloGasparSv commented Aug 11, 2023

melvin-bot bot commented Aug 15, 2023

ruiyun43 commented Aug 15, 2023 • edited Loading

melvin-bot bot commented Aug 15, 2023

ruiyun43 commented Aug 15, 2023

melvin-bot bot commented Aug 15, 2023

ruiyun43 commented Aug 15, 2023

ishpaul777 commented Aug 15, 2023 • edited Loading

ruiyun43 commented Aug 15, 2023

ishpaul777 commented Aug 16, 2023

aimane-chnaif commented Aug 16, 2023

ishpaul777 commented Aug 16, 2023

aimane-chnaif commented Aug 16, 2023 • edited Loading

ishpaul777 commented Aug 16, 2023

aimane-chnaif commented Aug 16, 2023

ishpaul777 commented Aug 16, 2023

PauloGasparSv commented Aug 16, 2023 • edited Loading

ishpaul777 commented Aug 16, 2023 • edited Loading

PauloGasparSv commented Aug 16, 2023

ishpaul777 commented Aug 16, 2023

ishpaul777 commented Aug 16, 2023

melvin-bot bot commented Aug 18, 2023

slafortune commented Aug 22, 2023

slafortune commented Aug 28, 2023

izarutskaya commented Aug 8, 2023 •

edited by melvin-bot bot

Loading

ishpaul777 commented Aug 8, 2023 •

edited

Loading

aimane-chnaif commented Aug 8, 2023 •

edited

Loading

dhanashree-sawant commented Aug 8, 2023 •

edited

Loading

ishpaul777 commented Aug 8, 2023 •

edited

Loading

ruiyun43 commented Aug 15, 2023 •

edited

Loading

ishpaul777 commented Aug 15, 2023 •

edited

Loading

aimane-chnaif commented Aug 16, 2023 •

edited

Loading

PauloGasparSv commented Aug 16, 2023 •

edited

Loading

ishpaul777 commented Aug 16, 2023 •

edited

Loading