Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/9889 Refactor RRM Setup CTA Banner #9938

Merged
merged 64 commits into from
Jan 10, 2025

Conversation

jimmymadon
Copy link
Collaborator

@jimmymadon jimmymadon commented Dec 23, 2024

Summary

Addresses issue:

Relevant technical choices

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.
  • I have added a QA Brief on the issue linked above.
  • 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

  • Run the code.
  • Ensure the acceptance criteria are satisfied.
  • Reassess the implementation with the IB.
  • Ensure no unrelated changes are included.
  • Ensure CI checks pass.
  • Check Storybook where applicable.
  • Ensure there is a QA Brief.
  • Ensure there are no unexpected significant changes to file sizes.

Merge Reviewer Checklist

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

Copy link

github-actions bot commented Dec 23, 2024

Build files for c2172ee have been deleted.

Copy link

github-actions bot commented Dec 23, 2024

Size Change: -1.68 kB (-0.08%)

Total Size: 1.99 MB

Filename Size Change
./dist/assets/css/googlesitekit-admin-css-********************.min.css 62.2 kB +19 B (+0.03%)
./dist/assets/js/37-********************.js 893 B +1 B (+0.11%)
./dist/assets/js/googlesitekit-activation-********************.js 24 kB +36 B (+0.15%)
./dist/assets/js/googlesitekit-ad-blocking-recovery-********************.js 54.2 kB +2 B (0%)
./dist/assets/js/googlesitekit-adminbar-********************.js 34.8 kB +1 B (0%)
./dist/assets/js/googlesitekit-api-********************.js 10.1 kB -44 B (-0.44%)
./dist/assets/js/googlesitekit-components-gm2-********************.js 6.18 kB +2 B (+0.03%)
./dist/assets/js/googlesitekit-components-gm3-********************.js 10.1 kB -2 B (-0.02%)
./dist/assets/js/googlesitekit-data-********************.js 2.37 kB -1 B (-0.04%)
./dist/assets/js/googlesitekit-datastore-forms-********************.js 8.94 kB -27 B (-0.3%)
./dist/assets/js/googlesitekit-datastore-location-********************.js 2.08 kB -2 B (-0.1%)
./dist/assets/js/googlesitekit-datastore-site-********************.js 20.3 kB -11 B (-0.05%)
./dist/assets/js/googlesitekit-datastore-ui-********************.js 10 kB -34 B (-0.34%)
./dist/assets/js/googlesitekit-datastore-user-********************.js 28.2 kB -42 B (-0.15%)
./dist/assets/js/googlesitekit-entity-dashboard-********************.js 82.6 kB +1.1 kB (+1.36%)
./dist/assets/js/googlesitekit-main-dashboard-********************.js 167 kB +1 kB (+0.6%)
./dist/assets/js/googlesitekit-metric-selection-********************.js 52 kB -81 B (-0.16%)
./dist/assets/js/googlesitekit-modules-********************.js 22.3 kB -57 B (-0.25%)
./dist/assets/js/googlesitekit-modules-ads-********************.js 35.8 kB -32 B (-0.09%)
./dist/assets/js/googlesitekit-modules-adsense-********************.js 119 kB +45 B (+0.04%)
./dist/assets/js/googlesitekit-modules-analytics-4-********************.js 191 kB -36 B (-0.02%)
./dist/assets/js/googlesitekit-modules-pagespeed-insights-********************.js 22.6 kB +10 B (+0.04%)
./dist/assets/js/googlesitekit-modules-reader-revenue-manager-********************.js 39.9 kB -3.35 kB (-7.76%)
./dist/assets/js/googlesitekit-modules-search-console-********************.js 69.1 kB +18 B (+0.03%)
./dist/assets/js/googlesitekit-modules-sign-in-with-google-********************.js 31.6 kB -13 B (-0.04%)
./dist/assets/js/googlesitekit-modules-tagmanager-********************.js 32.3 kB -53 B (-0.16%)
./dist/assets/js/googlesitekit-notifications-********************.js 37.9 kB +4 B (+0.01%)
./dist/assets/js/googlesitekit-polyfills-********************.js 377 B -1 B (-0.26%)
./dist/assets/js/googlesitekit-settings-********************.js 127 kB -13 B (-0.01%)
./dist/assets/js/googlesitekit-splash-********************.js 68.7 kB +27 B (+0.04%)
./dist/assets/js/googlesitekit-user-input-********************.js 43.9 kB -17 B (-0.04%)
./dist/assets/js/googlesitekit-vendor-********************.js 323 kB -5 B (0%)
./dist/assets/js/googlesitekit-widgets-********************.js 102 kB -73 B (-0.07%)
./dist/assets/js/googlesitekit-wp-dashboard-********************.js 63.2 kB -46 B (-0.07%)
./dist/assets/js/runtime-********************.js 1.4 kB -3 B (-0.21%)
ℹ️ 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.44 kB
./dist/assets/js/33-********************.js 2.76 kB
./dist/assets/js/34-********************.js 2.25 kB
./dist/assets/js/35-********************.js 3.64 kB
./dist/assets/js/36-********************.js 936 B
./dist/assets/js/38-********************.js 1.61 kB
./dist/assets/js/39-********************.js 1.57 kB
./dist/assets/js/40-********************.js 1.61 kB
./dist/assets/js/41-********************.js 1.59 kB
./dist/assets/js/42-********************.js 1.83 kB
./dist/assets/js/43-********************.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-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-reader-revenue-manager-block-editor-********************.js 477 B

compressed-size-action

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking pretty good @jimmymadon – I left a few comments according to what I see so far 👍

