WordAds Stats: fix broken links in Odyssey

[kangzj]

Proposed Changes

Restores clicking behaviours on the Ads page:

• Restore information icon clicking
• Bars clicking
• Tabs clicking

We should avoid use window.location object directly for Stats, as in Odyssey the paths are actually hashes. We should use context.path, context.query and context.pathname instead, which are injected by page.js.

Testing Instructions

• Verify Odyssey with Option 1 in PejTkB-3E-p2
• Enable WordAds - /wp-admin/admin.php?page=jetpack#/traffic?term=wordads
• Open /wp-admin/admin.php?page=stats&flags=stats%2Fads-page
• Ensure Ads page generally works
• Ensure the click actions for bars, tabs and information icon works
• Open live branch link
• Enusre Ads page work for WPCOM

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-55141

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-55141&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~32 bytes removed 📉 [gzipped])

name   parsed_size           gzip_size
stats        -34 B  (-0.0%)      -32 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[wilmersondasilva]

I tried to test this one, but unfortunately, I couldn't make the Ads page works properly. The code looks fine though!

[wilmersondasilva]

I was able to make it work now.

I tested both on Odyssey and on WPCOM and it's working as expected. 👍

[jsnmoon]

Clicking on the info icon in the Totals table redirects me to the traffic page, which isn't a desired behavior.

Also, the new highlight section of the ads page was missing (though that's unrelated to this PR).

[kangzj]

Hey @jsnmoon Thanks for the review 👍

it works okay for me. Could you please pull the new changes, try to rebuild Odyssey and try again - the totals section should be replaced by the highlights after the merge.

Thanks

[jsnmoon]

I rebuilt the assets using the latest checkout, and everything appears to work as expected 👍