Add new badges to Audience Selection Panel

nfmohit commented 2 weeks ago

Summary

Addresses issue:

8170

Relevant technical choices

This PR adds new badges to audiences in the Audience Selection Panel.

Deviations from IB

Create a useEffect in this component which calls the setExpirableItemTimers action, only if the user has never seen New badge before, and the title is not either of the pre-defined audiences , with the following object:
{
 `audience-selection-panel-expirable-new-badge-${slug}`: WEEK_IN_SECONDS * 4
}

Instead of doing the above, this PR sets the expiry for all new badges at once in the AudienceItems level. This way, we reduce the number of HTTP requests used to make this happen to one.

Update assets/js/modules/analytics-4/datastore/audiences.js, once the configuredAudiences are successfully saved, dispatch an setExpirableItemTimers action for every configuredAudiences using the slug, and passing a value of 0, which will expire these items immediately.

A value of 0 is not accepted by the expirable-items infrastructure, so we're settings this to 1.

Test Coverage

Update Storybook to include cases with a new badge present for both the generic Selection Panel and the Audience Selection Panel.

In addition to the above, for better test coverage, we've also added coverage for the badge visibility in the Audience Selection Panel and the family of enable*AudienceGroup* actions.

PR Author Checklist

[ ] My code is tested and passes existing unit tests.
[ ] My code has an appropriate set of unit tests which all pass.
[ ] My code is backward-compatible with WordPress 5.2 and PHP 7.4.
[ ] My code follows the WordPress coding standards.
[ ] My code has proper inline documentation.
[x] I have added a QA Brief on the issue linked above.
[x] I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

Do not alter or remove anything below. The following sections will be managed by moderators only.

Code Reviewer Checklist

[x] Run the code.
[x] Ensure the acceptance criteria are satisfied.
[ ] Reassess the implementation with the IB.
[x] Ensure no unrelated changes are included.
[ ] Ensure CI checks pass.
[x] Check Storybook where applicable.
[x] Ensure there is a QA Brief.

Merge Reviewer Checklist

[x] Ensure the PR has the correct target branch.
[x] Double-check that the PR is okay to be merged.
[x] Ensure the corresponding issue has a ZenHub release assigned.
[x] Add a changelog message to the issue.

github-actions[bot] commented 2 days ago

Build files for 2f6c74292128f9b23adc0f7307a0b3a01a20a4c0 have been deleted.

github-actions[bot] commented 2 days ago

Size Change: +6.18 kB (+0.34%)

Total Size: 1.8 MB