Comment on lines 53 to 57
import { CORE_NOTIFICATIONS } from '../../../../googlesitekit/notifications/datastore/constants';
import NotificationWithSVG from '../../../../googlesitekit/notifications/components/layout/NotificationWithSVG';
import Description from '../../../../googlesitekit/notifications/components/common/Description';
import LearnMoreLink from '../../../../googlesitekit/notifications/components/common/LearnMoreLink';
import ActionsCTALinkDismiss from '../../../../googlesitekit/notifications/components/common/ActionsCTALinkDismiss';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be imported from googlesitekit-notifications, no? We probably need to expose them but otherwise this will get duplicated in the various bundles.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is interesting. Perhaps I'll create a separate issue as this applies to all refactored notifications and will end up being a larger code change!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have added #9993 for this. Thanks!

const rrmConnected = await resolveSelect(
CORE_MODULES
).isModuleConnected( READER_REVENUE_MANAGER_MODULE_SLUG );
if ( isFeatureEnabled( 'rrmModule' ) ) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can just return early here rather than wrap everything since all of these notifications would not be registered, correct? If we did have any that should still be registered, we could add them above the return instead.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would keep this as is only to keep things consistent as this is the pattern we are (and have been) following for all notifications and widgets registration. The additional indentation and wrapper is clearer than the "order" (before/after the feature flag return) especially if the list gets biggers.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we may want to consider putting the notification definitions in a separate file(s) similar to how we handle the datastore (you could make the case to do this for widgets too, which we probably should). That way the module index should largely mirror its entrypoint and simply provide exports rather than defining all this inline.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be plugin-wide change again. I do sometimes like seeing the "requirements" for the module, its widgets and notifications all in one place. But if we think this is necessary, I can add this requirement to #9993 as an extra bit of refactoring/cleanup?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I wasn't suggesting we'd do it in this issue, but I do think it would be worth cleaning up the module indexes to be reduced to composition and exports only and organize the implementation into a more logical structure. This should be a separate issue from #9993, potentially multiple issues depending on the effort.

import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
import {
READER_REVENUE_MANAGER_MODULE_SLUG,
READER_REVENUE_MANAGER_SETUP_BANNER_DISMISSED_KEY,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aaemnnosttv

  1. Should I be creating a migration file to update the dismissed prompts key in the DB for users that may have already dismissed the banner? In the new code, the notification ID is used as the dismissal key.
  2. Or should we change the notification ID here to be the same as the original dismissal key - but this would be 'hacky' as the ID would have a funny name here. And the GA events will now be tracked to a different ID than the original ID used.
  3. Should we keep things as it is and have some of the users who have RRM enabled dismiss the banner again?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think keeping as-is is the best option here but if the RRM setup prompt is retryable, then I'd be a bit concerned if folks already dismissed it multiple times and now they'd need to dismiss it multiple times again. Is that the case? It looks like yes.

In that case, I think we can simply check for the presence of the old dismissal in the RRM notification's checkRequirements function. That way, everything else runs as usual but we still account for an existing dismissal.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It sounds like a good easy hack which we can remove if we do any migration for dismissed-items or prompts in the future.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't say it's a hack 😄

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @jimmymadon ! This is looking good, just a few things to address.

import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
import {
READER_REVENUE_MANAGER_MODULE_SLUG,
READER_REVENUE_MANAGER_SETUP_BANNER_DISMISSED_KEY,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think keeping as-is is the best option here but if the RRM setup prompt is retryable, then I'd be a bit concerned if folks already dismissed it multiple times and now they'd need to dismiss it multiple times again. Is that the case? It looks like yes.

In that case, I think we can simply check for the presence of the old dismissal in the RRM notification's checkRequirements function. That way, everything else runs as usual but we still account for an existing dismissal.

Comment on lines +113 to +117
// TODO Remove this hack
// We "incorrectly" pass true to the `skipHidingFromQueue` option when dismissing this banner.
// This is because we don't want the component removed from the DOM as we have to still render
// the `AdminMenuTooltip` in this component. This means that we have to rely on manually
// checking for the dismissal state here.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have an issue for this? We should address this sooner than later and then remove the skipHidingFromQueue option as it shouldn't be needed, correct?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, I've added #10003 to tackle this. Thanks.

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @jimmymadon – this looks great. I'm going to push a few little tweaks otherwise this is good to go 👍

@@ -81,10 +81,7 @@ export default function NotificationWithSVG( {
</Cell>
<Cell
alignBottom
className={ classNames(
'googlesitekit-setup-cta-banner__svg-wrapper',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like there are styles attached to this selector. Are we sure it's not needed?

I would actually keep the base class if we have a variant specific to the id as well.

Comment on lines +686 to 690
let isNotificationDismissalFinal;
beforeEach( () => {
( { isNotificationDismissed } =
( { isNotificationDismissalFinal } =
registry.select( CORE_NOTIFICATIONS ) );
} );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍 I think we should do this more, at least for the selector/action under test like you've done here. Generally, we should do more destructuring to avoid calling the store select or dispatch repeatedly as it's unnecessary and always makes the code get spread over many more lines.

import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
import {
READER_REVENUE_MANAGER_MODULE_SLUG,
READER_REVENUE_MANAGER_SETUP_BANNER_DISMISSED_KEY,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't say it's a hack 😄

@aaemnnosttv
Copy link
Collaborator

Known E2E instabilities causing failures. G2G!

@aaemnnosttv aaemnnosttv merged commit 414f6b5 into develop Jan 10, 2025
20 of 22 checks passed
@aaemnnosttv aaemnnosttv deleted the enhancement/9889-refactor-rrm-setup-cta-banner branch January 10, 2025 23:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants