Internal Polaris links are always opening new tab with wrong URL
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_appversion: 22.4.0- Ruby version: 3.3.1
- Operating system: Mac OS X Sonoma 14.6.1
- [x ] Set
log_level: :debugin 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
- If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support
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
- Create a new Shopify App (ruby) using the Shopify App Template for Ruby
- Add a Polaris
Linkelement to an internal app page (e.g./pagename) - Click the link in the app UI
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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