[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.