[Awaiting Payment][$1000] Chat - Google meet opens in new window instead of new tab

[lanitochka17]

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 any chat
2. Click call button in top-right
3. Click Google Meet

Expected Result:

It should start google meeting in same window but in new tab like Chrome

Actual Result:

Starts meeting in new window

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Safari
• MacOS / Desktop

Version Number: 1.3.50.0

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

Screen.Recording.2023-08-02.at.2.15.03.AM.1.mov

2023-08-07.11.00.55.mp4

Expensify/Expensify Issue URL:

Issue reported by: @DinalJivani

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690922869306029

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0129c8265c6b7e57ae
• Upwork Job ID: 1688984575738191872
• Last Price Increase: 2023-08-08
• Automatic offers:
• Nodebrute | Contributor | 26111248
• DinalJivani | Reporter | 26111250

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0129c8265c6b7e57ae

[melvin-bot]

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

[melvin-bot]

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

[garrettmknight]

Confirmed on Safari. Chrome opens a new tab so I think we'll want to update this for consistency.

[Nodebrute]

Proposal

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

Chat - Google meet opens in new window instead of new tab

What is the root cause of that problem?

It's safari default behaviour

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

We can use the same logic here that we are using while opening help page

App/src/pages/settings/InitialSettingsPage.js

Line 245 in c08d588

Link.openExternalLink(CONST.NEWHELP_URL);

App/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js

Line 51 in 2e9caea

Linking.openURL(props.googleMeetURL);

here
We can change it to
Link.openExternalLink(props.googleMeetURL);

We need to change this for zoom link too

What alternative solutions did you explore? (Optional)

[ares-dev05]

Proposal

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

It should start google meeting in same window but in new tab like Chrome

What is the root cause of that problem?

When you click the Google Meet or Zoom button in the menu, BaseVideoChatButtonAndMenu.js file is running Linking.openURL.
But in React Native, the Linking.openURL() method by default opens the URL in a new tab on web platforms (like React Native Web) and in a new browser window on mobile platforms. There is no built-in way to open a URL in the "same page or tab" using this method as it's designed to protect the user's experience and avoid unexpected navigation.

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

For web, if you're using React Native Web or any library that uses the web's built-in navigation API, you can use the the window. Open(url, '_self') method to navigate to a URL in the same tab.

if (Platform.OS === 'web') {
window.open(CONST.NEW_ZOOM_MEETING_URL, "_blank");
} else {
Linking.openURL(CONST.NEW_ZOOM_MEETING_URL);
}

What alternative solutions did you explore? (Optional)

[payal-lathidadiya]

Proposal

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

Chat - Google meet opens in new window instead of new tab

What is the root cause of that problem?

This seems due to default browser behavior in ios platform.

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

For header context menu's menuItemData onPress callback, we should change

Linking.openURL(CONST.NEW_ZOOM_MEETING_URL)

to

Link.openExternalLink(CONST.NEW_ZOOM_MEETING_URL)

Also apply the same change for Google meet menu item as well.

What alternative solutions did you explore? (Optional)

None

[jeet-dhandha]

Proposal

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

• In Safari Browser, GoogleMeet / Zoom links are not opening in New Tab.

What is the root cause of that problem?

• By default, Safari browser is opening the GoogleMeet / Zoom links in the new Window. This is the default behaviour of Safari browser.
• Currently user has to set a setting named "Open pages in tabs instead of windows" to "Always" instead of "Automatically", in Safari browser to open the GoogleMeet / Zoom links in the new Tab.

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

• We can update our code to open Link like below which uses window's open method to open the link in new tab.

if (Browser.getBrowser() === CONST.BROWSER.SAFARI) {
    window.open(props.googleMeetURL, '_blank');
} else {
    Linking.openURL(props.googleMeetURL);
}

What alternative solutions did you explore? (Optional)

• N/A

[Pluto0104]

Proposal

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

Linking.openURL(url) opens in new window instead of new tab

What is the root cause of that problem?

It's Safari's default behavior.

In the Linking component:

function openURL(url, target) {
  if (arguments.length === 1) {
    target = "_blank";
  }

  try {
    open(url, target);
    this._dispatchEvent("onOpen", url);
    return Promise.resolve();
  } catch (e) {
    return Promise.reject(e);
  }
}

