Stats: Add list quick action to view generated URL on UTM modal

[dhasilva]

Related to https://github.com/Automattic/red-team/issues/263 Closes https://github.com/Automattic/red-team/issues/263

Proposed Changes

• Adds a quick action to open the UTM URL modal with pre-filled data so the user can copy the generated URL again or modify it as necessary
• Modified the UTM modal to allow initial data

Why are these changes being made?

• UX improvements

Testing Instructions

• Go to the UTM card with some visits data
• If you don't have any, generate a UTM URL with the modal tool, visit it, wait around 5 minutes and refresh
• Click on a UTM data combination to open the top posts list
• Check that on the post entry there is a new quick action to view it in the URL builder:

• Click it and check that the available data is pre-loaded on the modal (in this case, only source and medium):

• Change the UTM data filter to another combination, like "Campaign / Source / Medium" or just "Medium" and click on the action link again
• Check that only the selected data is pre-loaded

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-aUh-p2)?

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-e8e8e87a071ac9aab3cf41de5ee6ced8b7206bb8

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-e8e8e87a071ac9aab3cf41de5ee6ced8b7206bb8&env=a8c-for-agencies

[matticbot]

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

Sections (~826 bytes added 📈 [gzipped])

``` name parsed_size gzip_size stats +1935 B (+0.2%) +196 B (+0.1%) woocommerce-installation +128 B (+0.0%) +63 B (+0.1%) woocommerce +128 B (+0.0%) +63 B (+0.1%) themes +128 B (+0.0%) +63 B (+0.0%) theme +128 B (+0.0%) +63 B (+0.0%) subscribers +128 B (+0.0%) +70 B (+0.0%) staging-site +128 B (+0.0%) +56 B (+0.0%) sites-dashboard +128 B (+0.0%) +56 B (+0.0%) site-tools +128 B (+0.0%) +56 B (+0.0%) site-settings +128 B (+0.0%) +56 B (+0.0%) site-purchases +128 B (+0.0%) +63 B (+0.0%) site-performance +128 B (+0.0%) +56 B (+0.0%) site-monitoring +128 B (+0.0%) +56 B (+0.0%) site-marketing +128 B (+0.0%) +56 B (+0.0%) site-logs +128 B (+0.0%) +56 B (+0.0%) settings-writing +128 B (+0.0%) +63 B (+0.0%) settings-security +128 B (+0.0%) +63 B (+0.0%) settings-reading +128 B (+0.0%) +63 B (+0.0%) settings-podcast +128 B (+0.0%) +63 B (+0.0%) settings-performance +128 B (+0.0%) +63 B (+0.0%) settings-newsletter +128 B (+0.0%) +63 B (+0.0%) settings-jetpack +128 B (+0.0%) +63 B (+0.0%) settings-discussion +128 B (+0.0%) +63 B (+0.0%) settings +128 B (+0.0%) +67 B (+0.0%) scan +128 B (+0.0%) +63 B (+0.0%) purchases +128 B (+0.0%) +63 B (+0.0%) promote-post-i2 +128 B (+0.0%) +63 B (+0.0%) preview +128 B (+0.0%) +63 B (+0.1%) posts-custom +128 B (+0.0%) +76 B (+0.0%) posts +128 B (+0.0%) +76 B (+0.0%) plugins +128 B (+0.0%) +56 B (+0.0%) plans +128 B (+0.0%) +59 B (+0.0%) people +128 B (+0.0%) +70 B (+0.0%) pages +128 B (+0.0%) +63 B (+0.0%) migrate +128 B (+0.0%) +63 B (+0.1%) media +128 B (+0.0%) +62 B (+0.0%) marketplace +128 B (+0.0%) +63 B (+0.0%) marketing +128 B (+0.0%) +63 B (+0.0%) jetpack-social +128 B (+0.0%) +63 B (+0.0%) jetpack-search +128 B (+0.0%) +63 B (+0.0%) jetpack-connect +128 B (+0.0%) +70 B (+0.0%) jetpack-cloud-settings +128 B (+0.0%) +63 B (+0.0%) jetpack-cloud-pricing +128 B (+0.0%) +63 B (+0.0%) jetpack-cloud-plugin-management +128 B (+0.0%) +56 B (+0.0%) jetpack-cloud-overview +128 B (+0.0%) +63 B (+0.0%) jetpack-cloud-features-comparison +128 B (+0.0%) +63 B (+0.0%) jetpack-cloud +128 B (+0.0%) +63 B (+0.1%) import +128 B (+0.0%) +70 B (+0.0%) hosting-features +128 B (+0.0%) +56 B (+0.0%) hosting +128 B (+0.0%) +56 B (+0.0%) home +128 B (+0.0%) +59 B (+0.0%) gutenberg-editor +128 B (+0.0%) +63 B (+0.0%) google-my-business +128 B (+0.0%) +63 B (+0.0%) github-deployments +128 B (+0.0%) +56 B (+0.0%) export +128 B (+0.0%) +63 B (+0.1%) email +128 B (+0.0%) +70 B (+0.0%) earn +128 B (+0.0%) +63 B (+0.0%) domains +128 B (+0.0%) +70 B (+0.0%) customize +128 B (+0.0%) +63 B (+0.1%) concierge +128 B (+0.0%) +63 B (+0.0%) comments +128 B (+0.0%) +63 B (+0.0%) checkout +128 B (+0.0%) +57 B (+0.0%) backup +128 B (+0.0%) +61 B (+0.0%) add-ons +128 B (+0.0%) +63 B (+0.1%) activity +128 B (+0.0%) +63 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.

[dhasilva]

So I created a new one and tried again. Still, neither pre-fill the campaign field.

Hey there, Anna :wave:

Did you select "Campaign / Source / Medium"? By default it is only "Source / Medium", so we don't have the value for the campaign there.

I tried again here and this is what I got:

In this case, campaign is not there as it is not selected in the filter, that is expected behavior.

In this case we have the value for the campaign ("promotion", I should have used another value as that is the same one as the placeholder :sweat_smile:), so it is added to the modal.

[dhasilva]

That kinda confused me sometimes, @kangzj. "Should I call it URL builder as it builds a URL? UTM builder as that is the name of the modal? Or UTM URL builder to be more specific? :thinking:"

It is a good idea to standardize it, yes.

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[annacmc]

@dhasilva you're totally right, that's exactly what was happening. It makes sense why, but is also confusing I think from a user perspective initially.

Idea: maybe when parsing a link on the UTM form, do not show inputs/fields that are not being used to group the results?

@CGastrell I think this is a great idea and we should consider something like this.