Add promote posts button to stats entries, with feature flag

[j6ll]

Proposed Changes

Hi Team, this is my first calypso PR and part of a series to add entrypoints in calypso for a new post promotion widget. Which will allow wordpress.com users to pay for advertising and serve the posts as ads on various A8C products.

Info specifically on these tasks here (pbpazC-3cN-p2) and the wider project thread here (pbpazC-2Pd-p2)

The majority of this feature is done outside of WP.com as a standalone widget, here we only need to add buttons to Calypso to show the widget and to pass it the site & post id's.

Note: We will be iterating on a bunch of PRs to complete this feature, but to keep these smaller we will be merging one-by-one under a feature flag.

Here are our provided designs:

And here is the screenshot in my development environment:

Testing Instructions

• Enable the feature flag promote-posts either on startup or via url using the ?flags=promote-post query string on the following urls
• Visit the stats page for your favourite blog for example: http://calypso.localhost:3000/stats/day/something.wordpress.com
• In the posts and pages section, hover over a post and you should see a "speaker" icon like in the designs abover
  
• clicking the button should open the widget. However, this is not in production yet so without setting up your environment you can check the network tab and notice that it's trying to hit the script widget.js - this will repeatedly fail. In a working dev environment - it only ever loads the script once.
• Test the above Steps without the feature flag enabled, ensure widget.js is not loaded in the f12 -> network tab and that the speaker button does not appear on hover.

Without local instance of the widget running

With local instance of the widget running

Pre-merge Checklist

• 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 you sent any new strings for translation (PCYsg-1vr-p2) ASAP?

Related to #

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~354 bytes added 📈 [gzipped])

name   parsed_size           gzip_size
stats      +2001 B  (+0.3%)     +565 B  (+0.3%)
home        +169 B  (+0.0%)      +82 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.

[benzhu56]

Works great and code LG.
I happened to notice one thing, that a page would also show up in the list, however, it would have an id of 0. Not sure if it has an actual id and are we able to get the actual id.
E.g in following example, the top page has an id of 0, (I printed it out in console).

[j6ll]

I happened to notice one thing, that a page would also show up in the list, however, it would have an id of 0.

Thanks @benzhu56 spotted this too. My thoughts were that we should still send show the user the promote button - but send them to a blank widget (not pre-populated). Then we need the widget just to handle 0 or invalid post Id's properly - not show it as a validation error on the creative screen..

I created a follow on ticket for that here: (350-gh-tumblr/wordads-picard). The other part of this longer term would be the post picker in the widget - I think this is maybe being discussed but not ticketed yet.

[gravityrail]

This LGTM

[gravityrail]

Just a heads up that the home page post ID isn't always going to be 0 (you can switch any post with a post_type of page to be the home page too, and these will all have an ID)

Also there are other URLs, like taxonomy pages or the blog page, that also might not have IDs.

[gravityrail]

I have tested this and, while it's clearly part of a work-in-progress, it doesn't break anything and is required to unblock further work so I'm going to merge it.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7462764

Thank you @jamesgill3 for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.