Shopify / Shopify/shopify_app

Internal Polaris links are always opening new tab with wrong URL

Open
#1,916 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
1.9k
Forks
739
Avg merge
21h 2m
Merged PRs (30d)
1

Description

Issue summary

Before opening this issue, I have:

  • [x ] Upgraded to the latest version of the package
    • shopify_app version: 22.4.0
    • Ruby version: 3.3.1
    • Operating system: Mac OS X Sonoma 14.6.1
  • [x ] Set log_level: :debug in my configuration, if applicable
  • [x ] Found a reliable way to reproduce the problem that indicates it's a problem with the package
  • [x ] Looked for similar issues in this repository
  • [x ] Checked that this isn't an issue with a Shopify API

Using Shopify App with app-bridge v.4, any relative links from Polaris components (Link, Button, etc) are opening in a new tab, and not using the proper shopify admin store URL.

Using the boilerplate Ruby shopify app from the app template (https://github.com/Shopify/shopify-app-template-ruby), I create a Polaris link like this: <Link url="/pagename">Click Me</Link> and then click the link.

Expected behavior

Clicking the polaris Link element above should change browser URL to: https://admin.shopify.com/store/mystore/apps/my-app/pagename (not opening new tab)

Actual behavior

Clicking the link opens a new tab, with URL: https://<cloudflare-tunnel-host>/pagename.

This URL is not using the shopify store URL at all -- it is just using the underlying Rails host name. It seems to be totally bypassing the React router.

This worked fine with App Bridge V3 --- since in the PolarisProvider.jsx class, it was using the AppBridge navigate() method. Now with AppBridge v4, that same class is now calling window.open(url) which ends up opening a new tab.

Steps to reproduce the problem

  1. Create a new Shopify App (ruby) using the Shopify App Template for Ruby
  2. Add a Polaris Link element to an internal app page (e.g. /pagename)
  3. Click the link in the app UI

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the PolarisProvider.jsx class in the Ruby Shopify App Template and trace how Polaris Link and Button URLs are handled with App Bridge v4. Reproduce the issue using an internal Link such as /pagename, then compare the behavior with App Bridge v3. Done means internal links navigate to the Shopify admin app URL in the current tab rather than opening the underlying Rails host in a new tab.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, ruby
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.