Filename	Size	Change
`./dist/assets/css/googlesitekit-admin-css-********************.min.css`	57.5 kB	+13 B (+0.02%)
`./dist/assets/js/googlesitekit-activation-********************.js`	23.9 kB	+102 B (+0.43%)
`./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js`	72.2 kB	+854 B (+1.2%)
`./dist/assets/js/googlesitekit-adminbar-********************.js`	34.6 kB	+168 B (+0.49%)
`./dist/assets/js/googlesitekit-api-********************.js`	9.96 kB	-7 B (-0.07%)
`./dist/assets/js/googlesitekit-components-gm2-********************.js`	5.97 kB	+3 B (+0.05%)
`./dist/assets/js/googlesitekit-components-gm3-********************.js`	10.1 kB	-2 B (-0.02%)
`./dist/assets/js/googlesitekit-data-********************.js`	2.37 kB	+4 B (+0.17%)
`./dist/assets/js/googlesitekit-datastore-forms-********************.js`	8.95 kB	-6 B (-0.07%)
`./dist/assets/js/googlesitekit-datastore-location-********************.js`	2.08 kB	-1 B (-0.05%)
`./dist/assets/js/googlesitekit-datastore-site-********************.js`	20.4 kB	+59 B (+0.29%)
`./dist/assets/js/googlesitekit-datastore-user-********************.js`	26.3 kB	+194 B (+0.74%)
`./dist/assets/js/googlesitekit-entity-dashboard-********************.js`	82.8 kB	-180 B (-0.22%)
`./dist/assets/js/googlesitekit-main-dashboard-********************.js`	156 kB	+843 B (+0.54%)
`./dist/assets/js/googlesitekit-modules-********************.js`	22.1 kB	+14 B (+0.06%)
`./dist/assets/js/googlesitekit-modules-ads-********************.js`	32.7 kB	-64 B (-0.2%)
`./dist/assets/js/googlesitekit-modules-adsense-********************.js`	125 kB	-492 B (-0.39%)
`./dist/assets/js/googlesitekit-modules-analytics-4-********************.js`	170 kB	+1.71 kB (+1.02%)
`./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js`	22.5 kB	+35 B (+0.16%)
`./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js`	21.7 kB	+47 B (+0.22%)
`./dist/assets/js/googlesitekit-modules-search-console-********************.js`	58.8 kB	+209 B (+0.36%)
`./dist/assets/js/googlesitekit-modules-tagmanager-********************.js`	32.1 kB	+88 B (+0.28%)
`./dist/assets/js/googlesitekit-notifications-********************.js`	18.6 kB	+62 B (+0.33%)
`./dist/assets/js/googlesitekit-settings-********************.js`	82.4 kB	-565 B (-0.68%)
`./dist/assets/js/googlesitekit-splash-********************.js`	90.1 kB	+779 B (+0.87%)
`./dist/assets/js/googlesitekit-user-input-********************.js`	63.9 kB	+814 B (+1.29%)
`./dist/assets/js/googlesitekit-vendor-********************.js`	321 kB	+76 B (+0.02%)
`./dist/assets/js/googlesitekit-widgets-********************.js`	86.9 kB	+1.28 kB (+1.5%)
`./dist/assets/js/googlesitekit-wp-dashboard-********************.js`	61.9 kB	+136 B (+0.22%)
`./dist/assets/js/runtime-********************.js`	1.3 kB	+3 B (+0.23%)

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `./dist/assets/css/googlesitekit-adminbar-css-********************.min.css` | 11.8 kB | | `./dist/assets/css/googlesitekit-authorize-application-css-********************.min.css` | 846 B | | `./dist/assets/css/googlesitekit-wp-dashboard-css-********************.min.css` | 8.2 kB | | `./dist/assets/js/31-********************.js` | 2.76 kB | | `./dist/assets/js/32-********************.js` | 2.25 kB | | `./dist/assets/js/33-********************.js` | 3.64 kB | | `./dist/assets/js/34-********************.js` | 935 B | | `./dist/assets/js/35-********************.js` | 892 B | | `./dist/assets/js/36-********************.js` | 3.12 kB | | `./dist/assets/js/analytics-advanced-tracking-********************.js` | 901 B | | `./dist/assets/js/googlesitekit-consent-mode-********************.js` | 25.6 kB | | `./dist/assets/js/googlesitekit-datastore-ui-********************.js` | 9.91 kB | | `./dist/assets/js/googlesitekit-events-provider-contact-form-7-********************.js` | 646 B | | `./dist/assets/js/googlesitekit-events-provider-easy-digital-downloads-********************.js` | 624 B | | `./dist/assets/js/googlesitekit-events-provider-mailchimp-********************.js` | 630 B | | `./dist/assets/js/googlesitekit-events-provider-ninja-forms-********************.js` | 712 B | | `./dist/assets/js/googlesitekit-events-provider-optin-monster-********************.js` | 675 B | | `./dist/assets/js/googlesitekit-events-provider-popup-maker-********************.js` | 634 B | | `./dist/assets/js/googlesitekit-events-provider-woocommerce-********************.js` | 657 B | | `./dist/assets/js/googlesitekit-events-provider-wpforms-********************.js` | 633 B | | `./dist/assets/js/googlesitekit-i18n-********************.js` | 3.93 kB | | `./dist/assets/js/googlesitekit-polyfills-********************.js` | 377 B |

_{compressed-size-action}

nfmohit commented 1 day ago

Great work, @nfmohit. The changes look solid overall. I’ve added a few minor comments for your review.

In addition, could you update the QAB to include a scenario where the “New” badge appears after Site Kit audiences are archived in the Analytics console and then re-created through the Audience Creation Notice?

I've addressed the CR feedback, and have updated the QAB as requested. Thank you @hussain-t !

nfmohit commented 1 day ago

Thanks for addressing the feedback, @nfmohit. The With_New_badges VRT is failing and seems like missing reference images. Could you download the vrt-report and check it?

Thank you @hussain-t, addressed.

google / site-kit-wp