[ResourceItem] Fix the property "url" does not prevent redirections while savebar activated

[christellealexia]

[ResourceItem] Fix navigation when SaveBar is active

WHY are these changes introduced?

Fixes #13528

While the SaveBar is active (some modifications are not saved), a click on the ResourceItem component with the url property set correctly checks for the savebar status (the savebar vibrates) but does not prevent the redirection. The component was calling anchor.click() which immediately triggered navigation before the async savebar confirmation could complete.

WHAT is this pull request doing?

This PR modifies the ResourceItem component's click handling to properly respect SaveBar state:

Before:

• ResourceItem with url would navigate immediately on click
• SaveBar would detect the navigation attempt (causing vibration) but couldn't prevent it
• Users would lose unsaved changes without confirmation

After:

• ResourceItem prevents default navigation behavior with event.preventDefault()
• Checks for active SaveBar via shopify.saveBar.leaveConfirmation() before navigating
• Only navigates if user confirms they want to leave unsaved changes
• Navigation is cancelled if user chooses to stay

Key changes:

1. Added event.preventDefault() in handleClick method to stop immediate navigation
2. Created handleNavigationWithSaveBarCheck() method to handle async SaveBar confirmation
3. Manual navigation with window.location.href only occurs after confirmation
4. Graceful error handling when user cancels the leave confirmation

This ensures consistent behavior with the documented workaround of using onClick with manual shopify.saveBar.leaveConfirmation() calls, but built directly into the component.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Testing instructions:

1. Create a Shopify app with a ResourceList containing ResourceItems with url properties
2. Activate the SaveBar with shopify.saveBar.show('test-savebar')
3. Click on a ResourceItem - should show leave confirmation dialog
4. Test both "Stay" and "Leave" options work correctly
5. Verify normal navigation still works when SaveBar is not active

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[christellealexia]

I have signed the CLA!

[iAmNsengi]

Looks good.

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[shopify-shipitnext]

🔎 View this PR in Shipit Next.

ℹ️ Expand to learn how to deploy and handle emergencies using Shipit Next

Overview

Shipit Next will merge your code on your behalf because this repository uses Shipit Next and its merge queue.

To ship this PR, you can either:

• Comment /shipit to enqueue this PR for merging.
• Go to this PR in Shipit Next and click on the "Ship It" button in the top-right corner.

Comment Commands

• /shipit: Enqueue this PR into the merge queue where it will eventually be merged and deployed.
• /cancel: Eject this PR from the merge queue and rebuild PRs that were enqueued after this PR.
• /shipit --jump-queue: Enqueue this PR at the top of the merge queue where it will be included in the next deploy. Use this for non-emergency situations.
  - Emergency handling procedure for this command can be found here.
• /shipit --emergency: Merge this PR directly into main and deploy to all environments once all require_for_emergency CI checks pass. Please be aware that changes deployed with this command will not be automatically rolled back.
  • Emergency handling procedure for this command can be found here.

Commands exclusive to Deploy Before Merge

• /cancel --emergency: Eject this PR from the merge and rollback any deployments containing this PR.

---

Documentation

• ℹ️ You can read how the merge queue works in Vault here.
• ⚠️ Emergency handling documentation in the Vault describes how to handle emergencies, e.g. failed canaries, broken code in production, etc.

Questions or feedback?

• Non-urgent questions can be submitted in our Discourse.
• Feedback can be submitted in our frustrations Google form.
• If you have feature requests, you may add them or vote for them in our GitHub repository.