function open(url, target) {
  if (canUseDOM) {
    var urlToOpen = new URL(url, window.location).toString();
    if (urlToOpen.indexOf("tel:") === 0) {
      window.location = urlToOpen;
    } else {
      window.open(urlToOpen, target, "noopener");
    }
  }
}

The problem is window.open(urlToOpen, target, "noopener");

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

We need to define a new openLinkOnNewTab function.
For example:

function openLinkOnNewTab(url) {
  if (Platform.OS === 'web' && Browser.getBrowser() === 'safari') {
    const open = window.open(url, '_blank');
    if (open == null) {
      alert('Turn off your pop-up blocker!');
    }
  } else {
    Linking.openURL(url);
  }
}

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @Pluto0104! 📣
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:

1. 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.
2. 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.
3. 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>

[Pluto0104]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0111689310c69ddae7

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[rk111]

Proposal

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

Google meet opens in new window instead of new tab in safari browser

What is the root cause of that problem?

Linking.openURL() in React Native does not control whether a link opens in a new tab or new window within a WebView. WebView behavior is determined by how the WebView component is implemented and configured in app.

Linking.openURL() in React Native, it opens the URL using the device's default browser or an external browser app. It does not directly manipulate the behavior of a WebView within your app.

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

Just use the below code to solve the issue in file ```
App/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js

import {View, Dimensions, Linking, Platform} from 'react-native'
{
            icon: GoogleMeetIcon,
            text: props.translate('videoChatButtonAndMenu.googleMeet'),
            onPress: () => {
                setIsVideoChatMenuActive(false);
                if (Platform.OS === 'web') {
                    window.open(props.googleMeetURL, '_blank'); // Open in a new tab/window on web
                } else {
                    Linking.openURL(props.googleMeetURL); // Open in the default browser on mobile
                }
            },
        },

Screen.Recording.2023-08-09.at.3.54.21.PM.mov

What alternative solutions did you explore? (Optional)
N/A

[rk111]

Check my Proposal

[grafaleg]

@lanitochka17 @garrettmknight

The behavior you're observing, where Google Meet opens in a new window instead of a new tab, is influenced by Safari's settings. In Safari, there's a preference that determines how links open, either in a new window or a new tab.

By default, Safari might be set to open links in a new window, especially when they're triggered programmatically, like in our app. This behavior can be modified in the Safari preferences.

1. Open Safari.
   2 Click on "Safari" in the top-left corner and select "Preferences" from the dropdown.
2. Go to the "Tabs" section.
3. Look for the option that says "Open pages in tabs instead of windows." Ensure it's set to "Automatically" or "Always."
4. Close the Preferences window and try the action in our app again.

By adjusting this setting, links should now open in new tabs instead of new windows. However, it's essential to note that individual user settings and extensions might override this behavior.

Grabacion.de.pantalla.2023-08-10.a.la.s.12.44.44.mov

[garrettmknight]

@grafaleg Fair point - I still think we want to set this to default to consistent behavior where possible, but that might be a good note to make in the reproduction steps or QA process.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[garrettmknight]

@sobitneupane can you take a look at these proposals when you get a chance?

[garrettmknight]

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:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
• [@sobitneupane] 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:
• [@sobitneupane] 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:
• [@sobitneupane] Determine if we should create a regression test for this bug.
• [@sobitneupane] 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.
• [@garrettmknight] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[garrettmknight]

@sobitneupane can you complete the checklist when you get a chance?

[melvin-bot]

@garrettmknight @sobitneupane @techievivek @Nodebrute this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

Current assignee @sobitneupane is eligible for the Internal assigner, not assigning anyone new.

[garrettmknight]

The bug is fixed, melv!

[sobitneupane]

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:

The issue reported here is default behavior of Safari and was probably present from the very beginning. Rather than a bug, it was an improvement on the app.

[sobitneupane]

Regression Test Proposal

1. Open a chat in Safari.
2. Click on the phone icon located in the header.
3. Choose either Google Meet or Zoom.
4. Ensure that the link opens in a new tab rather than a new window.

Do we agree 👍 or 👎

[sobitneupane]

Requested payment on newDot.

#24288 (comment)

[JmillsExpensify]

$1,500 approved for payment via NewDot based on BZ summary.

[JmillsExpensify]

Leaving open for regression test.

[techievivek]

Regression tests #24288 (comment) looks good to me, @garrettmknight can we please get this added to testRail. Thanks

[techievivek]

Gentle bump @garrettmknight for adding the regression test to testRail.

[garrettmknight]

Done!